// app.jsx — top-level App with route state + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "pine",
  "backgroundTone": "warm",
  "headingTypeface": "geist",
  "wordmarkMd": "accent-light",
  "fontScale": 100
}/*EDITMODE-END*/;

const ACCENTS = {
  pine:   { name: 'Pine',          accent: '#1F5C3D', ink: '#143C28', tint: '#EEF3EE', tint2: '#DDE7DE' },
  slate:  { name: 'Slate teal',    accent: '#2C5A66', ink: '#1A3B45', tint: '#ECF1F2', tint2: '#D6E1E4' },
  navy:   { name: 'Clinical navy', accent: '#1F3D6E', ink: '#142B4D', tint: '#EDF0F6', tint2: '#D6DDEA' },
  ink:    { name: 'Warm ink',      accent: '#3A332A', ink: '#211C17', tint: '#F1EDE7', tint2: '#E1DACE' },
};

const BG_TONES = {
  warm: { bg: '#FAFAF7', paper2: '#F4F4EF', line: '#E4E4DE', line2: '#EFEFE9' },
  cool: { bg: '#F8F9FB', paper2: '#F1F3F6', line: '#E2E5EB', line2: '#EDEFF3' },
  bone: { bg: '#F4F1EA', paper2: '#EBE7DE', line: '#D9D3C5', line2: '#E4DECF' },
};

const HEADING_FONTS = {
  geist:   { stack: "'Geist', ui-sans-serif, system-ui, sans-serif", label: 'Geist' },
  jakarta: { stack: "'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif", label: 'Plus Jakarta' },
  ibm:     { stack: "'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif", label: 'IBM Plex' },
  fraunces:{ stack: "'Fraunces', Georgia, serif", label: 'Fraunces (serif)' },
};

