frontend/src/components/Sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { clsx } from "clsx";
import {
  Search,
  ClipboardCheck,
  Users,
  BarChart2,
  Map,
  Dna,
  MessageSquare,
  FlaskConical,
  FileSignature,
} from "lucide-react";

const nav = [
  { href: "/", label: "Trial Finder", icon: Search },
  { href: "/intake", label: "Eligibility Check", icon: FlaskConical },
  { href: "/screening", label: "Patient Screening", icon: ClipboardCheck },
  { href: "/recruitment", label: "Recruitment Hub", icon: Users },
  { href: "/consent", label: "Consent & Schedule", icon: FileSignature },
  { href: "/dashboard", label: "Dashboard", icon: BarChart2 },
  { href: "/map", label: "Site Map", icon: Map },
  { href: "/graph", label: "Graph RAG", icon: MessageSquare },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="w-60 shrink-0 bg-indigo-950 text-white flex flex-col h-full">
      <div className="px-5 py-5 border-b border-indigo-800">
        <div className="flex items-center gap-2">
          <Dna className="w-6 h-6 text-indigo-300" />
          <div>
            <div className="font-bold text-sm leading-tight">ClinicalMatch AI</div>
            <div className="text-indigo-400 text-xs">Precision Trial Recruitment</div>
          </div>
        </div>
      </div>

      <nav className="flex-1 px-3 py-4 space-y-1">
        {nav.map(({ href, label, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className={clsx(
              "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
              pathname === href
                ? "bg-indigo-700 text-white"
                : "text-indigo-300 hover:bg-indigo-800 hover:text-white"
            )}
          >
            <Icon className="w-4 h-4 shrink-0" />
            {label}
          </Link>
        ))}
      </nav>

      <div className="px-4 py-4 border-t border-indigo-800">
        <div className="text-xs text-indigo-400 space-y-1">
          <div className="flex items-center gap-1.5">
            <span className="w-2 h-2 rounded-full bg-green-400 inline-block" />
            FHIR R4 Compliant
          </div>
          <div className="flex items-center gap-1.5">
            <span className="w-2 h-2 rounded-full bg-green-400 inline-block" />
            MCP Server Active
          </div>
          <div className="flex items-center gap-1.5">
            <span className="w-2 h-2 rounded-full bg-green-400 inline-block" />
            A2A Workflow Ready
          </div>
        </div>
      </div>
    </aside>
  );
}