/* ============================================================
   queue.jsx — left pane: invoice inbox
   ============================================================ */
function QueueCard({ inv, selected, onSelect }) {
  const fmt = window.RECON.fmtMoney;
  return (
    <div className={`qcard${selected ? " sel" : ""}`} onClick={() => onSelect(inv.id)}>
      <div className="top">
        <span className="vendor">{inv.vendor}</span>
        <StatusPill status={inv.status} />
      </div>
      <div className="meta">
        <span className="inv mono">{inv.id}</span>
        <span className="dot-sep">·</span>
        <span className="src">
          <Icon name={inv.source === "pdf" ? "pdf" : "scan"} size={11} />
          {inv.source === "pdf" ? "Digital PDF" : "Scanned paper"}
        </span>
      </div>
      <div className="amt-row">
        <span className="amt">{fmt(inv.amount)}</span>
        <span className="when">{inv.received}</span>
      </div>
    </div>
  );
}

function Queue({ invoices, selectedId, onSelect, onUpload }) {
  const counts = invoices.reduce((a, i) => {
    const k = (i.status === "cleared") ? "verified"
      : (i.status === "disputed") ? "discrepancy"
      : (i.status === "review") ? "pending" : i.status;
    a[k] = (a[k] || 0) + 1; return a;
  }, {});
  return (
    <div className="pane">
      <div className="pane-hd">
        <div className="row">
          <h2>Invoice queue</h2>
          <span className="mono" style={{ fontSize: 11, color: "var(--rmai-fg-mut)" }}>{invoices.length} inbound</span>
        </div>
        <div className="sub">NorthLink Mfg · accounts payable</div>
        <div className="queue-meta">
          <span className="qstat"><span className="d" style={{ background: "var(--state-verified)" }}></span><span className="n">{counts.verified || 0}</span> verified</span>
          <span className="qstat"><span className="d" style={{ background: "var(--state-danger)" }}></span><span className="n">{counts.discrepancy || 0}</span> discrepancy</span>
          <span className="qstat"><span className="d" style={{ background: "var(--state-pending)" }}></span><span className="n">{counts.pending || 0}</span> pending</span>
        </div>
      </div>
      <div className="pane-body">
        <div className="qlist">
          {invoices.map((inv) => (
            <QueueCard key={inv.id} inv={inv} selected={inv.id === selectedId} onSelect={onSelect} />
          ))}
        </div>
        <div className="q-upload" onClick={onUpload}>
          <Icon name="upload" size={16} />
          <div className="t">Drop in your own invoice</div>
          <div className="s">Paste OCR text · runs live extraction + match</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Queue });