/* London Free Guide — Guide page (list shape) components.
   Renders one guide by ?id=, plus its member spots (partOf === guide.id).
   Reuses Nav, Band, Footer, GuideAgent, Card from the shared scripts. */
const { useState: useGuideState } = React;

const GD_COST = window.LFG_COST;

/* ---- time-status for date-bound items (computed from start/end ISO dates) ---- */
function eventStatus(item) {
  if (!item || !item.start) return null;
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const start = new Date(item.start + "T00:00:00");
  const end = new Date((item.end || item.start) + "T00:00:00");
  const DAY = 86400000;
  if (today > end) return { kind: "ended", label: "Ended" };
  if (today >= start && today <= end) return { kind: "live", label: "On now" };
  const days = Math.round((start - today) / DAY);
  if (days === 1) return { kind: "soon", label: "Tomorrow" };
  if (days <= 7) return { kind: "soon", label: "This week" };
  return { kind: "upcoming", label: "Coming up" };
}
window.eventStatus = eventStatus;

function gdBack(e) {
  e.preventDefault();
  if (window.history.length > 1 && document.referrer) window.history.back();
  else window.location.href = "Home.html";
}

/* ---- breadcrumb ---- */
function GuideCrumb({ guide }) {
  return (
    <div className="wrap">
      <nav className="gd-crumb" aria-label="Breadcrumb">
        <button className="gd-back" onClick={gdBack}><span aria-hidden="true">←</span> Back</button>
        <span className="sep" aria-hidden="true">·</span>
        <a href="Home.html">Explore</a>
        <span className="sep">›</span>
        <span>Guides</span>
        <span className="sep">›</span>
        <span className="cur">{guide.title}</span>
      </nav>
    </div>
  );
}

