// Screen 7: Vendor Address Approval
const { useState: useS7 } = React;

function Screen_VendorApproval() {
  const data = window.GoldaData;
  const [done, setDone] = useS7({});
  const pending = data.vendor_addresses.filter(v => !done[v.email]);

  return (
    <div>
      <div className="sec-head">
        <h2>Vendor Address Approval</h2>
        <span className="sec-count">{pending.length} pending</span>
        <div className="sec-actions">
          <button className="btn btn-sm" title="Not enabled in this preview" disabled>Approved log →</button>
        </div>
      </div>

      <div className="banner info">
        <span style={{ fontSize: 16 }}>ⓘ</span>
        <div>
          Golda will not send the <strong>first message</strong> to any vendor email address until you approve it — even on trusted domains.
          Approve globally to skip this for future emails from the same address.
        </div>
      </div>

      {pending.length === 0 ? (
        <div className="card"><div className="empty">
          <div className="empty-art"/>
          <h3>All caught up</h3>
          <div>No vendor addresses waiting for first-use approval.</div>
        </div></div>
      ) : pending.map(v => (
        <div key={v.email} className="card" style={{ marginBottom: 10 }}>
          <div className="card-body">
            <div className="row" style={{ alignItems: "flex-start", gap: 14 }}>
              <div style={{ flex: 1 }}>
                <div className="row" style={{ gap: 8 }}>
                  <span className="mono" style={{ fontWeight: 600, fontSize: 13.5 }}>{v.email}</span>
                  {v.domainTrusted ? (
                    <span className="badge b-resolved"><span className="dot"/>Domain trusted</span>
                  ) : (
                    <span className="badge b-blocked"><span className="dot"/>Unknown domain</span>
                  )}
                  <span className="tag">First seen {v.firstSeen}</span>
                </div>
                <div style={{ marginTop: 8, fontSize: 12.5 }}>
                  <div className="muted" style={{ marginBottom: 2 }}>Thread</div>
                  <div className="row" style={{ gap: 8 }}>
                    <span className="mono" style={{ fontWeight: 500 }}>{v.threadSho}</span>
                    <span style={{ color: "var(--text-secondary)" }}>{v.threadSubject}</span>
                  </div>
                </div>
                <div style={{ marginTop: 8, fontSize: 12.5 }}>
                  <div className="muted" style={{ marginBottom: 2 }}>Pending send</div>
                  <div style={{
                    color: v.pendingSend.startsWith("[BLOCKED]") ? "var(--danger)" : "var(--text-primary)",
                    fontWeight: v.pendingSend.startsWith("[BLOCKED]") ? 600 : 400
                  }}>{v.pendingSend}</div>
                </div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 200 }}>
                <button className="btn btn-sm btn-primary" style={{ opacity: 0.5 }} title="Not enabled in this preview" disabled>Approve globally</button>
                <button className="btn btn-sm" style={{ opacity: 0.5 }} title="Not enabled in this preview" disabled>Approve this send only</button>
                <button className="btn btn-sm btn-danger" title="Not enabled in this preview" disabled>Block this address</button>
                {!v.domainTrusted && (
                  <div style={{ fontSize: 11, color: "var(--text-tertiary)", textAlign: "center", lineHeight: 1.4 }}>
                    Classify the domain in <strong>Domain Registry</strong> before approving this address.
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
window.Screen_VendorApproval = Screen_VendorApproval;