import { Activity, CalendarDays, CircleHelp, FileText, LayoutGrid, Users, X } from "lucide-react";
import { NavLink } from "react-router-dom";
import { AppLogo } from "./AppLogo";
import { cn } from "@/lib/utils";

interface DashboardSidebarProps { open: boolean; onClose: () => void; isTraveler: boolean; }

export function DashboardSidebar({ open, onClose, isTraveler }: DashboardSidebarProps) {
  const base = isTraveler ? "/voyageur" : "/dashboard";
  const items = isTraveler
    ? [
        { label: "Programme", to: `${base}/dashboard`, icon: CalendarDays },
        { label: "Documents", to: `${base}/documents`, icon: FileText },
      ]
    : [
        { label: "Accueil", to: base, icon: LayoutGrid, end: true },
        { label: "Voyages", to: `${base}/trips`, icon: CalendarDays },
        { label: "Clients", to: `${base}/clients`, icon: Users },
      ];

  return (
    <>
      {open && <button className="fixed inset-0 z-40 bg-[#14213D]/45 lg:hidden" onClick={onClose} aria-label="Fermer le menu" />}
      <aside className={cn("fixed inset-y-0 left-0 z-50 flex w-64 flex-col bg-[#14213D] px-4 py-6 text-white transition-transform lg:translate-x-0", open ? "translate-x-0" : "-translate-x-full")}>
        <div className="flex items-center justify-between px-2">
          <AppLogo dark />
          <button onClick={onClose} className="grid h-11 w-11 place-items-center rounded-xl hover:bg-white/10 lg:hidden" aria-label="Fermer le menu"><X /></button>
        </div>
        <nav className="mt-12 space-y-2" aria-label="Navigation principale">
          {items.map(({ label, to, icon: Icon, end }) => (
            <NavLink key={label} to={to} end={end} onClick={onClose} className={({ isActive }) => cn("flex min-h-12 items-center gap-3 rounded-xl px-4 text-sm font-semibold text-white/75 transition-colors hover:bg-white/10 hover:text-white", isActive && "bg-white/15 text-white shadow-sm")}>
              <Icon className="h-5 w-5" aria-hidden="true" />{label}
            </NavLink>
          ))}
        </nav>
        {!isTraveler && <nav className="mt-auto space-y-1 border-t border-white/10 pt-4" aria-label="Navigation secondaire">
          <NavLink to={`${base}/activity`} onClick={onClose} className="flex min-h-11 w-full items-center gap-3 rounded-lg px-4 text-sm text-white/70 hover:bg-white/10"><Activity className="h-4 w-4" />Activité</NavLink>
          <NavLink to={`${base}/help`} onClick={onClose} className="flex min-h-11 items-center gap-3 rounded-lg px-4 text-sm text-white/70 hover:bg-white/10"><CircleHelp className="h-4 w-4" />Aide</NavLink>
        </nav>}
        {isTraveler && <p className="mt-auto px-4 text-xs leading-5 text-white/45">Vos voyages, racontés avec soin.</p>}
      </aside>
    </>
  );
}