"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Briefcase,
  Users,
  Calendar,
  BarChart3,
  Settings,
  ChevronLeft,
  ChevronRight,
  Mail,
  FileText,
  UserCheck,
  Building2,
  Network,
  Globe,
  Clock3,
} from "lucide-react";
import { useEffect, useState } from "react";

const navItems = [
  { href: "/", label: "Dashboard", icon: LayoutDashboard },
  { href: "/jobs", label: "Jobs", icon: Briefcase },
  { href: "/candidates", label: "Candidates", icon: Users },
  { href: "/onboarding", label: "Onboarding", icon: UserCheck },
  { href: "/interviews", label: "Interviews", icon: Calendar },
  { href: "/careers", label: "Corporate Careers", icon: Globe },
  { href: "/reports", label: "Reports", icon: BarChart3 },
  { href: "/library", label: "Template Library", icon: FileText },
  { href: "/email-templates", label: "Email Templates", icon: Mail },
  { href: "/settings", label: "Settings", icon: Settings },
];

export function Sidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);
  const [hrisEnabled, setHrisEnabled] = useState(false);
  const [orgChartEnabled, setOrgChartEnabled] = useState(false);
  const [schedulingEnabled, setSchedulingEnabled] = useState(false);

  useEffect(() => {
    async function checkModules() {
      try {
        const [hrisRes, schedulingRes] = await Promise.all([
          fetch("/api/settings/hris"),
          fetch("/api/settings/scheduling"),
        ]);
        const [hrisData, schedulingData] = await Promise.all([
          hrisRes.json(),
          schedulingRes.json(),
        ]);
        if (hrisData && typeof hrisData.enabled === "boolean") {
          setHrisEnabled(hrisData.enabled);
          setOrgChartEnabled(Boolean(hrisData.orgChart));
        }
        if (schedulingData && typeof schedulingData.enabled === "boolean") {
          setSchedulingEnabled(Boolean(schedulingData.enabled));
        }
      } catch (err) {
        console.error("Failed to fetch module settings for sidebar:", err);
      }
    }

    checkModules();

    function handleModuleUpdate() {
      checkModules();
    }

    window.addEventListener("hris_setting_updated", handleModuleUpdate);
    window.addEventListener("scheduling_setting_updated", handleModuleUpdate);
    return () => {
      window.removeEventListener("hris_setting_updated", handleModuleUpdate);
      window.removeEventListener("scheduling_setting_updated", handleModuleUpdate);
    };
  }, []);

  const visibleNavItems = navItems.flatMap((item) => {
    if (item.href === "/onboarding" && hrisEnabled) {
      const extras: { href: string; label: string; icon: any }[] = [
        { href: "/hris", label: "HRIS Module", icon: Building2 },
      ];
      if (orgChartEnabled) {
        extras.push({ href: "/hris/org-chart", label: "Org Chart", icon: Network });
      }
      if (schedulingEnabled) {
        extras.push({ href: "/scheduling", label: "Scheduling", icon: Clock3 });
      }
      return [item, ...extras];
    }
    return [item];
  });

  return (
    <aside
      className={`${
        collapsed ? "w-16" : "w-64"
      } bg-slate-900 text-white flex flex-col transition-all duration-300 shrink-0`}
    >
      <div className="flex items-center justify-between p-4 border-b border-slate-700">
        {!collapsed && (
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
              <Briefcase className="w-5 h-5 text-white" />
            </div>
            <span className="font-bold text-lg">H.R. Vista</span>
          </div>
        )}
        <button
          onClick={() => setCollapsed(!collapsed)}
          className="p-1 hover:bg-slate-700 rounded transition-colors"
        >
          {collapsed ? (
            <ChevronRight className="w-5 h-5" />
          ) : (
            <ChevronLeft className="w-5 h-5" />
          )}
        </button>
      </div>

      <nav className="flex-1 py-4 px-2">
        <ul className="space-y-1">
          {visibleNavItems.map((item) => {
            const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(`${item.href}/`));
            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
                    isActive
                      ? "bg-blue-600 text-white"
                      : "text-slate-300 hover:bg-slate-800 hover:text-white"
                  }`}
                >
                  <item.icon className="w-5 h-5 shrink-0" />
                  {!collapsed && <span>{item.label}</span>}
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>

      {!collapsed && (
        <div className="p-4 border-t border-slate-700">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 bg-blue-500 rounded-full flex items-center justify-center text-sm font-medium">
              SJ
            </div>
            <div>
              <p className="text-sm font-medium">Sarah Johnson</p>
              <p className="text-xs text-slate-400">Admin</p>
            </div>
          </div>
        </div>
      )}
    </aside>
  );
}