/* Root: app, routing, tweaks panel */

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

function App() {
  const t = window.useTweaks(window.TWEAK_DEFAULTS);
  const [tweaks, setTweak] = [t[0], t[1]];

  // route state — supports 'home' | 'inventory' | 'vehicle' | 'services' | 'export' | 'contact'
  const [route, setRoute] = useStateA(() => {
    const h = window.location.hash.slice(1).split('/');
    return h[0] || 'home';
  });
  const [vehicleId, setVehicleId] = useStateA(() => window.location.hash.split('/')[1] || VEHICLES[0].id);

  const go = useCallbackA((r, id) => {
    setRoute(r);
    if (id) setVehicleId(id);
    window.location.hash = id ? `${r}/${id}` : r;
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, []);

  useEffectA(() => {
    const onHash = () => {
      const [r, id] = window.location.hash.slice(1).split('/');
      setRoute(r || 'home');
      if (id) setVehicleId(id);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // lead modal
  const [lead, setLead] = useStateA({ open: false, ctx: null });
  const openLead = useCallbackA((ctx) => setLead({ open: true, ctx }), []);
  const closeLead = useCallbackA(() => setLead({ open: false, ctx: null }), []);

  // tweaks → html data attrs
  useEffectA(() => {
    const el = document.documentElement;
    el.setAttribute('data-palette', tweaks.palette);
    el.setAttribute('data-accent', tweaks.accent);
    el.setAttribute('data-display', tweaks.displayFont);
    el.setAttribute('data-hero', tweaks.heroTreatment);
    el.setAttribute('data-density', tweaks.density);
    el.setAttribute('dir', tweaks.locale === 'ar' ? 'rtl' : 'ltr');
    el.setAttribute('lang', tweaks.locale);
  }, [tweaks]);

  // set locale via tweaks: keep them in sync
  const setLocale = (loc) => setTweak('locale', loc);
  const locale = tweaks.locale === 'ar' ? 'ar' : 'en';

  return (
    <>
      <TopNotice items={I18N[locale].notice} />
      <Navbar route={route} go={go} locale={locale} setLocale={setLocale} openLead={openLead} />

      {route === 'home' && <ScreenHome key="home" go={go} openLead={openLead} locale={locale} />}
      {route === 'inventory' && <ScreenInventory key="inv" go={go} locale={locale} />}
      {route === 'vehicle' && <ScreenVehicle key={'veh-' + vehicleId} id={vehicleId} go={go} openLead={openLead} locale={locale} />}
      {route === 'services' && <ScreenServices key="svc" openLead={openLead} />}
      {route === 'export' && <ScreenExport key="exp" openLead={openLead} />}
      {route === 'contact' && <ScreenContact key="ctt" openLead={openLead} />}

      <Footer go={go} locale={locale} />
      <FabStack />
      <LeadModal open={lead.open} onClose={closeLead} ctx={lead.ctx} locale={locale} />

      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

/* ---------- Tweaks panel UI ---------- */
function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakRadio label="Mode" value={tweaks.palette}
        onChange={(v) => setTweak('palette', v)}
        options={[
          { value: 'noir', label: 'Noir' },
          { value: 'hybrid', label: 'Hybrid' },
          { value: 'editorial', label: 'Light' },
        ]} />
      <TweakRadio label="Accent" value={tweaks.accent}
        onChange={(v) => setTweak('accent', v)}
        options={[
          { value: 'champagne', label: 'Champagne' },
          { value: 'platinum', label: 'Platinum' },
          { value: 'copper', label: 'Copper' },
        ]} />

      <TweakSection label="Typography" />
      <TweakRadio label="Display" value={tweaks.displayFont}
        onChange={(v) => setTweak('displayFont', v)}
        options={[
          { value: 'serif', label: 'Serif' },
          { value: 'grotesque', label: 'Grotesque' },
        ]} />

      <TweakSection label="Hero" />
      <TweakRadio label="Treatment" value={tweaks.heroTreatment}
        onChange={(v) => setTweak('heroTreatment', v)}
        options={[
          { value: 'still', label: 'Still' },
          { value: 'loop', label: 'Loop' },
          { value: 'split', label: 'Split' },
        ]} />

      <TweakSection label="Locale & Density" />
      <TweakRadio label="Language" value={tweaks.locale}
        onChange={(v) => setTweak('locale', v)}
        options={[
          { value: 'en', label: 'EN' },
          { value: 'ar', label: 'AR · RTL' },
        ]} />
      <TweakRadio label="Density" value={tweaks.density}
        onChange={(v) => setTweak('density', v)}
        options={[
          { value: 'cinematic', label: 'Cinematic' },
          { value: 'compact', label: 'Compact' },
        ]} />
    </TweaksPanel>
  );
}

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