// app.jsx — 메인 앱: 라우팅 + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "ja",
  "showHanja": true,
  "displayFont": "serif"
}/*EDITMODE-END*/;

// 테마 칩 (3가지 — 韻·月·夜)
function ThemeChips({ theme, setTheme }) {
  const opts = [
    { id: 'ja',  cjk: '紫', ko: 'Purplica · 자미', colors: ['#faf8fc', '#1d1626', '#5b3a8c'] },
    { id: 'yun', cjk: '韻', ko: '한지·먹', colors: ['#f4ede2', '#1a1714', '#a8331e'] },
    { id: 'wol', cjk: '月', ko: '모던 화이트', colors: ['#fafaf7', '#131313', '#1f5d4c'] },
    { id: 'ya',  cjk: '夜', ko: '다크 럭스', colors: ['#0f1218', '#f0e8d6', '#c9a253'] },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {opts.map(o => {
        const on = theme === o.id;
        return (
          <button key={o.id} onClick={() => setTheme(o.id)} type="button"
            style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '8px 10px',
              border: on ? '1.5px solid rgba(0,0,0,.85)' : '.5px solid rgba(0,0,0,.12)',
              background: on ? 'rgba(0,0,0,.04)' : 'rgba(255,255,255,.6)',
              borderRadius: 8, cursor: 'pointer', font: 'inherit', textAlign: 'left',
            }}>
            <div style={{ display: 'flex', borderRadius: 5, overflow: 'hidden', height: 32, width: 60, flexShrink: 0, boxShadow: '0 0 0 .5px rgba(0,0,0,.12)' }}>
              {o.colors.map((c, i) => <div key={i} style={{ flex: 1, background: c }} />)}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, lineHeight: 1.2 }}>
              <div style={{ fontFamily: "'Noto Serif KR', serif", fontSize: 14, fontWeight: 600 }}>{o.cjk} <span style={{ fontSize: 11, color: 'rgba(0,0,0,.55)', fontWeight: 500, marginLeft: 2 }}>{o.ko}</span></div>
              <div style={{ fontSize: 10, color: 'rgba(0,0,0,.45)', letterSpacing: '.06em' }}>{o.id.toUpperCase()}</div>
            </div>
          </button>
        );
      })}
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState({ name: 'home' });
  const [gender, setGender] = useState('male');

  // 테마 적용
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.setAttribute('data-show-hanja', t.showHanja ? '1' : '0');
    // 디스플레이 폰트
    const fontStack = t.displayFont === 'sans'
      ? "'Noto Sans KR', system-ui, sans-serif"
      : t.displayFont === 'modern-serif'
        ? "'Cormorant Garamond', 'Noto Serif KR', serif"
        : "'Noto Serif KR', serif";
    document.documentElement.style.setProperty('--font-display', fontStack);
  }, [t.theme, t.showHanja, t.displayFont]);

  // 스크롤 맨 위로 (페이지 전환시)
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [route]);

  let page;
  if (route.name === 'home') page = <HomePage setRoute={setRoute} />;
  else if (route.name === 'oheng') page = <OhengPage setRoute={setRoute} />;
  else if (route.name === 'oheng-detail') page = <OhengDetailPage element={route.element} setRoute={setRoute} />;
  else if (route.name === 'cheongan-detail') page = <CheonganDetailPage stem={route.stem} gender={gender} setGender={setGender} setRoute={setRoute} />;
  else if (route.name === 'ilju-detail') page = <IljuDetailPage label={route.label} gender={gender} setGender={setGender} setRoute={setRoute} />;
  else if (route.name === 'manse') page = <ManseryeokPage />;
  else if (route.name === 'cheongan') page = <CheonganPage initialStem={route.stem} setRoute={setRoute} />;
  else if (route.name === 'blog') page = <BlogListPage setRoute={setRoute} />;
  else if (route.name === 'post') page = <PostDetailPage id={route.id} setRoute={setRoute} />;
  else page = <HomePage setRoute={setRoute} />;

  return (
    <>
      <Nav route={route} setRoute={setRoute} />
      {page}
      <Footer />

      <TweaksPanel title="Tweaks · 조정">
        <TweakSection label="THEME · 테마" />
        <ThemeChips theme={t.theme} setTheme={(v) => setTweak('theme', v)} />

        <TweakSection label="TYPOGRAPHY · 활자" />
        <TweakRadio
          label="제목"
          value={t.displayFont}
          options={[
            { value: 'serif', label: '명조' },
            { value: 'modern-serif', label: '모던' },
            { value: 'sans', label: '고딕' },
          ]}
          onChange={(v) => setTweak('displayFont', v)}
        />

        <TweakSection label="LANGUAGE · 표기" />
        <TweakToggle label="한자 병기" value={t.showHanja}
                     onChange={(v) => setTweak('showHanja', v)} />
      </TweaksPanel>
    </>
  );
}

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