/* ============================================================
   evidence.jsx — slide-over (clause · PO · receipt) + upload modal
   (useState/useEffect come from helpers.jsx — shared global scope)
   ============================================================ */
function EvidenceCol({ col }) {
  return (
    <div className="ev-col">
      <div className="ech">
        <div className="k">{col.k}</div>
        <div className="src">{col.src}</div>
      </div>
      <div className="ebody">
        {col.clause && <div className="clause" dangerouslySetInnerHTML={{ __html: col.clause }} />}
        {col.kv && col.kv.map(([k, v], i) => (
          <div className="kv" key={i}><span className="vk">{k}</span><span className="vv">{v}</span></div>
        ))}
        {col.note && <div style={{ marginTop: 9 }} dangerouslySetInnerHTML={{ __html: col.note }} />}
      </div>
    </div>
  );
}

function Evidence({ data, open, onClose }) {
  return (
    <>
      <div className={`scrim${open ? " open" : ""}`} onClick={onClose}></div>
      <aside className={`slideover${open ? " open" : ""}`} aria-hidden={!open}>
        {data && (
          <>
            <div className="so-hd">
              <div className="l">
                <div className="e">Evidence</div>
                <h3>{data.title}</h3>
              </div>
              <button className="x" onClick={onClose}><Icon name="x" size={16} /></button>
            </div>
            <div className="so-body">
              <div className="so-summary">
                <div className="txt" dangerouslySetInnerHTML={{ __html: data.summary }} />
                <div className="big">{data.amount}</div>
              </div>
              <div className="ev-grid">
                {data.cols.map((c, i) => <EvidenceCol key={i} col={c} />)}
              </div>
              <div className="ev-reasoning">
                <div className="h"><Icon name="cpu" size={14} />how the match was made</div>
                <p dangerouslySetInnerHTML={{ __html: data.reasoning }} />
              </div>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

/* ---------- Upload modal (paste-your-own → live extraction) ---------- */
const SAMPLE_PASTE = `BRIGHTWATER PLUMBING SUPPLIES   TAX INVOICE BW-3310
to: NorthLink Mfg   PO 7760   28/05/26
  copper pipe 15mm  60 m @ 12.40        744.00
  ball valves DN20  24 @ 18.50          444.00
  call-out / labour  3.5 hr @ 95.00     332.50
  fuel/delivery surcharge  9%           135.90
                          TOTAL ex GST  1,656.40
*note: PO rate for labour is 85.00/hr; delivery capped 6%`;

function UploadModal({ open, onClose, onRun, busy }) {
  const [text, setText] = useState("");
  useEffect(() => { if (!open) setText(""); }, [open]);
  return (
    <div className={`modal-scrim${open ? " open" : ""}`} onClick={(e) => { if (e.target.classList.contains("modal-scrim")) onClose(); }}>
      <div className="modal">
        <div className="mh">
          <h3>Drop in your own invoice</h3>
          <p>Paste the text of an invoice (as if OCR'd from a scan or copied from a PDF). It runs through the same live extraction and rate-match — exceptions are surfaced with a drafted note. No ledger is touched.</p>
        </div>
        <div className="mb">
          <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="Paste invoice text here…" />
          <div className="ex">Nothing handy? <button onClick={() => setText(SAMPLE_PASTE)}>Use a sample invoice</button></div>
        </div>
        <div className="mf">
          <button className="btn btn--ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn--clear" style={{ gridColumn: "auto" }} disabled={!text.trim() || busy} onClick={() => onRun(text)}>
            {busy ? <><span className="spin" style={{ width: 14, height: 14, border: "2px solid rgba(255,255,255,.3)", borderTopColor: "#fff", borderRadius: "50%", display: "inline-block", animation: "spin .7s linear infinite" }}></span>Extracting…</> : <><Icon name="zap" size={15} />Run extraction</>}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Evidence, UploadModal });