/* London Free Guide — Guide page app.
   Finds the guide by ?id= (defaults to the rooftops guide), lists its member
   spots (partOf === guide.id), wires Tweaks. */
const { useEffect: useGuideEffect } = React;

const GUIDE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E63B2E",
  "showMap": true,
  "numbered": true
}/*EDITMODE-END*/;

function getGuide() {
  const all = window.LFG_CONTENT || [];
  const id = window.LFG_FORCE_ID || new URLSearchParams(window.location.search).get("id");
  return all.find((i) => i.id === id && i.kind === "guide")
    || all.find((i) => i.id === "best-free-museums")
    || all.find((i) => i.kind === "guide");
}

/* resolve a curated pick id from content ∪ pillars ∪ directory (Maps-linked) */
function resolveGuidePick(id) {
  const hit = (window.LFG_CONTENT || []).concat(window.LFG_PILLARS || []).find((i) => i.id === id);
  if (hit) return hit;
  const d = ((window.LFG_DIRECTORY && window.LFG_DIRECTORY.spots) || []).find((s) => s.id === id);
  if (d) return { id: d.id, kind: "spot", title: d.name, summary: d.desc, area: d.area,
    tube: d.tube, cost: "free", website: d.website, noDetail: true, _dir: true };
  return null;
}
function guideMembers(guide, all) {
  if (guide.picks) return guide.picks.map(resolveGuidePick).filter(Boolean);
  return all.filter((i) => i.partOf === guide.id);
}

/* ---- per-id page meta: canonical + OG + title (one file serves many guides) ---- */
function lfgGuidePath(id) {
  return (window.LFG_DEEP_GUIDES || []).indexOf(id) !== -1 ? "guide-" + id + ".html" : "Guide.html?id=" + id;
}
function lfgSetMeta({ path, title, description }) {
  const url = "https://londonfreeguide.com/" + path;
  function set(sel, attr, val, mk) {
    let el = document.head.querySelector(sel);
    if (!el && mk) { el = document.createElement(mk.tag); Object.entries(mk.attrs).forEach(([k, v]) => el.setAttribute(k, v)); document.head.appendChild(el); }
    if (el) el.setAttribute(attr, val);
  }
  set('link[rel="canonical"]', "href", url, { tag: "link", attrs: { rel: "canonical" } });
  set('meta[property="og:url"]', "content", url, { tag: "meta", attrs: { property: "og:url" } });
  if (title) { set('meta[property="og:title"]', "content", title); set('meta[name="twitter:title"]', "content", title); document.title = title; }
  if (description) { set('meta[property="og:description"]', "content", description); set('meta[name="twitter:description"]', "content", description); set('meta[name="description"]', "content", description, { tag: "meta", attrs: { name: "description" } }); }
}

/* ItemList JSON-LD — prototype demo of what the build should emit server-side */
function GuideSchema({ guide, members }) {
  useGuideEffect(() => {
    lfgSetMeta({ path: lfgGuidePath(guide.id), title: guide.title + " | London Free Guide", description: guide.summary });
    const data = {
      "@context": "https://schema.org",
      "@type": "ItemList",
      name: guide.title,
      description: guide.summary,
      url: window.location.href,
      numberOfItems: members.length,
      itemListElement: members.map((m, i) => ({
        "@type": "ListItem",
        position: i + 1,
        item: {
          "@type": "TouristAttraction",
          name: m.title,
          url: m.noDetail
            ? (m.website || ("https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(m.title + " " + m.area + " London")))
            : new URL("Spot.html?id=" + m.id, window.location.href).href,
          isAccessibleForFree: m.cost === "free",
          address: { "@type": "PostalAddress", addressLocality: m.area, addressRegion: "London", addressCountry: "GB" },
        },
      })),
    };
    let el = document.getElementById("guide-jsonld");
    if (!el) { el = document.createElement("script"); el.type = "application/ld+json"; el.id = "guide-jsonld"; document.head.appendChild(el); }
    el.textContent = JSON.stringify(data, null, 2);
  }, [guide, members]);
  return null;
}

function GuideApp() {
  const [t, setTweak] = useTweaks(GUIDE_TWEAK_DEFAULTS);
  const all = window.LFG_CONTENT || [];
  const guide = getGuide();
  const members = guideMembers(guide, all);

  useGuideEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--lfg-accent", t.accent);
    document.body.classList.toggle("hide-gmap", !t.showMap);
    document.body.classList.toggle("unnumbered", !t.numbered);
  }, [t]);

  useGuideEffect(() => {
    if (guide) document.title = guide.title + " — London Free Guide";
  }, [guide]);

  if (!guide) return null;

  return (
    <React.Fragment>
      <GuideSchema guide={guide} members={members} />
      <Nav />
      <main>
        <GuideCrumb guide={guide} />
        <GuideHero guide={guide} count={members.length} />
        <GuideGetThere guide={guide} />
        {members.length ? (
          <React.Fragment>
            <GuideMap members={members} />
            <GuideList guide={guide} members={members} />
          </React.Fragment>
        ) : (
          <GuideEmpty guide={guide} />
        )}
        <MoreGuides guide={guide} all={all} />
        <div className="wrap gd-foot-nav">
          <a className="gd-back-link" href="Home.html"><span aria-hidden="true">←</span> Back to Explore</a>
        </div>
        <Band />
      </main>
      <Footer />
      <GuideAgent />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent colour" value={t.accent}
          options={["#E63B2E", "#FF6A1A", "#1F8A5B", "#2A6FDB"]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Guide page" />
        <TweakToggle label="Show overview map" value={t.showMap}
          onChange={(v) => setTweak("showMap", v)} />
        <TweakToggle label="Numbered list" value={t.numbered}
          onChange={(v) => setTweak("numbered", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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