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

	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 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
			case 'INACTIVE':
				return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
			case 'PENDING':
				return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
			default:
				return 'bg-gray-100 text-gray-800';
		}
	}

	function formatAddress(address: {
		streetAddress: string;
		city: string;
		state: string;
		zipCode: string;
	}): string {
		return `${address.streetAddress}, ${address.city}, ${address.state} ${address.zipCode}`;
	}
</script>

<svelte:head>
	<title>{account.name} - Accounts - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer>
		<PageHeader
			title={account.name}
			subtitle={account.customer?.name ?? undefined}
			backHref="/team/accounts"
			colorScheme="primary"
		>
			<span
				class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {getStatusBadgeClass(
					account.status
				)}"
			>
				{account.status}
			</span>
		</PageHeader>

		<div class="space-y-6">
			<!-- Account Details Section -->
			<section
				class="overflow-hidden rounded-xl border border-primary-500/20 bg-theme-card shadow-theme-md"
			>
				<div class="section-header-primary px-6 py-4">
					<h2 class="text-lg font-semibold text-theme">Account Details</h2>
				</div>
				<div class="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2">
					<div>
						<dt class="text-sm font-medium text-theme-secondary">Account Name</dt>
						<dd class="mt-1 text-theme">{account.name}</dd>
					</div>
					{#if account.customer}
						<div>
							<dt class="text-sm font-medium text-theme-secondary">Customer</dt>
							<dd class="mt-1 text-theme">{account.customer.name}</dd>
						</div>
					{/if}
					<div>
						<dt class="text-sm font-medium text-theme-secondary">Status</dt>
						<dd class="mt-1">
							<span
								class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {getStatusBadgeClass(
									account.status
								)}"
							>
								{account.status}
							</span>
						</dd>
					</div>
				</div>
			</section>

			<!-- Contacts Section -->
			{#if contacts.length > 0}
				<section
					class="overflow-hidden rounded-xl border border-primary-500/20 bg-theme-card shadow-theme-md"
				>
					<div class="section-header-primary px-6 py-4">
						<h2 class="text-lg font-semibold text-theme">Contacts</h2>
					</div>
					<div class="divide-theme divide-y">
						{#each contacts as contact}
							<div class="p-6">
								<div class="flex items-start justify-between">
									<div>
										<p class="font-medium text-theme">{contact.firstName} {contact.lastName}</p>
									</div>
									{#if contact.isPrimary}
										<span
											class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-800 dark:bg-primary-900/30 dark:text-primary-400"
										>
											Primary
										</span>
									{/if}
								</div>
								<div class="mt-2 space-y-1 text-sm">
									{#if contact.email}
										<p class="text-theme-muted">
											<a href="mailto:{contact.email}" class="hover:text-primary-500"
												>{contact.email}</a
											>
										</p>
									{/if}
									{#if contact.phone}
										<p class="text-theme-muted">
											<a href="tel:{contact.phone}" class="hover:text-primary-500"
												>{contact.phone}</a
											>
										</p>
									{/if}
								</div>
							</div>
						{/each}
					</div>
				</section>
			{/if}

			<!-- Locations Section -->
			{#if addresses.length > 0}
				<section
					class="overflow-hidden rounded-xl border border-primary-500/20 bg-theme-card shadow-theme-md"
				>
					<div class="section-header-primary px-6 py-4">
						<h2 class="text-lg font-semibold text-theme">Locations</h2>
					</div>
					<div class="divide-theme divide-y">
						{#each addresses as address (address.id)}
							<a
								href="/team/accounts/{account.id}/locations/{address.id}"
								class="flex items-center justify-between p-6 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
							>
								<div class="min-w-0 flex-1">
									<div class="flex items-center gap-2">
										{#if address.name}
											<p class="font-medium text-theme">{address.name}</p>
										{/if}
										{#if address.isPrimary}
											<span
												class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-800 dark:bg-primary-900/30 dark:text-primary-400"
											>
												Primary
											</span>
										{/if}
									</div>
									<p class="text-sm text-theme-secondary">{formatAddress(address)}</p>
									{#if address.notes}
										<p class="mt-1 text-sm text-theme-muted">{address.notes}</p>
									{/if}
								</div>
								<IconChevronRight class="h-5 w-5 shrink-0 text-theme-muted" />
							</a>
						{/each}
					</div>
				</section>
			{/if}
		</div>
	</ContentContainer>
</div>
