import { useEffect } from 'react'
import { AlertTriangle, Info, Trash2, X } from 'lucide-react'
import { clsx } from 'clsx'
import { useConfirmStore, type ConfirmVariant } from '@/store/confirm'
import { NeonButton } from './NeonButton'

const icons: Record<ConfirmVariant, React.ReactNode> = {
  danger: <Trash2 className="w-6 h-6" />,
  warning: <AlertTriangle className="w-6 h-6" />,
  info: <Info className="w-6 h-6" />,
}

const iconStyles: Record<ConfirmVariant, string> = {
  danger: 'bg-red-500/10 text-red-400 border border-red-500/30',
  warning: 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/30',
  info: 'bg-neon-500/10 text-neon-400 border border-neon-500/30',
}

const confirmButtonStyles: Record<ConfirmVariant, string> = {
  danger: 'border-red-500/50 text-red-400 hover:bg-red-500/10 hover:border-red-500',
  warning: 'border-yellow-500/50 text-yellow-400 hover:bg-yellow-500/10 hover:border-yellow-500',
  info: '', // Will use NeonButton default
}

export function ConfirmModal() {
  const { isOpen, options, handleConfirm, handleCancel } = useConfirmStore()

  // Handle escape key
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        handleCancel()
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [isOpen, handleCancel])

  // Prevent body scroll when modal is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
    return () => {
      document.body.style.overflow = ''
    }
  }, [isOpen])

  if (!isOpen || !options) return null

  const variant = options.variant || 'warning'
  const Icon = icons[variant]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200"
        onClick={handleCancel}
      />

      {/* Modal */}
      <div className="relative glass rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-dark-600">
        {/* Close button */}
        <button
          onClick={handleCancel}
          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
        >
          <X className="w-5 h-5" />
        </button>

        <div className="p-6">
          {/* Icon */}
          <div className={clsx('w-12 h-12 rounded-full flex items-center justify-center mb-4', iconStyles[variant])}>
            {Icon}
          </div>

          {/* Title */}
          <h3 className="text-xl font-bold text-white mb-2">
            {options.title}
          </h3>

          {/* Message */}
          <p className="text-gray-400 mb-6 whitespace-pre-line">
            {options.message}
          </p>

          {/* Actions */}
          <div className="flex gap-3">
            <NeonButton
              variant="secondary"
              className="flex-1"
              onClick={handleCancel}
            >
              {options.cancelText || 'Отмена'}
            </NeonButton>
            {variant === 'info' ? (
              <NeonButton
                className="flex-1"
                onClick={handleConfirm}
              >
                {options.confirmText || 'Подтвердить'}
              </NeonButton>
            ) : (
              <button
                className={clsx(
                  'flex-1 px-4 py-2.5 rounded-lg font-semibold transition-all duration-200 border-2 bg-transparent',
                  confirmButtonStyles[variant]
                )}
                onClick={handleConfirm}
              >
                {options.confirmText || 'Подтвердить'}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}