DentalManagementMH04/apps/Frontend/src/components/layout/sidebar.tsx

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,
} 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";

type NavChild = {
  name: string;
  path: string;
  icon: React.ReactNode;
};

type NavItem = {
  name: string;
  path: string;
  icon: React.ReactNode;
  adminOnly?: boolean;
  children?: NavChild[];
};

export function Sidebar() {
  const [location] = useLocation();
  const { state, openMobile, setOpenMobile } = useSidebar(); // "expanded" | "collapsed"
  const { user } = useAuth();
  const isAdmin = user?.username === "admin";

  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
    const s = new Set<string>();
    if (location.startsWith("/chart")) s.add("/chart");
    return s;
  });

  useEffect(() => {
    if (location.startsWith("/chart")) {
      setExpandedPaths((prev) => new Set([...prev, "/chart"]));
    }
  }, [location]);

  const togglePath = (path: string) => {
    setExpandedPaths((prev) => {
      const next = new Set(prev);
      if (next.has(path)) next.delete(path);
      else next.add(path);
      return next;
    });
  };

  const navItems: NavItem[] = 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: "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,
      },
    ],
    []
  );

  return (
    <div
      className={cn(
        "bg-white border-r border-gray-200 shadow-sm z-20",
        "overflow-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-auto md:flex-shrink-0",
        state === "collapsed" ? "md:w-0 overflow-hidden" : "md:w-64"
      )}
    >
      <div className="p-2">
        <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);

                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">
                        {item.children.map((child) => {
                          const isActive = location === child.path || location.startsWith(child.path + "/");
                          return (
                            <Link
                              to={child.path}
                              key={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>
                );
              }

              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}
                      {/* show label only after expand animation completes */}
                      <span className="whitespace-nowrap select-none">
                        {item.name}
                      </span>
                    </div>
                  </Link>
                </div>
              );
            })}
        </nav>
      </div>
    </div>
  );
}