/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================================
// STEP 9 — Consents (the legal weight of the moment)
// ============================================================================
window.SU.Step9Consents = function Step9Consents({ data, set, isMinor }) {
  const consents = data.consents || {};
  function toggle(id) { set({ consents: { ...consents, [id]: !consents[id] } }); }

  const CONSENTS = [];

  const visible = CONSENTS.filter(c => !c.onlyMinor || isMinor);
  const required = visible.filter(c => c.tag.startsWith("Required") || c.tag === "All members" || c.id === "minor");
  const allRequiredOK = required.every(c => consents[c.id]);

  return (
    <>
      <div>
        <div className="su-eyebrow legal">Step 9 of 12 · Consents &amp; agreements</div>
        <h1 className="su-h1">The fine print, <em>made plain.</em></h1>
        <p className="su-lede">Read the summary, expand the full document if you want every word. Tap to consent. Required items are marked. You can revoke any consent at any time from your Guardian Orb settings — though some revocations will pause the connected service.</p>
      </div>

      {visible.map(c => {
        const isReq = c.tag.startsWith("Required") || c.tag === "All members" || c.id === "minor";
        return (
          <div key={c.id} className="su-card">
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "start" }}>
              <button
                onClick={() => toggle(c.id)}
                style={{
                  width: 22,
                  height: 22,
                  marginTop: 4,
                  background: consents[c.id] ? "var(--accent-clinical)" : "white",
                  border: "1.5px solid " + (consents[c.id] ? "var(--accent-clinical)" : "var(--line-strong)"),
                  borderRadius: 6,
                  cursor: "pointer",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0
                }}
              >
                {consents[c.id] && (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
                    <polyline points="5,12 10,17 19,8"/>
                  </svg>
                )}
              </button>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4, flexWrap: "wrap" }}>
                  <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>{c.title}</h3>
                  <span style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    letterSpacing: "0.14em",
                    textTransform: "uppercase",
                    color: isReq ? "var(--accent-warm)" : "var(--fg-3)",
                    padding: "2px 8px",
                    border: "1px solid " + (isReq ? "color-mix(in oklch, var(--accent-warm) 35%, transparent)" : "var(--line)"),
                    borderRadius: 999
                  }}>{c.tag}</span>
                </div>
                <div style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.6, marginBottom: 8 }}>{c.summary}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em" }}>
                  📜 {c.doc} · <a href="#" onClick={e => e.preventDefault()} style={{ color: "var(--accent-clinical)", textDecoration: "underline" }}>read full text</a>
                </div>
              </div>
            </div>
          </div>
        );
      })}

      <window.SU.Tip tone="legal">
        <strong>Counter-signed by us.</strong> When you tap "Continue," our compliance team's signing key counter-signs your consent record on the Conceptual Chain. You'll receive a permanent receipt — block height, hash, and a PDF copy by email — within 60 seconds. {!allRequiredOK && <span style={{ color: "var(--accent-warn)" }}> Some required consents are still unchecked.</span>}
      </window.SU.Tip>
    </>
  );
};

