// ───────────────────────────────────────────────────────────────────────
// Forever — main app
// ───────────────────────────────────────────────────────────────────────

const TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "warm-editorial",
  "metaphor": "shelf",
  "copyTone": "warm"
}/*EDITMODE-END*/;

const PALETTES = {
  "warm-editorial": {
    cream: '#faf6f0', warmWhite: '#f5efe6', parchment: '#ede5d8',
    ink: '#2a2420', inkSoft: '#5c534a', inkFaint: '#9c917f',
    gold: '#c9a84c', goldSoft: '#d4b86a', goldGlow: 'rgba(201,168,76,0.12)',
    rose: '#c47d6d', sage: '#7a9478',
  },
  "quiet-luxury": {
    cream: '#f3eee5', warmWhite: '#ece5d6', parchment: '#ddd2bf',
    ink: '#2a221a', inkSoft: '#5e5145', inkFaint: '#9c907e',
    gold: '#8b7048', goldSoft: '#a88a5e', goldGlow: 'rgba(139,112,72,0.10)',
    rose: '#a87463', sage: '#6f8770',
  },
  "library": {
    cream: '#f4ecdb', warmWhite: '#ebe0c8', parchment: '#d9c9a8',
    ink: '#1f1a14', inkSoft: '#4f4538', inkFaint: '#8a7d68',
    gold: '#a8541e', goldSoft: '#c46f30', goldGlow: 'rgba(168,84,30,0.12)',
    rose: '#a04030', sage: '#6a7a4e',
  },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAKS);
  const [screen, setScreen] = React.useState('onboard');
  const [subject, setSubject] = React.useState('dad');
  const [memoryId, setMemoryId] = React.useState('car');
  const [history, setHistory] = React.useState([]);

  const palette = PALETTES[t.palette] || PALETTES['warm-editorial'];

  // Apply palette as CSS vars on the iPhone shell
  const cssVars = {
    '--cream': palette.cream,
    '--warm-white': palette.warmWhite,
    '--parchment': palette.parchment,
    '--ink': palette.ink,
    '--ink-soft': palette.inkSoft,
    '--ink-faint': palette.inkFaint,
    '--gold': palette.gold,
    '--gold-soft': palette.goldSoft,
    '--gold-glow': palette.goldGlow,
    '--rose': palette.rose,
    '--sage': palette.sage,
    '--font-serif': "'Cormorant Garamond', 'Georgia', serif",
    '--font-ui': "'Inter', system-ui, sans-serif",
    '--font-script': "'Caveat', cursive",
  };

  const go = (next) => {
    setHistory(h => [...h, screen]);
    setScreen(next);
  };
  const back = () => {
    setHistory(h => {
      if (!h.length) { setScreen('home'); return h; }
      const last = h[h.length - 1];
      setScreen(last);
      return h.slice(0, -1);
    });
  };

  const isDarkScreen = screen === 'record';
  const showTopBar = !['onboard', 'memory', 'memoir', 'zoom', 'settings', 'share'].includes(screen);

  return (
    <div className="phone-shell" style={cssVars}>
      <div className="phone">
        <div className="phone-status-bar">
          <div className="phone-notch"/>
        </div>

        {showTopBar && (
          <div className={`global-top-bar ${isDarkScreen ? 'dark' : 'light'}`}>
            <ForeverLogo tone={isDarkScreen ? 'dark' : 'light'}/>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <button className="top-icon-btn" onClick={() => go('settings')} aria-label="Settings">
                {Icon.settings(18, isDarkScreen ? 'var(--cream)' : 'var(--ink)')}
              </button>
              <AvatarPair self="You" subject={SUBJECTS[subject].name} subjectTone={SUBJECTS[subject].tone}
                          onClick={() => go('settings')} onDark={isDarkScreen}/>
            </div>
          </div>
        )}

        <div className="phone-content" style={{ paddingTop: showTopBar ? 110 : 54 }}>
          {screen === 'onboard' && <OnboardScreen onContinue={() => setScreen('home')} copyTone={t.copyTone}/>}
          {screen === 'home' && (
            <HomeScreen subject={subject}
              onRecord={() => go('record')}
              onUpload={() => go('memory')}
              onShelfZoom={() => go('zoom')}
              onMemoir={() => go('memoir')}
              onShare={() => go('share')}
              onMemory={(id) => { setMemoryId(id); go('memory'); }}
              metaphor={t.metaphor}
              copyTone={t.copyTone}/>
          )}
          {screen === 'record' && <RecordScreen subject={subject} onStop={() => setScreen('post')} copyTone={t.copyTone}/>}
          {screen === 'post' && (
            <PostScreen subject={subject}
              onDone={() => setScreen('home')}
              onPhoto={() => go('memory')}
              onMemory={(id) => { setMemoryId(id); go('memory'); }}
              copyTone={t.copyTone}/>
          )}
          {screen === 'memory' && <MemoryScreen subject={subject} memoryId={memoryId} onBack={back}/>}
          {screen === 'memoir' && <MemoirScreen subject={subject} onBack={back}/>}
          {screen === 'zoom' && (
            <ShelfZoomScreen subject={subject} onBack={back}
              onMemory={(id) => { setMemoryId(id); go('memory'); }}/>
          )}
          {screen === 'settings' && (
            <SettingsScreen subject={subject} onBack={back}
              onSwitchSubject={(id) => { setSubject(id); back(); }}/>
          )}
          {screen === 'share' && <ShareScreen subject={subject} onBack={back}/>}
        </div>

        <div className="phone-home-indicator"/>
      </div>

      <TweaksPanel title="Forever — Tweaks">
        <TweakSection label="Design system"/>
        <TweakRadio label="Palette" value={t.palette}
          options={[
            { value: 'warm-editorial', label: 'Warm' },
            { value: 'quiet-luxury', label: 'Luxury' },
            { value: 'library', label: 'Library' },
          ]}
          onChange={(v) => setTweak('palette', v)}/>
        <TweakSection label="Bookshelf metaphor"/>
        <TweakRadio label="Metaphor" value={t.metaphor}
          options={[
            { value: 'shelf', label: 'Wood shelf' },
            { value: 'cards', label: 'Chapter cards' },
          ]}
          onChange={(v) => setTweak('metaphor', v)}/>
        <TweakSection label="Copy tone"/>
        <TweakRadio label="Voice" value={t.copyTone}
          options={[
            { value: 'warm', label: 'Warm' },
            { value: 'reverent', label: 'Reverent' },
          ]}
          onChange={(v) => setTweak('copyTone', v)}/>
        <TweakSection label="Jump to screen"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
          {['onboard','home','record','post','memory','memoir','zoom','settings','share'].map(s => (
            <TweakButton key={s} label={s} secondary={screen !== s} onClick={() => setScreen(s)}/>
          ))}
        </div>
      </TweaksPanel>
    </div>
  );
}

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