/* global React, ReactDOM, VS_DATA, Nav, Footer, PageFrame,
   HomePage, PortfolioPage, AboutPage, ServicesPage, ContactPage,
   useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gridVariant": "masonry"
}/*EDITMODE-END*/;

const ROUTES = ['home', 'portfolio', 'about', 'services', 'contact'];

function App() {
  // ── theme ────────────────────────────────────────────────────────────────
  const [theme, setTheme] = useState(() => {
    const saved = localStorage.getItem('vs-theme');
    if (saved === 'light' || saved === 'dark') return saved;
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  });
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem('vs-theme', theme);
  }, [theme]);

  // ── language ─────────────────────────────────────────────────────────────
  const [lang, setLang] = useState(() => localStorage.getItem('vs-lang') || 'he');
  useEffect(() => {
    const t = VS_DATA.i18n[lang];
    document.documentElement.lang = lang;
    document.documentElement.dir = t.dir;
    document.documentElement.dataset.lang = lang;
    localStorage.setItem('vs-lang', lang);
  }, [lang]);

  // ── routing (hash-based) ─────────────────────────────────────────────────
  const [route, setRouteState] = useState(() => fromHash() || 'home');
  function setRoute(r) {
    if (window.location.hash !== '#/' + r) window.location.hash = '#/' + r;
    setRouteState(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }
  useEffect(() => {
    function onHash() {
      const r = fromHash();
      if (r && r !== route) { setRouteState(r); window.scrollTo({ top: 0, behavior: 'instant' }); }
    }
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, [route]);

  // ── tweaks ───────────────────────────────────────────────────────────────
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const t = VS_DATA.i18n[lang];

  let Page;
  switch (route) {
    case 'portfolio': Page = <PortfolioPage t={t} lang={lang} gridVariant={tw.gridVariant} />; break;
    case 'about':     Page = <AboutPage t={t} lang={lang} />; break;
    case 'services':  Page = <ServicesPage t={t} setRoute={setRoute} />; break;
    case 'contact':   Page = <ContactPage t={t} lang={lang} />; break;
    default:          Page = <HomePage t={t} lang={lang} setRoute={setRoute} />;
  }

  return (
    <>
      <Nav route={route} setRoute={setRoute}
           lang={lang} setLang={setLang}
           theme={theme} setTheme={setTheme}
           t={t} />

      <PageFrame id={route + '-' + lang}>
        {Page}
      </PageFrame>

      <Footer t={t} route={route} setRoute={setRoute} lang={lang} />

      <TweaksPanel>
        <TweakSection label="Portfolio" />
        <TweakRadio label="Grid"
                    value={tw.gridVariant}
                    options={['masonry', 'strict', 'cinematic']}
                    onChange={(v) => setTweak('gridVariant', v)} />
      </TweaksPanel>
    </>
  );
}

function fromHash() {
  const h = window.location.hash.replace(/^#\/?/, '');
  return ROUTES.includes(h) ? h : null;
}

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