// SuspendModal — D7 + I7 gold standard: ReasonCodeSelector + ApprovalChain (dual approval).

const REASON_CODES = [
  { code: "sanctions_match",     label: "Sanctions list match" },
  { code: "repeated_kyc_fail",   label: "Repeated KYC failure" },
  { code: "payment_compliance",  label: "Payment non-compliance" },
  { code: "platform_tos",        label: "Terms of service violation" },
  { code: "customer_request",    label: "Customer support request" },
  { code: "fraud_review",        label: "Fraud review (active investigation)" },
];

const APPROVERS = [
  { id: "alex",  name: "Alex Chen",       role: "Sales" },
  { id: "pim",   name: "Pim Suksamran",   role: "Compliance" },
  { id: "daniel",name: "Daniel Park",     role: "C-Suite (CEO)" },
];

function SuspendModal({ open, count, onClose, onConfirm }) {
  const [reason, setReason] = React.useState("");
  const [notes, setNotes] = React.useState("");
  const [secondApprover, setSecondApprover] = React.useState("");

  React.useEffect(() => {
    if (!open) {
      setReason(""); setNotes(""); setSecondApprover("");
    }
  }, [open]);

  const valid = reason && secondApprover;

  return (
    <div className={"modal " + (open?"open":"")} role="dialog" aria-modal="true" aria-hidden={!open}>
      <div className="modal-card">
        <header className="modal-head">
          <i className="ti ti-alert-triangle"></i>
          <h2>Suspend {count} {count === 1 ? "tenant" : "tenants"}</h2>
        </header>
        <div className="modal-body">
          <div className="desc">
            This will prevent the selected tenants and all their users from accessing the platform. The action is logged to the audit trail and requires a second approver before it takes effect.
          </div>

          <div>
            <label className="field-label">Reason for suspension <span style={{color:"var(--color-text-on-danger)"}}>required</span></label>
            <select className="select" value={reason} onChange={e => setReason(e.target.value)}>
              <option value="">— Select a reason</option>
              {REASON_CODES.map(r => <option key={r.code} value={r.code}>{r.label}</option>)}
            </select>
          </div>

          <div>
            <label className="field-label">Notes (visible to second approver)</label>
            <textarea className="textarea" placeholder="Optional context for the approver…" value={notes} onChange={e => setNotes(e.target.value)} />
          </div>

          <div>
            <label className="field-label">Second approver <span style={{color:"var(--color-text-on-danger)"}}>required</span></label>
            <select className="select" value={secondApprover} onChange={e => setSecondApprover(e.target.value)}>
              <option value="">— Choose an approver</option>
              {APPROVERS.map(a => <option key={a.id} value={a.id}>{a.name} · {a.role}</option>)}
            </select>
          </div>

          <div className="approval-chain">
            <div className="label-caps">Approval chain</div>
            <div className="approver done">
              <div className="av">S</div>
              <div>
                <div className="name">Sarah Tan</div>
                <div className="role">System admin · initiator</div>
              </div>
              <div className="status"><span className="pill success">Ready</span></div>
            </div>
            <div className="approver pending">
              <div className="av">{secondApprover ? APPROVERS.find(a => a.id===secondApprover).name[0] : "?"}</div>
              <div>
                <div className="name">{secondApprover ? APPROVERS.find(a => a.id===secondApprover).name : "Choose approver"}</div>
                <div className="role">{secondApprover ? APPROVERS.find(a => a.id===secondApprover).role + " · second approver" : "Second approver"}</div>
              </div>
              <div className="status"><span className={"pill " + (secondApprover?"warning":"neutral")}>{secondApprover?"Awaiting":"Not set"}</span></div>
            </div>
          </div>
        </div>
        <footer className="modal-foot">
          <span style={{marginRight:"auto", fontSize:11, color:"var(--on-surface-variant)", display:"inline-flex", alignItems:"center", gap:6}}>
            <i className="ti ti-lock" style={{fontSize:14}}></i>
            Submit gated on reason + second approver (D7)
          </span>
          <button className="btn secondary" onClick={onClose}>Cancel</button>
          <button className={"btn danger" + (valid?"":" disabled")} disabled={!valid} onClick={() => onConfirm({reason, secondApprover, notes})}>
            Suspend {count} {count === 1 ? "tenant" : "tenants"}
          </button>
        </footer>
      </div>
    </div>
  );
}

window.SuspendModal = SuspendModal;