// Email preview section — three tabs, one for each outcome.

function EmailPreviewSection({ activeTab, setActiveTab }) {
  return (
    <section className="section" data-accent="4" data-screen-label="04 Email preview">
      <div className="section-head">
        <div className="titles">
          <div className="eyebrow"><span className="dotnum"></span>Step 04 · Handoff</div>
          <h2>Notification email preview</h2>
          <div className="desc">For every decision, Procura sends a notification to the internal approver. We never reply to or modify the original Ariba thread.</div>
        </div>
        <div className="actions">
          <span className="pill pill-muted"><span className="pdot"></span>Internal · to approver@company.com</span>
        </div>
      </div>

      <div className="tabs">
        <button className={"tab " + (activeTab === "approved" ? "active" : "")} onClick={() => setActiveTab("approved")}>
          <span className="pill pill-green"><span className="pdot"></span>Auto approved</span>
        </button>
        <button className={"tab " + (activeTab === "denied" ? "active" : "")} onClick={() => setActiveTab("denied")}>
          <span className="pill pill-red"><span className="pdot"></span>Auto denied</span>
        </button>
        <button className={"tab " + (activeTab === "escalated" ? "active" : "")} onClick={() => setActiveTab("escalated")}>
          <span className="pill pill-orange"><span className="pdot"></span>Escalated</span>
        </button>
      </div>

      <div className="email-frame">
        {activeTab === "approved" && <EmailApproved />}
        {activeTab === "denied" && <EmailDenied />}
        {activeTab === "escalated" && <EmailEscalated />}
      </div>
    </section>
  );
}

function EmailHeader({ subject, statusPill, pr }) {
  return (
    <div className="email-head">
      <h3 className="subject">
        {statusPill}
        <span>{subject}</span>
      </h3>
      <div className="meta">
        <div className="k">From</div><div className="v">Procura &lt;notifications@procura.app&gt;</div>
        <div className="k">To</div><div className="v">approver@company.com</div>
        <div className="k">Re</div><div className="v mono">{pr} · original Ariba thread (not modified)</div>
      </div>
    </div>
  );
}

/* -------- Auto approved -------- */
function EmailApproved() {
  return (
    <div className="email-card">
      <EmailHeader
        subject="Auto approved: PR# 4500382913 — Northwind Logistics"
        statusPill={<span className="pill pill-green"><span className="pdot"></span>Auto approved</span>}
        pr="PR# 4500382913"
      />
      <div className="email-body">
        <p>Hi Morgan,</p>
        <p>
          Procura auto-approved the SAP Ariba request for <strong>Pallet Wrap &amp; Stretch Film</strong> from <strong>Northwind Logistics</strong> at 09:14.
          The extracted spec sheet matched one of your approve rules, so the action was taken without escalation.
        </p>

        <div className="rule-callout" style={{ borderColor: "oklch(0.85 0.07 150)", background: "var(--green-soft)" }}>
          <div className="ic" style={{ background: "var(--green)" }}>✓</div>
          <div className="body" style={{ color: "oklch(0.32 0.1 150)" }}>
            <div className="label" style={{ color: "var(--green)" }}>Rule 2 matched</div>
            <div style={{ marginTop: 4 }}>
              Line total is under your auto-approve threshold and the vendor is on your preferred list.
            </div>
            <div className="expr mono" style={{ borderColor: "oklch(0.85 0.07 150)" }}>price &lt; $5,000  →  Approve</div>
          </div>
        </div>

        <p style={{ marginBottom: 6 }}><strong>What we extracted from the attachment:</strong></p>
        <div className="kv-block">
          <div className="kv-row">
            <span className="k">Vendor</span><span className="v">Northwind Logistics</span><span className="flag high">99%</span>
          </div>
          <div className="kv-row">
            <span className="k">PO total</span><span className="v">$1,840.00</span><span className="flag high">98%</span>
          </div>
          <div className="kv-row">
            <span className="k">Quantity</span><span className="v">28 cases</span><span className="flag high">97%</span>
          </div>
          <div className="kv-row">
            <span className="k">Category</span><span className="v">packaging / consumables</span><span className="flag high">95%</span>
          </div>
          <div className="kv-row">
            <span className="k">Requested delivery</span><span className="v">May 28, 2026</span><span className="flag high">99%</span>
          </div>
        </div>

        <p>
          You don't need to do anything — this is an FYI. If this looks wrong, open the rule that fired and tighten it.
        </p>

        <div className="actions-row">
          <a className="btn btn-primary" href="#"><Icon.external size={13} /> View in Ariba</a>
          <a className="btn" href="#"><Icon.paperclip size={13} /> View attachment</a>
          <a className="btn btn-ghost" href="#">Edit Rule 2</a>
        </div>

        <div className="signoff">— Procura</div>

        <div className="disclaimer">
          You're receiving this because Procura is connected to <span className="mono">approver@company.com</span>.
          Procura did not contact the requester or the vendor.
        </div>
      </div>
    </div>
  );
}

