// ============================================================
// Enfield Royal Clinic — App shell + Router + Tweaks
// ============================================================
// Globals available from prior scripts: React, useState, useEffect, etc.,
// RouterProvider/useRouter/Link/Navbar/Footer/MobileBottomBar (components.jsx),
// HomePage/TreatmentsHubPage/… (pages.jsx),
// useTweaks/TweaksPanel/TweakSection/TweakRadio/TweakToggle (tweaks-panel.jsx).

const App = () => {
  const [t, setTweak] = useTweaks(window.ERC_TWEAKS);
  window.__tweaks = t;

  // Apply tweaks to root
  React.useEffect(() => {
    document.documentElement.dataset.palette = t.palette || 'navy';
    document.documentElement.dir = t.rtlPreview ? 'rtl' : 'ltr';
    if (!t.displaySerif) {
      document.documentElement.style.setProperty('--serif', "'Manrope', -apple-system, sans-serif");
    } else {
      document.documentElement.style.removeProperty('--serif');
    }
    document.body.classList.toggle('erc-hide-compliance', !t.showCompliance);
  }, [t.palette, t.rtlPreview, t.displaySerif, t.showCompliance]);

  return (
    <RouterProvider>
      <Navbar />
      <main>
        <RouteSwitch />
      </main>
      <Footer />
      <MobileBottomBar />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio
            label="System"
            value={t.palette}
            options={[
              { value: 'navy', label: 'Navy' },
              { value: 'forest', label: 'Forest' },
              { value: 'graphite', label: 'Graphite' },
            ]}
            onChange={(v) => setTweak('palette', v)}
          />
        </TweakSection>

        <TweakSection label="Typography">
          <TweakToggle
            label="Editorial serif display"
            value={!!t.displaySerif}
            onChange={(v) => setTweak('displaySerif', v)}
          />
        </TweakSection>

        <TweakSection label="Doctors grid">
          <TweakToggle
            label="Dense (5-up)"
            value={!!t.denseDoctors}
            onChange={(v) => setTweak('denseDoctors', v)}
          />
        </TweakSection>

        <TweakSection label="Compliance">
          <TweakToggle
            label="Show 'to verify' tags"
            value={!!t.showCompliance}
            onChange={(v) => setTweak('showCompliance', v)}
          />
        </TweakSection>

        <TweakSection label="Localisation">
          <TweakToggle
            label="Preview Arabic RTL"
            value={!!t.rtlPreview}
            onChange={(v) => setTweak('rtlPreview', v)}
          />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        body.erc-hide-compliance .chip-warn { display: none !important; }
      `}</style>
    </RouterProvider>
  );
};

const RouteSwitch = () => {
  const { path } = useRouter();

  // /treatments/<slug>
  const m = path.match(/^\/treatments\/([^/?#]+)/);
  if (m) return <TreatmentDetailPage slug={m[1]} />;

  // Strip query strings for matching
  const base = path.split('?')[0].split('#')[0];

  switch (base) {
    case '/': return <HomePage />;
    case '/treatments': return <TreatmentsHubPage />;
    case '/doctors': return <DoctorsPage />;
    case '/before-after': return <BeforeAfterPage />;
    case '/about': return <AboutPage />;
    case '/locations': return <LocationsPage />;
    case '/contact': return <ContactPage />;
    case '/book': return <BookPage />;
    default: return <NotFoundPage />;
  }
};

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