// Main app — routes between screens, theme, Tweaks

const SCREENS = ['setup','tests','newtest','recording','distilling','review','report','video'];

function App() {
  const TWEAKS = /*EDITMODE-BEGIN*/{
    "theme": "delight",
    "showTopTitlebar": true,
    "sidebarVisible": true,
    "accent": "cyan",
    "startScreen": "tests"
  }/*EDITMODE-END*/;

  const [theme, setTheme] = useState(TWEAKS.theme);
  const [accent, setAccent] = useState(TWEAKS.accent);
  const [showTitle, setShowTitle] = useState(TWEAKS.showTopTitlebar);
  const [sidebar, setSidebar] = useState(TWEAKS.sidebarVisible);
  const [tweaksOn, setTweaksOn] = useState(false);

  // Persist screen position across refresh
  const [screen, setScreenState] = useState(() => {
    try { return localStorage.getItem('ft:screen') || TWEAKS.startScreen; } catch { return TWEAKS.startScreen; }
  });
  const setScreen = (s) => {
    setScreenState(s);
    try { localStorage.setItem('ft:screen', s); } catch {}
  };

  // Apply theme + accent on <html> (tokens.css targets html[data-theme=])
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    document.documentElement.dataset.accent = accent;
  }, [theme, accent]);

  // Edit-mode protocol
  useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOn(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const persistTweak = (k, v) => {
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch {}
  };

  const setThemeAndPersist = (t) => { setTheme(t); persistTweak('theme', t); };
  const setAccentAndPersist = (a) => { setAccent(a); persistTweak('accent', a); };

  // Special: recording screen takes over the whole viewport (no sidebar)
  const isRecording = screen === 'recording';

  // Screen title for titlebar
  const titleMap = {
    setup:'first-run · setup',
    tests:'workspace · tests',
    newtest:'record · new test',
    recording:'recording',
    distilling:'distilling',
    review:'review · draft',
    report:'runs · report',
    video:'demos · player',
  };

  return (
    <div className="ft-stage">
      <div className="ft-win" data-screen-label={titleMap[screen]}>
        {showTitle && <Titlebar theme={theme} onTheme={setThemeAndPersist} title={titleMap[screen]}/>}

        <div className="ft-body">
          {sidebar && !isRecording && screen !== 'setup' && (
            <Sidebar active={screen} onNav={setScreen} />
          )}
          <main className="ft-main">
            {screen === 'setup' &&
              <ScreenSetup onComplete={() => setScreen('tests')}/>}
            {screen === 'tests' &&
              <ScreenTests
                onNew={() => setScreen('newtest')}
                onOpenTest={() => setScreen('report')}
                onOpenReport={() => setScreen('report')}/>}
            {screen === 'newtest' &&
              <ScreenNewTest
                onStartRecording={() => setScreen('recording')}
                onBack={() => setScreen('tests')}/>}
            {screen === 'recording' &&
              <ScreenRecording
                onStop={() => setScreen('distilling')}
                onCancel={() => setScreen('newtest')}/>}
            {screen === 'distilling' &&
              <ScreenDistilling
                onDone={() => setScreen('review')}
                onBack={() => setScreen('tests')}/>}
            {screen === 'review' &&
              <ScreenReview
                onApprove={() => setScreen('report')}
                onBack={() => setScreen('tests')}/>}
            {screen === 'report' &&
              <ScreenReport
                onWatchDemo={() => setScreen('video')}
                onBack={() => setScreen('tests')}/>}
            {screen === 'video' &&
              <ScreenVideo onBack={() => setScreen('tests')}/>}
          </main>
        </div>

        {/* Journey bottom bar — click-through shortcuts */}
        {!isRecording && screen !== 'setup' && (
          <JourneyBar screen={screen} setScreen={setScreen}/>
        )}
      </div>

      {/* Tweaks panel */}
      <TweaksPanel
        open={tweaksOn}
        theme={theme} setTheme={setThemeAndPersist}
        accent={accent} setAccent={setAccentAndPersist}
        showTitle={showTitle} setShowTitle={(v) => { setShowTitle(v); persistTweak('showTopTitlebar', v); }}
        sidebar={sidebar} setSidebar={(v) => { setSidebar(v); persistTweak('sidebarVisible', v); }}
        screen={screen} setScreen={setScreen}
      />
    </div>
  );
}

