import { NavLink } from "react-router-dom";
import {
  LayoutDashboard,
  Shield,
  Users,
  Settings,
  Bell,
  BookOpen,
  Plug,
  FlaskConical,
  ShieldAlert,
  TrendingUp,
  FileCheck,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";

const navItems = [
  { to: "/dashboard", label: "Vue d'ensemble", icon: LayoutDashboard, end: true },
  { to: "/dashboard/playground", label: "Playground IA", icon: FlaskConical },
  { to: "/dashboard/policies", label: "Politiques", icon: Shield },
  { to: "/dashboard/users", label: "Utilisateurs", icon: Users },
  { to: "/dashboard/providers", label: "Fournisseurs", icon: Plug },
  { to: "/dashboard/security", label: "Sécurité", icon: ShieldAlert },
  { to: "/dashboard/costs", label: "Coûts", icon: TrendingUp },
  { to: "/dashboard/alerts", label: "Alertes Budget", icon: Bell },
  { to: "/dashboard/logs", label: "Journaux", icon: BookOpen },
  { to: "/dashboard/compliance", label: "Conformité", icon: FileCheck },
];

export function Sidebar() {
  return (
    <aside className="hidden md:flex md:flex-col w-64 min-h-screen border-r bg-card shrink-0">
      {/* Logo */}
      <div className="flex items-center gap-2 px-6 py-5">
        <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
          <Shield className="h-4 w-4 text-primary-foreground" />
        </div>
        <div>
          <p className="font-bold text-sm leading-none">Veylant IA</p>
          <p className="text-xs text-muted-foreground leading-none mt-0.5">Governance Hub</p>
        </div>
      </div>

      <Separator />

      {/* Navigation */}
      <nav className="flex-1 px-3 py-4 space-y-1">
        {navItems.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            end={item.end}
            className={({ isActive }) =>
              cn(
                "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                isActive
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
              )
            }
          >
            <item.icon className="h-4 w-4 shrink-0" />
            {item.label}
          </NavLink>
        ))}
      </nav>

      <Separator />

      {/* Bottom nav */}
      <div className="px-3 py-4">
        <NavLink
          to="/settings"
          className={({ isActive }) =>
            cn(
              "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
              isActive
                ? "bg-primary text-primary-foreground"
                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
            )
          }
        >
          <Settings className="h-4 w-4 shrink-0" />
          Paramètres
        </NavLink>
      </div>
    </aside>
  );
}
