<script lang="ts">
    import { onMount } from 'svelte';

    let status: string[] = $state([]);

    function log(msg: string) {
        status = [...status, `${new Date().toLocaleTimeString()} - ${msg}`];
        console.log(`[FIX-SW] ${msg}`);
    }

    async function nukeServiceWorkers() {
        log('Starting Service Worker cleanup...');
        
        if (!('serviceWorker' in navigator)) {
            log('Service Workers not supported in this browser.');
            return;
        }

        try {
            const registrations = await navigator.serviceWorker.getRegistrations();
            log(`Found ${registrations.length} registrations.`);

            for (const registration of registrations) {
                const scope = registration.scope;
                log(`Unregistering SW at scope: ${scope}`);
                const success = await registration.unregister();
                log(`Unregister success: ${success}`);
            }

            if (registrations.length === 0) {
                log('No active Service Workers found.');
            }

            log('Clearing Cache Storage...');
            const cacheKeys = await caches.keys();
            for (const key of cacheKeys) {
                log(`Deleting cache: ${key}`);
                await caches.delete(key);
            }
            log('Cache storage cleared.');

            log('DONE. Please reload the application now.');

        } catch (err: any) {
            log(`ERROR: ${err.message}`);
            console.error(err);
        }
    }

    onMount(() => {
        nukeServiceWorkers();
    });
</script>

<div class="p-8 max-w-2xl mx-auto font-mono">
    <h1 class="text-2xl font-bold mb-4 text-red-600">Service Worker Reset Tool</h1>
    <p class="mb-4">Attempting to unregister all service workers and clear caches to fix the TypeError loop.</p>
    
    <div class="bg-gray-100 p-4 rounded border border-gray-300 min-h-[200px]">
        {#each status as line}
            <div class="border-b border-gray-200 last:border-0 py-1">{line}</div>
        {/each}
    </div>

    <button 
        class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        onclick={() => window.location.reload()}
    >
        Reload Page
    </button>
</div>
