<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 accounts = $derived(data.accounts ?? []);

	function getStatusBadgeClass(status: string): string {
		switch (status) {
			case 'ACTIVE':
				return 'badge-success';
			case 'INACTIVE':
				return 'badge-neutral';
			case 'PENDING':
				return 'badge-warning';
			default:
				return 'badge-neutral';
		}
	}
</script>

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

<div class="py-8">
	<ContentContainer maxWidth="4xl">
		<CustomerPageHeader
			title="My Accounts"
			subtitle="View your service locations and account details."
			backHref="/customer"
			colorScheme="primary"
		/>

		{#if accounts.length > 0}
			<div class="space-y-3">
				{#each accounts as account (account.id)}
					<a
						href="/customer/accounts/{account.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-x-3 gap-y-1">
								<span class="font-medium text-theme">{account.name}</span>
								<span class={getStatusBadgeClass(account.status)}>{account.status}</span>
							</div>
							{#if account.customerName}
								<p class="mt-1 text-sm text-theme-secondary">{account.customerName}</p>
							{/if}
						</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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
					/>
				</svg>
				<h2 class="empty-state-title">No accounts found</h2>
				<p class="empty-state-text">You don't have any service accounts assigned.</p>
			</div>
		{/if}
	</ContentContainer>
</div>
