import { useState, type ReactNode } from 'react'
import Modal from './Modal'
import { AdminButton } from './Performative'

export type ConfirmVariant = 'danger' | 'primary'

interface ConfirmDialogProps {
  open: boolean
  onClose: () => void
  onConfirm: () => void | Promise<void>
  title: string
  message: ReactNode
  confirmLabel?: string
  cancelLabel?: string
  variant?: ConfirmVariant
}

export default function ConfirmDialog({
  open,
  onClose,
  onConfirm,
  title,
  message,
  confirmLabel = 'Delete',
  cancelLabel = 'Cancel',
  variant = 'danger',
}: ConfirmDialogProps) {
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleConfirm = async () => {
    setSubmitting(true)
    setError(null)
    try {
      await onConfirm()
      onClose()
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err))
    } finally {
      setSubmitting(false)
    }
  }

  const handleClose = () => {
    if (submitting) return
    setError(null)
    onClose()
  }

  return (
    <Modal
      open={open}
      onClose={handleClose}
      title={title}
      size="sm"
      dismissable={!submitting}
      footer={
        <>
          <AdminButton
            type="button"
            onClick={handleClose}
            disabled={submitting}
          >
            {cancelLabel}
          </AdminButton>
          <AdminButton
            type="button"
            tone={variant === 'danger' ? 'danger' : 'primary'}
            onClick={handleConfirm}
            disabled={submitting}
            loading={submitting}
          >
            {confirmLabel}
          </AdminButton>
        </>
      }
    >
      <div className="confirm-message">{message}</div>
      {error && <div className="confirm-error" role="alert">{error}</div>}
    </Modal>
  )
}
