/* App — wires everything together */

const { useState: useStateApp, useEffect: useEffectApp } = React;

const ACCENT_OPTIONS = [
  ['#FFB14E', 'oklch(78% 0.17 65)'],   // amber (default)
  ['#FF6B6B', 'oklch(72% 0.19 25)'],   // coral
  ['#86E7B8', 'oklch(82% 0.16 155)'],  // mint
  ['#A1A6FF', 'oklch(75% 0.15 280)'],  // iris
  ['#F4F0EA', 'oklch(95% 0.01 80)'],   // mono
];

function applyTheme(t) {
  const root = document.documentElement;
  root.dataset.theme = t.dark === false ? 'light' : 'dark';
  const accent = ACCENT_OPTIONS.find(o => o[0] === t.accent);
  if (accent) {
    root.style.setProperty('--accent', accent[1]);
  }
  document.body.style.fontSize = (t.fontScale || 16) + 'px';
}

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "dark": true,
    "accent": "#FFB14E",
    "fontScale": 16,
    "motion": "full",
    "cursor": true
  }/*EDITMODE-END*/;

  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateApp(window.__detectLang());

  const [data, setData] = useStateApp(window.__PORTFOLIO_DATA__);
  const [loading, setLoading] = useStateApp(!window.__PORTFOLIO_DATA__?.esperienze);

  useEffectApp(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  useEffectApp(() => {
    const onReady = () => {
      setData({ ...window.__PORTFOLIO_DATA__ });
      setTimeout(() => setLoading(false), 600);
    };
    if (window.__PORTFOLIO_DATA__?.esperienze) {
      onReady();
    } else {
      window.addEventListener('portfolio-data-ready', onReady);
      return () => window.removeEventListener('portfolio-data-ready', onReady);
    }
  }, []);

  useEffectApp(() => {
    applyTheme(t);
    if (!t.cursor) {
      document.body.classList.add('no-cursor');
      document.body.style.cursor = 'auto';
    } else {
      document.body.classList.remove('no-cursor');
      document.body.style.cursor = '';
    }
    if (t.motion === 'reduced') {
      document.body.classList.add('reduced-motion');
    } else {
      document.body.classList.remove('reduced-motion');
    }
  }, [t]);

  // Re-run reveal observation whenever data lands or lang changes
  useReveal(data?.esperienze + '|' + lang);

  const tr = (k) => window.__t(lang, k);

  return (
    <React.Fragment>
      {t.cursor !== false && <Cursor />}
      <Loader gone={!loading} />
      <Nav lang={lang} setLang={setLang} />

      <HeroSection lang={lang} />

      <Marquee items={[
        tr('marquee.role'),
        tr('marquee.webdev'),
        tr('marquee.mobile'),
        tr('marquee.uiux'),
        tr('marquee.branding'),
        tr('marquee.marketing'),
        tr('marquee.video'),
        tr('marquee.ai'),
        tr('marquee.event'),
        tr('marquee.ecom'),
      ]} key={'m1-'+lang} />

      <AboutSection lang={lang} />
      <SkillsSection lang={lang} />
      <ExperienceSection data={data?.esperienze} lang={lang} />
      <NetworkSection lang={lang} />
      <ProjectsSection data={data?.progetti} lang={lang} />

      <Marquee items={[
        tr('marquee2.1'),
        tr('marquee2.2'),
        tr('marquee2.3'),
        tr('marquee2.4'),
      ]} key={'m2-'+lang} />

      <ContactSection lang={lang} />
      <Footer lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language" />
        <TweakRadio label="Lang" value={lang} options={['it', 'en']} onChange={setLang} />
        <TweakSection label="Tema" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak('dark', v)} />
        <TweakColor
          label="Accento"
          value={t.accent}
          options={ACCENT_OPTIONS.map(o => o[0])}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Typography" />
        <TweakSlider
          label="Scala testo"
          value={t.fontScale}
          min={14} max={20} step={1} unit="px"
          onChange={(v) => setTweak('fontScale', v)}
        />
        <TweakSection label="Interazione" />
        <TweakRadio
          label="Motion"
          value={t.motion}
          options={['full', 'reduced']}
          onChange={(v) => setTweak('motion', v)}
        />
        <TweakToggle
          label="Cursore custom"
          value={t.cursor}
          onChange={(v) => setTweak('cursor', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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