frontend/src/components/Sidebar.tsx

import { useState } from "react";
import {
  FileTextIcon,
  HelpCircleIcon,
  PlusCircle,
  ChevronDown,
  ChevronRight,
} from "lucide-react";
import { Microscope, Stethoscope, FlaskConical } from "lucide-react";

interface SidebarProps {
  selectedTest: string;
  onTestChange: (test: string) => void;
}

export function Sidebar({ selectedTest, onTestChange }: SidebarProps) {
  const [isTestOpen, setIsTestOpen] = useState(true);

  const testTypes = [
    { value: "cytology", label: "Cytology Analysis", icon: Microscope },
    { value: "colposcopy", label: "Colposcopy Analysis", icon: Stethoscope },
    { value: "histopathology", label: "Histopathology Analysis", icon: FlaskConical },
  ];

  return (
    <aside className="w-72 h-screen bg-white border-r border-gray-200 p-4 flex flex-col justify-between">
      <div className="space-y-2">
        {/* --- Start New Test Dropdown --- */}
        <div>
          <button
            onClick={() => setIsTestOpen(!isTestOpen)}
            className="flex items-center justify-between w-full px-3 py-3 rounded-lg hover:bg-gray-50 transition-colors text-gray-800 font-semibold"
          >
            <div className="flex items-center gap-3">
              <PlusCircle className="w-5 h-5 text-teal-600" />
              <span>Start New Test</span>
            </div>
            {isTestOpen ? (
              <ChevronDown className="w-5 h-5 text-gray-500" />
            ) : (
              <ChevronRight className="w-5 h-5 text-gray-500" />
            )}
          </button>

          {isTestOpen && (
            <div className="mt-1 ml-6 space-y-1">
              {testTypes.map(({ value, label, icon: Icon }) => (
                <button
                  key={value}
                  onClick={() => onTestChange(value)}
                  className={`flex items-center w-full gap-3 px-3 py-2 rounded-md text-sm transition-all duration-200
                    ${
                      selectedTest === value
                        ? "bg-gradient-to-r from-teal-700 to-teal-600 text-white font-medium shadow-sm"
                        : "text-gray-700 hover:bg-gray-50"
                    }`}
                >
                  <Icon
                    className={`w-4 h-4 ${
                      selectedTest === value ? "text-white" : "text-gray-500"
                    }`}
                  />
                  <span
                    className={`${
                      selectedTest === value ? "text-white" : "text-gray-700"
                    }`}
                  >
                    {label}
                  </span>
                </button>
              ))}
            </div>
          )}
        </div>

        {/* --- Divider --- */}
        <hr className="border-gray-200 my-4" />

        {/* --- Other Options --- */}
        <div>
          <button className="w-full flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
            <FileTextIcon className="w-5 h-5 text-gray-500" />
            <span>History</span>
          </button>

          <button className="w-full flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
            <HelpCircleIcon className="w-5 h-5 text-gray-500" />
            <span>Help</span>
          </button>
        </div>
      </div>
    </aside>
  );
}