// ============================================================
// WELL VISIT — sub-tab shell. Mirrors public/components/wellvisit.html:
//   • By Visit Age   — AAP Bright Futures recs per visit
//   • Milestones     — developmental checklist → AI narrative
//   • SSHADESS       — psychosocial screening (12+ only)
//   • Visit Note     — final preventive-care note generator
//
// SSHADESS pill is hidden for under-12 visits to match vanilla.
// Each panel lazy-loads so the initial WellVisit bundle stays small.
// ============================================================

import { Suspense, lazy, useState } from 'react';

const ByVisitAge = lazy(() => import('./wellvisit/ByVisitAge'));
const Milestones = lazy(() => import('./wellvisit/Milestones'));
const Shadess    = lazy(() => import('./wellvisit/Shadess'));
const VisitNote  = lazy(() => import('./wellvisit/VisitNote'));

type SubTab = 'byvisit' | 'milestones' | 'shadess' | 'note';

const TABS: { id: SubTab; icon: string; label: string }[] = [
  { id: 'byvisit',    icon: '👶', label: 'By Visit Age' },
  { id: 'milestones', icon: '🍼', label: 'Milestones' },
  { id: 'shadess',    icon: '🧠', label: 'SSHADESS (12+)' },
  { id: 'note',       icon: '📄', label: 'Visit Note' },
];

const STORAGE_KEY = 'ped_wellvisit_subtab';

function loadSubTab(): SubTab {
  try {
    const v = localStorage.getItem(STORAGE_KEY);
    if (v === 'byvisit' || v === 'milestones' || v === 'shadess' || v === 'note') return v;
  } catch { /* ignore */ }
  return 'byvisit';
}

export default function WellVisit() {
  const [active, setActive] = useState<SubTab>(loadSubTab);

  function pick(tab: SubTab) {
    setActive(tab);
    try { localStorage.setItem(STORAGE_KEY, tab); } catch { /* ignore */ }
  }

  return (
    <div className="max-w-5xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Well Visit / Preventive Care</h1>
        <p className="text-sm text-muted-foreground">
          AAP 2025 Bright Futures periodicity — vaccines, screenings, billing codes, milestones, SSHADESS, and the encounter note.
        </p>
      </header>

      <div className="flex flex-wrap gap-2" data-testid="wellvisit-subnav">
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            onClick={() => pick(t.id)}
            className={
              'px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ' +
              (active === t.id
                ? 'bg-primary text-primary-foreground border-primary'
                : 'bg-muted hover:bg-muted/80 border-border')
            }
            data-testid={'wellvisit-pill-' + t.id}
          >
            <span className="mr-1" aria-hidden>{t.icon}</span>
            {t.label}
          </button>
        ))}
      </div>

      <Suspense fallback={<div className="text-sm text-muted-foreground">Loading…</div>}>
        {active === 'byvisit'    && <ByVisitAge />}
        {active === 'milestones' && <Milestones />}
        {active === 'shadess'    && <Shadess />}
        {active === 'note'       && <VisitNote />}
      </Suspense>
    </div>
  );
}