Events and Callbacks

import { CreateMLCEngine } from '@mlc-ai/web-llm';

const engine = await CreateMLCEngine(modelId, {
  initProgressCallback: (progress) => {
    console.log('Progress:', progress.progress);
    console.log('Status:', progress.text);
    
    // Update UI
    updateProgressBar(progress.progress);
    updateStatusText(progress.text);
  },
});

interface InitProgress {
  /** Progress value (0 to 1) */
  progress: number;
  
  /** Human-readable status text */
  text: string;
  
  /** Current phase */
  phase?: "download" | "compile" | "init";
}

self.addEventListener('install', (event) => {
  console.log('Service worker installing');
  
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(APP_ASSETS);
    })
  );
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activating');
  
  event.waitUntil(
    // Clean up old caches
    caches.keys().then((names) => {
      return Promise.all(
        names
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      );
    })
  );
});

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  // Log fetch events
  console.log('Fetch:', url.pathname);
  
  event.respondWith(handleFetch(event.request));
});

async function onCacheUpdate(cacheName: string, request: Request) {
  console.log('Cache updated:', cacheName, request.url);
  
  // Notify main thread
  const clients = await self.clients.matchAll();
  clients.forEach((client) => {
    client.postMessage({
      type: 'CACHE_UPDATE',
      cacheName,
      url: request.url,
    });
  });
}

async function onCacheMiss(request: Request) {
  console.log('Cache miss:', request.url);
  
  // Track for analytics
  incrementMissCounter(request.url);
}

navigator.serviceWorker.addEventListener('message', (event) => {
  switch (event.data.type) {
    case 'CACHE_UPDATE':
      handleCacheUpdate(event.data);
      break;
    case 'SYNC_COMPLETE':
      handleSyncComplete(event.data);
      break;
  }
});

navigator.serviceWorker.addEventListener('controllerchange', () => {
  console.log('New service worker active');
  
  // Optionally reload for fresh content
  // location.reload();
});

// Dispatch custom events for query lifecycle
function onQueryStart(question: string) {
  window.dispatchEvent(new CustomEvent('upas:query:start', {
    detail: { question, timestamp: Date.now() }
  }));
}

function onQueryComplete(response: QueryResponse, durationMs: number) {
  window.dispatchEvent(new CustomEvent('upas:query:complete', {
    detail: { response, durationMs }
  }));
}

// Listen for events
window.addEventListener('upas:query:complete', (event) => {
  const { durationMs } = event.detail;
  console.log('Query completed in', durationMs, 'ms');
});

// Dispatch sync lifecycle events
function onSyncStart() {
  window.dispatchEvent(new CustomEvent('upas:sync:start'));
}

function onSyncComplete(updatedPacks: string[]) {
  window.dispatchEvent(new CustomEvent('upas:sync:complete', {
    detail: { updatedPacks }
  }));
}

function onSyncError(error: Error) {
  window.dispatchEvent(new CustomEvent('upas:sync:error', {
    detail: { error: error.message }
  }));
}

function useModelStatus() {
  const [status, setStatus] = useState<RuntimeStatus>({
    runtime: 'none',
    modelStatus: 'loading',
  });
  
  useEffect(() => {
    const handleProgress = (event: CustomEvent) => {
      setStatus((prev) => ({
        ...prev,
        loadProgress: event.detail.progress,
      }));
    };
    
    window.addEventListener('upas:model:progress', handleProgress);
    return () => {
      window.removeEventListener('upas:model:progress', handleProgress);
    };
  }, []);
  
  return status;
}

function useModelStatus() {
  const status = ref<RuntimeStatus>({
    runtime: 'none',
    modelStatus: 'loading',
  });
  
  onMounted(() => {
    window.addEventListener('upas:model:ready', () => {
      status.value.modelStatus = 'ready';
    });
  });
  
  return { status };
}