"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import {
  LayoutDashboard,
  Monitor,
  Users,
  Package,
  LogOut,
  Factory,
  ChevronRight,
  Camera,
  BarChart3,
  IndianRupee,
  Briefcase,
  HardHat,
  Globe,
  Building2,
  Settings,
  FlaskConical,
  ShieldCheck,
  FileDown,
  CalendarClock,
  UserCheck,
  Wrench,
  Bell,
  Search,
  CreditCard,
  Sparkles,
  Wallet,
  Target,
  Upload,
  BookUser,
} from "lucide-react";
import { signOut } from "next-auth/react";
import { NotificationBell } from "@/components/notification-bell";
import { CommandSearch } from "@/components/command-search";

const navItems = [
  { href: "/admin", label: "Dashboard", icon: LayoutDashboard, exact: true },
  { href: "/admin/machines", label: "Machines", icon: Monitor },
  { href: "/admin/helpers", label: "Helpers", icon: Users },
  { href: "/admin/products", label: "Products & Molds", icon: Package },
  { href: "/admin/readings", label: "Readings", icon: Camera },
  { href: "/admin/segments", label: "Segments", icon: BarChart3 },
  { href: "/admin/payroll", label: "Payroll", icon: IndianRupee },
  { href: "/admin/advances", label: "Advances", icon: Wallet },
  { href: "/admin/jobs", label: "Jobs", icon: Briefcase },
  { href: "/admin/job-workers", label: "Job Workers", icon: HardHat },
  { href: "/admin/work-hub", label: "Work Hub", icon: Globe },
  { href: "/admin/capability", label: "Capability Profile", icon: Building2 },
  { href: "/admin/raw-materials", label: "Raw Materials", icon: FlaskConical },
  { href: "/admin/shifts", label: "Shifts", icon: CalendarClock },
  { href: "/admin/attendance", label: "Attendance", icon: UserCheck },
  { href: "/admin/maintenance", label: "Maintenance", icon: Wrench },
  { href: "/admin/notifications", label: "Notifications", icon: Bell },
  { href: "/admin/analytics", label: "Analytics", icon: BarChart3 },
  { href: "/admin/targets", label: "Targets", icon: Target },
  { href: "/admin/customers", label: "Customers", icon: BookUser },
  { href: "/admin/import", label: "Import", icon: Upload },
  { href: "/admin/reports", label: "Reports", icon: FileDown },
  { href: "/admin/audit-log", label: "Audit Log", icon: ShieldCheck },
  { href: "/admin/subscription", label: "Subscription", icon: CreditCard },
  { href: "/admin/onboarding", label: "Setup Wizard", icon: Sparkles },
  { href: "/admin/settings", label: "Settings", icon: Settings },
];

export function AdminNav({ factoryName }: { factoryName: string }) {
  const pathname = usePathname();

  return (
    <aside className="w-64 min-h-screen border-r bg-slate-950 flex flex-col">
      <div className="p-6 border-b border-slate-800">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
            <Factory className="h-4 w-4 text-white" />
          </div>
          <div className="min-w-0 flex-1">
            <p className="font-bold text-white text-sm truncate">{factoryName}</p>
            <p className="text-xs text-slate-500">Admin Portal</p>
          </div>
          <NotificationBell />
        </div>
      </div>

      {/* Search trigger */}
      <div className="px-4 pt-3 pb-1">
        <button
          onClick={() => {
            // Dispatch a synthetic Ctrl+K to open the command palette
            window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true, bubbles: true }));
          }}
          className="w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-slate-200 text-sm transition-colors"
        >
          <Search className="h-3.5 w-3.5 flex-shrink-0" />
          <span className="flex-1 text-left text-xs">Search…</span>
          <kbd className="hidden sm:inline-flex items-center gap-0.5 text-xs bg-slate-700 px-1.5 py-0.5 rounded font-mono text-slate-400">⌘K</kbd>
        </button>
      </div>

      <CommandSearch />

      <nav className="flex-1 p-4 space-y-1">
        {navItems.map(({ href, label, icon: Icon, exact }) => {
          const active = exact ? pathname === href : pathname.startsWith(href);
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all",
                active
                  ? "bg-blue-600 text-white shadow-sm"
                  : "text-slate-400 hover:bg-slate-800 hover:text-slate-100"
              )}
            >
              <Icon className="h-4 w-4 flex-shrink-0" />
              {label}
              {active && <ChevronRight className="h-3 w-3 ml-auto opacity-70" />}
            </Link>
          );
        })}
      </nav>

      <div className="p-4 border-t border-slate-800">
        <button
          onClick={() => signOut({ callbackUrl: "/login" })}
          className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-400 hover:bg-slate-800 hover:text-slate-100 w-full transition-all"
        >
          <LogOut className="h-4 w-4 flex-shrink-0" />
          Sign out
        </button>
      </div>
    </aside>
  );
}