import React from "react";
import clsx from "clsx";
import { createPortal } from "react-dom";
import IconInfoCircle from "./Icon/IconInfoCircle";
import IconSquareCheck from "./Icon/IconSquareCheck";
import IconWarning from "./Icon/IconWarning";
import IconSiren from "./Icon/IconSiren";

type ModalType = "info" | "success" | "warning" | "danger";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm?: () => void;
  type?: ModalType;
  title?: string;
  message?: React.ReactNode;
  confirmText?: string;
  cancelText?: string;
  hideCancel?: boolean;
}

const ConfirmationModal: React.FC<ModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  type = "info",
  title,
  message,
  confirmText = "Confirm",
  cancelText = "Cancel",
  hideCancel = false,
}) => {
  if (!isOpen) return null;

  const typeStyles = {
    info: "bg-blue-100 text-blue-600",
    success: "bg-green-100 text-green-600",
    warning: "bg-yellow-100 text-yellow-600",
    danger: "bg-red-100 text-red-600",
  };

  const icons = {
    info: <IconInfoCircle />,
    success: <IconSquareCheck />,
    warning: <IconWarning />,
    danger: <IconSiren />,
  };

  return createPortal(
    <div
      className="fixed inset-0 z-[999] bg-black/60 flex items-center justify-center px-4"
      onClick={onClose}
    >
      <div
        className="bg-white w-full max-w-md rounded-lg overflow-hidden shadow-lg"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Icon */}
        <div className="flex justify-center py-4">
          <div
            className={clsx(
              "w-16 h-16 flex items-center justify-center rounded-full text-xl",
              typeStyles[type]
            )}
          >
            {icons[type]}
          </div>
        </div>

        {/* Content */}
        <div className="px-6 pb-4 text-center">
          {title && <h3 className="text-lg font-semibold mb-2">{title}</h3>}
          {message && <div className="text-gray-600">{message}</div>}
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-3 px-6 py-4 border-t">
          {!hideCancel && (
            <button
              className="px-4 py-2 border rounded-md text-gray-600 hover:bg-gray-100"
              onClick={onClose}
            >
              {cancelText}
            </button>
          )}

          <button
            className="px-4 py-2 bg-red-600 text-white rounded-md"
            onClick={() => {
              onConfirm?.();
              onClose();
            }}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default ConfirmationModal;