// Legal pages — Privacy, Terms, Cookie Policy, GDPR.
//
// There is no copy in this file on purpose. The documents live in legal-content.php, which
// renders them server-side AND emits them as window.AM_LEGAL for this component. Writing the
// text twice would let the two versions drift, and a legal page that disagrees with itself
// depending on whether JavaScript ran is worse than no page at all.
//
// Keep the block types here in step with AM_legalHTML() in legal-content.php.

function LegalBlock({ block }) {
  if (block.type === "p")    return <p>{block.text}</p>;
  if (block.type === "note") return <p className="legal-note">{block.text}</p>;

  if (block.type === "ul") {
    return <ul>{block.items.map((it, i) => <li key={i}>{it}</li>)}</ul>;
  }

  if (block.type === "table") {
    return (
      // Wrapped so a wide table scrolls inside itself rather than making the page scroll
      // sideways on a phone.
      <div className="legal-table-wrap">
        <table className="legal-table">
          <thead>
            <tr>{block.head.map((h, i) => <th key={i}>{h}</th>)}</tr>
          </thead>
          <tbody>
            {block.rows.map((r, i) => (
              <tr key={i}>{r.map((c, j) => <td key={j}>{c}</td>)}</tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }

  return null;
}

// `route` picks the document: index.php emits all four keyed by route name, because the
// footer links between them are SPA navigations that never reload the page.
function LegalPage({ route }) {
  const all = typeof window !== "undefined" ? window.AM_LEGAL : null;
  const doc = all && route ? all[route] : null;

  // Only reachable if someone lands on a legal route without the payload — a stale cached
  // index.php, say. Say so rather than rendering an empty page that looks like the policy.
  if (!doc || !doc.sections) {
    return (
      <div className="page legal-page">
        <div className="container">
          <h1>Document unavailable</h1>
          <p className="lead">
            We couldn't load this document. Please reload the page, or email
            {" "}<a href="mailto:info@activemanage.co.uk">info@activemanage.co.uk</a> and we'll send it to you.
          </p>
        </div>
      </div>
    );
  }

  const jump = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
    // Put the section in the URL so it can be linked to and Back still works.
    window.history.replaceState({}, "", window.location.pathname + "#" + id);
  };

  return (
    <div className="page legal-page">
      <div className="container">

        <header className="legal-head">
          <h1>{doc.h1 || doc.title}</h1>
          <p className="lead">{doc.lead}</p>
          <p className="legal-updated mono">Last updated {doc.updated}</p>
        </header>

        <nav className="legal-toc" aria-label="Contents">
          <h2>Contents</h2>
          <ol>
            {doc.sections.map(s => (
              <li key={s.id}>
                <a href={"#" + s.id} onClick={(e) => jump(e, s.id)}>{s.h}</a>
              </li>
            ))}
          </ol>
        </nav>

        {doc.sections.map(s => (
          <section className="legal-section" id={s.id} key={s.id}>
            <h2>{s.h}</h2>
            {s.blocks.map((b, i) => <LegalBlock key={i} block={b} />)}
          </section>
        ))}

      </div>
    </div>
  );
}

Object.assign(window, { LegalPage });