/* AUSIEGE · Site responsive entry point (v2).
   - Picks the right screen variant (desktop / tablet / mobile) via matchMedia.
   - Hash routing with universe-aware paths:
       #home                              (neutral landing, split-hero Femme/Homme)
       #training, #contact, #merch        (common, no universe)
       #femme              → femme/services (default)
       #femme/services  #femme/pricing  #femme/team  #femme/gallery  #femme/booking
       #homme/...
   - Overlay: menu (full screen). « Réserver » redirige vers Planity (nouvel onglet).
   - data-universe on the root so universe.css theming kicks in. */

const { useState, useEffect, useCallback } = React;

const BP_DESKTOP_MQ = "(min-width: 1200px)";
const BP_TABLET_MQ  = "(min-width: 720px) and (max-width: 1199px)";

const detectBp = () => {
  if (typeof window === "undefined") return "desktop";
  if (window.matchMedia(BP_DESKTOP_MQ).matches) return "desktop";
  if (window.matchMedia(BP_TABLET_MQ).matches)  return "tablet";
  return "mobile";
};

const COMMON_PAGES   = ["home", "training", "contact", "merch", "produit"];
const UNIVERSE_PAGES = ["services", "pricing", "team", "gallery"];

/* Parse a hash like "femme/services" or "home" or "homme" into { page, universe }. */
const parseHash = () => {
  const raw = (location.hash || "").replace("#", "").split("?")[0];
  if (!raw) return { page: "home", universe: null };
  const parts = raw.split("/");
  const first = parts[0];
  if (first === "femme" || first === "homme") {
    const sub = parts[1] && UNIVERSE_PAGES.includes(parts[1]) ? parts[1] : "services";
    return { page: sub, universe: first };
  }
  if (COMMON_PAGES.includes(first)) return { page: first, universe: null };
  return { page: "home", universe: null };
};

const buildHash = (page, universe) => {
  if (!universe) return "#" + (COMMON_PAGES.includes(page) ? page : "home");
  return "#" + universe + (UNIVERSE_PAGES.includes(page) ? "/" + page : "/services");
};