function JourneyBar({ screen, setScreen }) {
  const JOURNEY = [
    { id:'setup',      label:'Setup' },
    { id:'tests',      label:'Tests' },
    { id:'newtest',    label:'New' },
    { id:'recording',  label:'Record' },
    { id:'distilling', label:'Distill' },
    { id:'review',     label:'Review' },
    { id:'report',     label:'Run' },
    { id:'video',      label:'Demo' },
  ];
  const idx = JOURNEY.findIndex(s => s.id === screen);
  return (
    <div style={{position:'absolute', bottom:14, left:'50%', transform:'translateX(-50%)',
      display:'flex', gap:2, padding:4, background:'rgba(14,18,24,0.9)', backdropFilter:'blur(14px)',
      border:'1px solid var(--border)', borderRadius:100, zIndex:40,
      boxShadow:'0 12px 28px rgba(0,0,0,0.5)'}}>
      {JOURNEY.map((s,i) => {
        const active = s.id === screen;
        const passed = i < idx;
        return (
          <button key={s.id} onClick={() => setScreen(s.id)}
            style={{
              appearance:'none', border:'none', cursor:'pointer',
              padding:'6px 12px', borderRadius:100,
              fontFamily:'var(--mono)', fontSize:9, letterSpacing:'0.14em', textTransform:'uppercase',
              background: active ? 'var(--accent)' : 'transparent',
              color: active ? 'var(--bg)' : passed ? 'var(--text-secondary)' : 'var(--text-muted)',
              transition:'all 200ms var(--motion-ease-organic)',
              display:'flex', gap:6, alignItems:'center',
            }}>
            <span style={{width:14, textAlign:'center'}}>{i+1}</span>
            {s.label}
          </button>
        );
      })}
    </div>
  );
}

function TweaksPanel({ open, theme, setTheme, accent, setAccent, showTitle, setShowTitle, sidebar, setSidebar, screen, setScreen }) {
  return (
    <div className={`ft-tweaks ${open ? 'open' : ''}`}>
      <h4>Tweaks <span className="k">finaltake · mvp</span></h4>

      <div>
        <label>Theme</label>
        <div style={{display:'flex', gap:4, marginTop:4}}>
          {['delight','gilt','relight'].map(t => (
            <button key={t} className="ft-theme-btn" aria-pressed={theme === t} onClick={() => setTheme(t)}
              style={{flex:1, padding:'6px', border:'1px solid var(--border)', background: theme === t ? 'var(--accent-dim)' : 'var(--bg2)', borderRadius:6, fontFamily:'var(--mono)', fontSize:9, letterSpacing:'0.14em', textTransform:'uppercase', color: theme === t ? 'var(--accent)' : 'var(--text-muted)', cursor:'pointer'}}>
              {t}
            </button>
          ))}
        </div>
      </div>

      <div>
        <label>Accent</label>
        <div style={{display:'flex', gap:6, marginTop:4}}>
          {[['cyan','#00f5ff'],['citron','#d4f05c'],['coral','#ff8a6a'],['violet','#b78cff']].map(([id,col]) => (
            <button key={id} onClick={() => setAccent(id)} title={id}
              style={{width:28, height:28, borderRadius:'50%', background:col, border: accent===id ? '2px solid #fff' : '1px solid var(--border)', cursor:'pointer', boxShadow: accent===id ? `0 0 10px ${col}` : 'none', padding:0}}/>
          ))}
        </div>
      </div>

      <div className="ft-divider" style={{margin:'4px 0'}}/>

      <div className="row">
        <span>Show titlebar</span>
        <button onClick={() => setShowTitle(!showTitle)}
          style={{width:34, height:18, borderRadius:100, border:'none', cursor:'pointer', background: showTitle ? 'var(--accent)' : 'var(--border)', position:'relative', padding:0}}>
          <span style={{position:'absolute', top:2, left: showTitle ? 18 : 2, width:14, height:14, borderRadius:'50%', background:'#fff', transition:'left 200ms'}}/>
        </button>
      </div>

      <div className="row">
        <span>Sidebar</span>
        <button onClick={() => setSidebar(!sidebar)}
          style={{width:34, height:18, borderRadius:100, border:'none', cursor:'pointer', background: sidebar ? 'var(--accent)' : 'var(--border)', position:'relative', padding:0}}>
          <span style={{position:'absolute', top:2, left: sidebar ? 18 : 2, width:14, height:14, borderRadius:'50%', background:'#fff', transition:'left 200ms'}}/>
        </button>
      </div>

      <div className="ft-divider" style={{margin:'4px 0'}}/>

      <div>
        <label>Jump to</label>
        <select value={screen} onChange={e => setScreen(e.target.value)}
          style={{width:'100%', marginTop:4, padding:'6px 8px', background:'var(--bg2)', border:'1px solid var(--border)', borderRadius:6, color:'var(--text-primary)', fontFamily:'var(--mono)', fontSize:11}}>
          {['setup','tests','newtest','recording','distilling','review','report','video'].map(s =>
            <option key={s} value={s}>{s}</option>
          )}
        </select>
      </div>
    </div>
  );
}

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