import React from 'react';
import { Modal } from '../modal';
import Button from '../button/Button';

export type AlertModalVariant = 'success' | 'info' | 'warning' | 'danger';

interface AlertModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  message: string;
  variant?: AlertModalVariant;
  buttonText?: string;
  // Confirmation mode props
  isConfirmation?: boolean;
  onConfirm?: () => void;
  confirmText?: string;
  cancelText?: string;
  isLoading?: boolean;
  itemsList?: string[]; // For showing items being deleted (max 5)
}

export default function AlertModal({
  isOpen,
  onClose,
  title,
  message,
  variant = 'info',
  buttonText = 'Okay, Got It',
  isConfirmation = false,
  onConfirm,
  confirmText = 'Okay, Got It',
  cancelText = 'Cancel',
  isLoading = false,
  itemsList = [],
}: AlertModalProps) {
  // Icon configurations for each variant - matching design from images
  const iconConfig = {
    success: (
      <div className="relative flex items-center justify-center w-24 h-24 mx-auto mb-6">
        {/* Light green flower-like outer shape with rounded petals */}
        <div className="absolute inset-0 bg-success-100 rounded-full" style={{
          clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
          width: '80px',
          height: '80px'
        }}></div>
        {/* Dark green inner circle */}
        <div className="relative bg-success-600 rounded-full w-16 h-16 flex items-center justify-center">
          <svg
            className="w-8 h-8 text-white"
            fill="none"
            stroke="currentColor"
            strokeWidth={3}
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>
      </div>
    ),
    info: (
      <div className="relative flex items-center justify-center w-24 h-24 mx-auto mb-6">
        {/* Light blue cloud-like background */}
        <div className="absolute inset-0 bg-blue-light-100 rounded-full blur-2xl opacity-50" style={{
          width: '90px',
          height: '90px',
          transform: 'scale(1.1)'
        }}></div>
        {/* Blue circle with 'i' */}
        <div className="relative bg-blue-light-500 rounded-full w-16 h-16 flex items-center justify-center shadow-lg">
          <span className="text-white text-4xl font-bold leading-none">i</span>
        </div>
      </div>
    ),
    warning: (
      <div className="relative flex items-center justify-center w-24 h-24 mx-auto mb-6">
        {/* Light orange cloud-like background */}
        <div className="absolute inset-0 bg-warning-100 rounded-full blur-2xl opacity-50" style={{
          width: '90px',
          height: '90px',
          transform: 'scale(1.1)'
        }}></div>
        {/* White circle */}
        <div className="relative bg-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg">
          {/* Orange circle with exclamation */}
          <div className="bg-warning-500 rounded-full w-16 h-16 flex items-center justify-center absolute -inset-1">
            <span className="text-white text-4xl font-bold leading-none">!</span>
          </div>
        </div>
      </div>
    ),
    danger: (
      <div className="relative flex items-center justify-center w-24 h-24 mx-auto mb-6">
        {/* Light red cloud-like background */}
        <div className="absolute inset-0 bg-error-100 rounded-full blur-2xl opacity-50" style={{
          width: '90px',
          height: '90px',
          transform: 'scale(1.1)'
        }}></div>
        {/* Light red circle with red X */}
        <div className="relative bg-error-100 rounded-full w-16 h-16 flex items-center justify-center">
          <svg
            className="w-10 h-10 text-error-500"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              fillRule="evenodd"
              d="M18.364 5.636a1 1 0 010 1.414L13.414 12l4.95 4.95a1 1 0 11-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 01-1.414-1.414L10.586 12 5.636 7.05a1 1 0 011.414-1.414L12 10.586l4.95-4.95a1 1 0 011.414 0z"
              clipRule="evenodd"
            />
          </svg>
        </div>
      </div>
    ),
  };

  // Button color configurations
  const buttonConfig = {
    success: 'bg-success-500 hover:bg-success-600 text-white',
    info: 'bg-blue-light-500 hover:bg-blue-light-600 text-white',
    warning: 'bg-warning-500 hover:bg-warning-600 text-white',
    danger: 'bg-error-500 hover:bg-error-600 text-white',
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      className="max-w-md"
    >
      <div className="px-8 py-10 text-center">
        {/* Icon */}
        {iconConfig[variant]}

        {/* Title */}
        <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
          {title}
        </h2>

        {/* Items List (for delete confirmations) */}
        {itemsList.length > 0 && (
          <div className="mb-6">
            <ul className="text-left text-gray-700 dark:text-gray-300 text-sm space-y-1 max-w-md mx-auto">
              {itemsList.slice(0, 5).map((item, index) => (
                <li key={index} className="italic">
                  • {item}
                </li>
              ))}
              {itemsList.length > 5 && (
                <li className="text-gray-500 dark:text-gray-400 italic">
                  ... and {itemsList.length - 5} more
                </li>
              )}
            </ul>
          </div>
        )}

        {/* Message */}
        <p className="text-gray-600 dark:text-gray-400 mb-8 text-sm leading-relaxed">
          {message}
        </p>

        {/* Buttons */}
        {isConfirmation ? (
          <div className="flex justify-center gap-3">
            <button
              onClick={onClose}
              disabled={isLoading}
              className="px-6 py-3 rounded-lg font-medium text-sm transition-colors shadow-sm bg-gray-200 hover:bg-gray-300 text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {cancelText}
            </button>
            <button
              onClick={onConfirm}
              disabled={isLoading}
              className={`px-6 py-3 rounded-lg font-medium text-sm transition-colors shadow-sm ${buttonConfig[variant]} disabled:opacity-50 disabled:cursor-not-allowed`}
            >
              {isLoading ? 'Processing...' : confirmText}
            </button>
          </div>
        ) : (
          <div className="flex justify-center">
            <button
              onClick={onClose}
              className={`px-6 py-3 rounded-lg font-medium text-sm transition-colors shadow-sm ${buttonConfig[variant]}`}
            >
              {buttonText}
            </button>
          </div>
        )}
      </div>
    </Modal>
  );
}

