// ============================================================
// CATCH-UP SCHEDULE — CDC catch-up immunization tables from
// GET /api/schedule-data.
// ============================================================

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

interface CatchUpSeries { dose: number | string; minimumAge?: string; minimumIntervalToPrev?: string; notes?: string }
interface CatchUpEntry {
  minimumAgeForDose1?: string;
  series?: CatchUpSeries[];
  catchUpNotes?: string | string[];
}
interface ScheduleData {
  catchUpSchedule: Record<string, CatchUpEntry>;
  vaccineFullNames: Record<string, string>;
}

export default function Catchup() {
  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…</div>;
  if (error) return <div className="p-6 text-sm text-destructive">{(error as Error).message}</div>;
  if (!data) return null;

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Catch-Up Schedule</h1>
        <p className="text-sm text-muted-foreground">
          CDC 2025 catch-up immunization schedule — minimum ages and intervals per vaccine.
        </p>
      </header>

      {Object.entries(data.catchUpSchedule).map(([key, v]) => {
        const fullName = data.vaccineFullNames[key] || key;
        const notes = v.catchUpNotes
          ? (Array.isArray(v.catchUpNotes) ? v.catchUpNotes : [v.catchUpNotes])
          : [];
        return (
          <section key={key} className="rounded-lg border border-border bg-card overflow-hidden">
            <header className="px-4 py-2 border-b border-border bg-muted/40 flex items-center justify-between">
              <h2 className="text-sm font-semibold">{fullName}</h2>
              {v.minimumAgeForDose1 && (
                <span className="text-xs text-muted-foreground">
                  Min age dose 1: <strong>{v.minimumAgeForDose1}</strong>
                </span>
              )}
            </header>

            {v.series && v.series.length > 0 && (
              <table className="w-full text-xs">
                <thead className="bg-muted/20">
                  <tr>
                    <th className="text-left px-3 py-2">Dose</th>
                    <th className="text-left px-3 py-2">Min age</th>
                    <th className="text-left px-3 py-2">Min interval from prev</th>
                    <th className="text-left px-3 py-2">Notes</th>
                  </tr>
                </thead>
                <tbody>
                  {v.series.map((s) => (
                    <tr key={String(s.dose)} className="border-t border-border">
                      <td className="px-3 py-2 font-semibold">Dose {s.dose}</td>
                      <td className="px-3 py-2">{s.minimumAge || '—'}</td>
                      <td className="px-3 py-2">{s.minimumIntervalToPrev || '—'}</td>
                      <td className="px-3 py-2 text-muted-foreground">{s.notes || ''}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}

            {notes.length > 0 && (
              <ul className="list-disc pl-8 py-2 text-xs text-muted-foreground space-y-1">
                {notes.map((n, i) => <li key={i}>{n}</li>)}
              </ul>
            )}
          </section>
        );
      })}
    </div>
  );
}