/* ---- hero: editorial lede + framed cover (no text overlay — covers carry baked-in titles) ---- */
function GuideHero({ guide, count }) {
  return (
    <div className="wrap">
      <section className="gd-hero">
        <div className="gd-hero-inner">
          <div className="gd-lede">
            {guide.hook && <div className="gd-hook">{guide.hook}</div>}
            <h1 className="gd-title">{guide.title}</h1>
            <div className="gd-meta">
              <span className={"cost " + guide.cost}>{GD_COST[guide.cost]}</span>
              {count > 0 && <span className="gd-count">{count} places</span>}
              <span className="gd-where"><span className="pin" aria-hidden="true">📍</span>{guide.area}</span>
            </div>
            {guide.summary && <p className="gd-intro">{guide.summary}</p>}
          </div>
          <div className={"gd-cover" + (guide.img ? "" : " noimg")}>
            {guide.img
              ? <img src={guide.img} alt={guide.title} />
              : <div className="gd-cover-inner"><span className="gd-cover-free">FREE</span><div className="gd-cover-title">{guide.title}</div><GdMark /></div>}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---- stylised overview map with a numbered pin per place ---- */
const GD_PIN_POS = [
  { l: 22, t: 36 }, { l: 45, t: 24 }, { l: 67, t: 42 }, { l: 36, t: 66 }, { l: 78, t: 68 },
  { l: 56, t: 76 }, { l: 14, t: 58 }, { l: 88, t: 30 }
];
function GuideMap({ members }) {
  if (!members.length) return null;
  return (
    <div className="wrap gd-map-wrap">
      <section className="gd-section">
        <div className="gd-divider" aria-hidden="true"></div>
        <h2 className="gd-sec-h">All {members.length} on the map</h2>
        <div className="gd-map">
          <div className="grid" aria-hidden="true"></div>
          <div className="river" aria-hidden="true"></div>
          <div className="road a" aria-hidden="true"></div>
          <div className="road b" aria-hidden="true"></div>
          <span className="gd-maptag">Stylised overview · tap a place for directions</span>
          {members.map((m, i) => {
            const p = GD_PIN_POS[i % GD_PIN_POS.length];
            return (
              <div className="gd-pin" key={m.id} style={{ left: p.l + "%", top: p.t + "%" }} title={m.title}>
                <div className="tear"><b>{i + 1}</b></div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}

/* branded fallback used wherever a spot has no baked photo */
function GdMark() {
  return <span className="gd-noimg-mark">LONDON <span className="r">FREE</span> GUIDE</span>;
}

/* ---- a numbered place row (links to its own spot page, or out for directory spots) ---- */
function GuideRow({ item, n }) {
  const st = eventStatus(item);
  const maps = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(item.title + " " + item.area + " London");
  const href = item.noDetail ? (item.website || maps) : ("Spot.html?id=" + item.id);
  const ext = item.noDetail ? { target: "_blank", rel: "noopener noreferrer" } : {};
  const goLabel = item.noDetail ? (item.website ? "Visit site ↗" : "Open in Maps ↗") : "Full details →";
  return (
    <a className={"gd-row" + (st && st.kind === "ended" ? " is-ended" : "")} href={href} {...ext}>
      <div className="gd-rank">{n}</div>
      <div className={"gd-thumb" + (item.img ? (item.cropTop ? " crop" : "") : " noimg")}>
        {item.img
          ? <img src={item.img} alt={item.title} loading="lazy" />
          : <div className="gd-noimg-inner"><span className="gd-noimg-free">FREE</span><GdMark /></div>}
      </div>
      <div className="gd-rc">
        {st && <span className={"gd-status " + st.kind}><span className="sdot" aria-hidden="true"></span>{st.label}</span>}
        <div className="gd-name">{item.title}</div>
        <div className="gd-loc"><span className="pin" aria-hidden="true">📍</span>{item.area}{item.tube ? " · " + item.tube : ""}</div>
        <div className="gd-blurb">{item.summary}</div>
        <div className="gd-foot">
          {item.hours
            ? <span className="gd-hours"><span aria-hidden="true">🕐</span>{item.hours}</span>
            : <span className="gd-hours">{GD_COST[item.cost]}</span>}
          <span className="gd-go">{goLabel}</span>
        </div>
      </div>
    </a>
  );
}

/* ---- the list ---- */
function GuideList({ guide, members }) {
  return (
    <div className="wrap">
      <section className="gd-section">
        <div className="gd-divider" aria-hidden="true"></div>
        <h2 className="gd-sec-h">The list</h2>
        <div className="gd-list">
          {members.map((m, i) => <GuideRow key={m.id} item={m} n={i + 1} />)}
        </div>
      </section>
    </div>
  );
}

/* ---- graceful state for guides with no member places yet ---- */
function GuideEmpty({ guide }) {
  return (
    <div className="wrap">
      <section className="gd-section">
        <div className="gd-empty">
          <h3>We're still writing this one</h3>
          <p>{guide.summary} The full breakdown of every stop is on its way. Get one email a week and we'll send it the moment it lands.</p>
          <a className="btn" href="Home.html">Explore free spots</a>
        </div>
      </section>
    </div>
  );
}

/* ---- more guides ---- */
function MoreGuides({ guide, all }) {
  const others = all.filter((i) => i.kind === "guide" && i.id !== guide.id).slice(0, 3);
  if (!others.length) return null;
  return (
    <div className="wrap">
      <section className="gd-section gd-more">
        <div className="gd-divider" aria-hidden="true"></div>
        <h2 className="gd-sec-h">More guides</h2>
        <div className="masonry">
          {others.map((i) => <Card key={i.id} item={i} />)}
        </div>
      </section>
    </div>
  );
}

/* ---- getting there: honest transport block for day-trip guides ---- */
function GuideGetThere({ guide }) {
  const t = guide.fromLondon;
  if (!t) return null;
  return (
    <div className="wrap gd-gt-wrap">
      <section className="gd-section">
        <div className="gd-getthere">
          <div className="gd-gt-head">
            <span className="gd-gt-eyebrow">The catch</span>
            <h2 className="gd-gt-h">Getting there from London</h2>
          </div>
          <div className="gd-gt-rows">
            <div className="gd-gt-row"><div className="gd-gt-txt"><b>{t.from} → {t.to}</b><span>{t.time}</span></div></div>
            <div className="gd-gt-row"><div className="gd-gt-txt"><b>Train fare</b><span>{t.fare}</span></div></div>
          </div>
          {t.note && <p className="gd-gt-note">{t.note}</p>}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { GuideCrumb, GuideHero, GuideGetThere, GuideMap, GuideList, GuideEmpty, MoreGuides });