// ============================================================================
// STEP 10 — Verification (email + SMS code + passkey + insurance card scan)
// ============================================================================
window.SU.Step10Verify = function Step10Verify({ data, set }) {
  const [emailCode, setEmailCode] = useState(data.emailCodeInput || "");
  const [smsCode, setSmsCode] = useState(data.smsCodeInput || "");
  const [emailSent, setEmailSent] = useState(false);
  const [smsSent, setSmsSent] = useState(false);

  useEffect(() => {
    const t1 = setTimeout(() => setEmailSent(true), 600);
    const t2 = setTimeout(() => setSmsSent(true), 1200);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  function checkEmail(v) {
    setEmailCode(v);
    set({ emailCodeInput: v });
    if (v === "739218" || v.length === 6) set({ emailVerified: true });
  }
  function checkSms(v) {
    setSmsCode(v);
    set({ smsCodeInput: v });
    if (v === "402851" || v.length === 6) set({ smsVerified: true });
  }

  return (
    <>
      <div>
        <div className="su-eyebrow warm">Step 10 of 12 · Final verification</div>
        <h1 className="su-h1">Three quick <em>checks.</em></h1>
        <p className="su-lede">Confirming your contact channels and locking in a passkey. From this point forward, your account is sealed — every change requires multi-factor approval.</p>
      </div>

      <div className="su-card">
        <div className="head">
          <h3>1 · Email verification</h3>
          <div className="sub">{emailSent ? <>We sent a 6-digit code to <strong>{data.email || "your email"}</strong>. Demo code: <span style={{ fontFamily: "var(--font-mono)", color: "var(--accent-clinical)" }}>739218</span></> : "Sending code…"}</div>
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <input
            value={emailCode}
            onChange={e => checkEmail(e.target.value)}
            placeholder="• • • • • •"
            maxLength={6}
            style={{ maxWidth: 220, fontFamily: "var(--font-mono)", fontSize: 22, letterSpacing: "0.4em", textAlign: "center" }}
          />
          {data.emailVerified && (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--accent-good)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase" }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="5,12 10,17 19,8"/></svg>
              Verified
            </span>
          )}
        </div>
      </div>

      <div className="su-card">
        <div className="head">
          <h3>2 · SMS verification</h3>
          <div className="sub">{smsSent ? <>Code sent to <strong>{data.phone || "your phone"}</strong>. Demo code: <span style={{ fontFamily: "var(--font-mono)", color: "var(--accent-clinical)" }}>402851</span></> : "Sending code…"}</div>
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <input
            value={smsCode}
            onChange={e => checkSms(e.target.value)}
            placeholder="• • • • • •"
            maxLength={6}
            style={{ maxWidth: 220, fontFamily: "var(--font-mono)", fontSize: 22, letterSpacing: "0.4em", textAlign: "center" }}
          />
          {data.smsVerified && (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--accent-good)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase" }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="5,12 10,17 19,8"/></svg>
              Verified
            </span>
          )}
        </div>
      </div>

      <div className="su-card">
        <div className="head">
          <h3>3 · Add a passkey <span style={{ color: "var(--fg-3)", fontWeight: 400, fontSize: 13 }}>· strongly recommended</span></h3>
          <div className="sub">A passkey replaces your password with biometric or device-bound auth. Phishing-resistant, FIDO2 compliant. Stored on your device — we never see it.</div>
        </div>
        <button
          onClick={() => set({ passkeyAdded: true })}
          disabled={data.passkeyAdded}
          style={{
            padding: "12px 22px",
            background: data.passkeyAdded ? "color-mix(in oklch, var(--accent-good) 18%, white)" : "var(--surface-2)",
            border: "1px solid " + (data.passkeyAdded ? "var(--accent-good)" : "var(--line-strong)"),
            color: data.passkeyAdded ? "var(--accent-good)" : "var(--fg-1)",
            borderRadius: 999,
            fontSize: 13,
            fontWeight: 600,
            fontFamily: "var(--font-display)",
            cursor: data.passkeyAdded ? "default" : "pointer",
            display: "inline-flex",
            alignItems: "center",
            gap: 10
          }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="11" r="3"/><path d="M12 11h9l-1.5 1.5L21 14l-1.5 1.5L21 17l-2 2-3-3"/></svg>
          {data.passkeyAdded ? "Passkey registered to this device" : "Register passkey with Touch ID / Face ID / Windows Hello"}
        </button>
      </div>

      <window.SU.Tip>
        <strong>Recovery.</strong> If you ever lose access, our 4-of-7 social recovery scheme can restore your account. You'll set up recovery contacts in Guardian Orb after onboarding — it takes about 90 seconds.
      </window.SU.Tip>
    </>
  );
};

// ============================================================================
// STEP 11 — Wallet mint + vault seal (the moment of ceremony)
// ============================================================================
window.SU.Step11Mint = function Step11Mint({ data, set }) {
  const [phase, setPhase] = useState(0);
  // 0: idle, 1: minting, 2: sealing, 3: complete

  useEffect(() => {
    if (phase === 0) return;
    const dur = phase === 1 ? 1800 : phase === 2 ? 1600 : 0;
    if (phase < 3) {
      const t = setTimeout(() => setPhase(phase + 1), dur);
      return () => clearTimeout(t);
    }
    if (phase === 3) set({ minted: true });
  }, [phase]);

  function start() { setPhase(1); }

  const blockHeight = 18472311 + (data.minted ? 1 : 0);
  const txHash = "0x" + (data.firstName || "user").toLowerCase().slice(0, 4).padEnd(4, "x") + "9c4a2f87b1e30d6c5d8a472e8f1c93a0b";
  const memberId = "CH-" + (data.lastName || "MBR").toUpperCase().slice(0, 3).padEnd(3, "X") + "-" + Math.floor(100000 + Math.random() * 900000);

  return (
    <>
      <div>
        <div className="su-eyebrow chain">Step 11 of 12 · Mint &amp; seal</div>
        <h1 className="su-h1">Your <em>ledger entry.</em></h1>
        <p className="su-lede">Two things happen now, atomically. (1) Your HEALTHCOIN™ wallet is minted on the Conceptual Chain. (2) Your medical vault is sealed — encrypted with a key only your authenticated devices can derive. Both events share a single block. From here, your record is yours, forever.</p>
      </div>

      <div className="su-mint">
        <div className="orb-stage">
          <div className={"orb-bg" + (phase >= 1 ? " active" : "")}></div>
          <div className={"orb-ring r1" + (phase >= 1 ? " spinning" : "")}></div>
          <div className={"orb-ring r2" + (phase >= 2 ? " spinning" : "")}></div>
          <div className={"orb-core" + (phase >= 3 ? " sealed" : "")}>
            {phase < 3 ? (
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-3)" }}>{phase === 0 ? "Awaiting" : phase === 1 ? "Minting" : "Sealing"}</span>
            ) : (
              <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><path d="M5 12l5 5 9-9"/></svg>
            )}
          </div>
        </div>

        {phase === 0 ? (
          <button onClick={start} className="su-mint-go">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            Mint my wallet &amp; seal my vault
          </button>
        ) : (
          <div className="ledger">
            <div className={"line" + (phase >= 1 ? " on" : "")}>
              <span className="dot"></span>
              <span className="lab">block.proposed</span>
              <span className="val">#{blockHeight}</span>
            </div>
            <div className={"line" + (phase >= 1 ? " on" : "")}>
              <span className="dot"></span>
              <span className="lab">wallet.minted</span>
              <span className="val">{txHash.slice(0, 22)}…</span>
            </div>
            <div className={"line" + (phase >= 2 ? " on" : "")}>
              <span className="dot"></span>
              <span className="lab">vault.sealed</span>
              <span className="val">AES-256-GCM · 4096-bit RSA wrap</span>
            </div>
            <div className={"line" + (phase >= 2 ? " on" : "")}>
              <span className="dot"></span>
              <span className="lab">consents.countersigned</span>
              <span className="val">7 / 7 · CHC compliance key</span>
            </div>
            <div className={"line" + (phase >= 3 ? " on" : "")}>
              <span className="dot"></span>
              <span className="lab">block.committed</span>
              <span className="val">{phase >= 3 ? "✓ finalized" : "pending"}</span>
            </div>
            <div className={"line" + (phase >= 3 ? " on" : "")}>
              <span className="dot"></span>
              <span className="lab">member.id</span>
              <span className="val">{phase >= 3 ? memberId : "—"}</span>
            </div>
          </div>
        )}
      </div>

      <window.SU.Tip tone="legal">
        Your medical vault key is split: half on your device, half escrowed under our compliance HSM. Neither half alone can decrypt anything. Combined under your authenticated session, they unlock your record. We can't read your data; you can't lose it.
      </window.SU.Tip>
    </>
  );
};

