import { useLocation } from "wouter";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TeethChart } from "@/components/chart/teeth-chart";
import { TreatmentPlanTab } from "@/components/chart/treatment-plan-tab";
import { PrescriptionTab } from "@/components/chart/prescription-tab";
import { LabManagementTab } from "@/components/chart/lab-management-tab";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { LayoutGrid, ListChecks, Pill, Microscope } from "lucide-react";

const SECTIONS = [
  { value: "charting",        label: "Charting Map",    icon: LayoutGrid },
  { value: "treatment-plan",  label: "Treatment Plan",  icon: ListChecks },
  { value: "prescription",    label: "Prescription",    icon: Pill },
  { value: "lab-management",  label: "Lab Management",  icon: Microscope },
] as const;

type Section = (typeof SECTIONS)[number]["value"];

function getSection(location: string): Section {
  for (const s of SECTIONS) {
    if (location.includes(s.value)) return s.value;
  }
  return "charting";
}

export default function ChartPage() {
  const [location, navigate] = useLocation();
  const activeTab = getSection(location);

  return (
    <div className="p-4 md:p-6 space-y-4">
      <div>
        <h1 className="text-xl font-semibold text-gray-900">Patient Chart</h1>
        <p className="text-sm text-gray-500 mt-0.5">
          Charting, treatment planning, prescriptions, and lab orders
        </p>
      </div>

      <Tabs value={activeTab} onValueChange={(v) => navigate(`/chart/${v}`)}>
        <TabsList className="grid w-full grid-cols-2 md:grid-cols-4 h-auto gap-1 bg-gray-100 p-1 rounded-lg">
          {SECTIONS.map(({ value, label, icon: Icon }) => (
            <TabsTrigger
              key={value}
              value={value}
              className="flex items-center gap-1.5 text-xs sm:text-sm py-2"
            >
              <Icon className="h-3.5 w-3.5 flex-shrink-0" />
              <span className="hidden sm:inline">{label}</span>
              <span className="sm:hidden">{label.split(" ")[0]}</span>
            </TabsTrigger>
          ))}
        </TabsList>

        <TabsContent value="charting" className="mt-4">
          <Card>
            <CardHeader className="pb-3 pt-4 px-4">
              <CardTitle className="text-base font-medium flex items-center gap-2">
                <LayoutGrid className="h-4 w-4 text-primary" />
                Charting Map
              </CardTitle>
            </CardHeader>
            <CardContent className="px-4 pb-4">
              <TeethChart />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="treatment-plan" className="mt-4">
          <Card>
            <CardHeader className="pb-3 pt-4 px-4">
              <CardTitle className="text-base font-medium flex items-center gap-2">
                <ListChecks className="h-4 w-4 text-primary" />
                Treatment Plan
              </CardTitle>
            </CardHeader>
            <CardContent className="px-4 pb-4">
              <TreatmentPlanTab />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="prescription" className="mt-4">
          <Card>
            <CardHeader className="pb-3 pt-4 px-4">
              <CardTitle className="text-base font-medium flex items-center gap-2">
                <Pill className="h-4 w-4 text-primary" />
                Prescription
              </CardTitle>
            </CardHeader>
            <CardContent className="px-4 pb-4">
              <PrescriptionTab />
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="lab-management" className="mt-4">
          <Card>
            <CardHeader className="pb-3 pt-4 px-4">
              <CardTitle className="text-base font-medium flex items-center gap-2">
                <Microscope className="h-4 w-4 text-primary" />
                Lab Management
              </CardTitle>
            </CardHeader>
            <CardContent className="px-4 pb-4">
              <LabManagementTab />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}