Aegis/frontend/src/components/Sidebar.tsx

import { NavLink } from "react-router-dom";
import { useState } from "react";
import {
  LayoutDashboard,
  Shield,
  FlaskConical,
  BookOpen,
  BarChart3,
  Settings,
  Users,
  FileText,
  ChevronDown,
  ListChecks,
  ClipboardList,
  Database,
  Crosshair,
  Zap,
  Grid3X3,
  Gauge,
  ShieldCheck,
  GitCompareArrows,
} from "lucide-react";
import { useAuth } from "../context/AuthContext";

interface NavItem {
  to: string;
  label: string;
  icon: React.FC<{ className?: string }>;
  children?: NavItem[];
}

const mainLinks: NavItem[] = [
  { to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { to: "/techniques", label: "ATT&CK Matrix", icon: Shield },
  { to: "/matrix", label: "Advanced Heatmap", icon: Grid3X3 },
  {
    to: "/tests",
    label: "Tests",
    icon: FlaskConical,
    children: [
      { to: "/tests", label: "All Tests", icon: ListChecks },
      { to: "/tests?view=pending", label: "My Pending Tasks", icon: ClipboardList },
      { to: "/test-catalog", label: "Test Catalog", icon: BookOpen },
    ],
  },
  { to: "/executive-dashboard", label: "Executive Dashboard", icon: Gauge },
  { to: "/reports", label: "Reports", icon: BarChart3 },
  { to: "/threat-actors", label: "Threat Actors", icon: Crosshair },
  { to: "/campaigns", label: "Campaigns", icon: Zap },
  { to: "/comparison", label: "Comparison", icon: GitCompareArrows },
  { to: "/compliance", label: "Compliance", icon: ShieldCheck },
];

const adminLinks: NavItem[] = [
  { to: "/users", label: "Users", icon: Users },
  { to: "/audit", label: "Audit Log", icon: FileText },
  { to: "/data-sources", label: "Data Sources", icon: Database },
  { to: "/system", label: "System", icon: Settings },
];

function SidebarLink({ item }: { item: NavItem }) {
  const [expanded, setExpanded] = useState(false);

  if (item.children) {
    return (
      <div>
        <button
          onClick={() => setExpanded(!expanded)}
          className="flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-800 hover:text-gray-200"
        >
          <span className="flex items-center gap-3">
            <item.icon className="h-5 w-5" />
            {item.label}
          </span>
          <ChevronDown className={`h-4 w-4 transition-transform ${expanded ? "rotate-180" : ""}`} />
        </button>
        {expanded && (
          <div className="ml-4 mt-1 space-y-0.5 border-l border-gray-800 pl-3">
            {item.children.map((child) => (
              <NavLink
                key={child.to + child.label}
                to={child.to}
                className={({ isActive }) =>
                  `flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
                    isActive
                      ? "bg-cyan-500/10 text-cyan-400"
                      : "text-gray-500 hover:bg-gray-800 hover:text-gray-200"
                  }`
                }
              >
                <child.icon className="h-4 w-4" />
                {child.label}
              </NavLink>
            ))}
          </div>
        )}
      </div>
    );
  }

  return (
    <NavLink
      to={item.to}
      className={({ isActive }) =>
        `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
          isActive
            ? "bg-cyan-500/10 text-cyan-400"
            : "text-gray-400 hover:bg-gray-800 hover:text-gray-200"
        }`
      }
    >
      <item.icon className="h-5 w-5" />
      {item.label}
    </NavLink>
  );
}

export default function Sidebar() {
  const { user } = useAuth();
  const isAdmin = user?.role === "admin";

  return (
    <aside className="flex h-screen w-60 flex-col border-r border-gray-800 bg-gray-900">
      {/* Logo */}
      <div className="flex h-16 items-center gap-2 px-5">
        <Shield className="h-7 w-7 text-cyan-400" />
        <span className="text-lg font-bold tracking-wide text-white">
          Aegis
        </span>
      </div>

      {/* Main nav */}
      <nav className="flex-1 space-y-1 px-3 py-4">
        {mainLinks.map((item) => (
          <SidebarLink key={item.to + item.label} item={item} />
        ))}

        {/* Admin section */}
        {isAdmin && (
          <>
            <div className="my-3 border-t border-gray-800" />
            <p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-widest text-gray-600">
              Administration
            </p>
            {adminLinks.map((item) => (
              <SidebarLink key={item.to} item={item} />
            ))}
          </>
        )}
      </nav>

      {/* Footer */}
      <div className="border-t border-gray-800 px-5 py-4">
        <p className="truncate text-xs text-gray-500">
          {user?.role ?? "—"}
        </p>
      </div>
    </aside>
  );
}