<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 scheduledServices = $derived(data.services?.scheduled ?? []);
	let scheduledProjects = $derived(data.projects?.scheduled ?? []);
	let inProgressServices = $derived(data.services?.inProgress ?? []);
	let inProgressProjects = $derived(data.projects?.inProgress ?? []);

	// Combine all upcoming work
	let upcomingWork = $derived(
		[
			...scheduledServices.map((s) => ({ type: 'service' as const, item: s })),
			...scheduledProjects.map((p) => ({ type: 'project' as const, item: p })),
			...inProgressServices.map((s) => ({ type: 'service' as const, item: s })),
			...inProgressProjects.map((p) => ({ type: 'project' as const, item: p }))
		].sort((a, b) => {
			const dateA = a.item.date ?? '';
			const dateB = b.item.date ?? '';
			return dateA.localeCompare(dateB);
		})
	);

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

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

	function getStatusBadge(status: string): string {
		switch (status) {
			case 'SCHEDULED':
				return 'badge-primary';
			case 'IN_PROGRESS':
				return 'badge-warning';
			default:
				return 'badge-neutral';
		}
	}
</script>

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

<div class="py-8">
	<ContentContainer maxWidth="4xl">
		<CustomerPageHeader
			title="Upcoming Schedule"
			subtitle="View your scheduled and in-progress services and projects."
			backHref="/customer"
			colorScheme="accent"
		/>

		{#if upcomingWork.length > 0}
			<div class="space-y-3">
				{#each upcomingWork 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={getStatusBadge(item.status)}>{item.status}</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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
					/>
				</svg>
				<h2 class="empty-state-title">No upcoming work</h2>
				<p class="empty-state-text">You don't have any scheduled services or projects.</p>
			</div>
		{/if}
	</ContentContainer>
</div>
