const LKEY = 'gg-landscape-v1';

function LFrame({ children }) {
  const hc = GP().highContrast;
  return (
    <div className="gg-land" style={{ position: 'relative', width: 852, height: 393, flex: 'none', borderRadius: 48, overflow: 'hidden', background: hc ? '#000' : 'var(--bg-page)', border: '1px solid rgba(60,60,60,0.6)', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.5)', fontFamily: 'var(--font-ui)', color: '#fff', display: 'flex' }}>
      {!hc && <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(50% 80% at 50% 0%, color-mix(in srgb, var(--gg-cyan) 10%, transparent), transparent)' }}></div>}
      <div style={{ position: 'absolute', left: 14, top: '50%', width: 30, height: 120, transform: 'translateY(-50%)', borderRadius: 9999, background: '#000', zIndex: 60 }}></div>
      {children}
    </div>
  );
}

function Pick({ prefs, setPrefs, drillId, setDrill, onStart }) {
  const { Button, Toggle, Icon } = window.GG;
  const { DRILLS, DRILL_ORDER } = window.GGData;
  const lg = prefs.largeText;
  const row = (k, icon, label) => (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, minHeight: 48 }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: lg ? 18 : 16, fontWeight: 700 }}><Icon name={icon} size={22} color="var(--text-muted)" />{label}</span>
      <Toggle checked={!!prefs[k]} onChange={v => setPrefs({ [k]: v })} label={label} />
    </div>
  );
  return (
    <div style={{ position: 'relative', flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 28, padding: '22px 52px 22px 64px' }}>
      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Meta color="var(--gg-cyan)">Handlebar mode</Meta>
        <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.06, marginTop: 6 }}>Mount your phone <Hi>sideways</Hi></div>
        <p style={{ margin: '8px 0 0', fontSize: lg ? 19 : 16, lineHeight: 1.4, color: 'var(--text-secondary)' }}>Thumbs rest on the left and right edges. Tap a side to answer.</p>
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column' }}>
          {row('largeText', 'format_size', 'Large text')}
          {row('highContrast', 'contrast', 'High contrast')}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
        {DRILL_ORDER.map(id => { const d = DRILLS[id]; const on = id === drillId; return (
          <button key={id} type="button" onClick={() => setDrill(id)} style={{ minHeight: 64, padding: '0 16px', borderRadius: 18, display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left', cursor: 'pointer', fontFamily: 'var(--font-ui)', color: '#fff',
            background: on ? 'color-mix(in srgb, ' + d.color + ' 14%, #0c0e14)' : 'var(--surface-card)', border: on ? '2px solid ' + d.color : '1px solid var(--gg-line)', boxShadow: on ? '0 0 18px color-mix(in srgb, ' + d.color + ' 30%, transparent)' : 'none' }}>
            <span style={{ color: d.color, display: 'flex' }}><Icon name={d.icon} size={28} /></span>
            <span style={{ flex: 1, minWidth: 0 }}><span style={{ display: 'block', fontSize: lg ? 19 : 17, fontWeight: 800 }}>{d.title}</span><span style={{ display: 'block', fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>{d.domain}</span></span>
          </button>); })}
        <div style={{ marginTop: 'auto' }}><Button icon="play_arrow" onClick={onStart}>Start {DRILLS[drillId].title}</Button></div>
      </div>
    </div>
  );
}

