'use client';

import { useBodyScrollLock } from '@/lib/body-scroll-lock';

interface AlertModalProps {
  isOpen: boolean;
  type: 'success' | 'error' | 'info' | 'warning';
  title: string;
  message: string;
  onClose: () => void;
}

export default function AlertModal({
  isOpen,
  type,
  title,
  message,
  onClose,
}: AlertModalProps) {
  useBodyScrollLock(isOpen);
  if (!isOpen) return null;

  const getStyles = () => {
    switch (type) {
      case 'success':
        return {
          bg: 'bg-green-50',
          titleColor: 'text-green-900',
          messageColor: 'text-green-800',
          icon: (
            <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          ),
          button: 'bg-green-600 text-white hover:bg-green-700',
        };
      case 'error':
        return {
          bg: 'bg-red-50',
          titleColor: 'text-red-900',
          messageColor: 'text-red-800',
          icon: (
            <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          ),
          button: 'bg-red-600 text-white hover:bg-red-700',
        };
      case 'warning':
        return {
          bg: 'bg-orange-50',
          titleColor: 'text-orange-900',
          messageColor: 'text-orange-800',
          icon: (
            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          ),
          button: 'bg-orange-600 text-white hover:bg-orange-700',
        };
      default:
        return {
          bg: 'bg-blue-50',
          titleColor: 'text-blue-900',
          messageColor: 'text-blue-800',
          icon: (
            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          ),
          button: 'bg-blue-600 text-white hover:bg-blue-700',
        };
    }
  };

  const styles = getStyles();

  return (
    <div 
      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
      onClick={onClose}
    >
      <div 
        className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className={`border-b border-gray-200 px-6 py-5 ${styles.bg}`}>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              {styles.icon}
              <h2 className={`text-xl font-semibold ${styles.titleColor}`}>
                {title}
              </h2>
            </div>
            <button
              type="button"
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="px-6 py-6">
          <p className={`text-sm font-medium ${styles.messageColor}`}>
            {message}
          </p>
        </div>

        {/* Footer */}
        <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
          <div className="flex justify-end">
            <button
              type="button"
              onClick={onClose}
              className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${styles.button}`}
            >
              OK
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}