<script>
	import { resolve } from '$app/paths';
	import HeaderBar from '$lib/client/components/HeaderBar.svelte';
	import { bAS, bS } from '$lib/client/styles';

	let currentFilter = $state('');
	let { data } = $props();
	let prefix = $derived(data.prefix);

	let pageTitle = $derived(`${prefix.prefix} Winners by Name | TAM`);
	let filterTitle = $state('All Winners');

	const headers = ['Basket ID', 'Description', 'Winning Ticket', 'Winner Name', 'Phone Number'];

	let reportLines = $derived.by(() => {
		if (currentFilter == 'CALL') {
			return data.reportLines.filter((l) => l.pref == 'CALL');
		} else if (currentFilter == 'TEXT') {
			return data.reportLines.filter((l) => l.pref == 'TEXT');
		} else {
			return data.reportLines;
		}
	});
</script>

<svelte:head>
	<title>{pageTitle}</title>
</svelte:head>

<table class="w-full box-border border-separate p-1">
	<thead>
		<tr class="print:hidden">
			<td colspan="50">
				<HeaderBar>
					<div>By Name Reports:</div>
					{#each data.prefixes as p (p.prefix)}
						<a
							href={resolve('/reports/byname/[prefix]', { prefix: p.prefix })}
							class={p.prefix == prefix.prefix ? bAS[p.color] : bS[p.color]}>{p.prefix}</a
						>
					{/each}
				</HeaderBar>
				<div class="flex flex-row gap-1 py-1 justify-between">
					<div class="flex flex-row gap-1">
						<button
							class={bS[prefix.color]}
							onclick={() => {
								currentFilter = '';
								filterTitle = 'All Winners';
							}}>All Preferences</button
						>
						<button
							class={bS[prefix.color]}
							onclick={() => {
								currentFilter = 'CALL';
								filterTitle = 'Winners Preferring a CALL';
							}}>Call Preference</button
						>
						<button
							class={bS[prefix.color]}
							onclick={() => {
								currentFilter = 'TEXT';
								filterTitle = 'Winners Preferring a TEXT';
							}}>Text Preference</button
						>
					</div>
					<div class="flex flex-row gap-1">
						<button class={bS[prefix.color]} onclick={() => window.print()}>Print</button>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<th colspan="50"><h1 class="text-lg text-left">{pageTitle}</h1></th>
		</tr>
		<tr>
			<th colspan="50"><h2 class="italic text-left">{filterTitle}</h2></th>
		</tr>
		<tr class="text-sm">
			{#each headers as header (header)}
				<th class="text-left border p-0.5">{header}</th>
			{/each}
		</tr>
	</thead>
	<tbody class="text-sm">
		{#each reportLines as line, idx (idx)}
			<tr>
				<td class="p-0.5 border">{line.b_id}</td>
				<td class="p-0.5 border">{line.description || ''}</td>
				<td class="p-0.5 border">{line.winning_ticket}</td>
				<td class="p-0.5 border">{line.last_name || ''}, {line.first_name || ''}</td>
				<td class="p-0.5 border">{line.phone_number || ''}</td>
			</tr>
		{/each}
	</tbody>
	<tfoot>
		<tr>
			<td colspan="50" class="text-center text-xs">{data.venueName}</td>
		</tr>
		<tr>
			<td colspan="50" class="text-center text-xs">&copy; 2026 Ticket Auction Manager</td>
		</tr>
	</tfoot>
</table>
