Dashboard/components/layout/sidebar.tsx

"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { createClient } from "@/lib/supabase/client";
import Image from "next/image";
import {
  LayoutDashboard,
  Users,
  MessageSquare,
  CreditCard,
  Settings,
  Database,
  FileText,
  Shield,
  Bot,
  ChevronLeft,
  ChevronRight,
  LogOut,
  User,
  Mail,
  GraduationCap,
} from "lucide-react";
import type { User as SupabaseUser } from "@supabase/supabase-js";

const topLevelNavigation = [
  {
    name: "Analytics",
    href: "/",
    icon: LayoutDashboard,
  },
];

const navigationGroups = [
  {
    name: "Données",
    items: [
      {
        name: "Référents",
        href: "/referents",
        icon: GraduationCap,
      },
      {
        name: "Utilisateurs",
        href: "/users",
        icon: Users,
      },
      {
        name: "Conversations",
        href: "/conversations",
        icon: MessageSquare,
      },
      {
        name: "Messages",
        href: "/messages",
        icon: FileText,
      },
      {
        name: "Transactions",
        href: "/transactions",
        icon: CreditCard,
      },
    ],
  },
  {
    name: "Système",
    items: [
      {
        name: "Collections",
        href: "/collections",
        icon: Database,
      },
      {
        name: "Agents",
        href: "/agents",
        icon: Bot,
      },
      {
        name: "Rôles",
        href: "/roles",
        icon: Shield,
      },
      {
        name: "Paramètres",
        href: "/settings",
        icon: Settings,
      },
    ],
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const [collapsed, setCollapsed] = useState(false);
  const [user, setUser] = useState<SupabaseUser | null>(null);
  const [loading, setLoading] = useState(true);
  const supabase = createClient();

  useEffect(() => {
    const getUser = async () => {
      try {
        const {
          data: { user },
        } = await supabase.auth.getUser();
        setUser(user);
      } catch (error) {
        console.error(
          "Erreur lors de la récupération de l'utilisateur:",
          error
        );
        setUser(null);
      } finally {
        setLoading(false);
      }
    };

    getUser();

    // Écouter les changements d'authentification
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((event, session) => {
      setUser(session?.user || null);
      setLoading(false);
    });

    return () => subscription.unsubscribe();
  }, [supabase.auth]);

  const handleLogout = async () => {
    try {
      await supabase.auth.signOut();
      router.push("/login");
      router.refresh();
    } catch (error) {
      console.error("Erreur lors de la déconnexion:", error);
    }
  };

  // Ne pas afficher la sidebar si l'utilisateur n'est pas connecté ou en cours de chargement
  if (loading || !user) {
    return null;
  }

  return (
    <div
      className={cn(
        "flex flex-col h-screen bg-white border-r border-gray-200 transition-all duration-300",
        collapsed ? "w-16" : "w-64"
      )}
    >
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0">
        {!collapsed && (
          <div className="flex items-center space-x-3">
            <div className="relative w-8 h-8">
              <Image
                src="/img/logo.png"
                alt="Logo"
                fill
                className="object-contain"
              />
            </div>
            <div>
              <h1 className="text-lg font-semibold text-gray-900">
                Cercle GPT
              </h1>
              <p className="text-xs text-gray-500">Admin Dashboard</p>
            </div>
          </div>
        )}
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setCollapsed(!collapsed)}
          className="p-1.5 hover:bg-gray-100"
        >
          {collapsed ? (
            <ChevronRight className="h-4 w-4" />
          ) : (
            <ChevronLeft className="h-4 w-4" />
          )}
        </Button>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-4 space-y-6 overflow-y-auto">
        {/* Navigation de niveau supérieur */}
        <div className="space-y-1">
          {topLevelNavigation.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  "flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
                  isActive
                    ? "bg-gray-900 text-white"
                    : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                )}
              >
                <item.icon className="h-5 w-5 flex-shrink-0" />
                {!collapsed && <span>{item.name}</span>}
              </Link>
            );
          })}
        </div>

        {/* Séparateur */}
        <div className="border-t border-gray-200"></div>

        {/* Groupes de navigation */}
        {navigationGroups.map((group) => (
          <div key={group.name}>
            {/* Titre du groupe */}
            {!collapsed && (
              <h3 className="px-3 mb-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                {group.name}
              </h3>
            )}

            {/* Séparateur visuel quand collapsed */}
            {collapsed && (
              <div className="mb-2 mx-auto w-8 h-px bg-gray-300"></div>
            )}

            {/* Items du groupe */}
            <div className="space-y-1">
              {group.items.map((item) => {
                const isActive = pathname === item.href;
                return (
                  <Link
                    key={item.name}
                    href={item.href}
                    className={cn(
                      "flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
                      isActive
                        ? "bg-gray-900 text-white"
                        : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                    )}
                  >
                    <item.icon className="h-5 w-5 flex-shrink-0" />
                    {!collapsed && <span>{item.name}</span>}
                  </Link>
                );
              })}
            </div>
          </div>
        ))}
      </nav>

      {/* Section utilisateur connecté */}
      <div className="p-4 border-t border-gray-200 space-y-3 flex-shrink-0 bg-white">
        {/* Informations utilisateur */}
        <div
          className={cn(
            "flex items-center space-x-3 px-3 py-2 bg-gray-50 rounded-md",
            collapsed && "justify-center"
          )}
        >
          <div className="flex-shrink-0">
            <div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
              <User className="h-4 w-4 text-gray-600" />
            </div>
          </div>
          {!collapsed && (
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 truncate">
                Administrateur
              </p>
              <div className="flex items-center space-x-1">
                <Mail className="h-3 w-3 text-gray-400" />
                <p className="text-xs text-gray-500 truncate">{user.email}</p>
              </div>
            </div>
          )}
        </div>

        {/* Bouton de déconnexion */}
        <Button
          variant="outline"
          onClick={handleLogout}
          className={cn(
            "w-full flex items-center space-x-2 text-sm font-medium border-gray-200 hover:bg-gray-50",
            collapsed && "justify-center px-2"
          )}
        >
          <LogOut className="h-4 w-4" />
          {!collapsed && <span>Déconnexion</span>}
        </Button>
      </div>
    </div>
  );
}