// App shell — routing + Tweaks panel + i18n

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "heroLayout": "split",
  "density": "comfortable",
  "accent": "orange",
  "lang": "en"
}/*EDITMODE-END*/;

const ACCENT_HUES = {
  orange: '0.68 0.18 45',
  red: '0.62 0.22 25',
  blue: '0.62 0.18 235',
  green: '0.62 0.16 150',
};

function App() {
  const [page, setPage] = useState('home');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang || 'en';

  useEffect(() => {
    if (tweaks.theme === 'light') document.documentElement.removeAttribute('data-theme');
    else document.documentElement.setAttribute('data-theme', tweaks.theme);
  }, [tweaks.theme]);

  useEffect(() => {
    const hue = ACCENT_HUES[tweaks.accent] || ACCENT_HUES.orange;
    document.documentElement.style.setProperty('--accent', `oklch(${hue})`);
  }, [tweaks.accent]);

  useEffect(() => {
    document.documentElement.style.setProperty('--gutter', tweaks.density === 'compact' ? '24px' : '32px');
  }, [tweaks.density]);

  useEffect(() => {
    document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
  }, [lang]);

  useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [page]);

  const setNav = (target) => setPage(target);

  let pageContent;
  if (page === 'home') pageContent = <HomePage setPage={setNav} heroLayout={tweaks.heroLayout} lang={lang} />;
  else if (page === 'products') pageContent = <ListingPage setPage={setNav} lang={lang} />;
  else if (page === 'industries') pageContent = <IndustriesPage setPage={setNav} lang={lang} />;
  else if (page === 'about') pageContent = <AboutPage setPage={setNav} lang={lang} />;
  else if (page === 'insights') pageContent = <InsightsPage setPage={setNav} lang={lang} />;
  else if (page === 'rfq') pageContent = <RfqPage lang={lang} />;
  else if (page.startsWith('product:')) {
    const id = page.split(':')[1];
    pageContent = <DetailPage productId={id} setPage={setNav} lang={lang} />;
  }

  const navPage = page.startsWith('product:') ? 'products' : page;
  const setLang = (v) => setTweak('lang', v);

  return (
    <div className="page" data-screen-label={page} data-lang={lang}>
      <Nav page={navPage} setPage={setNav} lang={lang} setLang={setLang} />
      <main>{pageContent}</main>
      <Footer setPage={setNav} lang={lang} />

      <TweaksPanel title={t('tw.title', lang)}>
        <TweakSection title={t('tw.lang', lang)}>
          <TweakRadio
            value={lang}
            onChange={setLang}
            options={[
              { value: 'en', label: t('tw.lang.en', lang) },
              { value: 'zh', label: t('tw.lang.zh', lang) },
            ]}
          />
        </TweakSection>
        <TweakSection title={t('tw.theme', lang)}>
          <TweakRadio
            value={tweaks.theme}
            onChange={v => setTweak('theme', v)}
            options={[
              { value: 'light', label: t('tw.theme.light', lang) },
              { value: 'dark', label: t('tw.theme.dark', lang) },
              { value: 'blueprint', label: t('tw.theme.bp', lang) },
            ]}
          />
        </TweakSection>
        <TweakSection title={t('tw.accent', lang)}>
          <TweakRadio
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={[
              { value: 'orange', label: t('tw.accent.orange', lang) },
              { value: 'red', label: t('tw.accent.red', lang) },
              { value: 'blue', label: t('tw.accent.blue', lang) },
              { value: 'green', label: t('tw.accent.green', lang) },
            ]}
          />
        </TweakSection>
        <TweakSection title={t('tw.hero', lang)}>
          <TweakRadio
            value={tweaks.heroLayout}
            onChange={v => setTweak('heroLayout', v)}
            options={[
              { value: 'split', label: t('tw.hero.split', lang) },
              { value: 'centered', label: t('tw.hero.center', lang) },
            ]}
          />
        </TweakSection>
        <TweakSection title={t('tw.density', lang)}>
          <TweakRadio
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: t('tw.density.comfy', lang) },
              { value: 'compact', label: t('tw.density.compact', lang) },
            ]}
          />
        </TweakSection>
        <TweakSection title={t('tw.nav', lang)}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {['home', 'products', 'product:mg-100', 'industries', 'insights', 'about', 'rfq'].map(p => (
              <button key={p}
                onClick={() => setPage(p)}
                style={{
                  textAlign: 'left',
                  padding: '6px 10px',
                  border: '1px solid var(--line)',
                  borderRadius: 'var(--radius)',
                  background: page === p ? 'var(--ink)' : 'var(--bg)',
                  color: page === p ? 'var(--bg)' : 'var(--ink-2)',
                  fontFamily: 'JetBrains Mono',
                  fontSize: 11,
                  cursor: 'pointer',
                }}>
                {p === 'product:mg-100' ? '→ product detail' : `→ ${p}`}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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