// app.jsx — Root component. Wires sections + Tweaks panel + language state.

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#00ff41",
  "scanlines": true,
  "glow": true,
  "language": "en",
  "density": "regular",
  "background": "#050706"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(t.language || 'en');

  // Sync lang to tweak so the tweaks panel can change it too.
  useEffect(() => {
    if (t.language && t.language !== lang) setLang(t.language);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [t.language]);

  const updateLang = (l) => {
    setLang(l);
    setTweak('language', l);
  };

  // Theme toggle — apply class to body. Light-mode CSS lives in styles.css,
  // and it overrides any :root inline vars because body is a closer ancestor.
  useEffect(() => {
    if (t.theme === 'light') document.body.classList.add('light-mode');
    else document.body.classList.remove('light-mode');
  }, [t.theme]);

  // Apply accent + bg via CSS custom properties on :root.
  // In light mode we DON'T set --bg / --txt from JS; those are owned by the
  // light-mode CSS rule, and the accent is darkened so it reads on cream.
  useEffect(() => {
    const root = document.documentElement;
    const isLight = t.theme === 'light';
    const hex = t.accent.replace('#', '');
    if (hex.length === 6) {
      const r = parseInt(hex.slice(0, 2), 16);
      const g = parseInt(hex.slice(2, 4), 16);
      const b = parseInt(hex.slice(4, 6), 16);
      if (isLight) {
        // Darken the accent so it's readable on a cream/paper background.
        const dr = Math.floor(r * 0.45);
        const dg = Math.floor(g * 0.45);
        const db = Math.floor(b * 0.45);
        root.style.setProperty('--neon', `rgb(${dr}, ${dg}, ${db})`);
        root.style.setProperty('--neon-dim', `rgb(${Math.floor(dr*0.7)}, ${Math.floor(dg*0.7)}, ${Math.floor(db*0.7)})`);
        root.style.setProperty('--neon-glow', `rgba(${dr}, ${dg}, ${db}, 0.28)`);
        root.style.setProperty('--line', `rgba(${dr}, ${dg}, ${db}, 0.16)`);
        root.style.setProperty('--line-strong', `rgba(${dr}, ${dg}, ${db}, 0.38)`);
        // Clear dark-mode JS overrides so light-mode CSS wins.
        root.style.removeProperty('--txt');
        root.style.removeProperty('--txt-dim');
        root.style.removeProperty('--bg');
      } else {
        root.style.setProperty('--neon', t.accent);
        root.style.setProperty('--neon-dim', `rgb(${Math.floor(r * 0.7)}, ${Math.floor(g * 0.7)}, ${Math.floor(b * 0.7)})`);
        root.style.setProperty('--neon-glow', `rgba(${r}, ${g}, ${b}, 0.55)`);
        root.style.setProperty('--line', `rgba(${r}, ${g}, ${b}, 0.14)`);
        root.style.setProperty('--line-strong', `rgba(${r}, ${g}, ${b}, 0.32)`);
        root.style.setProperty('--txt', `rgb(${Math.min(255, r + 200)}, ${Math.min(255, g + 100)}, ${Math.min(255, b + 200)})`);
        root.style.setProperty('--txt-dim', `rgb(${Math.floor(r * 0.45) + 80}, ${Math.floor(g * 0.45) + 100}, ${Math.floor(b * 0.45) + 85})`);
        root.style.setProperty('--bg', t.background);
      }
    }
  }, [t.accent, t.background, t.theme]);

  // Toggle scanline overlay
  useEffect(() => {
    if (t.scanlines) {
      document.body.classList.remove('no-scanlines');
    } else {
      document.body.classList.add('no-scanlines');
    }
  }, [t.scanlines]);

  // Toggle glow
  useEffect(() => {
    document.body.dataset.glow = t.glow ? 'on' : 'off';
  }, [t.glow]);

  // Density
  useEffect(() => {
    document.body.dataset.density = t.density;
  }, [t.density]);

  return (
    <>
      <Nav lang={lang} setLang={updateLang} theme={t.theme} setTheme={(v) => setTweak('theme', v)} />
      <main>
        <Hero lang={lang} />
        <StatsBar lang={lang} />
        <Features lang={lang} />
        <ToolsShowcase lang={lang} />
        <UseCases lang={lang} />
        <Install lang={lang} />
        <Community lang={lang} />
        <Testimonials lang={lang} />
        <FAQ lang={lang} />
        <CTABanner lang={lang} />
      </main>
      <Footer lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="THEME / CHỦ ĐỀ" />
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakColor
          label="Accent color"
          value={t.accent}
          options={['#00ff41', '#00e8ff', '#ffb000', '#ff2bd6', '#ff3b3b', '#a78bfa']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakColor
          label="Background"
          value={t.background}
          options={['#050706', '#000000', '#0a0a14', '#0d0805']}
          onChange={(v) => setTweak('background', v)}
        />
        <TweakSection label="EFFECTS / HIỆU ỨNG" />
        <TweakToggle label="Scanlines" value={t.scanlines} onChange={(v) => setTweak('scanlines', v)} />
        <TweakToggle label="Neon glow" value={t.glow} onChange={(v) => setTweak('glow', v)} />
        <TweakSection label="CONTENT / NỘI DUNG" />
        <TweakRadio
          label="Language"
          value={lang}
          options={[{ value: 'en', label: 'EN' }, { value: 'vi', label: 'VI' }]}
          onChange={(v) => updateLang(v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </>
  );
}

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