<script lang="ts">
	/**
	 * Fase 14.1 — PWA update + offline-ready notification.
	 *
	 * Driven by two writable<boolean> stores produced by `useRegisterSW()`
	 * (or its test stub). The component is purely presentational: state
	 * lives in the stores, behaviour (`onReload`) is injected.
	 *
	 *  - When `needRefresh` flips true, a sticky pill appears with a
	 *    "Reload" button. Clicking it calls `onReload()` which is wired
	 *    in the root layout to `updateServiceWorker(true)`.
	 *  - When `offlineReady` flips true (first install), a transient
	 *    pill appears for 4s and then auto-dismisses.
	 *
	 * Both pills share the same bottom-center slot. If both fire at once
	 * the update toast wins (more actionable).
	 */
	import { onMount } from 'svelte';
	import type { Writable } from 'svelte/store';
	import * as m from '$lib/paraglide/messages';

	const {
		needRefresh,
		offlineReady,
		onReload
	}: {
		needRefresh: Writable<boolean>;
		offlineReady: Writable<boolean>;
		onReload: () => void | Promise<void>;
	} = $props();

	let showOfflineReady = $state(false);
	let offlineTimer: ReturnType<typeof setTimeout> | null = null;

	onMount(() => {
		const unsub = offlineReady.subscribe((v) => {
			if (!v) return;
			showOfflineReady = true;
			console.info('[pwa] offline-ready');
			if (offlineTimer) clearTimeout(offlineTimer);
			offlineTimer = setTimeout(() => {
				showOfflineReady = false;
				offlineReady.set(false);
			}, 4_000);
		});
		return () => {
			unsub();
			if (offlineTimer) clearTimeout(offlineTimer);
		};
	});

	async function handleReload() {
		console.info('[pwa] applying update');
		await onReload();
	}
</script>

{#if $needRefresh}
	<div
		data-testid="pwa-update-toast"
		role="status"
		aria-live="polite"
		class="pointer-events-none fixed inset-x-0 bottom-20 z-50 flex justify-center px-4 md:bottom-6"
	>
		<div
			class="pointer-events-auto flex items-center gap-3 rounded-full bg-slate-900 px-4 py-2 text-sm text-white shadow-[0px_20px_40px_rgba(15,23,42,0.3)] dark:bg-slate-100 dark:text-slate-900"
		>
			<span>{m.pwa_update_available()}</span>
			<button
				type="button"
				data-testid="pwa-update-reload"
				onclick={handleReload}
				class="rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white hover:bg-white/25 dark:bg-slate-900/15 dark:text-slate-900 dark:hover:bg-slate-900/25"
			>
				{m.pwa_update_reload()}
			</button>
		</div>
	</div>
{:else if showOfflineReady}
	<div
		data-testid="pwa-offline-ready-toast"
		role="status"
		aria-live="polite"
		class="pointer-events-none fixed inset-x-0 bottom-20 z-50 flex justify-center px-4 md:bottom-6"
	>
		<div
			class="pointer-events-auto flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm text-white shadow-[0px_20px_40px_rgba(15,23,42,0.3)] dark:bg-slate-100 dark:text-slate-900"
		>
			<span>{m.pwa_offline_ready()}</span>
		</div>
	</div>
{/if}
