// Decision log section

const LOG_DATA = [
  {
    id: "d1",
    date: "May 16 · 09:42",
    pr: "PR# 4500382914",
    subject: "Holiday Display Units — Q4 Endcap Refresh",
    attach: "spec_sheet_v3.xlsx",
    ext: "xlsx",
    status: "denied",
    why: "Rule 1 triggered · line total $89,400 > $50,000 cap",
  },
  {
    id: "d2",
    date: "May 16 · 09:14",
    pr: "PR# 4500382913",
    subject: "Pallet Wrap & Stretch Film — Northwind Logistics",
    attach: "quote_NW_2026Q2.pdf",
    ext: "pdf",
    status: "approved",
    why: "Rule 2 matched · $15,600 ≤ $50,000 · preferred vendor",
  },
  {
    id: "d3",
    date: "May 15 · 16:28",
    pr: "PR# 4500382912",
    subject: "Cleaning Supplies Replenishment — Stores 412, 418, 419",
    attach: "ariba_attachment.pdf",
    ext: "pdf",
    status: "escalated",
    why: "Scanned PDF · 6 of 14 fields below 60% confidence",
  },
  {
    id: "d4",
    date: "May 15 · 11:03",
    pr: "PR# 4500382911",
    subject: "Printer Toner Replenishment — HQ Floor 4",
    attach: "OfficeMax_quote.pdf",
    ext: "pdf",
    status: "approved",
    why: "Rule 2 matched · $1,840 ≤ $5,000 · preferred vendor",
  },
  {
    id: "d5",
    date: "May 15 · 08:51",
    pr: "PR# 4500382910",
    subject: "Store Fixtures — Mid-Atlantic Remodel Wave 3",
    attach: "fixture_BOM_rev2.xlsx",
    ext: "xlsx",
    status: "denied",
    why: "Rule 1 triggered · line total $61,200 > $50,000 cap",
  },
];

const STATUS_PILL = {
  approved: <span className="pill pill-green"><span className="pdot"></span>Auto approved</span>,
  denied: <span className="pill pill-red"><span className="pdot"></span>Auto denied</span>,
  escalated: <span className="pill pill-orange"><span className="pdot"></span>Escalated for review</span>,
};

function countBy(rows, key) {
  return rows.filter((r) => r.status === key).length;
}

function StatStrip({ rows }) {
  const approved = countBy(rows, "approved");
  const denied = countBy(rows, "denied");
  const escalated = countBy(rows, "escalated");
  return (
    <div className="stat-strip">
      <div className="stat">
        <div className="label"><span className="pdot"></span>Total processed</div>
        <div className="num">{rows.length}</div>
        <div className="delta">In window May 10 – May 17</div>
      </div>
      <div className="stat" data-tone="green">
        <div className="label"><span className="pdot"></span>Auto approved</div>
        <div className="num">{approved}</div>
        <div className="delta">{rows.length ? Math.round((approved / rows.length) * 100) : 0}% of processed</div>
      </div>
      <div className="stat" data-tone="red">
        <div className="label"><span className="pdot"></span>Auto denied</div>
        <div className="num">{denied}</div>
        <div className="delta">{rows.length ? Math.round((denied / rows.length) * 100) : 0}% of processed</div>
      </div>
      <div className="stat" data-tone="orange">
        <div className="label"><span className="pdot"></span>Escalated</div>
        <div className="num">{escalated}</div>
        <div className="delta">{rows.length ? Math.round((escalated / rows.length) * 100) : 0}% of processed</div>
      </div>
    </div>
  );
}

function DecisionLogSection({ rows, setRows, runScan, scanning }) {
  return (
    <section className="section" data-accent="3" data-screen-label="03 Decision log">
      <div className="section-head">
        <div className="titles">
          <div className="eyebrow"><span className="dotnum"></span>Step 03 · Output</div>
          <h2>Decision log</h2>
          <div className="desc">Each row is a decision Procura took (or escalated). Original Ariba threads are not modified.</div>
        </div>
        <div className="actions">
          <button className="btn btn-sm" disabled={scanning}>
            <Icon.filter size={13} /> All statuses
            <Icon.chevron size={12} />
          </button>
          <button className="btn btn-sm btn-primary" onClick={runScan} disabled={scanning}>
            {scanning ? <React.Fragment><div className="spinner" style={{ borderColor: "rgba(255,255,255,0.3)", borderTopColor: "var(--bg)" }}></div> Running…</React.Fragment> : <React.Fragment><Icon.refresh size={13} /> Run scan</React.Fragment>}
          </button>
        </div>
      </div>

      <StatStrip rows={rows} />

      <div className="table-wrap" style={{ borderTop: "none" }}>
        <table className="t">
          <thead>
            <tr>
              <th style={{ width: 130, paddingLeft: 24 }}>Date</th>
              <th>Email subject</th>
              <th style={{ width: "20%" }}>Attachment</th>
              <th style={{ width: "30%" }}>Outcome</th>
              <th style={{ width: 64 }}></th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td colSpan={5} className="log-empty">
                  {scanning ? "Scanning inbox…" : "No decisions yet. Click Run scan to process the queued emails."}
                </td>
              </tr>
            )}
            {rows.map((row) => (
              <tr key={row.id} className="row-in">
                <td style={{ paddingLeft: 24 }} className="mono" >
                  <span style={{ color: "var(--text-2)", fontSize: 12 }}>{row.date}</span>
                </td>
                <td>
                  <div className="subject-cell">
                    <span className="pr mono">{row.pr}</span>
                    <span className="subj">{row.subject}</span>
                  </div>
                </td>
                <td>
                  <span className="attach-cell">
                    <Icon.paperclip size={13} />
                    <span style={{ fontSize: 12.5 }}>{row.attach}</span>
                    <span className="ext">{row.ext}</span>
                  </span>
                </td>
                <td>
                  <div>{STATUS_PILL[row.status]}</div>
                  <div className="recom-cell" style={{ marginTop: 4 }}>
                    <span className="why">{row.why}</span>
                  </div>
                </td>
                <td style={{ textAlign: "right", paddingRight: 16 }}>
                  <button className="btn btn-ghost btn-icon" title="Open decision">
                    <Icon.arrow size={14} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {rows.length > 0 && (
        <div className="log-foot">
          <span>{rows.length} of {LOG_DATA.length} processed</span>
          <span className="mono">Notification emails sent to <span style={{ color: "var(--text-2)" }}>approver@company.com</span></span>
        </div>
      )}
    </section>
  );
}

Object.assign(window, { DecisionLogSection, LOG_DATA, STATUS_PILL });