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

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

	let account = $derived(data.account);
	let contacts = $derived(data.contacts ?? []);
	let addresses = $derived(data.addresses ?? []);

	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>{account?.name ?? 'Account'} - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer maxWidth="4xl">
		{#if account}
			<CustomerPageHeader title={account.name} backHref="/customer/accounts" colorScheme="primary">
				<span class={getStatusBadgeClass(account.status)}>{account.status}</span>
			</CustomerPageHeader>

			<div class="space-y-6">
				<!-- Contacts -->
				<CustomerSectionContainer title="Contacts" colorScheme="primary">
					{#if contacts.length > 0}
						<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
							{#each contacts as contact (contact.id)}
								<div class="bg-theme-secondary/50 rounded-lg border border-theme p-3">
									<span class="font-medium text-theme">
										{contact.firstName}
										{contact.lastName}
									</span>
									{#if contact.email}
										<p class="mt-0.5 truncate text-sm text-theme-secondary">{contact.email}</p>
									{/if}
									{#if contact.phone}
										<p class="mt-1 text-sm text-theme-muted">{contact.phone}</p>
									{/if}
									{#if contact.isPrimary}
										<div class="mt-2">
											<span class="badge-primary">Primary</span>
										</div>
									{/if}
								</div>
							{/each}
						</div>
					{:else}
						<p class="py-6 text-center text-theme-muted">No contacts listed.</p>
					{/if}
				</CustomerSectionContainer>

				<!-- Service Locations -->
				<CustomerSectionContainer title="Service Locations" colorScheme="primary">
					{#if addresses.length > 0}
						<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
							{#each addresses as address (address.id)}
								<div class="bg-theme-secondary/50 rounded-lg border border-theme p-3">
									<span class="font-medium text-theme">
										{address.name ||
											(addresses.length === 1 ? 'Primary Location' : 'Service Location')}
									</span>
									<p class="mt-0.5 text-sm text-theme-secondary">{address.streetAddress}</p>
									<p class="text-sm text-theme-muted">
										{address.city}, {address.state}
										{address.zipCode}
									</p>
									{#if address.isPrimary}
										<div class="mt-2">
											<span class="badge-primary">Primary</span>
										</div>
									{/if}
								</div>
							{/each}
						</div>
					{:else}
						<p class="py-6 text-center text-theme-muted">No service locations listed.</p>
					{/if}
				</CustomerSectionContainer>
			</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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				<h2 class="empty-state-title">Account not found</h2>
				<p class="empty-state-text">
					The account you're looking for doesn't exist or you don't have access.
				</p>
				<a href="/customer/accounts" class="mt-4 btn-primary">Back to Accounts</a>
			</div>
		{/if}
	</ContentContainer>
</div>
