"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  Receipt,
  LifeBuoy,
  Settings,
  CreditCard,
  LogOut,
  Layers,
  type LucideIcon,
} from "@/components/ui/icons";
import { cn } from "@/lib/utils";
import { Logo } from "@/components/brand/logo";

type RawItem = { href: string; label: string; icon: LucideIcon; end?: boolean };

const ADMIN_ITEMS: RawItem[] = [
  { href: "/atelier-novelia", label: "Tableau de bord", icon: LayoutDashboard, end: true },
  { href: "/atelier-novelia/clients", label: "Clients", icon: Users },
  { href: "/atelier-novelia/realisations", label: "Réalisations", icon: Layers },
  { href: "/atelier-novelia/factures", label: "Factures", icon: Receipt },
  { href: "/atelier-novelia/tickets", label: "Tickets", icon: LifeBuoy },
  { href: "/atelier-novelia/parametres", label: "Paramètres", icon: Settings },
];

const PORTAL_ITEMS: RawItem[] = [
  { href: "/portail", label: "Tableau de bord", icon: LayoutDashboard, end: true },
  { href: "/portail/abonnement", label: "Abonnement", icon: CreditCard },
  { href: "/portail/factures", label: "Factures", icon: Receipt },
  { href: "/portail/support", label: "Support", icon: LifeBuoy },
  { href: "/portail/parametres", label: "Paramètres", icon: Settings },
];

type Props = {
  variant: "admin" | "portail";
  contextLabel: string;
  contextValue: string;
};

export function Sidebar({ variant, contextLabel, contextValue }: Props) {
  const pathname = usePathname();
  const items = variant === "admin" ? ADMIN_ITEMS : PORTAL_ITEMS;

  return (
    <aside className="hidden md:flex fixed left-0 top-0 h-screen w-60 flex-col border-r border-border bg-surface-2 z-30">
      <div className="px-5 pt-5 pb-4">
        <Link href="/" className="flex items-center gap-2">
          <Logo size="sm" />
        </Link>
        <div className="mt-5 px-3 py-2.5 rounded-md border border-border bg-surface">
          <div className="text-micro font-medium uppercase tracking-wider text-text-faint">
            {contextLabel}
          </div>
          <div className="mt-0.5 text-xs font-medium text-text truncate">{contextValue}</div>
        </div>
      </div>

      <nav className="flex-1 overflow-y-auto px-3">
        <ul className="space-y-0.5">
          {items.map((item) => {
            const isActive = item.end ? pathname === item.href : pathname.startsWith(item.href);
            const Icon = item.icon;
            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={cn(
                    "group flex items-center gap-2.5 rounded-md px-3 py-2 text-sm transition-colors",
                    isActive
                      ? "bg-surface text-text border border-border"
                      : "text-text-muted hover:text-text hover:bg-surface/60 border border-transparent",
                  )}
                >
                  <Icon
                    className={cn(
                      "size-4 transition-colors shrink-0",
                      isActive ? "text-accent" : "text-text-dim group-hover:text-text-muted",
                    )}
                  />
                  <span className="font-medium">{item.label}</span>
                  {isActive && <span className="ml-auto size-1 rounded-full bg-accent" />}
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>

      <div className="border-t border-border p-3">
        <Link
          href="/"
          className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-text-muted hover:text-text hover:bg-surface/60 transition-colors"
        >
          <LogOut className="size-4 text-text-dim" />
          <span className="font-medium">Déconnexion</span>
        </Link>
      </div>
    </aside>
  );
}