/* global React, ReactDOM */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Fraunces",
  "bodyFont": "Inter Tight",
  "accent": "#B5694F",
  "vetColor": "#1E2A78",
  "showEmergencyPill": true
}/*EDITMODE-END*/;

const VET_DEEP_MAP = {
  '#1E2A78': '#0B1454',
  '#1F3A5F': '#0B2240',
  '#0E1A2E': '#040A18',
  '#1F4F3A': '#0E2F22',
};

function App() {
  const [route, setRouteState] = useStateA("home");
  const [location, setLocation] = useStateA("jumeirah");
  const [vetSlug, setVetSlug] = useStateA(null);
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  function setRoute(r) {
    setRouteState(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  // apply tweak CSS variables
  useEffectA(() => {
    const root = document.documentElement.style;
    root.setProperty('--font-display', `"${tweaks.displayFont}", "Times New Roman", serif`);
    root.setProperty('--font-body', `"${tweaks.bodyFont}", "Helvetica Neue", Arial, sans-serif`);
    root.setProperty('--vet', tweaks.vetColor);
    root.setProperty('--vet-deep', VET_DEEP_MAP[tweaks.vetColor] || '#0B1454');
    root.setProperty('--care', tweaks.accent);
  }, [tweaks]);

  const isObjectRoute = typeof route === 'object';
  const routeName = isObjectRoute ? route.type : route;

  function openVet(slug) { setVetSlug(slug); }
  function closeVet() { setVetSlug(null); }

  return (
    <React.Fragment>
      <window.TopStrip />
      <window.Nav route={routeName} setRoute={setRoute} location={location} setLocation={setLocation} />

      <main>
        {route === "home" && (
          <window.HomePage setRoute={setRoute} location={location} setLocation={setLocation} openVet={openVet} />
        )}
        {route === "services" && (
          <window.ServicesPage setRoute={setRoute} />
        )}
        {isObjectRoute && route.type === "service" && (
          <window.ServiceDetail id={route.id} setRoute={setRoute} />
        )}
        {route === "team" && (
          <window.TeamPage openVet={openVet} />
        )}
        {route === "locations" && (
          <window.LocationsPage location={location} setLocation={setLocation} setRoute={setRoute} />
        )}
        {isObjectRoute && route.type === "location" && (
          <window.LocationsPage location={location} setLocation={setLocation} setRoute={setRoute} focusId={route.id} />
        )}
        {route === "emergency" && (
          <window.EmergencyPage setRoute={setRoute} />
        )}
        {route === "about" && (
          <window.AboutPage setRoute={setRoute} />
        )}
        {route === "book" && (
          <window.BookPage setRoute={setRoute} location={location} setLocation={setLocation} />
        )}
      </main>

      <window.Footer setRoute={setRoute} />

      {tweaks.showEmergencyPill !== false && <window.EmergencyPill />}

      {vetSlug && <window.VetModal slug={vetSlug} onClose={closeVet} setRoute={setRoute} />}

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Type" />
        <window.TweakRadio
          label="Display"
          value={tweaks.displayFont}
          onChange={(v) => setTweak('displayFont', v)}
          options={['Fraunces', 'Playfair Display', 'Inter Tight']}
        />
        <window.TweakSelect
          label="Body"
          value={tweaks.bodyFont}
          onChange={(v) => setTweak('bodyFont', v)}
          options={['Inter Tight', 'Inter', 'Manrope', 'DM Sans']}
        />

        <window.TweakSection label="Palette" />
        <window.TweakColor
          label="Primary navy"
          value={tweaks.vetColor}
          onChange={(v) => setTweak('vetColor', v)}
          options={['#1E2A78', '#1F3A5F', '#0E1A2E', '#1F4F3A']}
        />
        <window.TweakColor
          label="Care accent"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#B5694F', '#6B8A6F', '#C29435', '#8E3349']}
        />

        <window.TweakSection label="Behaviour" />
        <window.TweakToggle
          label="Floating emergency pill"
          value={tweaks.showEmergencyPill !== false}
          onChange={(v) => setTweak('showEmergencyPill', v)}
        />
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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