BMS/frontend/components/layout/sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Thermometer,
  Zap,
  Wind,
  Server,
  Bell,
  BarChart3,
  Settings,
  Database,
  ChevronLeft,
  ChevronRight,
  Map,
  Gauge,
  Fuel,
  Droplets,
  Flame,
  Leaf,
  Network,
  Wrench,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useState } from "react";

interface NavItem {
  href: string;
  label: string;
  icon: React.ElementType;
}

interface NavGroup {
  label: string;
  items: NavItem[];
}

const navGroups: NavGroup[] = [
  {
    label: "Overview",
    items: [
      { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
      { href: "/floor-map", label: "Floor Map",  icon: Map },
    ],
  },
  {
    label: "Infrastructure",
    items: [
      { href: "/power",         label: "Power",         icon: Zap },
      { href: "/generator",     label: "Generator",     icon: Fuel },
      { href: "/cooling",       label: "Cooling",       icon: Wind },
      { href: "/environmental", label: "Environmental", icon: Thermometer },
      { href: "/network",       label: "Network",       icon: Network },
    ],
  },
  {
    label: "Safety",
    items: [
      { href: "/leak", label: "Leak Detection", icon: Droplets },
      { href: "/fire", label: "Fire & Safety",  icon: Flame },
    ],
  },
  {
    label: "Operations",
    items: [
      { href: "/assets",   label: "Assets",   icon: Server },
      { href: "/alarms",   label: "Alarms",   icon: Bell },
      { href: "/capacity", label: "Capacity", icon: Gauge },
    ],
  },
  {
    label: "Management",
    items: [
      { href: "/reports",     label: "Reports",     icon: BarChart3 },
      { href: "/energy",      label: "Energy & CO₂", icon: Leaf },
      { href: "/maintenance", label: "Maintenance", icon: Wrench },
    ],
  },
];

export function Sidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <aside
      className={cn(
        "flex flex-col h-screen border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out shrink-0",
        collapsed ? "w-16" : "w-60"
      )}
    >
      {/* Logo */}
      <div className={cn(
        "flex items-center gap-3 px-4 py-5 border-b border-sidebar-border shrink-0",
        collapsed && "justify-center px-2"
      )}>
        <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary shrink-0">
          <Database className="w-4 h-4 text-primary-foreground" />
        </div>
        {!collapsed && (
          <div className="flex flex-col leading-tight">
            <span className="text-sm font-bold tracking-tight text-sidebar-foreground">DemoBMS</span>
            <span className="text-[10px] text-sidebar-foreground/50 uppercase tracking-widest">Infrastructure</span>
          </div>
        )}
      </div>

      {/* Main nav */}
      <nav className="flex-1 px-2 py-3 overflow-y-auto space-y-4">
        {navGroups.map((group) => (
          <div key={group.label}>
            {/* Section header — hidden when collapsed */}
            {!collapsed && (
              <p className="px-3 mb-1 text-[10px] font-semibold uppercase tracking-widest text-sidebar-foreground/35 select-none">
                {group.label}
              </p>
            )}
            {collapsed && (
              <div className="my-1 mx-2 border-t border-sidebar-border/60" />
            )}
            <div className="space-y-0.5">
              {group.items.map(({ href, label, icon: Icon }) => {
                const active = pathname === href || pathname.startsWith(href + "/");
                return (
                  <Tooltip key={href} delayDuration={0}>
                    <TooltipTrigger asChild>
                      <Link
                        href={href}
                        className={cn(
                          "flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
                          "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background",
                          active
                            ? "bg-sidebar-accent text-primary"
                            : "text-sidebar-foreground/70",
                          collapsed && "justify-center px-2"
                        )}
                      >
                        <Icon className={cn("w-4 h-4 shrink-0", active && "text-primary")} />
                        {!collapsed && <span className="flex-1">{label}</span>}
                      </Link>
                    </TooltipTrigger>
                    {collapsed && (
                      <TooltipContent side="right">{label}</TooltipContent>
                    )}
                  </Tooltip>
                );
              })}
            </div>
          </div>
        ))}
      </nav>

      {/* Bottom section: collapse toggle + settings */}
      <div className="px-2 pb-4 border-t border-sidebar-border pt-3 space-y-0.5 shrink-0">
        {/* Collapse toggle */}
        <Tooltip delayDuration={0}>
          <TooltipTrigger asChild>
            <button
              onClick={() => setCollapsed(!collapsed)}
              className={cn(
                "flex items-center gap-3 w-full rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
                "text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background",
                collapsed && "justify-center px-2"
              )}
              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
            >
              {collapsed ? (
                <ChevronRight className="w-4 h-4 shrink-0" />
              ) : (
                <>
                  <ChevronLeft className="w-4 h-4 shrink-0" />
                  <span>Collapse</span>
                </>
              )}
            </button>
          </TooltipTrigger>
          {collapsed && (
            <TooltipContent side="right">Expand sidebar</TooltipContent>
          )}
        </Tooltip>

        {/* Settings */}
        <Tooltip delayDuration={0}>
          <TooltipTrigger asChild>
            <Link
              href="/settings"
              className={cn(
                "flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
                "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-background",
                pathname === "/settings" ? "bg-sidebar-accent text-primary" : "text-sidebar-foreground/70",
                collapsed && "justify-center px-2"
              )}
            >
              <Settings className="w-4 h-4 shrink-0" />
              {!collapsed && <span>Settings</span>}
            </Link>
          </TooltipTrigger>
          {collapsed && (
            <TooltipContent side="right">Settings</TooltipContent>
          )}
        </Tooltip>
      </div>
    </aside>
  );
}