/* global React, ReactDOM, Header, Footer, Home, ReservePage, FleetPage, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const ACCENTS = {
  Groen:  { a: '#3fe87f', h: '#52ea8c', on: '#06210f', sh: '0 12px 30px -10px rgba(63,232,127,.45)' },
  Wit:    { a: '#f4f6f4', h: '#ffffff', on: '#0a0b0a', sh: '0 12px 30px -12px rgba(0,0,0,.6)' },
  Lime:   { a: '#b6f23a', h: '#c6f55a', on: '#10210a', sh: '0 12px 30px -10px rgba(182,242,58,.4)' },
  Mint:   { a: '#3fe8c0', h: '#52eaca', on: '#06211b', sh: '0 12px 30px -10px rgba(63,232,192,.42)' },
};
const ACCENT_SWATCHES = ['#3fe87f', '#f4f6f4', '#b6f23a', '#3fe8c0'];
const ACCENT_BY_HEX = { '#3fe87f': 'Groen', '#f4f6f4': 'Wit', '#b6f23a': 'Lime', '#3fe8c0': 'Mint' };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "accent": "#3fe87f",
  "corners": "rond"
}/*EDITMODE-END*/;

const HERO_LABELS = { 'Split': 'split', 'Full-bleed': 'full', 'Zoekbalk': 'search' };
const HERO_REV = { split: 'Split', full: 'Full-bleed', search: 'Zoekbalk' };

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useStateApp('home');
  const [reserveVeh, setReserveVeh] = useStateApp('evito');

  const go = (p, hash, data) => {
    if (p === 'reserve' && data) setReserveVeh(data);
    const changed = p !== page;
    setPage(p);
    requestAnimationFrame(() => {
      if (hash && hash !== 'top') {
        const el = document.getElementById(hash);
        if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: changed ? 'auto' : 'smooth' }); return; }
      }
      window.scrollTo({ top: 0, behavior: hash === 'top' && !changed ? 'smooth' : 'auto' });
    });
  };

  // apply accent + corners
  useEffectApp(() => {
    const root = document.documentElement.style;
    const ac = ACCENTS[ACCENT_BY_HEX[t.accent] || 'Groen'] || ACCENTS.Groen;
    root.setProperty('--accent', ac.a);
    root.setProperty('--accent-hover', ac.h);
    root.setProperty('--accent-on', ac.on);
    root.setProperty('--accent-shadow', ac.sh);
    if (t.corners === 'strak') {
      root.setProperty('--r-sm', '6px'); root.setProperty('--r', '8px');
      root.setProperty('--r-lg', '10px'); root.setProperty('--r-xl', '12px'); root.setProperty('--r-pill', '8px');
    } else {
      root.setProperty('--r-sm', '10px'); root.setProperty('--r', '14px');
      root.setProperty('--r-lg', '20px'); root.setProperty('--r-xl', '28px'); root.setProperty('--r-pill', '999px');
    }
  }, [t.accent, t.corners]);

  return (
    <div className="app-root">
      <Header page={page} go={go} />
      {page === 'home' ? <Home go={go} heroVariant={t.heroVariant} />
        : page === 'fleet' ? <FleetPage go={go} />
        : <ReservePage go={go} vehicleId={reserveVeh} />}
      <Footer go={go} />

      <TweaksPanel>
        <TweakSection label="Hero-layout" />
        <TweakRadio label="Variant" value={HERO_REV[t.heroVariant] || 'Split'}
          options={['Split', 'Full-bleed', 'Zoekbalk']}
          onChange={(v) => setTweak('heroVariant', HERO_LABELS[v])} />
        <TweakSection label="Stijl" />
        <TweakColor label="Accentkleur (knoppen)" value={t.accent}
          options={ACCENT_SWATCHES} onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="Hoeken" value={t.corners} options={['rond', 'strak']}
          onChange={(v) => setTweak('corners', v)} />
      </TweaksPanel>
    </div>
  );
}

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