/* global React, ReactDOM, CONTENT, Cursor, Nav, Footer, HomePage, ServicesPage, AboutPage, ContactPage, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "violet",
  "heroLayout": "editorial",
  "intensity": "balanced"
}/*EDITMODE-END*/;

const PALETTES = {
  violet:  { bg: "0.13 0.025 285", accent: "0.72 0.24 295", accent2: "0.82 0.16 220" },
  emerald: { bg: "0.13 0.025 165", accent: "0.78 0.22 165", accent2: "0.85 0.16 200" },
  amber:   { bg: "0.13 0.02 60",   accent: "0.80 0.20 70",  accent2: "0.78 0.16 30"  },
  mono:    { bg: "0.13 0.005 270", accent: "0.85 0.005 270", accent2: "0.65 0.01 270" }
};

function App() {
  const [page, setPage] = useState('home');
  const [lang, setLang] = useState('pt');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [transitioning, setTransitioning] = useState(false);

  // Apply palette tweak to CSS variables
  useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.violet;
    const root = document.documentElement;
    root.style.setProperty('--bg-0', `oklch(${p.bg})`);
    root.style.setProperty('--bg-1', `oklch(${p.bg.replace(/^[\d.]+/, m => (parseFloat(m) + 0.04).toFixed(2))})`);
    root.style.setProperty('--bg-2', `oklch(${p.bg.replace(/^[\d.]+/, m => (parseFloat(m) + 0.09).toFixed(2))})`);
    root.style.setProperty('--violet', `oklch(${p.accent})`);
    root.style.setProperty('--violet-glow', `oklch(${p.accent} / 0.45)`);
    root.style.setProperty('--cyan', `oklch(${p.accent2})`);
    root.style.setProperty('--cyan-glow', `oklch(${p.accent2} / 0.4)`);
  }, [tweaks.palette]);

  // Tweaks host protocol
  useEffect(() => {
    const onMessage = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMessage);
    window.parent.postMessage({type: '__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMessage);
  }, []);

  // Page navigation with wipe transition
  const navigate = (newPage) => {
    if (newPage === page) return;
    setTransitioning(true);
    setTimeout(() => {
      setPage(newPage);
      window.scrollTo(0, 0);
    }, 450);
    setTimeout(() => setTransitioning(false), 950);
  };

  const t = CONTENT[lang];

  let pageEl;
  if (page === 'home') pageEl = <HomePage t={t} setPage={navigate} />;
  else if (page === 'services') pageEl = <ServicesPage t={t} setPage={navigate} />;
  else if (page === 'about') pageEl = <AboutPage t={t} setPage={navigate} />;
  else if (page === 'contact') pageEl = <ContactPage t={t} setPage={navigate} />;

  const pageLabel = { home: '01 · Home', services: '02 · Servicos', about: '03 · Sobre', contact: '04 · Contato' }[page];

  return (
    <>
      <Cursor />
      <div className="bg-grid"></div>
      <div className="bg-glow"></div>

      <div className={`page-wipe ${transitioning ? 'active' : ''}`}></div>

      <div className="app" data-screen-label={pageLabel}>
        <Nav page={page} setPage={navigate} lang={lang} setLang={setLang} t={t} />
        <main key={page + lang} className="page-enter page-enter-active">
          {pageEl}
        </main>
        <Footer t={t} setPage={navigate} />
      </div>

      {tweaksOpen && (
        <TweaksPanel title="Tweaks" onClose={() => setTweaksOpen(false)}>
          <TweakSection title="Paleta">
            <TweakRadio
              label="Cor"
              value={tweaks.palette}
              onChange={v => setTweak('palette', v)}
              options={[
                { value: 'violet', label: 'Violeta' },
                { value: 'emerald', label: 'Esmeralda' },
                { value: 'amber', label: 'Âmbar' },
                { value: 'mono', label: 'Mono' }
              ]}
            />
          </TweakSection>
          <TweakSection title="Hero">
            <TweakRadio
              label="Layout"
              value={tweaks.heroLayout}
              onChange={v => setTweak('heroLayout', v)}
              options={[
                { value: 'editorial', label: 'Editorial' },
                { value: 'centered', label: 'Centrado' }
              ]}
            />
          </TweakSection>
          <TweakSection title="Intensidade">
            <TweakRadio
              label="Glow & partículas"
              value={tweaks.intensity}
              onChange={v => setTweak('intensity', v)}
              options={[
                { value: 'subtle', label: 'Sutil' },
                { value: 'balanced', label: 'Balanceado' },
                { value: 'intense', label: 'Intenso' }
              ]}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

// Apply intensity globally via CSS class
function IntensityWrapper() {
  return null;
}

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