// Main app: routing + tweaks + mounting

const { useState: useStateA, useEffect: useEffectA } = React;

const ACCENT_PALETTES = {
  saffron:    { accent: '#E0A82E', cta: '#A8421C', label: 'Saffron / Terracotta' },
  terracotta: { accent: '#A8421C', cta: '#A8421C', label: 'Terracotta-led' },
  cardamom:   { accent: '#4A6B3A', cta: '#4A6B3A', label: 'Cardamom green' },
  charcoal:   { accent: '#1F1B17', cta: '#1F1B17', label: 'Charcoal mono' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "saffron"
}/*EDITMODE-END*/;

function parseRoute(hash) {
  const h = (hash || '').replace(/^#\//, '');
  if (!h || h === '') return { name: 'home' };
  if (h.startsWith('branch:')) return { name: 'branch', id: h.slice(7) };
  return { name: h };
}

function App() {
  const initialHash = window.location.hash || (window.__BYTESGLUE_SHOWCASE_ROUTE ? '#/' + window.__BYTESGLUE_SHOWCASE_ROUTE : '');
  const [hash, setHash] = useStateA(initialHash);
  const [orderOpen, setOrderOpen] = useStateA(false);
  const [lang, setLang] = useStateA('en');
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => {
    const onHash = () => { setHash(window.location.hash); window.scrollTo({top:0}); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Apply accent palette as CSS variables
  useEffectA(() => {
    const p = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.saffron;
    document.documentElement.style.setProperty('--accent', p.accent);
    document.documentElement.style.setProperty('--cta', p.cta);
  }, [tweaks.accent]);

  // Expose nav helper globally for child components
  window.DDNav = {
    go: (route) => {
      window.location.hash = '#/' + route;
    },
  };

  const route = parseRoute(hash);
  const openOrder = () => setOrderOpen(true);

  // Hero pages use light nav
  const isLightNav = (route.name === 'home') || (route.name === 'branch') || (route.name === 'catering') || (route.name === 'iftar') || (route.name === 'about');

  // Map screen labels for the host
  const screenLabel = (() => {
    if (route.name === 'home') return '01 Home';
    if (route.name === 'menu') return '02 Menu';
    if (route.name === 'branches') return '03 Branches';
    if (route.name === 'branch') return '04 Branch — ' + route.id;
    if (route.name === 'catering') return '05 Catering';
    if (route.name === 'iftar') return '06 Iftar';
    if (route.name === 'about') return '07 About';
    if (route.name === 'order') return '08 Order';
    return route.name;
  })();

  const { Home, MenuPage, BranchesPage, BranchDetail } = window.DDPages1;
  const { CateringPage, IftarPage, AboutPage, OrderPage } = window.DDPages2;

  return (
    <div data-screen-label={screenLabel}>
      <Nav route={route.name === 'branch' ? 'branches' : route.name} light={isLightNav} onOrder={openOrder} lang={lang} setLang={setLang} />

      <main>
        {route.name === 'home'      && <Home onOrder={openOrder} />}
        {route.name === 'menu'      && <MenuPage />}
        {route.name === 'branches'  && <BranchesPage />}
        {route.name === 'branch'    && <BranchDetail branchId={route.id} onOrder={openOrder} />}
        {route.name === 'catering'  && <CateringPage />}
        {route.name === 'iftar'     && <IftarPage />}
        {route.name === 'about'     && <AboutPage />}
        {route.name === 'order'     && <OrderPage onOrder={openOrder} />}
      </main>

      <Footer onOrder={openOrder} />

      <BranchPicker open={orderOpen} onClose={() => setOrderOpen(false)} />
      <WhatsAppFab />
      <MobileBar onOrder={openOrder} />

      <DDTweaks tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

// Tweaks panel — color accent direction
function DDTweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakSelect } = window;
  if (!TweaksPanel) return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent palette">
        <TweakSelect
          label="Direction"
          value={tweaks.accent}
          options={[
            { value: 'saffron',    label: 'Saffron / terracotta (default)' },
            { value: 'terracotta', label: 'Terracotta-led' },
            { value: 'cardamom',   label: 'Cardamom green' },
            { value: 'charcoal',   label: 'Charcoal mono' },
          ]}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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