'use client'

import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'

interface DeleteConfirmationDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: () => void
  loading: boolean
  title: string
  message: string
  confirmText?: string
  cancelText?: string
}

export default function DeleteConfirmationDialog({
  isOpen,
  onClose,
  onConfirm,
  loading,
  title,
  message,
  confirmText = "Delete",
  cancelText = "Cancel"
}: DeleteConfirmationDialogProps) {
  if (!isOpen) return null

  const handleClose = () => {
    if (!loading) {
      onClose()
    }
  }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-slate-900 rounded-lg shadow-xl w-full max-w-md mx-4 border border-slate-800"
           style={{ 
             boxShadow: '0 0 30px rgba(239, 68, 68, 0.2), 0 0 60px rgba(124, 58, 237, 0.1), 0 0 90px rgba(168, 85, 247, 0.05)',
             backdropFilter: 'blur(10px)'
           }}>
        <div className="flex items-center justify-between p-6 border-b border-slate-800">
          <div className="flex items-center gap-3">
            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
              <ExclamationTriangleIcon className="h-6 w-6 text-red-400" />
            </div>
            <h2 className="text-xl font-semibold text-white" 
                style={{ textShadow: '0 0 8px rgba(239, 68, 68, 0.3)' }}>
              {title}
            </h2>
          </div>
          <button
            onClick={handleClose}
            className="text-slate-400 hover:text-white transition-colors"
            disabled={loading}
            style={{ transition: 'all 0.2s ease' }}
            onMouseEnter={(e) => {
              e.currentTarget.style.filter = 'drop-shadow(0 0 4px rgba(124, 58, 237, 0.5))'
              e.currentTarget.style.transform = 'scale(1.1)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.filter = 'none'
              e.currentTarget.style.transform = 'scale(1)'
            }}
          >
            <XMarkIcon className="h-6 w-6" />
          </button>
        </div>

        <div className="p-6">
          <p className="text-slate-300 text-sm leading-relaxed mb-6">
            {message}
          </p>

          {/* Action Buttons */}
          <div className="flex gap-4">
            <button
              type="button"
              onClick={handleClose}
              disabled={loading}
              className="flex-1 px-4 py-2 text-sm font-medium text-slate-300 bg-slate-800 border border-slate-700 rounded-md hover:bg-slate-700 hover:border-slate-600 transition-colors disabled:opacity-50"
            >
              {cancelText}
            </button>
            <button
              type="button"
              onClick={onConfirm}
              disabled={loading}
              className="flex-1 px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 rounded-md transition-all disabled:opacity-50 disabled:cursor-not-allowed"
              style={{
                background: loading ? 'linear-gradient(to right, #dc2626, #b91c1c)' : 'linear-gradient(to right, #dc2626, #b91c1c)',
                filter: 'drop-shadow(0 0 8px rgba(239, 68, 68, 0.3))'
              }}
            >
              {loading ? (
                <div className="flex items-center justify-center gap-2">
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  Deleting...
                </div>
              ) : (
                confirmText
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}