// qiaopi-app.jsx — Main app shell, routes between MapPage and LetterPage
// Owns view state ('map' | 'letter') + selected letter + Tweaks state.

function QiaopiApp() {
  const [view, setView] = React.useState('map'); // 'map' | 'letter'
  const [activeId, setActiveId] = React.useState(null);
  const [hoverId, setHoverId] = React.useState(null);
  const [transition, setTransition] = React.useState(null); // 'to-letter' | 'to-map' | null

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "paperTone": "cream",
    "bodyFont": "kaiti",
    "defaultLang": "zh",
    "showAnnotations": true,
    "accentColor": "#9b3a2a"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // True full-viewport fill — pass the real viewport dims into the layout.
  // Internal absolute-positioned elements adapt because they're computed
  // from MAP_W/MAP_H, not hardcoded.
  const [vp, setVp] = React.useState({ w: window.innerWidth, h: window.innerHeight });
  React.useEffect(() => {
    const onResize = () => setVp({ w: window.innerWidth, h: window.innerHeight });
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const scale = 1;
  const size = { w: vp.w, h: vp.h };

  const activeLetter = activeId ? QIAOPI.find(l => l.id === activeId) : null;

  const goLetter = (letter) => {
    setActiveId(letter.id);
    setTransition('to-letter');
    setTimeout(() => {
      setView('letter');
      setTimeout(() => setTransition(null), 400);
    }, 350);
  };
  const goMap = () => {
    setTransition('to-map');
    setTimeout(() => {
      setView('map');
      setTimeout(() => setTransition(null), 400);
    }, 350);
  };
  const pickInLetter = (letter) => {
    setActiveId(letter.id);
  };

  return (
    <React.Fragment>
      {/* Full-viewport canvas */}
      <div style={{
        width: '100vw', height: '100vh', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          width: size.w, height: size.h, position: 'relative', overflow: 'hidden',
        }}>
        {view === 'map' && (
          <MapPage
            letters={QIAOPI}
            hoverId={hoverId}
            setHoverId={setHoverId}
            onOpen={goLetter}
            tweaks={tweaks}
            width={size.w}
            height={size.h}
          />
        )}
        {view === 'letter' && activeLetter && (
          <LetterPage
            letter={activeLetter}
            letters={QIAOPI}
            onBack={goMap}
            onPick={pickInLetter}
            tweaks={tweaks}
            width={size.w}
            height={size.h}
          />
        )}

        {/* Transition overlay (ink wash) */}
        {transition && (
          <div style={{
            position: 'fixed', inset: 0,
            background: transition === 'to-letter'
              ? 'radial-gradient(circle at 50% 50%, #1a130c 0%, rgba(26,19,12,0) 100%)'
              : 'radial-gradient(circle at 50% 50%, #f1e8d4 0%, rgba(241,232,212,0) 100%)',
            zIndex: 200,
            pointerEvents: 'none',
            animation: 'ink-wash .7s ease-out',
          }}>
            <style>{`@keyframes ink-wash { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }`}</style>
          </div>
        )}
        </div>
      </div>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks · 调式">
        <TweakSection label="Paper · 纸张" />
        <TweakRadio label="Paper tone"
          value={tweaks.paperTone}
          onChange={(v) => setTweak('paperTone', v)}
          options={[
            { value: 'cream', label: '米色' },
            { value: 'rice', label: '宣纸' },
            { value: 'sepia', label: '古黄' },
          ]} />
        <TweakRadio label="Body font"
          value={tweaks.bodyFont}
          onChange={(v) => setTweak('bodyFont', v)}
          options={[
            { value: 'kaiti', label: '楷书' },
            { value: 'songti', label: '宋体' },
          ]} />
        <TweakSection label="Map · 信路" />
        <TweakToggle label="Show events"
          value={tweaks.showAnnotations}
          onChange={(v) => setTweak('showAnnotations', v)} />
        <TweakSection label="Letter · 信文" />
        <TweakRadio label="Default lang"
          value={tweaks.defaultLang}
          onChange={(v) => setTweak('defaultLang', v)}
          options={[
            { value: 'zh', label: '中文' },
            { value: 'both', label: '双语' },
          ]} />
        <TweakButton label="🎲 Random letter · 随机一封"
          onClick={() => goLetter(QIAOPI[Math.floor(Math.random() * QIAOPI.length)])} />
      </TweaksPanel>
    </React.Fragment>
  );
}

// Override paper tone — the shared `cream` value maps to the Tweak value.
// Translation: PaperBg accepts 'cream' | 'rice' | 'sepia' | 'ink' — passthrough.

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