function Play({ d, onDone, onEnd }) {
  const { isTarget, speak, hush } = window.GGData;
  const T = useTrials({ count: d.stimuli.length, baseMs: 2200, isTarget: i => isTarget(d.id, d.stimuli, i), onCue: i => speak(d.stimuli[i], true), labels: { yes: d.targetBtnLabel, no: d.nonTargetBtnLabel }, onDone });
  return (
    <div style={{ position: 'relative', flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.3fr 1fr', gap: 12, padding: '14px 44px 14px 56px' }}>
      <AnswerZone color={d.color} label={d.nonTargetBtnLabel} align="center" onAnswer={T.answer} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '56px minmax(0,1fr) 56px', alignItems: 'center', gap: 8 }}>
          <ExitButton onClick={() => { hush(); onEnd(); }} />
          <div style={{ textAlign: 'center', fontSize: GP().largeText ? 19 : 16, fontWeight: 800, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.title}</div>
          <span></span>
        </div>
        <CueCard cue={d.stimuli[T.i]} cueSize={130} fb={T.fb} color={d.color} running={T.running && !T.fb} windowMs={T.windowMs} runKey={T.i} style={{ flex: 1 }} />
      </div>
      <AnswerZone target color={d.color} label={d.targetBtnLabel} align="center" onAnswer={T.answer} />
      {T.phase === 'countdown' && <Countdown color={d.color} title={d.title} rule={d.shortRule} onDone={T.start} />}
    </div>
  );
}

function Done({ d, r, onAgain, onPick }) {
  const { Button, ActivityRings, Icon } = window.GG;
  const acc = r.total ? Math.round((r.correct / r.total) * 100) : 0;
  React.useEffect(() => { window.GGData.fanfare(); window.GGData.speak(`${d.title} complete. ${acc} percent. Take a sip of water, then ease into a two-minute cool-down spin.`, true); }, []);
  return (
    <div style={{ position: 'relative', flex: 1, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'center', padding: '22px 52px 22px 64px' }}>
      <ActivityRings size={170} rings={[{ value: acc / 100, color: d.color }, { value: Math.min(1, r.best / 5), color: 'var(--gg-domain-memory)' }]}><span style={{ fontSize: 40, fontWeight: 800, letterSpacing: '-0.03em' }}>{acc}%</span></ActivityRings>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
        <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.06 }}>{d.title} <Hi>complete</Hi></div>
        <div style={{ fontSize: 16, color: 'var(--text-secondary)', fontWeight: 600 }}>{r.correct} / {r.total} correct · best streak {r.best}</div>
        <HydrationCard final />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <Button icon="replay" onClick={onAgain}>Ride Again</Button>
          <Button tone="ghost" icon={null} onClick={onPick}>Pick a drill</Button>
        </div>
      </div>
    </div>
  );
}

function LandscapeApp() {
  const { DRILLS } = window.GGData;
  const [st, setSt] = React.useState(() => { try { return { screen: 'pick', drillId: 'focus_finder', prefs: {}, ...JSON.parse(localStorage.getItem(LKEY)) }; } catch (e) { return { screen: 'pick', drillId: 'focus_finder', prefs: {} }; } });
  React.useEffect(() => localStorage.setItem(LKEY, JSON.stringify({ ...st, screen: st.screen === 'play' ? 'pick' : st.screen })), [st]);
  const setPrefs = p => setSt(x => ({ ...x, prefs: { ...x.prefs, ...p } }));
  window.GGPrefs = { haptics: true, speech: 'slow', voice: true, ...st.prefs };
  const d = DRILLS[st.drillId];
  return (
    <LFrame>
      {st.screen === 'pick' && <Pick prefs={st.prefs} setPrefs={setPrefs} drillId={st.drillId} setDrill={id => setSt(x => ({ ...x, drillId: id }))} onStart={() => setSt(x => ({ ...x, screen: 'play', n: (x.n || 0) + 1 }))} />}
      {st.screen === 'play' && <Play key={st.n} d={d} onEnd={() => setSt(x => ({ ...x, screen: 'pick' }))} onDone={r => setSt(x => ({ ...x, screen: 'done', result: r }))} />}
      {st.screen === 'done' && <Done d={d} r={st.result || { correct: 0, total: 0, best: 0 }} onAgain={() => setSt(x => ({ ...x, screen: 'play', n: (x.n || 0) + 1 }))} onPick={() => setSt(x => ({ ...x, screen: 'pick' }))} />}
    </LFrame>
  );
}

window.GGReady.then(() => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  const boot = () => { root.render(<LandscapeApp />); requestAnimationFrame(() => window.__ggFitLand && window.__ggFitLand()); };
  if (window.__ggUnlocked && window.__ggUnlocked()) boot();
  else window.addEventListener('proto:unlocked', boot, { once: true });
});