function App() {
  const [route, setRoute] = React.useState('home');
  const [authed, setAuthed] = React.useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const go = React.useCallback((r) => {
    if (r === 'login') { setRoute('login'); return; }
    if (r === 'logout') { setAuthed(false); setRoute('home'); return; }
    if ((r === 'portal' || r === 'insurify-app' || r === 'portal-billing' || r === 'portal-team') && !authed) {
      setRoute('login');
      return;
    }
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [authed]);

  const onLogin = () => { setAuthed(true); setRoute('portal'); };
  const onLogout = () => { setAuthed(false); setRoute('home'); };

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS.pine;
    root.style.setProperty('--accent', a.accent);
    root.style.setProperty('--accent-ink', a.ink);
    root.style.setProperty('--accent-tint', a.tint);
    root.style.setProperty('--accent-tint-2', a.tint2);
    const tone = BG_TONES[t.backgroundTone] || BG_TONES.warm;
    root.style.setProperty('--bg', tone.bg);
    root.style.setProperty('--paper-2', tone.paper2);
    root.style.setProperty('--line', tone.line);
    root.style.setProperty('--line-2', tone.line2);
    const font = HEADING_FONTS[t.headingTypeface] || HEADING_FONTS.geist;
    root.style.setProperty('--font-sans', font.stack);
    root.style.setProperty('font-size', `${(t.fontScale || 100)}%`);
  }, [t]);

  // Inject extra Google fonts when needed
  React.useEffect(() => {
    const needed = {
      jakarta: 'Plus+Jakarta+Sans:wght@400;500;600;700',
      ibm:     'IBM+Plex+Sans:wght@400;500;600',
      fraunces:'Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600',
    }[t.headingTypeface];
    if (!needed) return;
    const id = 'gf-' + t.headingTypeface;
    if (document.getElementById(id)) return;
    const link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    link.href = `https://fonts.googleapis.com/css2?family=${needed}&display=swap`;
    document.head.appendChild(link);
  }, [t.headingTypeface]);

  // Render wordmark variants by overriding the .md css per tweak
  React.useEffect(() => {
    let css = '';
    if (t.wordmarkMd === 'accent-light') {
      css = `.cmd-wordmark .md { color: var(--accent); font-weight: 350; }`;
    } else if (t.wordmarkMd === 'accent-bold') {
      css = `.cmd-wordmark .md { color: var(--accent); font-weight: 600; }`;
    } else if (t.wordmarkMd === 'muted') {
      css = `.cmd-wordmark .md { color: var(--ink-3); font-weight: 400; }`;
    } else if (t.wordmarkMd === 'inline') {
      css = `.cmd-wordmark .md { color: inherit; font-weight: inherit; }`;
    }
    let el = document.getElementById('wordmark-override');
    if (!el) {
      el = document.createElement('style');
      el.id = 'wordmark-override';
      document.head.appendChild(el);
    }
    el.textContent = css;
  }, [t.wordmarkMd]);

  // Render current page
  let page;
  switch (route) {
    case 'home':           page = <HomePage go={go} />; break;
    case 'solutions':      page = <SolutionsPage go={go} />; break;
    case 'insurify':       page = <InsurifyPage go={go} />; break;
    case 'access':         page = <AccessPage go={go} />; break;
    case 'about':          page = <AboutPage go={go} />; break;
    case 'physician-board': page = <PhysicianBoardPage go={go} />; break;
    case 'general-board':  page = <GeneralBoardPage go={go} />; break;
    case 'press':          page = <PressPage go={go} />; break;
    case 'press-advisors': page = <PressArticlePage go={go} />; break;
    case 'press-pilot':    page = <PressArticlePage go={go} release={MICHIGAN_RELEASE} />; break;
    case 'contact-demos':       page = <DemosPage go={go} />; break;
    case 'contact-media':       page = <MediaPage go={go} />; break;
    case 'contact-investors':   page = <InvestorsPage go={go} />; break;
    case 'contact-development': page = <DevelopmentPage go={go} />; break;
    case 'contact-careers':     page = <CareersPage go={go} />; break;
    case 'contact':        page = <ContactPage go={go} />; break;
    case 'terms':          page = <TermsPage go={go} />; break;
    case 'privacy':        page = <PrivacyPage go={go} />; break;
    case 'security':       page = <SecurityPage go={go} />; break;
    case 'login':          page = <LoginPage go={go} onLogin={onLogin} />; break;
    case 'portal':         page = <PortalPage go={go} />; break;
    case 'insurify-app':   page = <InsurifyAppPage go={go} />; break;
    case 'portal-billing': page = <BillingPage go={go} />; break;
    case 'portal-team':    page = <TeamPage go={go} />; break;
    default:               page = <HomePage go={go} />;
  }

  const hideChrome = route === 'login';
  const showFooter = !authed && !hideChrome;

  return (
    <div className="cmd-shell">
      {!hideChrome && <Header route={route} go={go} authed={authed} onLogout={onLogout} />}
      <main className="cmd-main">{page}</main>
      {showFooter && <Footer go={go} />}

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={ACCENTS[t.accent]?.accent}
          options={Object.values(ACCENTS).map(a => a.accent)}
          onChange={(hex) => {
            const key = Object.keys(ACCENTS).find(k => ACCENTS[k].accent === hex) || 'pine';
            setTweak('accent', key);
          }}
        />
        <TweakRadio
          label="Wordmark"
          value={t.wordmarkMd}
          options={['accent-light', 'accent-bold', 'muted', 'inline']}
          onChange={(v) => setTweak('wordmarkMd', v)}
        />

        <TweakSection label="Surface" />
        <TweakRadio
          label="Background"
          value={t.backgroundTone}
          options={['warm', 'cool', 'bone']}
          onChange={(v) => setTweak('backgroundTone', v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Typeface"
          value={t.headingTypeface}
          options={Object.keys(HEADING_FONTS)}
          onChange={(v) => setTweak('headingTypeface', v)}
        />
        <TweakSlider
          label="Font scale"
          value={t.fontScale || 100}
          min={90} max={112} step={2} unit="%"
          onChange={(v) => setTweak('fontScale', v)}
        />

        <TweakSection label="Navigate" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
          {[
            ['home','Home'],['solutions','Solutions'],['insurify','Insurify'],
            ['access','Access'],['about','About'],
            ['contact','Contact'],['login','Login'],
          ].map(([id, label]) => (
            <button key={id} onClick={() => go(id)} className="twk-jump"
              style={{
                appearance: 'none', border: '1px solid rgba(41,38,27,0.15)',
                background: route === id ? 'rgba(41,38,27,0.1)' : 'transparent',
                padding: '6px 10px', borderRadius: 6, fontSize: 11,
                color: 'inherit', textAlign: 'left', fontFamily: 'inherit'
              }}>{label}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 6 }}>
          {[
            ['portal','Portal'],
            ['insurify-app','Insurify App'],
            ['portal-billing','Billing'],
            ['portal-team','Team'],
          ].map(([id, label]) => (
            <button key={id} onClick={() => { setAuthed(true); setRoute(id); }}
              style={{
                appearance: 'none', border: '1px solid rgba(41,38,27,0.15)',
                background: route === id ? 'rgba(41,38,27,0.1)' : 'transparent',
                padding: '6px 10px', borderRadius: 6, fontSize: 11,
                color: 'inherit', textAlign: 'left', fontFamily: 'inherit'
              }}>{label}</button>
          ))}
        </div>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);