src/components/sidebar.tsx

import { Link, useLocation } from "@tanstack/react-router";
import { Radar, AlertTriangle, FileBarChart, GraduationCap, Scale, GitBranch, Car } from "lucide-react";
import { cn } from "@/lib/utils";

const nav = [
  { to: "/dashboard", label: "Incident Bot", icon: AlertTriangle },
  { to: "/dashboard/branch-debug", label: "Branch Debug Bot", icon: GitBranch },
  { to: "/dashboard/forensic", label: "Forensics Bot", icon: Car },
  { to: "/dashboard/reports", label: "Reports Bot", icon: FileBarChart },
  { to: "/dashboard/coaching", label: "Coaching Bot", icon: GraduationCap },
  { to: "/dashboard/compliance", label: "Compliance Bot", icon: Scale },
] as const;

export function Sidebar() {
  const loc = useLocation();

  return (
    <aside className="w-64 shrink-0 bg-sidebar border-r border-sidebar-border flex flex-col">
      <div className="p-6 border-b border-sidebar-border">
        <Link to="/dashboard" className="flex items-center gap-3">
          <div className="h-9 w-9 rounded-lg bg-primary text-primary-foreground flex items-center justify-center shadow-[var(--shadow-glow)]">
            <Radar className="h-5 w-5" />
          </div>
          <div>
            <div className="font-bold tracking-tight leading-none">DriveCore</div>
            <div className="text-[10px] uppercase tracking-widest text-muted-foreground mt-1">Safety Console</div>
          </div>
        </Link>
      </div>

      <nav className="flex-1 p-4 space-y-1">
        {nav.map(({ to, label, icon: Icon }) => {
          const active = loc.pathname === to || (to !== "/dashboard" && loc.pathname.startsWith(to));
          return (
            <Link
              key={to}
              to={to}
              className={cn(
                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
                active
                  ? "bg-sidebar-accent text-primary"
                  : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground"
              )}
            >
              <Icon className="h-4 w-4" />
              {label}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}