import React from 'react';
import { Modal, Button } from '@akinon/next/components';
import mpBlackLogo from '../assets/img/masterpass-black-logo.png';
import type { InformationModalType, InformationModalData } from '../types/payment.types';

export interface InformationModalProps {
  open: boolean;
  onClose: () => void;
  data: InformationModalData | null;
  onButtonClick?: () => void;
}

const iconMap: Record<InformationModalType, React.ReactNode> = {
  warning: (
    <svg
      className="w-8 h-8 text-amber-600"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  ),
  error: (
    <svg
      className="w-8 h-8 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>
  ),
  success: (
    <svg
      className="w-8 h-8 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>
  ),
  info: (
    <svg
      className="w-8 h-8 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>
  )
};

const bgColorMap: Record<InformationModalType, string> = {
  warning: 'bg-amber-100',
  error: 'bg-red-100',
  success: 'bg-green-100',
  info: 'bg-blue-100'
};

const InformationModal: React.FC<InformationModalProps> = ({
  open,
  onClose,
  data,
  onButtonClick
}) => {
  const handleButtonClick = () => {
    if (onButtonClick) {
      onButtonClick();
    } else {
      onClose();
    }
  };

  if (!data) return null;

  const { type, title, message, secondaryMessage, buttonText } = data;

  return (
    <Modal
      portalId="masterpass-information-modal"
      open={open}
      setOpen={onClose}
      title={
        <img src={mpBlackLogo.src} alt="Masterpass" className="w-36 h-auto" />
      }
      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
    >
      <div className="px-6 py-4">
        <div className="flex flex-col items-center text-center">
          <div className={`w-16 h-16 rounded-full ${bgColorMap[type]} flex items-center justify-center mb-4`}>
            {iconMap[type]}
          </div>
          <h3 className="text-lg font-semibold text-gray-900 mb-2">
            {title}
          </h3>
          <p className="text-sm text-gray-600 mb-3">
            {message}
          </p>
          {secondaryMessage && (
            <p className="text-xs text-gray-500 mb-6">
              {secondaryMessage}
            </p>
          )}
          <Button
            className="w-full py-3 h-auto"
            onClick={handleButtonClick}
          >
            {buttonText}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default InformationModal;