// ============================================================
// VACCINE SCHEDULE — full AAP/ACIP table, sourced live from
// GET /api/schedule-data.
// ============================================================

import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api';

interface VisitAge { id: string; label: string; era: string }
interface VaccineDose { vaccine: string; dose?: number | string; notes?: string }
interface ScheduleData {
  visitAges: VisitAge[];
  periodicity: Record<string, { vaccines?: VaccineDose[] }>;
  vaccineFullNames: Record<string, string>;
}

export default function VaxSchedule() {
  const { data, isLoading, error } = useQuery<ScheduleData>({
    queryKey: ['schedule-data'],
    queryFn: () => api.get<ScheduleData>('/api/schedule-data'),
  });

  if (isLoading) return <div className="p-6 text-sm text-muted-foreground">Loading schedule…</div>;
  if (error) return <div className="p-6 text-sm text-destructive">{(error as Error).message}</div>;
  if (!data) return null;

  const visitsWithVax = data.visitAges.filter((v) => data.periodicity[v.id]?.vaccines?.length);

  const vaxKeys: string[] = [];
  const seen = new Set<string>();
  visitsWithVax.forEach((v) => {
    data.periodicity[v.id].vaccines!.forEach((dose) => {
      if (!seen.has(dose.vaccine)) { seen.add(dose.vaccine); vaxKeys.push(dose.vaccine); }
    });
  });

  return (
    <div className="max-w-full mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Vaccine Schedule</h1>
        <p className="text-sm text-muted-foreground">
          AAP/ACIP 2025 complete immunization schedule (0–18 years).
        </p>
      </header>

      <div className="rounded-lg border border-border overflow-auto bg-card">
        <table className="text-xs">
          <thead className="sticky top-0 bg-muted">
            <tr>
              <th className="text-left font-semibold px-3 py-2 border-b border-border min-w-[180px] sticky left-0 bg-muted">
                Vaccine
              </th>
              {visitsWithVax.map((v) => (
                <th key={v.id} className="px-2 py-2 border-b border-border text-center whitespace-nowrap">
                  {v.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {vaxKeys.map((key) => (
              <tr key={key} className="even:bg-muted/20">
                <td className="px-3 py-2 border-b border-border font-medium sticky left-0 bg-card">
                  {data.vaccineFullNames[key] || key}
                </td>
                {visitsWithVax.map((v) => {
                  const vaxList = data.periodicity[v.id].vaccines || [];
                  const match = vaxList.find((d) => d.vaccine === key);
                  if (!match) return <td key={v.id} className="border-b border-border" />;
                  const label = typeof match.dose === 'number' ? '#' + match.dose : (match.dose || '•');
                  return (
                    <td
                      key={v.id}
                      className="border-b border-border text-center bg-primary/10 font-mono text-[11px]"
                      title={match.notes || `${key} dose ${match.dose}`}
                    >
                      {label}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="text-xs text-muted-foreground">
        Hover any filled cell for notes. Sources: AAP/Bright Futures (Feb 2025), CDC Child &amp; Adolescent Immunization Schedule (2025).
      </p>
    </div>
  );
}