<script lang="ts">
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
	import type { PageData } from './$types';

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

	// Extract reports from data - now flat arrays from layout
	let reports = $derived(data.reports ?? []);

	// Sort reports by date descending (most recent first)
	let sortedReports = $derived([...reports].sort((a, b) => b.date.localeCompare(a.date)));

	// Format date for display (YYYY-MM format to readable)
	function formatReportDate(dateStr: string): string {
		const [year, month] = dateStr.split('-').map(Number);
		const date = new Date(year, month - 1, 1);
		return date.toLocaleDateString('en-US', {
			month: 'long',
			year: 'numeric'
		});
	}

	// Format currency
	function formatCurrency(value: string | number | null | undefined): string {
		if (value === null || value === undefined) return '$0.00';
		const num = typeof value === 'string' ? parseFloat(value) : value;
		return new Intl.NumberFormat('en-US', {
			style: 'currency',
			currency: 'USD'
		}).format(num);
	}
</script>

<svelte:head>
	<title>Reports - Team - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer>
		<TeamPageHeader
			title="Reports"
			subtitle="Monthly summaries of your completed work. Reports appear here after an admin or team leader has reviewed and finalized them."
			colorScheme="accent2"
		/>

		{#if sortedReports.length === 0}
			<div class="empty-state">
				<svg
					class="empty-state-icon text-accent2-400"
					style="fill: none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="1.5"
						d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
					/>
				</svg>
				<h2 class="empty-state-title">No Reports Yet</h2>
				<p class="empty-state-text">
					Your monthly labor reports will appear here once you have completed work logged in the
					system.
				</p>
			</div>
		{:else}
			<div class="space-y-4">
				{#each sortedReports as report (report.id)}
					<a href="/team/reports/{report.id}" class="block">
						<div class="card-report">
							<div class="flex items-start justify-between gap-4">
								<div class="min-w-0 flex-1 space-y-3">
									<!-- Report Month -->
									<h3 class="text-lg font-semibold text-accent2-600 dark:text-accent2-400">
										{formatReportDate(report.date)}
									</h3>

									<!-- Labor Breakdown -->
									<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
										<!-- Services Labor -->
										<div class="rounded-lg bg-secondary-500/10 p-3">
											<p
												class="text-xs font-medium tracking-wide text-secondary-600 uppercase dark:text-secondary-400"
											>
												Services
											</p>
											<p class="mt-1 text-lg font-bold text-secondary-700 dark:text-secondary-300">
												{formatCurrency(report.servicesLaborTotal)}
											</p>
										</div>

										<!-- Projects Labor -->
										<div class="rounded-lg bg-accent-500/10 p-3">
											<p
												class="text-xs font-medium tracking-wide text-accent-600 uppercase dark:text-accent-400"
											>
												Projects
											</p>
											<p class="mt-1 text-lg font-bold text-accent-700 dark:text-accent-300">
												{formatCurrency(report.projectsLaborTotal)}
											</p>
										</div>

										<!-- Total Labor -->
										<div class="rounded-lg bg-accent2-500/10 p-3">
											<p
												class="text-xs font-medium tracking-wide text-accent2-600 uppercase dark:text-accent2-400"
											>
												Total
											</p>
											<p class="mt-1 text-lg font-bold text-accent2-700 dark:text-accent2-300">
												{formatCurrency(report.totalLaborValue)}
											</p>
										</div>
									</div>
								</div>

								<!-- Chevron -->
								<svg
									class="mt-1 h-5 w-5 flex-shrink-0 text-theme-muted"
									style="fill: none"
									viewBox="0 0 24 24"
									stroke="currentColor"
									stroke-width="2"
								>
									<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
								</svg>
							</div>
						</div>
					</a>
				{/each}
			</div>
		{/if}
	</ContentContainer>
</div>
