Dashboard/components/layout/sidebar.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import Image from "next/image";
import {
  LayoutDashboard,
  Users,
  MessageSquare,
  CreditCard,
  Settings,
  Database,
  FileText,
  Shield,
  Bot,
  ChevronLeft,
  ChevronRight,
  BarChart3,
  Activity,
} from "lucide-react";

interface NavigationItem {
  name: string;
  href: string;
  icon: React.ElementType;
  badge?: string | null;
}

const navigation: NavigationItem[] = [
  {
    name: "Vue d'ensemble",
    href: "/",
    icon: LayoutDashboard,
    badge: null,
  },
  {
    name: "Analytics",
    href: "/analytics",
    icon: BarChart3,
    badge: "Nouveau",
  },
];

const dataNavigation: NavigationItem[] = [
  { name: "Utilisateurs", href: "/users", icon: Users, badge: null },
  {
    name: "Conversations",
    href: "/conversations",
    icon: MessageSquare,
    badge: null,
  },
  { name: "Messages", href: "/messages", icon: FileText, badge: null },
  {
    name: "Transactions",
    href: "/transactions",
    icon: CreditCard,
    badge: null,
  },
];

const systemNavigation: NavigationItem[] = [
  { name: "Agents", href: "/agents", icon: Bot, badge: null },
  { name: "Rôles", href: "/roles", icon: Shield, badge: null },
  { name: "Collections", href: "/collections", icon: Database, badge: null },
  { name: "Paramètres", href: "/settings", icon: Settings, badge: null },
];

export function Sidebar() {
  const [collapsed, setCollapsed] = useState(false);
  const pathname = usePathname();

  const NavSection = ({
    title,
    items,
    showTitle = true,
  }: {
    title: string;
    items: NavigationItem[];
    showTitle?: boolean;
  }) => (
    <div className="space-y-2">
      {!collapsed && showTitle && (
        <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
          {title}
        </h3>
      )}
      {items.map((item) => {
        const isActive = pathname === item.href;
        return (
          <Link key={item.name} href={item.href}>
            <Button
              variant={isActive ? "secondary" : "ghost"}
              className={cn(
                "w-full justify-start h-9 px-3",
                collapsed && "px-2 justify-center",
                isActive && "bg-secondary font-medium"
              )}
            >
              <item.icon className={cn("h-4 w-4", collapsed ? "" : "mr-3")} />
              {!collapsed && (
                <div className="flex items-center justify-between w-full">
                  <span>{item.name}</span>
                  {item.badge && (
                    <Badge variant="secondary" className="text-xs">
                      {item.badge}
                    </Badge>
                  )}
                </div>
              )}
            </Button>
          </Link>
        );
      })}
    </div>
  );

  return (
    <div
      className={cn(
        "flex flex-col h-screen bg-background border-r border-border transition-all duration-300 ease-in-out",
        collapsed ? "w-16" : "w-64"
      )}
    >
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-border">
        {!collapsed && (
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center">
              <Image
                src="/img/logo.png"
                alt="Cercle GPT Logo"
                width={32}
                height={32}
                className="rounded-lg"
              />
            </div>
            <div>
              <h1 className="text-sm font-semibold">Cercle GPT</h1>
              <p className="text-xs text-muted-foreground">Admin Dashboard</p>
            </div>
          </div>
        )}
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setCollapsed(!collapsed)}
          className="h-8 w-8"
        >
          {collapsed ? (
            <ChevronRight className="h-4 w-4" />
          ) : (
            <ChevronLeft className="h-4 w-4" />
          )}
        </Button>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-3 space-y-6 overflow-y-auto">
        <NavSection title="Dashboard" items={navigation} showTitle={false} />

        {!collapsed && <Separator />}

        <NavSection title="Données" items={dataNavigation} />

        {!collapsed && <Separator />}

        <NavSection title="Système" items={systemNavigation} />
      </nav>

      {/* Footer */}
      {!collapsed && (
        <div className="p-3 border-t border-border">
          <div className="flex items-center space-x-3 p-2 rounded-lg bg-muted/50">
            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
              <Activity className="h-4 w-4 text-primary" />
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs font-medium">Système en ligne</p>
              <p className="text-xs text-muted-foreground">Tout fonctionne</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}