// src/components/ui/ConfirmDialog.jsx
// Confirmation modal for destructive or significant actions.
// Wraps Modal with a centred icon + message layout.
//
// Props:
//   open          — boolean
//   onClose       — () => void
//   onConfirm     — () => void
//   title         — string  — modal heading
//   message       — string | ReactNode — body explanation
//   confirmLabel  — string  (default: 'Confirm')
//   cancelLabel   — string  (default: 'Cancel')
//   variant       — 'danger' | 'primary'   (default: 'danger')
//   loading       — boolean — shows spinner on confirm button
//   persistent    — boolean — prevent close on backdrop/Escape while loading

import Modal from '@/components/ui/Modal'
import Button from '@/components/ui/Button'

function DangerIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
      <line x1="12" y1="9" x2="12" y2="13" />
      <line x1="12" y1="17" x2="12.01" y2="17" />
    </svg>
  )
}

function PrimaryIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="10" />
      <line x1="12" y1="8" x2="12" y2="12" />
      <line x1="12" y1="16" x2="12.01" y2="16" />
    </svg>
  )
}

export default function ConfirmDialog({
  open,
  onClose,
  onConfirm,
  title = 'Are you sure?',
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  variant = 'danger',
  loading = false,
  persistent = false,
}) {
  const btnVariant = variant === 'danger' ? 'danger' : 'primary'

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={title}
      size="sm"
      persistent={persistent || loading}
      footer={
        <>
          <Button variant="ghost" onClick={onClose} disabled={loading}>
            {cancelLabel}
          </Button>
          <Button variant={btnVariant} onClick={onConfirm} loading={loading}>
            {confirmLabel}
          </Button>
        </>
      }
    >
      <div className="confirm-body">
        <div className={`confirm-icon-wrap confirm-icon-wrap-${variant}`}>
          {variant === 'danger' ? <DangerIcon /> : <PrimaryIcon />}
        </div>

        {message && (
          <p className="confirm-message">{message}</p>
        )}
      </div>
    </Modal>
  )
}
