/* global React, ReactDOM, Icons, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */
const { useState: useS, useEffect: useE } = React;
const { UI: UI6 } = window;
const { Header: Hdr, Footer: Ftr, FloatingCall: FC } = UI6;

// EDITMODE defaults — palette + card style
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "alterne",
  "cardStyle": "line"
}/*EDITMODE-END*/;

const PAGES = {
  accueil: window.HomePage,
  services: window.ServicesPage,
  garage: window.GaragePage,
  realisations: window.RealisationsPage,
  contact: window.ContactPage,
};

function App() {
  const [page, setPage] = useS(() => {
    const h = window.location.hash.replace(/^#\/?/, '');
    return PAGES[h] ? h : 'accueil';
  });
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette to document
  useE(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
  }, [t.palette]);

  // Sync hash
  useE(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#\/?/, '');
      if (PAGES[h]) setPage(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const go = (p) => {
    if (!PAGES[p]) return;
    window.location.hash = '/' + p;
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const PageComp = PAGES[page] || PAGES.accueil;

  return (
    <>
      <Hdr page={page} go={go} />
      <main key={page}>
        <PageComp go={go} cardStyle={t.cardStyle} />
      </main>
      <Ftr go={go} />
      <FC />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio
            label="Ambiance"
            value={t.palette}
            options={[
              { value: 'alterne', label: 'Alterné' },
              { value: 'ardoise', label: 'Tout sombre' },
              { value: 'lumineux', label: 'Lumineux' },
            ]}
            onChange={(v) => setT('palette', v)}
          />
        </TweakSection>
        <TweakSection label="Style des cartes services">
          <TweakRadio
            label="Variante"
            value={t.cardStyle}
            options={[
              { value: 'line', label: 'Line' },
              { value: 'filled', label: 'Filled' },
              { value: 'photo', label: 'Photo' },
            ]}
            onChange={(v) => setT('cardStyle', v)}
          />
        </TweakSection>
        <TweakSection label="Navigation rapide">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
            {Object.keys(PAGES).map(p => (
              <button
                key={p}
                onClick={() => go(p)}
                style={{
                  padding: '8px 10px',
                  background: page === p ? '#1E6FD9' : 'rgba(255,255,255,0.06)',
                  color: '#fff',
                  border: '1px solid rgba(255,255,255,0.12)',
                  fontFamily: 'var(--font-mono)',
                  fontSize: 10,
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  cursor: 'pointer',
                }}
              >
                {p}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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