// Atlas · Reusable confirmation modal
//
// A presentational, callback-driven yes/no dialog matching the app's modal
// convention (modal-backdrop / modal / header / body / footer, as used by
// UpgradeModal and SettingsModal). It holds no app knowledge — the caller passes
// the copy and the onConfirm/onClose callbacks. Rendered at the app top level and
// opened via app.jsx's requestConfirm({...}) helper (state-carried action pattern),
// so any child component can request a confirmation without its own overlay.
function ConfirmModal({
  title = "Are you sure?",
  message = "",
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  danger = false,
  onConfirm,
  onClose,
}) {
  return (
    <div className="modal-backdrop" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 440 }}>
        <div className="modal-header">
          <h2>{title}</h2>
          <button className="modal-close" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <div className="modal-body">
          {message && (
            <p style={{ color: "var(--ink-4)", fontSize: 14, lineHeight: 1.55, margin: "8px 0 4px" }}>
              {message}
            </p>
          )}
        </div>
        <div className="modal-footer" style={{ justifyContent: "flex-end", gap: 8 }}>
          {/* cancelLabel={null} gives an OK-only notice. */}
          {cancelLabel && <button className="btn ghost" onClick={onClose}>{cancelLabel}</button>}
          <button
            className="btn primary"
            style={danger ? { background: "var(--red, #c0392b)", borderColor: "var(--red, #c0392b)" } : undefined}
            onClick={onConfirm}
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

window.ConfirmModal = ConfirmModal;