const SiteApp = () => {
  const [bp, setBp]      = useState(detectBp);
  const [route, setRoute] = useState(parseHash);
  const [overlay, setOverlay] = useState(null); /* null | "menu" (réservation → Planity, nouvel onglet) */

  /* Breakpoint listener */
  useEffect(() => {
    const dq = window.matchMedia(BP_DESKTOP_MQ);
    const tq = window.matchMedia(BP_TABLET_MQ);
    const update = () => setBp(detectBp());
    dq.addEventListener?.("change", update);
    tq.addEventListener?.("change", update);
    return () => {
      dq.removeEventListener?.("change", update);
      tq.removeEventListener?.("change", update);
    };
  }, []);

  /* Hash routing */
  useEffect(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  /* Navigation handlers — `target` is a slug like "home", "femme",
     "femme/services", "homme/pricing", or a bare page name like "services"
     (in which case current universe is preserved). */
  const navigate = useCallback((target) => {
    if (!target) return;
    let nextPage, nextUni;
    if (typeof target === "object") {
      nextPage = target.page; nextUni = target.universe ?? null;
    } else if (target.includes("/")) {
      const [u, p] = target.split("/");
      nextUni = (u === "femme" || u === "homme") ? u : null;
      nextPage = UNIVERSE_PAGES.includes(p) ? p : "services";
    } else if (target === "femme" || target === "homme") {
      nextUni = target; nextPage = "services";
    } else if (COMMON_PAGES.includes(target)) {
      nextUni = null; nextPage = target;
    } else if (UNIVERSE_PAGES.includes(target)) {
      /* Preserve current universe; default to femme if none. */
      nextUni = route.universe || "femme";
      nextPage = target;
    } else {
      nextUni = null; nextPage = "home";
    }
    const hash = buildHash(nextPage, nextUni);
    if (location.hash !== hash) location.hash = hash;
    setRoute({ page: nextPage, universe: nextUni });
    setOverlay(null);
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [route.universe]);

  const switchUniverse = useCallback((u) => {
    if (u !== "femme" && u !== "homme") return;
    /* Keep the same page if it's a universe-page, otherwise land on services. */
    const page = UNIVERSE_PAGES.includes(route.page) ? route.page : "services";
    navigate(`${u}/${page}`);
  }, [route.page, navigate]);

  /* « Réserver » redirige vers l'app Planity du salon (nouvel onglet),
     plus de simulateur interne. */
  const openBooking   = useCallback(() => { openPlanity(); }, []);
  const openMenu      = useCallback(() => setOverlay("menu"), []);
  const closeOverlays = useCallback(() => setOverlay(null), []);

  /* Expose globally so chrome components installed in any screen can call back. */
  useEffect(() => {
    window.ausiegeNavigate        = navigate;
    window.ausiegeSwitchUniverse  = switchUniverse;
    window.ausiegeOpenBooking     = openBooking;
    window.ausiegeOpenMenu        = openMenu;
    window.ausiegeCloseOverlays   = closeOverlays;
    window.ausiegeCurrentUniverse = () => route.universe;
  }, [navigate, switchUniverse, openBooking, openMenu, closeOverlays, route.universe]);

  /* Body scroll lock when an overlay is open */
  useEffect(() => {
    document.body.style.overflow = overlay ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [overlay]);

  /* Esc closes any open overlay */
  useEffect(() => {
    if (!overlay) return;
    const onKey = (e) => { if (e.key === "Escape") closeOverlays(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [overlay, closeOverlays]);

  /* Event delegation for in-screen CTAs we don't want to wire individually:
     - Overlay close buttons.
     - Menu list items (route by name → page/universe).
     - "Réserver Femme" / "Réserver Homme" / generic "Réserver" buttons.
     - "Entrer dans l'univers ..." CTAs on the home page.
     - Hero-split sides (with aria-label="Entrer dans l'univers Femme/Homme"). */
  useEffect(() => {
    const NAME_TO_TARGET = {
      "Accueil":          "home",
      "Femme":            "femme",
      "Homme":            "homme",
      "Prestations":      "services",
      "Tarifs":           "pricing",
      "Équipe":           "team",
      "Equipe":           "team",
      "Galerie":          "gallery",
      "Formation":        "training",
      "Formation pro":    "training",
      "Contact":          "contact",
      "Merch":            "merch",
      "Produit":          "produit",
    };
    const onClick = (e) => {
      const t = e.target;

      /* Close inside overlays */
      if (t.closest(".d-menu__close, .t-menu__close, .menu__close, .d-book__close, .t-book__close, .book__close")) {
        e.preventDefault();
        closeOverlays();
        return;
      }

      /* Menu items → navigate */
      const li = t.closest(".d-menu__li, .t-menu__li, .menu__li");
      if (li) {
        const nameEl = li.querySelector(".d-menu__name, .t-menu__name, .menu__name");
        const name = nameEl ? nameEl.textContent.trim() : "";
        const target = NAME_TO_TARGET[name];
        if (target) { e.preventDefault(); navigate(target); }
        return;
      }

      /* Home page "Entrer dans l'univers ..." universe doors */
      const heroSide = t.closest(".d-hero-split__side, .m-hero-split .d-hero-split__side");
      if (heroSide) {
        const label = heroSide.getAttribute("aria-label") || "";
        if (/femme/i.test(label)) { e.preventDefault(); navigate("femme"); return; }
        if (/homme/i.test(label)) { e.preventDefault(); navigate("homme"); return; }
      }

      /* "Entrer dans l'univers ..." link on home cards */
      const uniCta = t.closest(".d-uni__cta");
      if (uniCta) {
        const card = uniCta.closest(".d-uni__card");
        const txt = card ? card.textContent : "";
        if (/femme/i.test(txt) && !/homme/i.test(txt.split("Entrer")[0] || "")) {
          /* Try by card index */
        }
        const isFirst = card && card === card.parentElement.firstElementChild;
        e.preventDefault();
        navigate(isFirst ? "femme" : "homme");
        return;
      }

      /* Tout bouton « Réserver … » → ouvre Planity (nouvel onglet).
         Planity ne permettant pas de présélectionner l'univers ni le coiffeur
         via une URL stable, on ouvre la page de réservation du salon. */
      const btn = t.closest("button");
      if (!btn) return;
      const txt = (btn.textContent || "").trim();
      if (/r[ée]serv/i.test(txt)) {
        e.preventDefault();
        openBooking();
      }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, [navigate, openBooking, closeOverlays]);

  /* Choose the screen component for the current bp + page + universe */
  const Screen = pickScreen(bp, route.page, route.universe);
  const MenuOverlay = bp === "desktop" ? window.MenuD : bp === "tablet" ? window.MenuT : window.MobileMenu;

  return (
    <div
      className="site-root"
      data-bp={bp}
      data-page={route.page}
      data-universe={route.universe || undefined}
    >
      {Screen ? <Screen key={`${bp}-${route.universe || "_"}-${route.page}`} universe={route.universe || undefined}/> : null}

      {overlay === "menu" && MenuOverlay && (
        <div className="site-overlay" onClick={(e) => { if (e.target === e.currentTarget) closeOverlays(); }}>
          <div className="site-overlay__panel"><MenuOverlay/></div>
        </div>
      )}
    </div>
  );
};

/* ------------------------------------------------------------------
   Screen picker — returns a React component (or null).
   Common pages (home, training, contact) don't take a universe prop.
   Universe pages do. Gallery is desktop-only; on tablet/mobile we still
   render GalleryD (responsive overrides in responsive.css adapt the grid).
   ------------------------------------------------------------------ */
function pickScreen(bp, page, universe) {
  /* Pages communes */
  if (page === "home") {
    return bp === "desktop" ? window.HomeD : bp === "tablet" ? window.HomeT : window.Home;
  }
  if (page === "training") {
    return bp === "desktop" ? window.TrainingD : bp === "tablet" ? window.TrainingT : window.Training;
  }
  if (page === "contact") {
    return bp === "desktop" ? window.ContactD : bp === "tablet" ? window.ContactT : window.Contact;
  }
  if (page === "merch") {
    return bp === "desktop" ? window.MerchD : bp === "tablet" ? window.MerchT : window.Merch;
  }
  if (page === "produit") {
    return bp === "desktop" ? window.ProduitD : bp === "tablet" ? window.ProduitT : window.Produit;
  }
  /* Pages d'univers — fallback femme si universe pas défini */
  const uni = universe || "femme";
  if (page === "services") {
    return bp === "desktop" ? window.ServicesD : bp === "tablet" ? window.ServicesT : window.Services;
  }
  if (page === "pricing") {
    return bp === "desktop" ? window.PricingD : bp === "tablet" ? window.PricingT : window.Pricing;
  }
  if (page === "team") {
    return bp === "desktop" ? window.TeamD : bp === "tablet" ? window.TeamT : window.Team;
  }
  if (page === "gallery") {
    /* Desktop-only design; reused on tablet/mobile with CSS overrides */
    return window.GalleryD;
  }
  /* Fallback */
  return bp === "desktop" ? window.HomeD : bp === "tablet" ? window.HomeT : window.Home;
}

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