// Portal = inner app. Hosts dashboard → intake → pack-preview flow.
// Renders inside a BrandTheme scope chosen by AppShell.

const { useState: useStatePortal, useEffect: useEffectPortal } = React;

function Portal({ storageKey }) {
  const t = useBrand();

  // Pack data adapts per brand — Elysium uses navy-ish accents.
  const PACKS_UNORDINARY = [
    { id: 'exec', title: 'Exec leadership pack', summary: 'EL2 → SES Band 1. Two target applications drafted, evidence section in review.', status: 'In review', badgeTone: 'primary', accent: '#2AB59E', updated: '18 Apr', progress: 72 },
    { id: 'board', title: 'Board-readiness pack', summary: 'NFP board applications. Three chairs shortlisted, cover notes drafted.', status: 'Drafting', badgeTone: 'secondary', accent: '#E8198B', updated: '12 Apr', progress: 40 },
    { id: 'pivot', title: 'Policy to philanthropy', summary: 'Exploratory pivot after 18 years in the APS. Direction narrowed to two sectors.', status: 'Exploratory', badgeTone: 'tertiary', accent: '#FFCC00', updated: '08 Apr', progress: 22 },
  ];
  const PACKS_ELYSIUM = [
    { id: 'exec', title: 'Exec leadership pack', summary: 'EL2 → SES Band 1. Two target applications drafted, evidence section in EPL peer review.', status: 'In peer review', badgeTone: 'primary', accent: '#0B2545', updated: '18 Apr', progress: 72 },
    { id: 'board', title: 'Board-readiness pack', summary: 'NFP board applications. Three chairs shortlisted, cover notes drafted.', status: 'Drafting', badgeTone: 'secondary', accent: '#C8A24B', updated: '12 Apr', progress: 40 },
    { id: 'pivot', title: 'Policy to philanthropy', summary: 'Exploratory pivot after 18 years in the APS. Direction narrowed to two sectors.', status: 'Exploratory', badgeTone: 'tertiary', accent: '#A33B3B', updated: '08 Apr', progress: 22 },
  ];
  const PACKS = t.key === 'elysium' ? PACKS_ELYSIUM : PACKS_UNORDINARY;

  const initial = localStorage.getItem(storageKey) || 'dashboard';
  const [route, setRoute] = useStatePortal(initial);
  const [pack, setPack] = useStatePortal(null);

  useEffectPortal(() => { localStorage.setItem(storageKey, route); }, [route, storageKey]);

  const go = (r) => setRoute(r);
  const openPack = (p) => { setPack(p); setRoute('pack'); };
  const startNew = () => setRoute('intake');

  const nav = [
    { label: 'Dashboard', route: 'dashboard' },
    { label: 'Packs', route: 'dashboard' },
    { label: 'Coaches', route: 'dashboard' },
    { label: 'Library', route: 'dashboard' },
  ];
  if (t.key === 'elysium') nav.splice(3, 0, { label: 'Cohort', route: 'dashboard' });

  return (
    <PortalShell nav={nav} currentRoute={route === 'pack' || route === 'intake' ? 'dashboard' : route} go={go}>
      {route === 'dashboard' && <Dashboard packs={PACKS} onOpen={openPack} onNew={startNew} />}
      {route === 'intake' && <Intake onBack={() => go('dashboard')} onDone={() => { setPack(PACKS[0]); setRoute('pack'); }} />}
      {route === 'pack' && pack && <PackPreview pack={pack} onBack={() => go('dashboard')} />}
    </PortalShell>
  );
}

window.Portal = Portal;