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

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/20 text-red-500',
  warning: 'bg-yellow-500/20 text-yellow-500',
  info: 'bg-blue-500/20 text-blue-500',
}

const buttonVariants: Record<ConfirmVariant, 'danger' | 'primary' | 'secondary'> = {
  danger: 'danger',
  warning: 'primary',
  info: 'primary',
}

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 bg-gray-800 rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-gray-700">
        {/* 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">
            <Button
              variant="secondary"
              className="flex-1"
              onClick={handleCancel}
            >
              {options.cancelText || 'Отмена'}
            </Button>
            <Button
              variant={buttonVariants[variant]}
              className="flex-1"
              onClick={handleConfirm}
            >
              {options.confirmText || 'Подтвердить'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}