/* global React, ReactDOM, HomePage, ServicesPage, RdvPage, InfoBar, Nav, Footer */
const { useState: useState_a, useEffect: useEffect_a } = React;
const { TweaksPanel: TP, TweakSection: TS, TweakRadio: TR, TweakToggle: TT } = window;

// ---------- Hash router ----------
function parseRoute(hash) {
  const h = (hash || "").replace(/^#\/?/, "");
  if (!h || h === "" || h === "/") return { name: "home" };
  if (h.startsWith("services"))              return { name: "services" };
  if (h.startsWith("rdv"))                   return { name: "rdv" };
  if (h.startsWith("specialites/checkup"))   return { name: "checkup" };
  if (h.startsWith("specialites"))           return { name: "services" };
  if (h.startsWith("connaitre/mission"))     return { name: "mission" };
  if (h.startsWith("connaitre/centre"))      return { name: "centre" };
  if (h.startsWith("connaitre/equipes"))     return { name: "equipes" };
  if (h.startsWith("connaitre"))             return { name: "mission" };
  if (h.startsWith("venir/parcours"))        return { name: "parcours" };
  if (h.startsWith("venir/horaires"))        return { name: "horaires" };
  if (h.startsWith("venir/admission"))       return { name: "admission" };
  if (h.startsWith("venir"))                 return { name: "rdv" };
  if (h.startsWith("opportunites/appels"))   return { name: "tenders" };
  if (h.startsWith("opportunites/recrutement")) return { name: "recrutement" };
  if (h.startsWith("opportunites"))          return { name: "recrutement" };
  return { name: "home", placeholder: h };
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "density": "spacious",
  "theme": "light",
  "lang": "fr"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState_a(parseRoute(window.location.hash));

  useEffect_a(() => {
    const onHash = () => {
      setRoute(parseRoute(window.location.hash));
      window.scrollTo({ top: 0, behavior: "instant" in HTMLElement.prototype ? "instant" : "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Theme on body
  useEffect_a(() => {
    document.body.classList.toggle("theme-dark", t.theme === "dark");
  }, [t.theme]);

  const onLang = (lang) => setTweak("lang", lang);

  return (
    <>
      <InfoBar lang={t.lang || "fr"} onLang={onLang} />
      <Nav route={route.name} />

      {route.name === "home"     && <HomePage tweaks={t} />}
      {route.name === "services" && <ServicesPage tweaks={t} />}
      {route.name === "rdv"      && <RdvPage />}
      {route.name === "mission"  && <MissionPage />}
      {route.name === "centre"   && <CentrePage />}
      {route.name === "equipes"  && <EquipesPage />}
      {route.name === "parcours"  && <ParcoursPage />}
      {route.name === "horaires"  && <HorairesPage />}
      {route.name === "admission" && <AdmissionPage />}
      {route.name === "checkup"   && <CheckupPage />}
      {route.name === "recrutement" && <RecrutementPage />}
      {route.name === "tenders"     && <TendersPage />}

      <Footer />

      <TP title="Tweaks">
        <TS title="Hero d’accueil">
          <TR
            value={t.hero}
            onChange={v => setTweak("hero", v)}
            options={[
              { value: "cinematic", label: "Cinématique" },
              { value: "split",     label: "Split + photo" },
            ]}
          />
        </TS>
        <TS title="Densité de la grille services">
          <TR
            value={t.density}
            onChange={v => setTweak("density", v)}
            options={[
              { value: "spacious", label: "Aéré" },
              { value: "compact",  label: "Compact" },
            ]}
          />
        </TS>
        <TS title="Thème">
          <TR
            value={t.theme}
            onChange={v => setTweak("theme", v)}
            options={[
              { value: "light", label: "Clair" },
              { value: "dark",  label: "Sombre" },
            ]}
          />
        </TS>
      </TP>
    </>
  );
}

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