/* AppDemoPage — the customer-app clickable prototype, served on the site.
 *
 * UNLISTED BY DESIGN: reachable only by deep link (…/#/app?k=<access-key>).
 * Never referenced from nav, footer, homepage or sitemap. The access key rides
 * the hash query and is enforced SERVER-SIDE by /api/demo-app (same gate and
 * key as /quoteflow and /broker); without it the page shows the private
 * stanza, exactly like the quoteflow.
 *
 * The prototype itself is the WO-2026-07-19 canon (seven-proposition arc,
 * simulated data, pre-authorisation caveats baked in). It arrives as a
 * complete HTML document and renders in a sandboxed same-origin iframe via
 * srcDoc so its styles and scripts cannot touch the site shell.
 */
function appDemoKeyFromHash() {
  const hash = window.location.hash || "";
  const qIdx = hash.indexOf("?");
  if (qIdx === -1) return "";
  const params = new URLSearchParams(hash.slice(qIdx + 1));
  return (params.get("k") || "").trim();
}

function AppDemoPage() {
  const [accessKey, setAccessKey] = React.useState(appDemoKeyFromHash());
  const [state, setState] = React.useState({ status: "idle", html: "" });

  // Re-read the key on every hash change: the router doesn't remount this
  // component when only the ?k= query part of the hash changes.
  React.useEffect(() => {
    const onHash = () => setAccessKey(appDemoKeyFromHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  React.useEffect(() => {
    if (!accessKey) { setState({ status: "idle", html: "" }); return; }
    let dead = false;
    setState({ status: "loading", html: "" });
    fetch("/api/demo-app?k=" + encodeURIComponent(accessKey))
      .then((r) => (r.ok ? r.text() : Promise.reject(new Error(String(r.status)))))
      .then((html) => { if (!dead) setState({ status: "ok", html }); })
      .catch(() => { if (!dead) setState({ status: "denied", html: "" }); });
    return () => { dead = true; };
  }, [accessKey]);

  if (state.status === "ok") {
    return (
      <section style={{ padding: 0 }}>
        <iframe
          title="Solas app — private demonstration"
          srcDoc={state.html}
          sandbox="allow-scripts allow-same-origin"
          style={{ display: "block", width: "100%", height: "1040px", border: "none", background: "var(--paper, #F4EFE6)" }}
        />
      </section>
    );
  }

  return (
    <section className="wrap" style={{ padding: "96px 24px", maxWidth: 720, marginInline: "auto" }}>
      <p className="kicker">Private demonstration</p>
      <h1>This page is private.</h1>
      <p>
        {state.status === "loading"
          ? "Checking access…"
          : "The Solas app demonstration is unlisted and needs an access key. If you were sent a link, use the full link exactly as it was shared with you."}
      </p>
      <p style={{ fontSize: 14, opacity: 0.7 }}>
        Solas is a UK home-insurance MGA in build, pre-authorisation. Nothing on
        this page is an offer of insurance; the demonstration uses simulated data.
      </p>
    </section>
  );
}