// app.jsx — main app with tab nav and tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "persona": "alex_rivera",
  "dayState": "success",
  "band": "green",
  "startTab": "today",
  "showOnboarding": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tab, setTab] = React.useState(t.startTab || 'today');
  const [showOnboarding, setShowOnboarding] = React.useState(false);
  const [showRegoal, setShowRegoal] = React.useState(false);

  // Sync tab when tweak startTab changes
  React.useEffect(() => { if (t.startTab && t.startTab !== tab) setTab(t.startTab); }, [t.startTab]);

  // Sync onboarding visibility with tweak
  React.useEffect(() => { setShowOnboarding(!!t.showOnboarding); }, [t.showOnboarding]);

  const switchPersona = () => {
    setTweak('persona', t.persona === 'alex_rivera' ? 'sam_carter' : 'alex_rivera');
  };

  const screen = (
    tab === 'today'   ? <ScreenToday  user={t.persona} dayState={t.dayState} band={t.band} onChangePersona={switchPersona} />
  : tab === 'plan'    ? <ScreenPlan   user={t.persona} onRegoal={() => setShowRegoal(true)} />
  : tab === 'history' ? <ScreenHistory user={t.persona} />
  :                     <ScreenProfile user={t.persona} onChangePersona={switchPersona}
                            onOpenOnboarding={() => { setShowOnboarding(true); setTweak('showOnboarding', true); }}
                            onOpenRegoal={() => setShowRegoal(true)} />
  );

  return (
    <>
      <IOSDevice width={402} height={874} dark={false}>
        <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
          {/* status bar spacer */}
          <div style={{ height: 54, flexShrink: 0 }} />
          <div style={{ flex: 1, overflow: 'auto', WebkitOverflowScrolling: 'touch' }}>
            {screen}
          </div>
          {/* Tab bar */}
          <div style={{ flexShrink: 0, paddingBottom: 26 }}>
            <TabBar tab={tab} setTab={(v) => { setTab(v); setTweak('startTab', v); }} />
          </div>

          {showOnboarding && (
            <OnboardingFlow
              onClose={() => { setShowOnboarding(false); setTweak('showOnboarding', false); }}
              onComplete={(uid) => { if (uid) setTweak('persona', uid); }}
            />
          )}
          {showRegoal && (
            <RegoalSheet user={t.persona} onClose={() => setShowRegoal(false)} />
          )}
        </div>
      </IOSDevice>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Persona" />
        <TweakRadio label="Active user" value={t.persona}
          options={[{ value: 'alex_rivera', label: 'Alex' }, { value: 'sam_carter', label: 'Sam' }]}
          onChange={(v) => setTweak('persona', v)} />

        <TweakSection label="Today's check-in" />
        <TweakSelect label="API state" value={t.dayState}
          options={[
            { value: 'success', label: 'Success — session returned' },
            { value: 'halted',  label: 'Red flag — STOP / seek care' },
            { value: 'failed',  label: 'Generation failed — retry' },
          ]}
          onChange={(v) => setTweak('dayState', v)} />
        <TweakRadio label="Recovery band" value={t.band}
          options={[{ value: 'green', label: 'Green' }, { value: 'amber', label: 'Amber' }, { value: 'red', label: 'Red' }]}
          onChange={(v) => setTweak('band', v)} />

        <TweakSection label="Navigation" />
        <TweakSelect label="Tab" value={tab}
          options={[
            { value: 'today', label: 'Today' },
            { value: 'plan', label: 'Plan' },
            { value: 'history', label: 'History' },
            { value: 'profile', label: 'Profile' },
          ]}
          onChange={(v) => { setTab(v); setTweak('startTab', v); }} />
        <TweakToggle label="Show onboarding" value={!!t.showOnboarding} onChange={(v) => setTweak('showOnboarding', v)} />
      </TweaksPanel>
    </>
  );
}

function TabBar({ tab, setTab }) {
  const tabs = [
    { id: 'today',   label: 'Today',   icon: 'sun' },
    { id: 'plan',    label: 'Plan',    icon: 'calendar' },
    { id: 'history', label: 'History', icon: 'chart' },
    { id: 'profile', label: 'Profile', icon: 'user' },
  ];
  return (
    <div className="tabbar">
      {tabs.map(x => (
        <button key={x.id} aria-current={tab === x.id} onClick={() => setTab(x.id)}>
          <Icon name={x.icon} size={22} stroke={1.6} />
          <span>{x.label}</span>
        </button>
      ))}
    </div>
  );
}

const TODAY = window.TODAY;
function Loading({ msg }) {
  return (
    <div style={{ padding: 40, fontFamily: 'var(--sans)', color: 'var(--ink-3)', fontSize: 14 }}>
      {msg || 'Loading…'}
    </div>
  );
}

function LoginScreen({ onAuthed }) {
  const [pass, setPass] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const submit = async () => {
    if (!pass) return;
    setBusy(true); setErr(null);
    try {
      const r = await window.api.login(pass);
      if (r && r.authed) onAuthed();
      else { setErr('Wrong passcode'); setBusy(false); }
    } catch (e) { setErr((e && e.message) || 'Wrong passcode'); setBusy(false); }
  };
  return (
    <IOSDevice width={402} height={874} dark={false}>
      <div className="scr" style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 28px' }}>
        <div className="h-eyebrow" style={{ marginBottom: 10 }}>Trainer</div>
        <div className="h-display" style={{ marginBottom: 8 }}>Welcome <em>back</em>.</div>
        <div className="t-body" style={{ marginBottom: 24 }}>Enter your passcode to continue.</div>
        <input type="password" value={pass} autoFocus
          onChange={(e) => setPass(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
          placeholder="Passcode"
          style={{ width: '100%', border: '0.5px solid var(--line)', background: 'var(--card)', borderRadius: 12, padding: '14px 16px', fontFamily: 'var(--sans)', fontSize: 18, outline: 'none', color: 'var(--ink)', marginBottom: 12 }} />
        {err && <div className="t-small" style={{ color: 'var(--red)', marginBottom: 12 }}>{err}</div>}
        <button className="btn" onClick={submit} disabled={busy || !pass} style={{ opacity: (busy || !pass) ? 0.5 : 1 }}>
          {busy ? 'Checking…' : 'Enter'}
        </button>
      </div>
    </IOSDevice>
  );
}

function Root() {
  const [phase, setPhase] = React.useState('checking'); // checking | login | app
  const enter = async () => {
    setPhase('checking');
    try { await window.bootstrapLive(TODAY); } catch (e) {}
    setPhase('app');
  };
  React.useEffect(() => {
    // DEMO BUILD: no backend — skip auth entirely, render straight into the app
    // on the bundled sample data (bootstrapLive falls back to MOCK on API failure).
    window.__onUnauthorized = function () {};
    (async function () {
      try { await window.bootstrapLive(TODAY); } catch (e) {}
      setPhase('app');
    })();
  }, []);
  if (phase === 'login') return <LoginScreen onAuthed={enter} />;
  if (phase !== 'app') return <Loading msg="…" />;
  return <App />;
}

const _root = ReactDOM.createRoot(document.getElementById('root'));
_root.render(<Root />);