// IVE Mobile — app shell: navigation, theme, tweaks. Mobile-native (no iOS frame).
const {
  MODE_THEMES, ThemeCtx, useTweaks, TweaksPanel,
  TweakSection, TweakRadio, TweakColor, TweakButton,
  IVE_C: A, SAVED_IDS, getClaim,
  Onboarding, FeedScreen, SavedScreen, SubmitScreen, VerifyScreen, YouScreen, ClaimDetail, TabBar,
  HowToWizard, useWizard,
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "audienceMode": "atrium",
  "signalAccent": "#6F7D3A",
  "startOnboarding": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const mode = t.audienceMode;
  const th = MODE_THEMES[mode] || MODE_THEMES.atrium;

  const [onboarded, setOnboarded] = React.useState(!t.startOnboarding);
  const [role, setRole] = React.useState('reader');
  const [tab, setTab] = React.useState('today');
  const [openId, setOpenId] = React.useState(null);
  const [saved, setSaved] = React.useState(SAVED_IDS);
  const [showWizard, dismissWizard, resetWizard] = useWizard();

  React.useEffect(() => {
    document.documentElement.style.setProperty('--ive-ochre', t.signalAccent);
  }, [t.signalAccent]);

  React.useEffect(() => {
    let meta = document.querySelector('meta[name="theme-color"]');
    if (!meta) {
      meta = document.createElement('meta');
      meta.setAttribute('name', 'theme-color');
      document.head.appendChild(meta);
    }
    meta.setAttribute('content', th.bg);
    document.body.style.background = th.bg;
  }, [th.bg]);

  const setMode = (m) => setTweak('audienceMode', m);
  const toggleSave = (id) => setSaved((p) => p.includes(id) ? p.filter((x) => x !== id) : [...p, id]);
  const replay = () => { setOnboarded(false); setTab('today'); setOpenId(null); };

  const screen = () => {
    switch (tab) {
      case 'today': return <FeedScreen onOpen={setOpenId} />;
      case 'submit': return <SubmitScreen />;
      case 'saved': return <SavedScreen savedIds={saved} onOpen={setOpenId} onToggleSave={toggleSave} />;
      case 'verify': return <VerifyScreen onOpen={setOpenId} />;
      case 'you': return <YouScreen mode={mode} onSetMode={setMode} role={role} onSetRole={setRole} />;
      default: return <FeedScreen onOpen={setOpenId} />;
    }
  };

  const gridStyle = th.grid ? {
    backgroundImage:
      `linear-gradient(to right, rgba(14,15,16,0.05) 1px, transparent 1px),
       linear-gradient(to bottom, rgba(14,15,16,0.05) 1px, transparent 1px)`,
    backgroundSize: '22px 22px',
  } : {};

  return (
    <ThemeCtx.Provider value={th}>
      <div className="ive-app" style={{
        position: 'fixed', inset: 0,
        background: th.bg, color: th.ink,
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
        fontFamily: 'var(--ive-sans)',
        ...gridStyle,
      }}>
        {!onboarded ? (
          <Onboarding onDone={() => setOnboarded(true)} onSetRole={setRole} />
        ) : (
          <>
            <div key={tab} style={{ flex: 1, minHeight: 0, position: 'relative' }}>
              {screen()}
            </div>
            <TabBar active={tab} onChange={(k) => { setTab(k); setOpenId(null); }} role={role} />
          </>
        )}

        {openId && (
          <div style={{ position: 'absolute', inset: 0, background: th.bg, zIndex: 80, ...gridStyle }}>
            <ClaimDetail claim={getClaim(openId)} onBack={() => setOpenId(null)} saved={saved.includes(openId)} onToggleSave={() => toggleSave(openId)} />
          </div>
        )}

        {onboarded && showWizard && (
          <HowToWizard onDismiss={dismissWizard} />
        )}
      </div>

      <TweaksPanel title="IVE mobile · tweaks">
        <TweakSection label="Audience treatment" />
        <TweakRadio label="Mode" value={mode} options={['atrium', 'field', 'civic']} onChange={setMode} />
        <TweakColor label="Signal accent" value={t.signalAccent}
          options={['#6F7D3A', '#4E5A23', '#3E5A35', '#1E2A1A', '#AEB783']}
          onChange={(v) => setTweak('signalAccent', v)} />
        <TweakSection label="Flow" />
        <TweakButton label="Replay onboarding" onClick={replay} />
        <TweakButton label="Show how-to wizard" onClick={resetWizard} />
      </TweaksPanel>
    </ThemeCtx.Provider>
  );
}

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