import ReactDOM from "react-dom";
import styles from "./delete-modal.module.scss";
import { router } from "@inertiajs/react";
import { useState } from "react";
import { FiAlertTriangle } from "react-icons/fi";

interface DeleteModalProps {
  closeModal: () => void;
  deleteUrl: string;
  onSuccess?: () => void;
  message?: string;
}

const DeleteModal: React.FC<DeleteModalProps> = ({
  closeModal,
  deleteUrl,
  onSuccess,
  message,
}) => {
  const [loading, setLoading] = useState(false);

  const handleDelete = () => {
    if (!deleteUrl) return console.warn("Delete URL missing");

    setLoading(true);

    router.delete(deleteUrl, {
      preserveScroll: true,
      onSuccess: () => {
        closeModal();
        onSuccess?.();
      },
      onFinish: () => setLoading(false),
    });
  };

  return ReactDOM.createPortal(
    <div className={styles.modalBackdrop} onClick={closeModal}>
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Close
        <button className={styles.closeBtn} onClick={closeModal}>
          ×
        </button> */}

        {/* Icon */}
        <div className={styles.iconWrapper}>
          <FiAlertTriangle />
        </div>

        {/* Title */}
        <h2 className={styles.title}>Confirm Action</h2>

        {/* Message */}
        <p className={styles.message}>
          {message ??
            "Are you sure you want to delete this resource? This action cannot be undone."}
        </p>

        {/* Actions */}
        <div className={styles.actions}>
          <button
            className={styles.cancelBtn}
            onClick={closeModal}
            disabled={loading}
          >
            Cancel
          </button>

          <button
            className={styles.deleteBtn}
            onClick={handleDelete}
            disabled={loading}
          >
            {loading ? "Deleting..." : "Yes, Delete"}
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default DeleteModal;