// HITLDialog.jsx — Human-in-the-loop checkpoint
function HITLDialog({ open, onApprove, onReject }) {
  if (!open) return null;
  const ops = [
    { verb: "POST", path: "/vendors", desc: "1 record · Acme Holdings GmbH" },
    { verb: "PATCH", path: "/invoice/4129", desc: "status → approved · €18,420.00" },
    { verb: "NOTIFY", path: "slack:#finance", desc: "Memo MEMO-0941 dispatched" },
  ];
  return (
    <div className="ask-modal__scrim" onClick={onReject}>
      <div className="ask-hitl" onClick={e => e.stopPropagation()}>
        <div className="ask-hitl__phase">Phase 2 · Human checkpoint</div>
        <h3 className="ask-hitl__title">Approve write to ERP-Production</h3>
        <p className="ask-hitl__desc">Agent will execute 3 operations against external systems. Human confirmation required before any write occurs.</p>
        <ol className="ask-hitl__plan">
          {ops.map((o, i) => (
            <li key={i} className="ask-hitl__op">
              <span className="ask-hitl__num">{String(i + 1).padStart(2, "0")}</span>
              <span className="ask-hitl__verb">{o.verb}</span>
              <code className="ask-hitl__path">{o.path}</code>
              <span className="ask-hitl__desc-line">{o.desc}</span>
            </li>
          ))}
        </ol>
        <div className="ask-hitl__sig">
          <Icon name="lock" size={14}/>
          <span>Signed by <strong>Matteo Rizzo</strong> · MFA verified · 2026-05-07 14:32 UTC</span>
        </div>
        <div className="ask-hitl__actions">
          <button className="btn btn-secondary" onClick={onReject}>Reject</button>
          <button className="btn btn-primary" onClick={onApprove}><Icon name="check" size={14}/> Approve &amp; sign</button>
        </div>
      </div>
    </div>
  );
}
window.HITLDialog = HITLDialog;