<script lang="ts">
	import { browser } from '$app/environment';
	import AppShell from '$lib/components/layout/AppShell.svelte';
	import LaporanDateFilter from '$lib/components/laporan/LaporanDateFilter.svelte';
	import LaporanExportButton from '$lib/components/laporan/LaporanExportButton.svelte';
	import LaporanMenu from '$lib/components/laporan/LaporanMenu.svelte';
	import { formatLaporanTanggalLabel } from '$lib/utils/laporan-date';
	import { formatRupiah } from '$lib/utils/format';
	import type { PageData } from './$types';

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

	let exporting = $state(false);
	const laporan = $derived(data.laporan);
	const periodeLabel = $derived(formatLaporanTanggalLabel(laporan.tanggalAwal, laporan.tanggalAkhir));

	async function handleExportPdf() {
		if (!browser || exporting) return;
		exporting = true;
		try {
			const { exportLaporanPenjualanPdf } = await import('$lib/utils/export-pdf');
			await exportLaporanPenjualanPdf(laporan);
		} catch (error) {
			console.error('Export PDF gagal:', error);
			alert('Gagal export PDF. Silakan coba lagi.');
		} finally {
			exporting = false;
		}
	}
</script>

<svelte:head>
	<title>Laporan Penjualan — Catatan Warung</title>
</svelte:head>

<AppShell memberName={data.member.nama} memberEmail={data.member.email}>
	<header
		class="relative overflow-hidden bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-700 px-5 pb-8 pr-20 pt-[max(1.25rem,env(safe-area-inset-top))] text-white lg:px-8 lg:pb-10 lg:pr-8 lg:pt-6"
	>
		<div class="relative z-10 flex items-start justify-between gap-4">
			<div>
				<h1 class="text-xl font-bold lg:text-2xl">Laporan Penjualan</h1>
				<p class="mt-1 text-sm text-white/75">{laporan.warungNama}</p>
				<p class="text-xs text-white/50">{periodeLabel}</p>
			</div>
			<LaporanExportButton exporting={exporting} showMobileFab={false} onclick={handleExportPdf} />
		</div>

		<div class="relative z-10 mt-5 rounded-2xl bg-white/15 p-4 backdrop-blur-sm">
			<p class="text-xs text-white/70">Total Penjualan</p>
			<p class="text-3xl font-extrabold">{formatRupiah(laporan.total)}</p>
			<p class="mt-1 text-xs text-white/60">{laporan.jumlah} transaksi</p>
		</div>
	</header>

	<main class="page-content pb-24 lg:pb-8">
		<LaporanMenu />

		<LaporanDateFilter
			basePath="/laporan/penjualan"
			tanggalAwal={laporan.tanggalAwal}
			tanggalAkhir={laporan.tanggalAkhir}
		/>

		<section class="card bg-base-100 shadow-xl">
			<div class="card-body gap-3 p-5">
				<div class="flex items-center justify-between">
					<h2 class="font-bold">Daftar Penjualan</h2>
					<span class="badge badge-ghost">{laporan.jumlah} item</span>
				</div>

				{#if laporan.items.length === 0}
					<p class="py-8 text-center text-sm text-base-content/50">
						Tidak ada penjualan pada periode ini.
					</p>
				{:else}
					<div class="overflow-x-auto">
						<table class="table table-sm">
							<thead>
								<tr class="text-xs">
									<th>Tanggal</th>
									<th>Kategori</th>
									<th>Deskripsi</th>
									<th>Produk</th>
									<th class="text-center">Qty</th>
									<th class="text-right">Jumlah</th>
								</tr>
							</thead>
							<tbody>
								{#each laporan.items as item (item.id)}
									<tr class="hover">
										<td class="text-xs whitespace-nowrap">{item.tanggal}</td>
										<td class="text-xs">{item.kategori}</td>
										<td class="max-w-[120px] truncate text-xs lg:max-w-xs">{item.deskripsi}</td>
										<td class="max-w-[100px] truncate text-xs">{item.barang_nama ?? '-'}</td>
										<td class="text-center text-xs">{item.qty ?? '-'}</td>
										<td class="text-right text-xs font-semibold text-emerald-600">
											{formatRupiah(item.jumlah)}
										</td>
									</tr>
								{/each}
							</tbody>
						</table>
					</div>
				{/if}
			</div>
		</section>
	</main>

	<LaporanExportButton exporting={exporting} showHeader={false} onclick={handleExportPdf} />
</AppShell>