// ============================================================================
// STEP 12 — Welcome / eligibility recap
// ============================================================================
window.SU.Step12Welcome = function Step12Welcome({ data }) {
  const services = data.services || {};
  const ch = (() => {
    let v = 50;
    const ME = [];
    const s = data.meScores || {};
    ME.forEach(a => {
      const r = s[a.id]; if (r === undefined) return;
      const n = (r - 3) / 2; const adj = a.inv ? -n : n;
      v += adj * a.w * 50;
    });
    return Math.max(0, Math.min(100, Math.round(v)));
  })();

  const who = data.preferredName || data.firstName || "there";

  return (
    <>
      <div className="su-welcome-hero">
        <div className="badge">Welcome, member</div>
        <h1>You're <em>in,</em><br/>{who}.</h1>
        <p>Your account is live. Your CH<sub style={{ fontSize: "0.55em" }}>0</sub> is anchored. Your vault is sealed. Everything that happens next — every visit, every prescription, every lab, every wearable beat — flows into one place.</p>
      </div>

      <div className="su-recap">
        <div className="card">
          <div className="lab">Member ID</div>
          <div className="val">CH-{(data.lastName || "MBR").toUpperCase().slice(0, 3).padEnd(3, "X")}-{data.minted ? "739241" : "------"}</div>
        </div>
        <div className="card">
          <div className="lab">Starting CH</div>
          <div className="val" style={{ color: "var(--accent-good)" }}>{ch} <span style={{ fontSize: 14, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>/ 100</span></div>
        </div>
        <div className="card">
          <div className="lab">Wallet</div>
          <div className="val" style={{ fontSize: 14, fontFamily: "var(--font-mono)" }}>0 HCR</div>
        </div>
        <div className="card">
          <div className="lab">KYC tier</div>
          <div className="val" style={{ fontSize: 18 }}>Tier 2 ✓</div>
        </div>
      </div>

      <div className="su-card">
        <div className="head">
          <h3>What's active for you</h3>
          <div className="sub">You can change any of these from Guardian Orb → Settings → Services.</div>
        </div>
        <div style={{ display: "grid", gap: 8 }}>
          {[
            { id: "telehealth", label: "Conceptual Telehealth · same-day video, all 50 states" },
            { id: "pharmacy", label: "Conceptual Pharmacy · mail-order, free 90-day supply" },
            { id: "labs", label: "Conceptual Labs · at-home phlebotomy + Quest/Labcorp routing" },
            { id: "wearable", label: "Wearable + EHR sync · Apple, Fitbit, Oura, Epic, Cerner" },
            { id: "exchange", label: "hc.exchange · health-outcome contracts (Tier 3 required)" }
          ].map(s => (
            <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 10 }}>
              {services[s.id] ? (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent-good)" strokeWidth="2.5"><polyline points="5,12 10,17 19,8"/></svg>
              ) : (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--fg-3)" strokeWidth="2"><circle cx="12" cy="12" r="9"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
              )}
              <span style={{ fontSize: 14, color: services[s.id] ? "var(--fg-1)" : "var(--fg-3)" }}>{s.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="su-card">
        <div className="head">
          <h3>What happens next</h3>
        </div>
        <ol style={{ margin: 0, paddingLeft: 22, lineHeight: 1.8, fontSize: 14, color: "var(--fg-2)" }}>
          <li>We're faxing a records-release to {data.pcpName || "your PCP"} right now. Expect their last 24 months of records in Guardian Orb within 7 business days.</li>
          <li>Your insurance is being verified asynchronously — eligibility, copays, and prior-auth requirements will appear in your timeline by morning.</li>
          <li>If you opted into Conceptual Pharmacy, you'll receive a welcome packet with two free generic refills.</li>
          <li>{data.consents?.exchange ? <>Your hc.exchange paper-trading sandbox is live. To unlock real trading, complete <strong>KYC Tier 3</strong> from your account settings.</> : <>You can opt into hc.exchange anytime from your account settings.</>}</li>
        </ol>
      </div>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
        <a href="../guardian-orb/index.html" style={{
          padding: "14px 28px",
          background: "var(--fg-1)",
          color: "white",
          border: "none",
          borderRadius: 999,
          fontSize: 14,
          fontWeight: 600,
          fontFamily: "var(--font-display)",
          textDecoration: "none",
          display: "inline-flex",
          alignItems: "center",
          gap: 10
        }}>
          Open Guardian Orb
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13,6 19,12 13,18"/></svg>
        </a>
        <button style={{
          padding: "14px 28px",
          background: "transparent",
          color: "var(--fg-2)",
          border: "1px solid var(--line-strong)",
          borderRadius: 999,
          fontSize: 14,
          fontFamily: "var(--font-display)",
          cursor: "pointer"
        }}>Email me a copy of my consents (PDF)</button>
      </div>
    </>
  );
};