"use client";

import clsx from "clsx";
import { FolderKanban, LayoutDashboard, ListChecks, Settings2, Users } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const LIENS = [
  { href: "/", libelle: "Tableau de bord", court: "Accueil", icone: LayoutDashboard },
  { href: "/dossiers", libelle: "Dossiers", court: "Dossiers", icone: FolderKanban },
  { href: "/taches", libelle: "Tâches", court: "Tâches", icone: ListChecks },
  { href: "/contacts", libelle: "Contacts", court: "Contacts", icone: Users },
  { href: "/parametres/procedure", libelle: "Procédure", court: "Procédure", icone: Settings2 },
];

function actif(chemin: string, href: string) {
  return href === "/" ? chemin === "/" : chemin.startsWith(href);
}

export function MenuLateral() {
  const chemin = usePathname();
  return (
    <nav className="space-y-1">
      {LIENS.map(({ href, libelle, icone: Icone }) => (
        <Link
          key={href}
          href={href}
          className={clsx(
            "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium",
            actif(chemin, href) ? "bg-accent text-white" : "text-stone-300 hover:bg-white/10 hover:text-white",
          )}
        >
          <Icone className="h-4 w-4" aria-hidden />
          {libelle}
        </Link>
      ))}
    </nav>
  );
}

/** Barre d'onglets en bas d'écran sur téléphone. */
export function BarreMobile() {
  const chemin = usePathname();
  return (
    <nav className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-5 border-t border-bord bg-surface pb-[env(safe-area-inset-bottom)] lg:hidden">
      {LIENS.map(({ href, court, icone: Icone }) => (
        <Link
          key={href}
          href={href}
          className={clsx("flex flex-col items-center gap-0.5 py-2 text-[11px] font-medium", actif(chemin, href) ? "text-accent" : "text-encre-3")}
        >
          <Icone className="h-5 w-5" aria-hidden />
          {court}
        </Link>
      ))}
    </nav>
  );
}