<script lang="ts">
	// Dettaglio del giorno: tutti gli eventi attivi (non solo quelli che
	// iniziano), raggruppati per insegna come nella v1 — sul giorno più
	// affollato di agosto 2026, 115 eventi sono solo 74 insegne distinte, 30
	// delle quali compaiono più volte. Nessuna logica qui: `gruppi` arriva già
	// raggruppato/ordinato da `raggruppaPerInsegna()` (calendario.ts) su un
	// elenco già filtrato da `attiviIl()`, il componente si limita a
	// disegnarlo.
	import type { GruppoInsegnaGiorno } from '$lib/vista/calendario';
	import { formattaData, type IsoDate } from '$lib/date';

	interface Azienda {
		id: string;
		name: string;
		color: string;
	}

	let {
		giorno,
		gruppi,
		totale,
		eventiFiltrati,
		aziende,
		ricerca = $bindable(),
		onChiudi
	}: {
		giorno: IsoDate;
		gruppi: GruppoInsegnaGiorno[];
		/** Eventi attivi quel giorno, prima del filtro di ricerca del modale
		 *  (che restringe `gruppi` sotto). Con ricerca attiva la testata
		 *  diventa "N di totale eventi": un numero appoggiato sopra una lista
		 *  filtrata dev'essere il conteggio di quello che mostra, non un
		 *  totale fisso come nella v1 — letto da fuori sembrerebbe sbagliato. */
		totale: number;
		/** Eventi (non insegne) che passano il filtro di ricerca — stessa unità
		 *  di `totale`. `gruppi.length` conta le insegne, non gli eventi: usarlo
		 *  qui produceva "4 di 115 eventi" quando in realtà erano 9 eventi in 4
		 *  insegne (C2 della revisione finale). */
		eventiFiltrati: number;
		aziende: Azienda[];
		ricerca: string;
		onChiudi: () => void;
	} = $props();

	function azienda(companyId: string): Azienda | undefined {
		return aziende.find((a) => a.id === companyId);
	}

	// Senza il fuoco su qualcosa dentro il dialog, l'onkeydown sotto non
	// riceve mai Escape: alla creazione dell'elemento nessuno ha il focus.
	let dialogEl: HTMLDivElement | undefined = $state();
	$effect(() => dialogEl?.focus());

	// Accordion per insegna, stesso schema di src/routes/lista/+page.svelte.
	let aperte = $state(new Set<string>());
	function toggleAperta(insegna: string) {
		const nuove = new Set(aperte);
		if (nuove.has(insegna)) nuove.delete(insegna);
		else nuove.add(insegna);
		aperte = nuove;
	}
</script>

<div
	class="fixed inset-0 z-20 flex items-end justify-center bg-black/40 md:items-center"
	onclick={onChiudi}
	onkeydown={(e) => e.key === 'Escape' && onChiudi()}
	role="presentation"
>
	<div
		bind:this={dialogEl}
		class="flex max-h-[85vh] w-full flex-col rounded-t-2xl bg-white md:max-w-lg md:rounded-2xl"
		onclick={(e) => e.stopPropagation()}
		onkeydown={(e) => e.key === 'Escape' && onChiudi()}
		role="dialog"
		tabindex="-1"
		aria-modal="true"
		aria-label={`Eventi attivi il ${formattaData(giorno)}`}
	>
		<div class="flex items-center justify-between border-b border-slate-200 p-4">
			<div>
				<h2 class="text-lg font-semibold text-slate-900">{formattaData(giorno)}</h2>
				<p class="text-xs text-slate-500">
					{ricerca.trim() ? `${eventiFiltrati} di ${totale} eventi` : `${totale} event${totale === 1 ? 'o' : 'i'}`}
				</p>
			</div>
			<button
				type="button"
				onclick={onChiudi}
				class="flex min-h-11 min-w-11 items-center justify-center text-slate-500 hover:text-slate-800"
				aria-label="Chiudi"
			>
				✕
			</button>
		</div>

		<div class="border-b border-slate-200 p-3">
			<input
				type="search"
				autocomplete="off"
				bind:value={ricerca}
				placeholder="Cerca insegna…"
				class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
			/>
		</div>

		<ul class="flex-1 divide-y divide-slate-100 overflow-y-auto">
			{#each gruppi as gruppo (gruppo.insegna)}
				{@const aperto = aperte.has(gruppo.insegna)}
				<li>
					<button
						type="button"
						onclick={() => toggleAperta(gruppo.insegna)}
						class="flex min-h-11 w-full flex-col items-start gap-1.5 p-3 text-left"
						aria-expanded={aperto}
					>
						<span class="text-sm font-medium text-slate-900">{gruppo.insegna}</span>
						<div class="flex flex-wrap items-center gap-1.5">
							{#each gruppo.aziende as companyId (companyId)}
								{@const a = azienda(companyId)}
								<span
									class="rounded-full px-1.5 py-0.5 text-[10px] font-semibold text-white"
									style={`background-color: ${a?.color ?? '#94a3b8'}`}
								>
									{a?.name ?? companyId}
								</span>
							{/each}
							<span class="text-xs text-slate-500">
								{gruppo.numProdotti} prodott{gruppo.numProdotti === 1 ? 'o' : 'i'}
							</span>
						</div>
					</button>

					{#if aperto}
						<div class="space-y-2 border-t border-slate-100 bg-slate-50 p-3">
							{#each gruppo.periodi as periodo, i (i)}
								<div class={i < gruppo.periodi.length - 1 ? 'border-b border-slate-200 pb-2' : ''}>
									<div class="flex flex-wrap items-center gap-1.5">
										{#each periodo.aziende as companyId (companyId)}
											{@const a = azienda(companyId)}
											<span
												class="rounded-full px-1.5 py-0.5 text-[10px] font-semibold text-white"
												style={`background-color: ${a?.color ?? '#94a3b8'}`}
											>
												{a?.name ?? companyId}
											</span>
										{/each}
										<span class="text-xs text-slate-500">
											{formattaData(periodo.selloutStart)} – {formattaData(periodo.selloutEnd)}
										</span>
									</div>
									<ul class="mt-1 space-y-0.5 text-xs text-slate-700">
										{#each periodo.prodotti as p, j (j)}
											<li>
												{p.nome}{#if p.extraInfo}<span class="text-slate-400"> [{p.extraInfo}]</span>{/if}
											</li>
										{/each}
									</ul>
								</div>
							{/each}
						</div>
					{/if}
				</li>
			{:else}
				<li class="p-4 text-center text-sm text-slate-500">Nessun evento trovato</li>
			{/each}
		</ul>
	</div>
</div>
