## Task 7: UI — pulsante PDF (dettaglio + elenco)

**Files:**
- Create: `app/src/lib/components/PdfButton.svelte`
- Modify: `app/src/routes/agenzie/[id]/+page.server.ts` (passa lo stato PDF)
- Modify: `app/src/routes/agenzie/[id]/+page.svelte` (usa `PdfButton` nella sezione DVR)
- Modify: `app/src/routes/agenzie/+page.server.ts` e `+page.svelte` (icona nell'elenco)

**Interfaces:**
- Consumes: endpoint Task 6, `getPdfStatus` (Task 3) nel load del dettaglio.

- [ ] **Step 1: Componente `PdfButton.svelte`**

Componente Svelte 5 (runes) che riceve `agenziaId: number`, `state: PdfState`, `generatoIl: string|null`. Comportamento:
- `ready` → link/bottone "Scarica PDF" (+ data) → `GET /api/dvr/{id}/pdf`.
- `stale` → bottone "Aggiorna PDF" → `POST /api/dvr/{id}/pdf`, poi passa a `generating` + avvia polling; mostra anche "scarica versione precedente" (`?allowStale=1`).
- `generating` → spinner "PDF in aggiornamento, pronto tra ~1 min"; polling `GET ?mode=status` ogni 12s; a `ready` abilita il download.
- `error` → "Errore nella generazione — riprova" (POST).
- `missing` → "Genera PDF" (POST).

```svelte
<script lang="ts">
	let { agenziaId, state: initialState, generatoIl } = $props<{ agenziaId: number; state: string; generatoIl: string | null }>();
	let state = $state(initialState);
	let timer: ReturnType<typeof setInterval> | null = null;

	async function trigger() {
		const r = await fetch(`/api/dvr/${agenziaId}/pdf`, { method: 'POST' });
		if (r.ok || r.status === 202) { state = 'generating'; startPolling(); }
	}
	function startPolling() {
		if (timer) return;
		timer = setInterval(async () => {
			const r = await fetch(`/api/dvr/${agenziaId}/pdf?mode=status`);
			const j = await r.json();
			if (j.state !== 'generating') { state = j.state; if (timer) { clearInterval(timer); timer = null; } }
		}, 12000);
	}
	$effect(() => () => { if (timer) clearInterval(timer); });
</script>

{#if state === 'ready'}
	<a href={`/api/dvr/${agenziaId}/pdf`} class="inline-flex items-center gap-1.5 rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-600">Scarica PDF</a>
	{#if generatoIl}<span class="ml-2 text-xs text-slate-500">generato il {generatoIl.slice(0,10)}</span>{/if}
{:else if state === 'generating'}
	<span class="inline-flex items-center gap-2 text-sm text-slate-600"><span class="animate-spin">↻</span> PDF in aggiornamento, pronto tra ~1 min…</span>
	<a href={`/api/dvr/${agenziaId}/pdf?allowStale=1`} class="ml-2 text-xs text-slate-500 underline">scarica versione precedente</a>
{:else if state === 'stale'}
	<button onclick={trigger} class="inline-flex items-center gap-1.5 rounded-md bg-amber-500 px-4 py-2 text-sm font-semibold text-white">Aggiorna PDF</button>
	<a href={`/api/dvr/${agenziaId}/pdf?allowStale=1`} class="ml-2 text-xs text-slate-500 underline">scarica versione precedente</a>
{:else if state === 'error'}
	<button onclick={trigger} class="rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white">Errore — riprova</button>
{:else}
	<button onclick={trigger} class="rounded-md bg-brand-500 px-4 py-2 text-sm font-semibold text-white">Genera PDF</button>
{/if}
```

- [ ] **Step 2: Passa lo stato PDF nel load del dettaglio**

In `app/src/routes/agenzie/[id]/+page.server.ts`, importa `getPdfStatus` e aggiungi al return: `pdfStatus: await getPdfStatus(id)` (oggetto `{ state, generatoIl }` minimo).

- [ ] **Step 3: Usa `PdfButton` nel dettaglio**

In `app/src/routes/agenzie/[id]/+page.svelte`, dentro la sezione DVR, sostituisci/affianca il vecchio link "Apri DVR" con `<PdfButton agenziaId={a.id} state={data.pdfStatus.state} generatoIl={data.pdfStatus.generatoIl} />` (import del componente in testa).

- [ ] **Step 4: Icona nell'elenco**

In `app/src/routes/agenzie/+page.server.ts` la colonna `hasDvr` resta; aggiungi (query leggera) lo stato PDF se vuoi un'icona attiva, oppure nell'elenco mostra solo un link diretto `/api/dvr/{id}/pdf` con icona PDF (il click scarica se ready, altrimenti l'endpoint risponde 409 → in elenco basta l'icona che apre il dettaglio). Scelta MVP: in elenco mostra un'icona PDF che linka al **dettaglio** (dove c'è il `PdfButton` completo), per non moltiplicare le query di stato sull'elenco.

- [ ] **Step 5: Type-check + verifica visiva (Playwright su dev o prod dopo deploy)**

Run: `cd app && npm run check` → 0 errori.
Verifica: dettaglio di un'agenzia `ready` mostra "Scarica PDF"; di una `stale` mostra "Aggiorna PDF"; il click su Aggiorna passa a "in aggiornamento" e fa polling.

- [ ] **Step 6: Commit**

```bash
git add app/src/lib/components/PdfButton.svelte "app/src/routes/agenzie/[id]/+page.server.ts" "app/src/routes/agenzie/[id]/+page.svelte" app/src/routes/agenzie/+page.server.ts app/src/routes/agenzie/+page.svelte
git commit -m "PDF: UI pulsante con stati e polling (dettaglio + elenco)"
```

---