window.showToast = (message, type = "success") => {
    const container = document.querySelector(".toast-container") || createToastContainer();
    const toastEl = document.createElement("div");

    toastEl.className = `toast align-items-center text-white border-0 mb-2 bg-${type === "error" ? "danger" :
            type === "warning" ? "warning" :
                type === "info" ? "info" : "success"
        }`;

    toastEl.role = "alert";
    toastEl.innerHTML = `
        <div class="d-flex">
            <div class="toast-body fw-semibold">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;

    container.appendChild(toastEl);
    const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
    toast.show();

    toastEl.addEventListener("hidden.bs.toast", () => toastEl.remove());
};

function createToastContainer() {
    const container = document.createElement("div");
    container.className = "toast-container position-fixed bottom-0 end-0 p-3";
    document.body.appendChild(container);
    return container;
}
