'use client'

import { XMarkIcon, ArrowPathIcon, TrashIcon, ArrowUturnLeftIcon } from '@heroicons/react/24/outline'

interface RevertConfirmDialogProps {
  isOpen: boolean
  fileName: string
  changeType: 'added' | 'modified' | 'deleted'
  onConfirm: () => void
  onCancel: () => void
  isLoading?: boolean
}

export default function RevertConfirmDialog({
  isOpen,
  fileName,
  changeType,
  onConfirm,
  onCancel,
  isLoading = false
}: RevertConfirmDialogProps) {
  if (!isOpen) return null

  const getConfig = () => {
    switch (changeType) {
      case 'added':
        return {
          title: 'Delete File',
          message: (
            <>
              Remove <span className="font-medium text-white">{fileName}</span> from your project?
              <span className="block text-red-400 text-sm mt-2">This action cannot be undone.</span>
            </>
          ),
          buttonText: isLoading ? 'Deleting...' : 'Delete File',
          buttonClass: 'bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800',
          glowColor: 'rgba(239, 68, 68, 0.3)',
          icon: TrashIcon,
          iconBg: 'bg-red-500/10',
          iconColor: 'text-red-400'
        }
      case 'modified':
        return {
          title: 'Revert',
          message: (
            <>
              Revert <span className="font-medium text-white">{fileName}</span> to the last committed version?
              <span className="block text-orange-400 text-sm mt-2">All current changes will be lost.</span>
            </>
          ),
          buttonText: isLoading ? 'Reverting...' : 'Revert',
          buttonClass: 'bg-gradient-to-r from-orange-600 to-orange-700 hover:from-orange-700 hover:to-orange-800',
          glowColor: 'rgba(251, 146, 60, 0.3)',
          icon: ArrowUturnLeftIcon,
          iconBg: 'bg-orange-500/10',
          iconColor: 'text-orange-400'
        }
      case 'deleted':
        return {
          title: 'Restore',
          message: (
            <>
              Restore <span className="font-medium text-white">{fileName}</span> from the last committed version?
            </>
          ),
          buttonText: isLoading ? 'Restoring...' : 'Restore',
          buttonClass: 'bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800',
          glowColor: 'rgba(16, 185, 129, 0.3)',
          icon: ArrowPathIcon,
          iconBg: 'bg-emerald-500/10',
          iconColor: 'text-emerald-400'
        }
      default:
        return {
          title: 'Confirm Action',
          message: <>This action will modify the file.</>,
          buttonText: isLoading ? 'Processing...' : 'Confirm',
          buttonClass: 'bg-gradient-to-r from-slate-600 to-slate-700 hover:from-slate-700 hover:to-slate-800',
          glowColor: 'rgba(148, 163, 184, 0.3)',
          icon: ArrowPathIcon,
          iconBg: 'bg-slate-500/10',
          iconColor: 'text-slate-400'
        }
    }
  }

  const config = getConfig()
  const Icon = config.icon

  const handleClose = () => {
    if (!isLoading) {
      onCancel()
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div 
        className="bg-slate-900 rounded-2xl shadow-2xl w-full max-w-md border border-slate-700/50 overflow-hidden"
        style={{ 
          boxShadow: `0 0 30px ${config.glowColor}, 0 0 60px rgba(124, 58, 237, 0.1), 0 0 90px rgba(168, 85, 247, 0.05)`,
          backdropFilter: 'blur(10px)'
        }}
      >
        {/* Header */}
        <div className="bg-slate-800/50 border-b border-slate-700/50 flex items-center justify-between p-4">
          <div className="flex items-center space-x-3">
            <div className={`p-2 ${config.iconBg} rounded-lg`}>
              <Icon className={`h-5 w-5 ${config.iconColor}`} />
            </div>
            <h2 
              className="text-lg font-semibold text-white"
              style={{ textShadow: `0 0 8px ${config.glowColor}` }}
            >
              {config.title}
            </h2>
          </div>
          <button
            onClick={handleClose}
            className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700/50 rounded-lg transition-all duration-200"
            disabled={isLoading}
            style={{ transition: 'all 0.2s ease' }}
            onMouseEnter={(e) => {
              if (!isLoading) {
                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-5 w-5" />
          </button>
        </div>

        {/* Content */}
        <div className="p-6">
          <div className="mb-6">
            <p className="text-slate-300 leading-relaxed">
              {config.message}
            </p>
          </div>

          {/* Actions */}
          <div className="flex gap-3">
            <button
              onClick={handleClose}
              disabled={isLoading}
              className="flex-1 px-4 py-2.5 text-sm font-medium text-slate-300 bg-slate-800/50 border border-slate-700 rounded-xl hover:bg-slate-700/50 hover:border-slate-600 transition-all duration-150 disabled:opacity-50"
            >
              Cancel
            </button>
            <button
              onClick={onConfirm}
              disabled={isLoading}
              className={`flex-1 px-4 py-2.5 text-sm font-medium text-white ${config.buttonClass} rounded-xl transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed`}
              style={{
                filter: `drop-shadow(0 0 8px ${config.glowColor})`
              }}
            >
              {isLoading ? (
                <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" />
                  {config.buttonText}
                </div>
              ) : (
                config.buttonText
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}