import { Link, useLocation } from "wouter";
import { LayoutDashboard, Users, Calendar, Settings, FileCheck, Shield, CreditCard, FolderOpen, Database, FileText, Cloud, Phone, Activity, ClipboardList, LayoutGrid, ListChecks, Pill, Microscope, ChevronDown, ChevronRight, UserCog, User, ShieldCheck, Stethoscope, Workflow, Bot, Clock, Building2, Timer, BookOpen, ShoppingCart, Search, KeyRound, } from "lucide-react";
import { cn } from "@/lib/utils";
import { useMemo, useState, useEffect } from "react";
import { useSidebar } from "@/components/ui/sidebar";
import { useAuth } from "@/hooks/use-auth";
export function Sidebar() {
    const [location] = useLocation();
    const { state, openMobile, setOpenMobile } = useSidebar();
    const { user } = useAuth();
    const isAdmin = user?.username === "admin";
    const [expandedPaths, setExpandedPaths] = useState(() => {
        const s = new Set();
        if (location.startsWith("/chart"))
            s.add("/chart");
        if (location.startsWith("/settings"))
            s.add("/settings");
        if (location.startsWith("/dental-shopping"))
            s.add("/dental-shopping");
        return s;
    });
    useEffect(() => {
        if (location.startsWith("/chart")) {
            setExpandedPaths((prev) => new Set([...prev, "/chart"]));
        }
        if (location.startsWith("/settings")) {
            setExpandedPaths((prev) => new Set([...prev, "/settings"]));
        }
        if (location.startsWith("/dental-shopping")) {
            setExpandedPaths((prev) => new Set([...prev, "/dental-shopping"]));
        }
    }, [location]);
    const togglePath = (path) => {
        setExpandedPaths((prev) => {
            const next = new Set(prev);
            if (next.has(path))
                next.delete(path);
            else
                next.add(path);
            return next;
        });
    };
    const navItems = useMemo(() => [
        {
            name: "Dashboard",
            path: "/dashboard",
            icon: <LayoutDashboard className="h-5 w-5 text-violet-500"/>,
        },
        {
            name: "Patient Connection",
            path: "/patient-connection",
            icon: <Phone className="h-5 w-5 text-green-500"/>,
        },
        {
            name: "Schedule",
            path: "/appointments",
            icon: <Calendar className="h-5 w-5 text-blue-500"/>,
        },
        {
            name: "Patient Management",
            path: "/patients",
            icon: <Users className="h-5 w-5 text-indigo-500"/>,
        },
        {
            name: "Chart",
            path: "/chart",
            icon: <ClipboardList className="h-5 w-5 text-teal-500"/>,
            children: [
                {
                    name: "Charting Map",
                    path: "/chart/charting",
                    icon: <LayoutGrid className="h-4 w-4 text-teal-400"/>,
                },
                {
                    name: "Treatment Plan",
                    path: "/chart/treatment-plan",
                    icon: <ListChecks className="h-4 w-4 text-orange-400"/>,
                },
                {
                    name: "Prescription",
                    path: "/chart/prescription",
                    icon: <Pill className="h-4 w-4 text-rose-400"/>,
                },
                {
                    name: "Lab Management",
                    path: "/chart/lab-management",
                    icon: <Microscope className="h-4 w-4 text-purple-400"/>,
                },
            ],
        },
        {
            name: "Insurance Eligibility",
            path: "/insurance-status",
            icon: <Shield className="h-5 w-5 text-emerald-500"/>,
        },
        {
            name: "Claims/PreAuth",
            path: "/claims",
            icon: <FileCheck className="h-5 w-5 text-orange-500"/>,
        },
        {
            name: "Accounts/Payments",
            path: "/payments",
            icon: <CreditCard className="h-5 w-5 text-amber-500"/>,
        },
        {
            name: "Documents",
            path: "/documents",
            icon: <FolderOpen className="h-5 w-5 text-yellow-500"/>,
        },
        {
            name: "Reports",
            path: "/reports",
            icon: <FileText className="h-5 w-5 text-red-400"/>,
        },
        {
            name: "Cloud storage",
            path: "/cloud-storage",
            icon: <Cloud className="h-5 w-5 text-sky-500"/>,
        },
        {
            name: "AI Input Agent",
            path: "/ai-input-agent",
            icon: <Bot className="h-5 w-5 text-violet-500"/>,
        },
        {
            name: "AI Dental Shopping",
            path: "/dental-shopping",
            icon: <ShoppingCart className="h-5 w-5 text-cyan-500"/>,
            children: [
                {
                    name: "Search / Tag",
                    path: "/dental-shopping/search-tag",
                    icon: <Search className="h-4 w-4 text-cyan-400"/>,
                },
                {
                    name: "Login Info",
                    path: "/dental-shopping/login-info",
                    icon: <KeyRound className="h-4 w-4 text-cyan-400"/>,
                },
            ],
        },
        {
            name: "Activation",
            path: "/activation",
            icon: <KeyRound className="h-5 w-5 text-amber-500"/>,
            adminOnly: true,
        },
        {
            name: "Database Management",
            path: "/database-management",
            icon: <Database className="h-5 w-5 text-slate-500"/>,
            adminOnly: true,
        },
        {
            name: "Job Monitor",
            path: "/job-monitor",
            icon: <Activity className="h-5 w-5 text-rose-500"/>,
            adminOnly: true,
        },
        {
            name: "Settings",
            path: "/settings",
            icon: <Settings className="h-5 w-5 text-gray-400"/>,
            adminOnly: true,
            children: [
                // ── General ──────────────────────────────────────────
                {
                    groupLabel: "General",
                    name: "Staff Management",
                    path: "/settings/staff",
                    icon: <Users className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "Manage Users",
                    path: "/settings/users",
                    icon: <UserCog className="h-4 w-4 text-gray-400"/>,
                    adminOnly: true,
                },
                {
                    name: "Account Settings",
                    path: "/settings/account",
                    icon: <User className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "Insurance Credentials",
                    path: "/settings/credentials",
                    icon: <ShieldCheck className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "NPI Providers",
                    path: "/settings/npi",
                    icon: <Stethoscope className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "Program Bridge",
                    path: "/settings/programs",
                    icon: <Workflow className="h-4 w-4 text-gray-400"/>,
                },
                // ── Advanced ─────────────────────────────────────────
                {
                    groupLabel: "Advanced",
                    name: "Office Hours",
                    path: "/settings/officehours",
                    icon: <Clock className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "Office Contact",
                    path: "/settings/officecontact",
                    icon: <Building2 className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "Insurance/Transportation Contact",
                    path: "/settings/insurancecontact",
                    icon: <BookOpen className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "Procedure Duration/Time Slot",
                    path: "/settings/proceduretimeslot",
                    icon: <Timer className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "Twilio Settings",
                    path: "/settings/twilio",
                    icon: <Phone className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "AI API Setting",
                    path: "/settings/ai",
                    icon: <Bot className="h-4 w-4 text-gray-400"/>,
                },
                {
                    name: "AI Chat Settings",
                    path: "/settings/aichat",
                    icon: <Bot className="h-4 w-4 text-gray-400"/>,
                },
            ],
        },
    ], []);
    return (<div className={cn("bg-white border-r border-gray-200 shadow-sm z-20", "overflow-x-hidden will-change-[width]", "transition-[width] duration-200 ease-in-out", openMobile
            ? "fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 block md:hidden"
            : "hidden md:block", "md:static md:top-auto md:h-full md:flex-shrink-0", state === "collapsed" ? "md:w-0 overflow-hidden" : "md:w-64")}>
      <div className="p-2 h-full overflow-y-auto">
        <nav role="navigation" aria-label="Main">
          {navItems
            .filter((item) => !item.adminOnly || isAdmin)
            .map((item) => {
            if (item.children) {
                const isParentActive = location.startsWith(item.path);
                const isExpanded = expandedPaths.has(item.path);
                const visibleChildren = item.children.filter((c) => !c.adminOnly || isAdmin);
                return (<div key={item.path}>
                    <div className={cn("flex items-center justify-between p-2 rounded-md pl-3 mb-1 transition-colors cursor-pointer select-none", isParentActive
                        ? "text-primary font-medium bg-primary/5"
                        : "text-gray-600 hover:bg-gray-100")} onClick={() => togglePath(item.path)}>
                      <div className="flex items-center space-x-3">
                        {item.icon}
                        <span className="whitespace-nowrap">{item.name}</span>
                      </div>
                      {isExpanded ? (<ChevronDown className="h-4 w-4 flex-shrink-0 opacity-60"/>) : (<ChevronRight className="h-4 w-4 flex-shrink-0 opacity-60"/>)}
                    </div>

                    {isExpanded && (<div className="ml-4 border-l border-gray-200 pl-2 mb-1">
                        {visibleChildren.map((child) => {
                            const isActive = location === child.path ||
                                location.startsWith(child.path + "/");
                            return (<div key={child.path}>
                              {child.groupLabel && (<p className="text-[10px] font-semibold uppercase tracking-wider text-gray-400 px-2 pt-2 pb-0.5">
                                  {child.groupLabel}
                                </p>)}
                              <Link to={child.path} onClick={() => setOpenMobile(false)}>
                                <div className={cn("flex items-center space-x-2 p-2 rounded-md pl-2 mb-0.5 transition-colors cursor-pointer", isActive
                                    ? "text-primary font-medium bg-primary/5 border-l-2 border-primary"
                                    : "text-gray-500 hover:bg-gray-100 hover:text-gray-700")}>
                                  {child.icon}
                                  <span className="whitespace-nowrap select-none text-sm">
                                    {child.name}
                                  </span>
                                </div>
                              </Link>
                            </div>);
                        })}
                      </div>)}
                  </div>);
            }
            return (<div key={item.path}>
                  <Link to={item.path} onClick={() => setOpenMobile(false)}>
                    <div className={cn("flex items-center space-x-3 p-2 rounded-md pl-3 mb-1 transition-colors cursor-pointer", location === item.path
                    ? "text-primary font-medium border-l-2 border-primary"
                    : "text-gray-600 hover:bg-gray-100")}>
                      {item.icon}
                      <span className="whitespace-nowrap select-none">
                        {item.name}
                      </span>
                    </div>
                  </Link>
                </div>);
        })}
        </nav>
      </div>
    </div>);
}