"use client";

import { useState } from "react";
import { useFamily } from "@/app/FamilyProvider";
import { PageHeader } from "@/components/PageHeader";
import { TabBar } from "@/components/TabBar";
import { VaccineTab } from "@/components/medical/VaccineTab";
import { MedicineTab } from "@/components/medical/MedicineTab";
import { AllergyTab } from "@/components/medical/AllergyTab";
import { VisitTab } from "@/components/medical/VisitTab";
import { IllnessTab } from "@/components/medical/IllnessTab";

type MedTab = "vaccinations" | "medicine" | "allergies" | "visits" | "illness";

const TABS = [
  { value: "vaccinations", label: "Vaccines" },
  { value: "medicine",     label: "Medicine" },
  { value: "allergies",    label: "Allergies" },
  { value: "visits",       label: "Doctor Visit" },
  { value: "illness",      label: "Illness" },
];

export default function MedicalPage() {
  const { childId, child } = useFamily();
  const [tab, setTab] = useState<MedTab>("vaccinations");

  if (!childId || !child) {
    return <div className="p-8 text-center text-gray-400">Loading...</div>;
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 pb-20">
      <PageHeader title="Medical" />
      <div className="px-4 mb-4">
        <TabBar tabs={TABS} value={tab} onChange={v => setTab(v as MedTab)} />
      </div>
      <div className="px-4">
        {tab === "vaccinations" && <VaccineTab childId={childId} birthDate={child.birthDate} />}
        {tab === "medicine"     && <MedicineTab childId={childId} />}
        {tab === "allergies"    && <AllergyTab childId={childId} />}
        {tab === "visits"       && <VisitTab childId={childId} />}
        {tab === "illness"      && <IllnessTab childId={childId} />}
      </div>
    </div>
  );
}