/* -------- Auto denied -------- */
function EmailDenied() {
  return (
    <div className="email-card">
      <EmailHeader
        subject="Auto denied: PR# 4500382914 — Holiday Display Units"
        statusPill={<span className="pill pill-red"><span className="pdot"></span>Auto denied</span>}
        pr="PR# 4500382914"
      />
      <div className="email-body">
        <p>Hi Morgan,</p>
        <p>
          Procura auto-denied the SAP Ariba request for <strong>Holiday Display Units — Q4 Endcap Refresh</strong> at 09:42.
          The extracted spec sheet triggered one of your deny rules.
        </p>

        <div className="rule-callout">
          <div className="ic">!</div>
          <div className="body">
            <div className="label">Rule 1 triggered</div>
            <div style={{ marginTop: 4 }}>
              The extracted line-item total exceeds your single-PO spend cap.
            </div>
            <div className="expr mono">price &gt; $50,000  →  Deny</div>
          </div>
        </div>

        <p style={{ marginBottom: 6 }}><strong>What we extracted from the attachment:</strong></p>
        <div className="kv-block">
          <div className="kv-row">
            <span className="k">Vendor</span><span className="v">FixtureWorks Inc.</span><span className="flag high">98%</span>
          </div>
          <div className="kv-row">
            <span className="k">PO total</span><span className="v">$89,400.00</span><span className="flag high">99%</span>
          </div>
          <div className="kv-row">
            <span className="k">Line items</span><span className="v">14 SKUs · 280 units</span><span className="flag high">96%</span>
          </div>
          <div className="kv-row">
            <span className="k">Category</span><span className="v">store-fixtures / seasonal</span><span className="flag high">94%</span>
          </div>
          <div className="kv-row">
            <span className="k">Requested delivery</span><span className="v">Oct 14, 2026</span><span className="flag high">99%</span>
          </div>
        </div>

        <p>
          If this was the wrong call, you can override the decision in Ariba within 24 hours.
          The vendor and requester were not contacted by Procura.
        </p>

        <div className="actions-row">
          <a className="btn btn-primary" href="#">
            <Icon.external size={13} /> View in Ariba
          </a>
          <a className="btn" href="#"><Icon.paperclip size={13} /> View attachment</a>
          <a className="btn btn-ghost" href="#">Override decision</a>
        </div>

        <div className="signoff">— Procura</div>

        <div className="disclaimer">
          Auto-deny was applied because Rule 1 fired with high-confidence extraction (≥94% across all fields).
        </div>
      </div>
    </div>
  );
}

/* -------- Escalated -------- */
function EmailEscalated() {
  return (
    <div className="email-card">
      <EmailHeader
        subject="Action required: PR# 4500382912 escalated for review"
        statusPill={<span className="pill pill-orange"><span className="pdot"></span>Escalated for review</span>}
        pr="PR# 4500382912"
      />
      <div className="email-body">
        <p>Hi Morgan,</p>
        <p>
          Procura escalated the SAP Ariba request for <strong>Cleaning Supplies Replenishment — Stores 412, 418, 419</strong>.
          We couldn't decide automatically, so the call is yours.
        </p>

        <div className="rule-callout" style={{ borderColor: "var(--orange-border)", background: "var(--orange-soft)" }}>
          <div className="ic" style={{ background: "var(--orange)" }}>?</div>
          <div className="body" style={{ color: "oklch(0.4 0.13 55)" }}>
            <div className="label" style={{ color: "oklch(0.5 0.17 55)" }}>Why this was escalated</div>
            <div style={{ marginTop: 4 }}>
              Attachment is a scanned PDF. 6 of 14 extracted fields fell below your 60% confidence threshold, so no rule could be evaluated reliably.
            </div>
          </div>
        </div>

        <p style={{ marginBottom: 6 }}><strong>What we read from the attachment (lower confidence highlighted):</strong></p>
        <div className="kv-block">
          <div className="kv-row">
            <span className="k">Vendor</span><span className="v">CleanCo Distribution</span><span className="flag high">91%</span>
          </div>
          <div className="kv-row">
            <span className="k">PO total</span><span className="v">$1,240.00 <span style={{ color: "var(--text-3)" }}>(or $7,240.00?)</span></span><span className="flag low">47%</span>
          </div>
          <div className="kv-row">
            <span className="k">Quantity</span><span className="v">— unreadable</span><span className="flag low">23%</span>
          </div>
          <div className="kv-row">
            <span className="k">Category</span><span className="v">cleaning-supplies</span><span className="flag high">88%</span>
          </div>
          <div className="kv-row">
            <span className="k">Line items</span><span className="v">8 SKUs (partial)</span><span className="flag low">54%</span>
          </div>
        </div>

        <p>
          <strong>Please open the attachment and decide directly in Ariba.</strong> Procura has not taken any action on this request.
        </p>

        <div className="actions-row">
          <a className="btn btn-primary" href="#"><Icon.paperclip size={13} /> Open attachment</a>
          <a className="btn" href="#"><Icon.external size={13} /> View in Ariba</a>
          <a className="btn btn-ghost" href="#">Re-run with stronger model</a>
        </div>

        <div className="signoff">— Procura</div>

        <div className="disclaimer">
          Procura did not auto-approve or auto-deny this request. The decision stays with you in Ariba.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EmailPreviewSection });