import { useEffect } from 'react'
import clsx from 'clsx'

interface ConfirmDialogProps {
  isOpen: boolean
  title: string
  message: React.ReactNode
  confirmLabel?: string
  cancelLabel?: string
  /** When true, the confirm button uses the destructive accent. */
  destructive?: boolean
  onConfirm: () => void
  onClose: () => void
}

/**
 * Tiny modal-confirmation dialog. Mirrors the AddSourceFolderDialog overlay
 * pattern (custom fixed inset-0 backdrop, no shadcn Dialog dep). Esc closes.
 */
export function ConfirmDialog({
  isOpen,
  title,
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  destructive = false,
  onConfirm,
  onClose,
}: ConfirmDialogProps) {
  // Esc to close.
  useEffect(() => {
    if (!isOpen) return
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [isOpen, onClose])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50">
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <div className="relative z-10 w-96 rounded-lg border border-border bg-surface p-5 shadow-2xl">
          <h2 className="mb-2 text-base font-semibold text-text">{title}</h2>
          <div className="mb-4 text-sm text-text-muted">{message}</div>
          <div className="flex justify-end gap-2">
            <button
              onClick={onClose}
              className="rounded border border-border px-3 py-1.5 text-sm text-text hover:bg-surface-2"
            >
              {cancelLabel}
            </button>
            <button
              onClick={onConfirm}
              className={clsx(
                'rounded px-3 py-1.5 text-sm font-medium text-white',
                destructive
                  ? 'bg-reject hover:bg-reject/80'
                  : 'bg-primary hover:bg-primary/80'
              )}
            >
              {confirmLabel}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}