// Screen 4: Guard Panel (modal)
function GuardPanel({ decision, onClose }) {
  if (!decision) return null;
  const d = decision;
  const g = d.guards || [];
  if (!g.length) return null; // no guard data (live mode) — nothing to show
  const layers = [
    { n: 1, name: "Recipient Guard", desc: "Are the To/CC/BCC addresses approved for this engagement?", state: g[0]?.state },
    { n: 2, name: "Audience Guard", desc: "Is the right audience getting the right content (no customer info to vendor, etc.)?", state: g[1]?.state },
    { n: 3, name: "Data Access Guard", desc: "Does this email include only data Golda is allowed to share with this audience?", state: g[2]?.state },
    { n: 4, name: "SOP Guard", desc: "Does this action match the SOP for this customer and lane?", state: g[3]?.state },
    { n: 5, name: "Content Guard", desc: "Tone, professionalism, no hallucinated facts, no PII leaks.", state: g[4]?.state, note: g[4]?.note },
    { n: 6, name: "Duplicate Guard", desc: "Has Golda already asked this question recently?", state: g[5]?.state },
    { n: 7, name: "External Send Guard", desc: "Final gate for any external recipient — auto-send or hold for human approval?", state: g[6]?.state, note: g[6]?.note }
  ];
  const verdict = layers.some(l => l.state === "fail") ? "block"
                : layers.some(l => l.state === "warn") ? "hold"
                : "send";
  const copy = window.GoldaDecisionCopy(d);
  const verdictText = {
    block: ["HARD BLOCK", "Golda will not send this. Resolve the failed guard layer below to unblock."],
    hold: ["HOLD FOR HUMAN DECISION", "Golda paused this for a specific operator decision. Review the source email and confirm the named action only if it is right."],
    send: ["READY FOR CONFIRMATION", `All guard layers passed. Confirm “${copy.confirmLabel}” to continue.`]
  }[verdict];

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div className="golda-avatar">G</div>
          <h2>Guard panel — why Golda is holding this</h2>
          <span className="tag mono" style={{ marginLeft: 6 }}>{d.sho}</span>
          <div className="spacer"/>
          <button className="icon-btn" onClick={onClose}>✕</button>
        </div>
        <div className="modal-body">
          <div className={`verdict ${verdict}`}>
            <div className="verdict-icon">
              {verdict === "send" ? "✓" : verdict === "hold" ? "!" : "✕"}
            </div>
            <div>
              <div>{verdictText[0]}</div>
              <div className="verdict-sub">{verdictText[1]}</div>
            </div>
          </div>

          <div className="card-title" style={{ marginBottom: 8 }}>Recipients</div>
          <table className="guard-table" style={{ marginBottom: 18 }}>
            <thead><tr><th>Address</th><th>Type</th><th>Domain trust</th><th>Approval</th></tr></thead>
            <tbody>
              <tr><td><span className="mono">{d.to}</span></td><td><span className="badge b-wait-carrier">Vendor</span></td><td><span className="badge b-resolved"><span className="dot"/>Trusted</span></td><td>Approved 2024-11-12 by Noa</td></tr>
              {d.cc && <tr><td className="mono">{d.cc}</td><td><span className="badge b-wait-internal">Internal</span></td><td><span className="badge b-resolved"><span className="dot"/>Own domain</span></td><td>—</td></tr>}
            </tbody>
          </table>

          <div className="card-title" style={{ marginBottom: 8 }}>Guard layers</div>
          <table className="guard-table">
            <thead><tr><th style={{width: 32}}>#</th><th>Layer</th><th style={{width: 110}}>Result</th><th>Reason / Notes</th></tr></thead>
            <tbody>
              {layers.map(l => (
                <tr key={l.n}>
                  <td className="mono">{l.n}</td>
                  <td className="layer-name">{l.name}<div style={{ fontWeight: 400, color: "var(--text-tertiary)", fontSize: 11.5 }}>{l.desc}</div></td>
                  <td>
                    <span className={`guard-chip ${l.state}`}>
                      {l.state === "pass" ? "✓ Pass" : l.state === "warn" ? "! Warn" : "✕ Fail"}
                    </span>
                  </td>
                  <td className="reason">{l.note || (l.state === "pass" ? "—" : "")}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="modal-foot">
          <button className="btn" onClick={() => { onClose(); if (d && d.sho) window.GoldaGoto("shipment", { sho: d.sho }); }}>Open shipment</button>
          <button className="btn" onClick={() => window.GoldaOpenSource(d)}>{copy.openLabel}</button>
          <div className="spacer"/>
          <button className="btn btn-danger" onClick={onClose}>Dismiss / not correct</button>
          <button className="btn btn-primary" onClick={onClose}>{copy.confirmLabel}</button>
        </div>
      </div>
    </div>
  );
}
window.GuardPanel = GuardPanel;