import { useEffect, useState } from "react";
import IconTrashLines from "./Icon/IconTrashLines";
import axios from "axios";
import { toast } from "react-toastify";
import api from '../api/axios';
interface Props {
    open: boolean;
    title?: string;
    message?: string;
    onClose: () => void;
    onConfirm: () => void;
    staffId?: number | string;
}

const DeleteModal = ({
    open,
    title = "Delete Confirmation",
    message = "Are you sure you want to delete this item?",
    onClose,
    onConfirm,
    staffId,
}: Props) => {
    const [show, setShow] = useState(open);
    const [isDeleting, setIsDeleting] = useState(false);

    useEffect(() => {
        setShow(open);
    }, [open]);

    const handleDelete = async () => {
        if (!staffId) {
            onConfirm();
            onClose();
            return;
        }

        setIsDeleting(true);
        try {
            const response = await api.delete(`/staff/${staffId}/delete`);
            if (response.data.status) {
                toast.success('Staff deleted successfully');
                onConfirm();
                onClose();
            }
        } catch (error: any) {
            toast.error(error.response?.data?.message || 'Failed to delete staff');
        } finally {
            setIsDeleting(false);
        }
    };

    if (!show) return null;

    return (
        <div className="fixed inset-0 bg-black/60 z-[999] flex items-center justify-center px-4">
            <div className="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-md bg-white dark:bg-[#121c2c]">
                <div className="flex py-4 bg-[#fbfbfb] dark:bg-[#1b2e4b] items-center justify-center">
                    <div className="w-14 h-14 rounded-full bg-red-100 flex items-center justify-center">
                        <IconTrashLines className="text-danger"/>
                    </div>
                </div>

                <div className="p-5 text-center">
                    <h2 className="text-lg font-semibold text-black dark:text-white">
                        {title}
                    </h2>

                    <p className="text-sm text-gray-500 dark:text-white-dark mt-2">
                        {message}
                    </p>

                    <div className="flex justify-center gap-4 mt-6">
                        <button
                            type="button"
                            className="btn btn-outline-secondary"
                            onClick={onClose}
                            disabled={isDeleting}
                        >
                            No, Cancel
                        </button>

                        <button
                            type="button"
                            className="btn btn-danger"
                            onClick={handleDelete}
                            disabled={isDeleting}
                        >
                            {isDeleting ? 'Deleting...' : 'Yes, Delete'}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DeleteModal;