/* ============================================================
   AGENZIA PRINCIPE 2 — App router (clean URLs + per-route SEO)
   ============================================================ */
(function (w) {
  const { useState, useEffect, useCallback } = React;
  const { Header, Footer, StickyCTA, CookieBanner, useReveal, pathFor } = w.UI;
  const { CONTACT, SERVICES, PAGE_SEO, FAQ_GROUPS } = w.AP2;
  const SITE = CONTACT.siteUrl;
  const BUSINESS_ID = SITE + "/#business";

  const PAGES = {
    home: () => w.Pages.Home,
    servizi: () => w.Pages.Servizi,
    servizio: () => w.Pages.Servizio,
    "come-funziona": () => w.Pages.ComeFunziona,
    "chi-siamo": () => w.Pages.ChiSiamo,
    faq: () => w.Pages.Faq,
    contatti: () => w.Pages.Contatti,
    privacy: () => w.Pages.Privacy,
  };

  function App() {
    const [route, setRoute] = useState(() => parseRoute());

    const go = useCallback((page, param) => {
      const path = pathFor(page, param);
      if (window.location.pathname !== path) window.history.pushState(null, "", path);
      setRoute({ page, param });
      window.scrollTo({ top: 0, behavior: "auto" });
    }, []);

    useEffect(() => { w.__go = go; }, [go]);

    useEffect(() => {
      const onPop = () => setRoute(parseRoute());
      window.addEventListener("popstate", onPop);
      return () => window.removeEventListener("popstate", onPop);
    }, []);

    useReveal();
    useEffect(() => { applySEO(route); }, [route]);

    const getter = PAGES[route.page] || PAGES.home;
    const PageComp = getter() || (() => React.createElement("div", { style: { padding: 120, textAlign: "center" } }, "Caricamento…"));

    return React.createElement(React.Fragment, null,
      React.createElement(Header, { page: route.page }),
      React.createElement("main", { key: route.page + (route.param || "") },
        React.createElement(PageComp, { param: route.param })
      ),
      React.createElement(Footer),
      React.createElement(StickyCTA),
      React.createElement(CookieBanner)
    );
  }

  // ---- routing ----
  function parseRoute() {
    let path = (window.location.pathname || "/").replace(/\/+$/, "");
    if (path === "") {
      // root: still honour legacy hash links like #/servizio/slug
      const h = window.location.hash.replace(/^#\/?/, "");
      if (h) { const hp = h.split("/"); return { page: hp[0] || "home", param: hp[1] || null }; }
      return { page: "home", param: null };
    }
    const parts = path.split("/").filter(Boolean);
    const page = parts[0];
    if (!PAGES[page]) return { page: "home", param: null };
    return { page, param: parts[1] || null };
  }

  // ---- per-route SEO (title, meta, canonical, OG, JSON-LD) ----
  function serviceFor(route) {
    return route.page === "servizio" && route.param
      ? SERVICES.find((s) => s.slug === route.param) : null;
  }
  function metaFor(route) {
    const svc = serviceFor(route);
    if (svc) {
      return {
        title: svc.title + " a Torino · Agenzia Principe 2",
        description: svc.short,
        path: pathFor("servizio", svc.slug),
      };
    }
    const pm = PAGE_SEO[route.page] || PAGE_SEO.home;
    return { title: pm.title, description: pm.description, path: pathFor(route.page) };
  }

  function upsertMeta(selector, attr, name, content) {
    let el = document.head.querySelector(selector);
    if (!el) { el = document.createElement("meta"); el.setAttribute(attr, name); document.head.appendChild(el); }
    el.setAttribute("content", content);
  }
  function upsertLink(rel, href) {
    let el = document.head.querySelector('link[rel="' + rel + '"]');
    if (!el) { el = document.createElement("link"); el.setAttribute("rel", rel); document.head.appendChild(el); }
    el.setAttribute("href", href);
  }
  function setJsonLd(graph) {
    let el = document.getElementById("route-jsonld");
    if (!el) { el = document.createElement("script"); el.type = "application/ld+json"; el.id = "route-jsonld"; document.head.appendChild(el); }
    el.textContent = JSON.stringify({ "@context": "https://schema.org", "@graph": graph });
  }

  function applySEO(route) {
    const m = metaFor(route);
    const url = SITE + m.path;
    document.title = m.title;
    upsertMeta('meta[name="description"]', "name", "description", m.description);
    upsertLink("canonical", url);
    upsertMeta('meta[property="og:title"]', "property", "og:title", m.title);
    upsertMeta('meta[property="og:description"]', "property", "og:description", m.description);
    upsertMeta('meta[property="og:url"]', "property", "og:url", url);
    upsertMeta('meta[name="twitter:title"]', "name", "twitter:title", m.title);
    upsertMeta('meta[name="twitter:description"]', "name", "twitter:description", m.description);
    setJsonLd(buildGraph(route, url));
  }

  function crumbs(items) {
    return {
      "@type": "BreadcrumbList",
      itemListElement: items.map((it, i) => ({
        "@type": "ListItem", position: i + 1, name: it.name, item: SITE + it.path,
      })),
    };
  }

  function buildGraph(route, url) {
    const svc = serviceFor(route);
    if (svc) {
      return [
        {
          "@type": "Service",
          name: svc.title + " a Torino",
          serviceType: svc.title,
          description: svc.short,
          provider: { "@id": BUSINESS_ID },
          areaServed: { "@type": "City", name: "Torino" },
          url: url,
        },
        crumbs([
          { name: "Home", path: "/" },
          { name: "Servizi", path: "/servizi" },
          { name: svc.title, path: "/servizio/" + svc.slug },
        ]),
      ];
    }
    if (route.page === "faq") {
      const qa = [];
      (FAQ_GROUPS || []).forEach((g) => g.items.forEach((it) => qa.push({
        "@type": "Question", name: it.q,
        acceptedAnswer: { "@type": "Answer", text: it.a },
      })));
      return [
        { "@type": "FAQPage", mainEntity: qa },
        crumbs([{ name: "Home", path: "/" }, { name: "FAQ", path: "/faq" }]),
      ];
    }
    if (route.page === "servizi") {
      return [
        {
          "@type": "ItemList",
          name: "Servizi di pratiche auto a Torino",
          itemListElement: SERVICES.map((s, i) => ({
            "@type": "ListItem", position: i + 1, name: s.title, url: SITE + "/servizio/" + s.slug,
          })),
        },
        crumbs([{ name: "Home", path: "/" }, { name: "Servizi", path: "/servizi" }]),
      ];
    }
    if (route.page === "home") {
      return [{
        "@type": "ItemList",
        name: "Servizi di pratiche auto a Torino",
        itemListElement: SERVICES.map((s, i) => ({
          "@type": "ListItem", position: i + 1, name: s.title, url: SITE + "/servizio/" + s.slug,
        })),
      }];
    }
    const label = (PAGE_SEO[route.page] && route.page) || "home";
    const nameMap = { "chi-siamo": "Chi siamo", "come-funziona": "Come funziona", contatti: "Contatti", privacy: "Privacy & Cookie Policy" };
    return [crumbs([{ name: "Home", path: "/" }, { name: nameMap[label] || label, path: pathFor(route.page) }])];
  }

  w.__mountApp = function () {
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(React.createElement(App));
  };
})(window);