import { Workbox } from "workbox-window";

export default defineNuxtPlugin(() => {
    const updateAvailable = ref(false);

    let wb = null;

    if ("serviceWorker" in navigator) {
        wb = new Workbox("/sw.js");

        // Detect when a new service worker is waiting
        wb.addEventListener("waiting", () => {
            updateAvailable.value = true;
            showUpdateModal();
        });

        // Register the service worker
        wb.register();
    }

    // Handle update confirmation
    const handleUpdate = () => {
        if (updateAvailable) {
            // Send message to service worker to skip waiting
            wb?.messageSW({ type: "SKIP_WAITING" });

            // Wait for controller change and reload
            navigator.serviceWorker.addEventListener("controllerchange", () => {
                window.location.reload();
            });
        }
    };

    const handleUpdateAvailable = (state: boolean) => {
        updateAvailable.value = state;
    };

    return {
        provide: {
            updateAvailable,
            handleUpdate,
            handleUpdateAvailable,
        },
    };
});

function showUpdateModal() {
    // Create and show your modal UI here
    const modal = document.createElement("div");
    modal.innerHTML = `
    <div class="update-modal">
      <h2>New Version Available! 🎉</h2>
      <p>A new version of the app is available. Please update to get the latest features.</p>
      <button onclick="handleUpdate()">Update Now</button>
    </div>
  `;
    document.body.appendChild(modal);
}