import React from 'react';
import { NavLink } from 'react-router-dom';
import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-react';
import { cn } from '@/utils/utils';
import { Card } from '@/components/ui/Card';
import { NEUMORPHISM } from '@/styles/Neumorphism';
import { useTheme } from '@/hooks/useTheme';
import { ThemeToggle } from '@ui/ThemeToggle';

interface SidebarProps {
  onLogout: () => void;
  className?: string;
}

// Liste de tes liens réels avec leurs icônes associées
const NAVIGATION_ITEMS = [
  { name: 'Trust Center', path: '/dashboard', icon: ShieldCheck },
  { name: 'Service Desk', path: '/support', icon: HelpCircle },
  { name: 'Coffre-fort', path: '/vault', icon: Lock },
  { name: 'Paramètres', path: '/account', icon: Settings },
];



export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
  const { isDark, toggleTheme } = useTheme();
  return (
    <Card className={cn("w-60 flex flex-col p-6 shrink-0", className)}>
      {/* 1. EN-TÊTE / LOGO */}
      <div className="flex items-center gap-4 mb-10 px-2">
        {/* Petit badge logo avec effet creusé */}
        <div className={cn(
          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b] transition-all duration-300 ease-in-out",
          "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]"
        )}>
          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500 transition-all duration-300 ease-in-out" />
        </div>
        <div>
          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none transition-all duration-300 ease-in-out">AEGIS</h1>
          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
        </div>
      </div>

      {/* 2. NAVIGATION PRINCIPALE (Basée sur l'URL) */}
      <nav className="flex flex-col gap-4 flex-1">
        {NAVIGATION_ITEMS.map((item) => {
          const Icon = item.icon;

          return (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) =>
                cn(
                  "w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ease-in-out cursor-pointer",
                  "bg-[#e8e8e8] dark:bg-[#1e293b]",
                  isActive
                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "text-blue-600! dark:text-blue-400! font-black")
                    : cn(NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
                )
              }
            >
              {({ isActive }) => (
                <>
                  <Icon
                    className={cn(
                      "w-5 h-5 transition-transform duration-300 ease-in-out shrink-0",
                      isActive ? "scale-110" : "scale-100"
                    )}
                    strokeWidth={isActive ? 2.5 : 2}
                  />
                  <span className="text-sm">{item.name}</span>
                </>
              )}
            </NavLink>
          );
        })}
      </nav>

      <ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />
      {/* 3. ZONE DE DÉCONNEXION */}
      <div className="pt-6 mt-6 border-t border-white/40 dark:border-slate-800/50">
        <button
          onClick={onLogout}
          className={cn(
            "w-full flex items-center justify-start gap-4 px-5 py-4 rounded-2xl cursor-pointer transition-all duration-300 ease-in-out",
            "bg-[#e8e8e8] dark:bg-[#1e293b]",
            NEUMORPHISM.lightShadow,
            NEUMORPHISM.darkShadow,
            "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
            "text-rose-500 dark:text-rose-400 font-bold"
          )}
        >
          <LogOut className="w-5 h-5" />
          <span className="text-sm font-bold">Déconnexion</span>
        </button>
      </div>
    </Card>
  );
};

export default Sidebar;