"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import {
  LayoutDashboard,
  Users,
  FolderOpen,
  Tag,
  TrendingUp,
  BookOpen,
  Settings,
  LogOut,
  Zap,
} from "lucide-react";

const NAV_ITEMS = [
  { href: "/admin",              label: "Dashboard",    icon: LayoutDashboard, exact: true },
  { href: "/admin/clients",      label: "Clienti",      icon: Users },
  { href: "/admin/leads",        label: "Lead",         icon: Zap },
  { href: "/admin/projects",     label: "Progetti",     icon: FolderOpen },
  { href: "/admin/offers",       label: "Offerte",      icon: Tag },
  { href: "/admin/forecast",     label: "Forecast",     icon: TrendingUp },
  { href: "/admin/catalog",      label: "Catalogo",     icon: BookOpen },
  { href: "/admin/impostazioni", label: "Impostazioni", icon: Settings },
];

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

  const isActive = (href: string, exact?: boolean) =>
    exact ? pathname === href : pathname === href || pathname.startsWith(href + "/");

  return (
    <aside className="w-56 shrink-0 min-h-screen bg-[#1A463C] flex flex-col">
      {/* Logo */}
      <div className="px-5 py-5 border-b border-white/10">
        <span className="font-bold text-white tracking-tight text-sm">iamcavalli</span>
      </div>

      {/* Nav links */}
      <nav className="flex-1 px-3 py-4 flex flex-col gap-0.5">
        {NAV_ITEMS.map(({ href, label, icon: Icon, exact }) => {
          const active = isActive(href, exact);
          return (
            <Link
              key={href}
              href={href}
              className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
                active
                  ? "bg-white/15 text-white font-medium"
                  : "text-white/65 hover:text-white hover:bg-white/10"
              }`}
            >
              <Icon size={16} strokeWidth={1.8} />
              {label}
            </Link>
          );
        })}
      </nav>

      {/* Logout */}
      <div className="px-3 py-4 border-t border-white/10">
        <button
          onClick={() => signOut({ callbackUrl: "/admin/login" })}
          className="flex items-center gap-3 px-3 py-2 w-full rounded-md text-sm text-white/65 hover:text-white hover:bg-white/10 transition-colors"
        >
          <LogOut size={16} strokeWidth={1.8} />
          Esci
        </button>
      </div>
    </aside>
  );
}