// PageStage — a viewport-scaled, print-friendly shell for handouts.
// - Centers the 8.5×11 page on a soft background
// - Scales-to-fit on smaller viewports
// - Prints to actual page size (one page per <SRPage>)
// - Provides Print + Download toolbar (hidden in print)

const PageStage = ({ children, downloadHref, downloadLabel = "Download PDF" }) => {
  const stageRef = React.useRef(null);
  const [scale, setScale] = React.useState(1);

  React.useEffect(() => {
    const calc = () => {
      const w = window.innerWidth;
      const pageW = 816;
      const sidePad = w < 700 ? 16 : 48;
      const avail = w - sidePad * 2;
      if (avail >= pageW) { setScale(1); return; }
      setScale(avail / pageW);
    };
    calc();
    window.addEventListener("resize", calc);
    return () => window.removeEventListener("resize", calc);
  }, []);

  return (
    <div className="ps-stage" ref={stageRef}>
      <div className="ps-toolbar" role="toolbar" aria-label="Page actions">
        <a className="ps-link" href="./" aria-label="All handouts">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M 9 1 L 4 7 L 9 13" />
          </svg>
          <span>All handouts</span>
        </a>
        <div className="ps-actions">
          {downloadHref && (
            <a className="ps-btn" href={downloadHref} download>
              <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M 7 1 V 9 M 3 6 L 7 10 L 11 6 M 2 13 H 12" />
              </svg>
              <span>{downloadLabel}</span>
            </a>
          )}
          <button type="button" className="ps-btn" onClick={() => window.print()}>
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M 4 4 V 1 H 10 V 4 M 3 4 H 11 A 1 1 0 0 1 12 5 V 9 A 1 1 0 0 1 11 10 H 10 M 4 10 H 3 A 1 1 0 0 1 2 9 V 5 A 1 1 0 0 1 3 4 M 4 8 H 10 V 13 H 4 Z" />
            </svg>
            <span>Print</span>
          </button>
        </div>
      </div>
      <div className="ps-pages" style={{ transform: `scale(${scale})`, transformOrigin: "top center" }}>
        {children}
      </div>
      <div className="ps-foot">
        <span>Sanctuary Ridge Therapy</span>
        <span>·</span>
        <a href="https://sanctuaryridgetherapy.com" target="_blank" rel="noopener">sanctuaryridgetherapy.com</a>
      </div>
    </div>
  );
};

// CSS injected once
(function injectStageCSS() {
  if (document.getElementById("ps-css")) return;
  const css = `
    html, body { margin: 0; padding: 0; background: #e8e3d6; color: #2E3829; }
    body { font-family: "Cormorant Garamond", Garamond, serif; }
    .ps-stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
                padding: 24px 16px 48px; box-sizing: border-box; }
    @media (min-width: 700px) { .ps-stage { padding: 36px 48px 64px; } }

    .ps-toolbar { width: 100%; max-width: 816px; display: flex; align-items: center;
                  justify-content: space-between; margin: 0 0 18px;
                  font-family: "Montserrat", system-ui, sans-serif; }
    .ps-link, .ps-btn { display: inline-flex; align-items: center; gap: 8px;
      font-family: "Montserrat", system-ui, sans-serif; font-size: 11px;
      letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
      color: #515D4E; background: transparent; border: 0.75px solid #C9CDBF;
      padding: 8px 14px; border-radius: 999px; cursor: pointer; text-decoration: none;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .ps-link { border-color: transparent; padding-left: 0; }
    .ps-actions { display: flex; gap: 10px; }
    .ps-link:hover { color: #2E3829; }
    .ps-btn:hover { background: #515D4E; color: #ECE7DC; border-color: #515D4E; }
    .ps-btn svg, .ps-link svg { flex: 0 0 auto; }

    .ps-pages { display: flex; flex-direction: column; gap: 24px; align-items: center; }
    .ps-pages .sr-page {
      box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 36px rgba(0,0,0,0.08);
      background: var(--sr-cream);
    }

    .ps-foot { margin-top: 28px; font-family: "Montserrat", system-ui, sans-serif;
      font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
      color: #8A9285; display: flex; gap: 10px; align-items: center; }
    .ps-foot a { color: #515D4E; text-decoration: none; }
    .ps-foot a:hover { text-decoration: underline; }

    /* Print: white background, exact-size pages, no toolbar, page-break between pages */
    @media print {
      @page { size: 8.5in 11in; margin: 0; }
      html, body { background: #ECE7DC; }
      .ps-stage { padding: 0; min-height: 0; }
      .ps-toolbar, .ps-foot { display: none !important; }
      .ps-pages { gap: 0; transform: none !important; }
      .ps-pages .sr-page {
        box-shadow: none !important;
        width: 8.5in !important; height: 11in !important;
        page-break-after: always; break-after: page;
      }
      .ps-pages .sr-page:last-child {
        page-break-after: auto; break-after: auto;
      }
      /* Hide interactive Rosenberg score band + reset on print */
      .rsi-score, .rsi-reset { display: none !important; }
      /* On print, show blank radios (un-selected look) */
      .rsi-items button[aria-pressed="true"] {
        background: transparent !important;
        box-shadow: none !important;
      }
    }
  `;
  const style = document.createElement("style");
  style.id = "ps-css";
  style.textContent = css;
  document.head.appendChild(style);
})();

Object.assign(window, { PageStage });