// Ravi Restaurant — App root: routing, tweaks, mount

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "satwaAccent": "#3CB371",
  "szrAccent": "#14532D",
  "showWaFab": true,
  "showDishMarquee": true,
  "denseImagery": "balanced"
}/*EDITMODE-END*/;

function App() {
  // simple hash-routing so refresh keeps you on the page
  const initial = (() => {
    const h = (window.location.hash || '').replace(/^#\/?/, '');
    return h || window.__BYTESGLUE_SHOWCASE_ROUTE || 'home';
  })();
  const [route, setRoute] = React.useState(initial);
  const [register, setRegister] = React.useState('satwa'); // 'satwa' | 'szr'

  // Tweaks state
  const t = window.useTweaks ? window.useTweaks(TWEAKS_DEFAULTS) : [TWEAKS_DEFAULTS, () => {}];
  const tweaks = t[0], setTweak = t[1];

  const onNav = (r) => {
    window.location.hash = '#/' + r;
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  React.useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || '').replace(/^#\/?/, '') || 'home';
      setRoute(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Auto-switch register based on route
  React.useEffect(() => {
    if (route === 'reserve' || route === 'branch/sheikh-zayed-road') setRegister('szr');
  }, [route]);

  // Apply register to <html>
  React.useEffect(() => {
    document.documentElement.classList.toggle('register-szr', register === 'szr');
  }, [register]);

  // Apply tweak accents to CSS variables
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--ravi-green-neon', tweaks.satwaAccent);
    root.style.setProperty('--ravi-green-forest', tweaks.szrAccent);
  }, [tweaks.satwaAccent, tweaks.szrAccent]);

  let page;
  if (route === 'home') page = <HomePage onNav={onNav} register={register} setRegister={setRegister} />;
  else if (route === 'story') page = <StoryPage onNav={onNav} />;
  else if (route === 'menu') page = <MenuPage onNav={onNav} />;
  else if (route === 'branches') page = <BranchesPage onNav={onNav} />;
  else if (route === 'press') page = <PressPage onNav={onNav} />;
  else if (route === 'visit') page = <VisitPage onNav={onNav} />;
  else if (route === 'reserve') page = <ReservePage onNav={onNav} setRegister={setRegister} />;
  else if (route.startsWith('branch/')) {
    const slug = route.slice('branch/'.length);
    page = <BranchDetailPage slug={slug} onNav={onNav} setRegister={setRegister} />;
  }
  else page = <HomePage onNav={onNav} register={register} setRegister={setRegister} />;

  return (
    <>
      <Nav route={route} onNav={onNav} register={register} setRegister={setRegister} />
      <main key={route}>{page}</main>
      <Footer onNav={onNav} />
      {tweaks.showWaFab && <WhatsAppFab />}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Register">
            <window.TweakRadio
              label="Active mode"
              value={register}
              onChange={setRegister}
              options={[
                { value: 'satwa', label: 'Satwa OG' },
                { value: 'szr', label: 'SZR' },
              ]}
            />
            <div style={{ fontSize: 12, opacity: 0.65, marginTop: 8 }}>
              Same brand, two registers. Try toggling — the palette, photo and lede all shift.
            </div>
          </window.TweakSection>
          <window.TweakSection label="Brand">
            <window.TweakColor label="Satwa accent" value={tweaks.satwaAccent} onChange={v => setTweak('satwaAccent', v)}
              options={['#3CB371', '#22C55E', '#16A34A', '#F59E0B']} />
            <window.TweakColor label="SZR accent" value={tweaks.szrAccent} onChange={v => setTweak('szrAccent', v)}
              options={['#14532D', '#6B4423', '#1F7A3A', '#1A1A1A']} />
          </window.TweakSection>
          <window.TweakSection label="Layout">
            <window.TweakToggle label="WhatsApp FAB" value={tweaks.showWaFab} onChange={v => setTweak('showWaFab', v)} />
            <window.TweakToggle label="Dish marquee" value={tweaks.showDishMarquee} onChange={v => setTweak('showDishMarquee', v)} />
          </window.TweakSection>
          <window.TweakSection label="Jump to">
            <div style={{ display: 'grid', gap: 6 }}>
              {[
                { id: 'home', label: 'Home' },
                { id: 'story', label: 'Our Story' },
                { id: 'menu', label: 'Menu' },
                { id: 'branches', label: 'Branches' },
                { id: 'branch/satwa', label: '↳ Satwa flagship' },
                { id: 'branch/sheikh-zayed-road', label: '↳ Sheikh Zayed Road' },
                { id: 'press', label: 'Press wall' },
                { id: 'reserve', label: 'Reserve · SZR' },
                { id: 'visit', label: 'Visit' },
              ].map(r => (
                <window.TweakButton key={r.id} label={r.label} onClick={() => onNav(r.id)} />
              ))}
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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