"use client";

import type { LucideIcon } from "lucide-react";
import {
  CircleDollarSign,
  FileText,
  LayoutDashboard,
  LayoutGrid,
  MessageSquareWarning,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

import { cn } from "@/lib/utils";

type NavItem = {
  href: string;
  label: string;
  shortLabel?: string;
  icon: LucideIcon;
};

const NAV_ITEMS: readonly NavItem[] = [
  { href: "/user", label: "Tableau de bord", shortLabel: "Dashboard", icon: LayoutDashboard },
  { href: "/user/lots", label: "Lots", icon: LayoutGrid },
  { href: "/user/cotisations", label: "Cotisations", icon: CircleDollarSign },
  {
    href: "/user/reclamations",
    label: "Réclamations",
    shortLabel: "Réclam.",
    icon: MessageSquareWarning,
  },
  { href: "/user/documents", label: "Documents", icon: FileText },
];

function isNavActive(href: string, pathname: string | null): boolean {
  if (!pathname) return false;
  if (href === "/user") return pathname === "/user";
  if (pathname === href) return true;
  return pathname.startsWith(`${href}/`);
}

function DesktopNavLink({
  href,
  label,
  icon: Icon,
  active,
}: {
  href: string;
  label: string;
  icon: LucideIcon;
  active: boolean;
}) {
  return (
    <Link
      href={href}
      aria-current={active ? "page" : undefined}
      className={cn(
        "group relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all",
        active
          ? "bg-primary/10 text-primary shadow-sm"
          : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
      )}
    >
      <span
        aria-hidden
        className={cn(
          "absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full transition-all",
          active ? "bg-primary opacity-100" : "bg-transparent opacity-0"
        )}
      />
      <span
        className={cn(
          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors",
          active
            ? "bg-primary text-primary-foreground shadow-sm"
            : "bg-muted/50 text-muted-foreground group-hover:bg-muted group-hover:text-foreground"
        )}
      >
        <Icon className="h-4 w-4" aria-hidden />
      </span>
      <span className="min-w-0 truncate leading-snug">{label}</span>
    </Link>
  );
}

function MobileNavLink({
  href,
  label,
  icon: Icon,
  active,
}: {
  href: string;
  label: string;
  icon: LucideIcon;
  active: boolean;
}) {
  return (
    <Link
      href={href}
      aria-current={active ? "page" : undefined}
      className={cn(
        "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
        active
          ? "border-primary/60 bg-primary/10 text-primary"
          : "border-border/60 bg-card text-muted-foreground hover:border-border hover:text-foreground"
      )}
    >
      <Icon className="h-3.5 w-3.5" aria-hidden />
      <span className="max-w-[10rem] truncate">{label}</span>
    </Link>
  );
}

export function UserSidebar() {
  const pathname = usePathname();

  return (
    <>
      {/* Barre mobile : pills horizontales */}
      <div
        className="border-t border-border/50 md:hidden"
        role="navigation"
        aria-label="Menu utilisateur"
      >
        <div className="flex gap-2 overflow-x-auto px-3 py-2.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
          {NAV_ITEMS.map((item) => (
            <MobileNavLink
              key={item.href}
              href={item.href}
              label={item.shortLabel ?? item.label}
              icon={item.icon}
              active={isNavActive(item.href, pathname)}
            />
          ))}
        </div>
      </div>

      {/* Sidebar desktop */}
      <nav
        className="hidden flex-1 flex-col md:flex"
        aria-label="Menu utilisateur"
      >
        <div className="flex-1 px-3 py-4 md:px-4 md:py-5">
          <div className="space-y-1">
            {NAV_ITEMS.map((item) => (
              <DesktopNavLink
                key={item.href}
                href={item.href}
                label={item.label}
                icon={item.icon}
                active={isNavActive(item.href, pathname)}
              />
            ))}
          </div>
        </div>
      </nav>
    </>
  );
}