'use client';

import { useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { AlertCircle, AlertTriangle, Info, Loader2 } from 'lucide-react';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  description?: string;
  confirmText?: string;
  cancelText?: string;
  variant?: 'danger' | 'warning' | 'info';
  onConfirm: () => void;
  isLoading?: boolean;
}

export default function Modal({
  isOpen,
  onClose,
  title,
  description,
  confirmText = 'Подтвердить',
  cancelText = 'Отмена',
  variant = 'info',
  onConfirm,
  isLoading = false,
}: ModalProps) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      document.body.style.overflow = 'hidden';
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.body.style.overflow = '';
    };
  }, [isOpen, onClose]);

  const handleBackdropClick = useCallback(
    (e: React.MouseEvent) => {
      if (e.target === e.currentTarget) onClose();
    },
    [onClose]
  );

  if (!isOpen) return null;

  const variantStyles = {
    danger: {
      icon: <AlertTriangle className="h-5 w-5" />,
      iconWrap: 'border-red-500/30 bg-red-500/15 text-red-300',
      button: 'border-red-500/35 bg-red-500/15 text-red-100 hover:bg-red-500/25',
    },
    warning: {
      icon: <AlertCircle className="h-5 w-5" />,
      iconWrap: 'border-amber-500/30 bg-amber-500/15 text-amber-300',
      button: 'border-amber-500/35 bg-amber-500/15 text-amber-100 hover:bg-amber-500/25',
    },
    info: {
      icon: <Info className="h-5 w-5" />,
      iconWrap: 'border-violet-500/30 bg-violet-500/15 text-violet-300',
      button: 'border-violet-500/35 bg-violet-500/15 text-violet-100 hover:bg-violet-500/25',
    },
  };

  const currentVariant = variantStyles[variant];

  const modalContent = (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
      onClick={handleBackdropClick}
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <div className="w-full max-w-lg rounded-[1.5rem] border border-white/10 bg-[#0A0A0A]/95 p-6 shadow-[0_24px_80px_rgba(0,0,0,0.65)] backdrop-blur-xl">
        <div className="mb-6 flex items-start gap-4">
          <div className={`mt-0.5 inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border ${currentVariant.iconWrap}`}>
            {currentVariant.icon}
          </div>
          <div className="flex-1">
            <h3 id="modal-title" className="text-2xl font-bold tracking-tight text-white">
              {title}
            </h3>
            {description && (
              <p className="mt-2 text-base leading-relaxed text-gray-400">
                {description}
              </p>
            )}
          </div>
        </div>

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <button
            onClick={onClose}
            disabled={isLoading}
            className="inline-flex h-12 items-center justify-center rounded-xl border border-white/10 bg-white/[0.03] px-4 text-base font-semibold text-gray-200 transition-colors hover:bg-white/[0.08] hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
          >
            {cancelText}
          </button>
          <button
            onClick={onConfirm}
            disabled={isLoading}
            className={`inline-flex h-12 items-center justify-center gap-2 rounded-xl border px-4 text-base font-semibold transition-colors ${
              variant === 'info'
                ? 'border-transparent bg-gradient-to-r from-fuchsia-500 to-violet-600 text-white hover:from-fuchsia-500/90 hover:to-violet-600/90'
                : currentVariant.button
            } ${isLoading ? 'cursor-not-allowed opacity-70' : ''}`}
          >
            {isLoading ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                Загрузка...
              </>
            ) : (
              confirmText
            )}
          </button>
        </div>
      </div>
    </div>
  );

  if (typeof document === 'undefined') {
    return modalContent;
  }

  return createPortal(modalContent, document.body);
}