"use client";

import { useEffect, useState } from "react";

/** Registers the service worker and surfaces "update available" prompts. */
export function ServiceWorker() {
  const [updateReady, setUpdateReady] = useState(false);
  const [waiting, setWaiting] = useState<ServiceWorker | null>(null);

  useEffect(() => {
    if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return;
    let registration: ServiceWorkerRegistration | undefined;
    navigator.serviceWorker
      .register("/sw.js", { scope: "/" })
      .then((reg) => {
        registration = reg;
        reg.addEventListener("updatefound", () => {
          const installing = reg.installing;
          installing?.addEventListener("statechange", () => {
            if (installing.state === "installed" && navigator.serviceWorker.controller) {
              setWaiting(installing);
              setUpdateReady(true);
            }
          });
        });
      })
      .catch(() => undefined);

    const onControllerChange = () => window.location.reload();
    navigator.serviceWorker.addEventListener("controllerchange", onControllerChange);
    return () => navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
  }, []);

  if (!updateReady) return null;
  return (
    <div className="fixed bottom-4 left-4 z-[130] flex items-center gap-3 rounded-xl border border-line bg-bg-elevated p-3 shadow-2xl">
      <div className="text-sm">
        <p className="font-semibold">A new version of PlayTube is available</p>
        <p className="text-muted">Refresh to apply the update.</p>
      </div>
      <button
        className="rounded-full bg-brand px-4 py-1.5 text-sm font-semibold text-white"
        onClick={() => {
          waiting?.postMessage({ type: "SKIP_WAITING" });
          setUpdateReady(false);
        }}
      >
        Update
      </button>
    </div>
  );
}