<script lang="ts">
	import type { PageData } from './$types';
	import { ContentContainer } from '$lib/components/layout';
	import { CustomerPageHeader } from '$lib/components/customer';
	import { IconChevronRight } from '$lib/components/icons';

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

	let completedServices = $derived(data.services?.completed ?? []);
	let completedProjects = $derived(data.projects?.completed ?? []);

	// Combine all completed work
	let completedWork = $derived(
		[
			...completedServices.map((s) => ({ type: 'service' as const, item: s })),
			...completedProjects.map((p) => ({ type: 'project' as const, item: p }))
		].sort((a, b) => {
			const dateA = a.item.date ?? '';
			const dateB = b.item.date ?? '';
			return dateB.localeCompare(dateA); // Most recent first
		})
	);

	// Helper to get display name from service (account) or project (customer)
	function getWorkItemName(
		type: 'service' | 'project',
		item: (typeof completedWork)[number]['item']
	): string {
		if (type === 'service') {
			const service = item as (typeof completedServices)[number];
			return service.account?.name ?? 'Unknown';
		} else {
			const project = item as (typeof completedProjects)[number];
			return project.customer?.name ?? 'Unknown';
		}
	}

	function formatDate(dateStr: string | null): string {
		if (!dateStr) return 'Unknown';
		return new Date(dateStr).toLocaleDateString('en-US', {
			weekday: 'short',
			month: 'short',
			day: 'numeric'
		});
	}
</script>

<svelte:head>
	<title>History - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer maxWidth="4xl">
		<CustomerPageHeader
			title="Service History"
			subtitle="View your completed services and projects."
			backHref="/customer"
			colorScheme="accent"
		/>

		{#if completedWork.length > 0}
			<div class="space-y-3">
				{#each completedWork as { type, item } (item.id)}
					<a
						href="/customer/schedule/{type}/{item.id}"
						class="shadow-theme-sm flex items-center justify-between rounded-xl border border-theme bg-theme-card p-4 transition-all hover:border-primary-500/30 hover:shadow-theme-md"
					>
						<div class="min-w-0 flex-1">
							<div class="flex flex-wrap items-center gap-2">
								<span class="text-xs font-medium text-theme-muted uppercase">
									{type}
								</span>
								<span class="badge-success">COMPLETED</span>
							</div>
							<p class="mt-1 font-medium text-theme">
								{getWorkItemName(type, item)}
							</p>
							{#if item.accountAddress}
								<p class="text-sm text-theme-secondary">
									{item.accountAddress.name || item.accountAddress.city}
								</p>
							{/if}
							<p class="mt-1 text-sm text-theme-muted">
								{formatDate(item.date)}
							</p>
						</div>
						<IconChevronRight class="h-5 w-5 shrink-0 text-theme-muted" />
					</a>
				{/each}
			</div>
		{:else}
			<div class="empty-state">
				<svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="1.5"
						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				<h2 class="empty-state-title">No completed work</h2>
				<p class="empty-state-text">You don't have any completed services or projects yet.</p>
			</div>
		{/if}
	</ContentContainer>
</div>
