/* ============================================================
   beedle — qualified-investor notice (shared by BOTH entry pages)

   The same warning gates every surface that exposes the projections:
     • Data room — blocking modal on a user's first sign-in (app.jsx).
     • Forecaster — same modal for an authed user who lands there with
       an old token and has never acknowledged (forecast-app.jsx).
     • Share links — the notice + checkbox embed in the visitor's
       pre-auth form (forecast-share.jsx); the server refuses to mint
       a session without the acknowledgment.

   Loaded by both HTML entry points before the files that use it.
   Styling: relies only on classes present on both pages (.scrim/.modal
   via layout.css or forecast.css, .checkbox via layout.css or the
   mirror in forecast.css); anything page-specific is inlined.
   ============================================================ */

// The warning body — two paragraphs shared verbatim by the modal and the
// share-link gate, so the copy can never drift between surfaces.
function InvestorNoticeText({ fontSize = 13.5 }) {
  const p = { fontSize, lineHeight: 1.6, color: "var(--ink-2)", margin: "0 0 12px" };
  return (
    <React.Fragment>
      <p style={p}>
        {T("The information in this data room — including all financial projections — is intended solely for qualified investors and business financing professionals. It is confidential and provided for discussion purposes only; it is not an offer to sell or a solicitation to buy securities, has not been audited, and may contain errors and omissions.")}
      </p>
      <p style={{ ...p, marginBottom: 0 }}>
        {T("The projections are built from a plurality of untested, interrelated hypotheses, each subject to a high degree of risk. Some risks are identified — the company may fail to reach its sales forecasts, fail to secure the financing its plan assumes, face rising competition, lose key personnel, or encounter adverse regulatory or market changes — and others are at present unidentified. Actual results will differ, possibly materially.")}
      </p>
    </React.Fragment>
  );
}

// The qualification checkbox — one statement, ticked before entering any surface.
function InvestorAckCheckbox({ checked, onChange, fontSize = 13.5 }) {
  return (
    <label className="checkbox" style={{ alignItems: "flex-start", padding: "12px 14px", border: "1.5px solid var(--line)", borderRadius: 12, background: "var(--paper)", fontSize }}>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} />
      <span className="box" style={{ flex: "0 0 auto", marginTop: 2 }}><Icon name="check" size={12} sw={2.6} /></span>
      <span style={{ lineHeight: 1.55 }}>
        {T("I confirm that I am (a) a qualified investor within the meaning of the securities regulations applicable in my jurisdiction, or (b) a business financing professional acting for a bank, venture capital firm or other business financing institution.")}
      </span>
    </label>
  );
}

// Blocking acknowledgment gate shown to signed-in users until they confirm their
// qualification. No scrim-click dismissal — the only ways out are agreeing
// (persisted server-side) or signing out.
function InvestorNoticeModal({ onAgree, onSignOut }) {
  const [checked, setChecked] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const agree = async () => {
    setErr(""); setBusy(true);
    try { await onAgree(); }
    catch (ex) { setBusy(false); setErr(ex.message || T("Could not save your acknowledgment. Please try again.")); }
  };
  return (
    <div className="scrim">
      <div className="modal investor-notice" style={{ maxWidth: 560 }} role="dialog" aria-modal="true" aria-label={T("Important notice")}>
        <div className="modal-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>{T("Important notice")}</div>
            <h2>{T("Qualified investors & business financing professionals only")}</h2>
          </div>
        </div>
        <div className="modal-body">
          <InvestorNoticeText />
          <div style={{ height: 16 }} />
          <InvestorAckCheckbox checked={checked} onChange={setChecked} />
          {err && (
            <div style={{ marginTop: 10, color: "var(--red-ink)", fontSize: 13, display: "flex", gap: 6, alignItems: "center" }}>
              <Icon name="info" size={14} /> {err}
            </div>
          )}
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" type="button" onClick={onSignOut} disabled={busy}>{T("Sign out")}</button>
          <div className="spacer" />
          <button className="btn btn-primary" type="button" onClick={agree} disabled={!checked || busy}>
            {busy ? T("Verifying…") : T("I agree — continue")}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InvestorNoticeText, InvestorAckCheckbox, InvestorNoticeModal });