<script lang="ts">
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	let search = $state('');

	const filtered = $derived(
		data.members.filter(
			(m) =>
				m.nama.toLowerCase().includes(search.toLowerCase()) ||
				m.email.toLowerCase().includes(search.toLowerCase())
		)
	);
</script>

<svelte:head>
	<title>Admin — Kelola Member</title>
</svelte:head>

<div class="page-content">
	<h1 class="text-2xl font-bold">Kelola Member</h1>
	<p class="text-sm text-base-content/50">Atur paket langganan dan privilege tiap member</p>

	<div class="mt-4">
		<input
			type="search"
			class="input input-bordered w-full max-w-md"
			placeholder="Cari nama atau email..."
			bind:value={search}
		/>
	</div>

	<div class="mt-6 overflow-x-auto rounded-xl bg-base-100 shadow">
		<table class="table">
			<thead>
				<tr>
					<th>Member</th>
					<th>Paket</th>
					<th>Berakhir</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				{#each filtered as m}
					<tr>
						<td>
							<p class="font-medium">{m.nama}</p>
							<p class="text-xs text-base-content/50">{m.email}</p>
						</td>
						<td class="capitalize">{m.paket_nama ?? 'Free'}</td>
						<td>
							{#if m.berakhir_at}
								{new Date(m.berakhir_at).toLocaleDateString('id-ID')}
							{:else}
								—
							{/if}
						</td>
						<td>
							<a href="/backoffice/member/{m.id}" class="btn btn-ghost btn-sm">Kelola</a>
						</td>
					</tr>
				{:else}
					<tr>
						<td colspan="4" class="text-center text-base-content/50">Tidak ada member ditemukan</td>
					</tr>
				{/each}
			</tbody>
		</table>
	</div>
</div>
