<script lang="ts">
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import TeamPageHeader from '$lib/components/team/TeamPageHeader.svelte';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();
	let accounts = $derived(data.accounts?.data?.accounts ?? []);
</script>

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

<div class="py-8">
	<ContentContainer>
		<TeamPageHeader
			title="Accounts"
			subtitle="View account information including locations, contacts, and service scopes for the accounts you're assigned to."
			colorScheme="primary"
		/>

		{#if accounts.length === 0}
			<div class="empty-state">
				<svg
					class="empty-state-icon text-primary-400"
					style="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</h2>
				<p class="empty-state-text">You don't have any accounts assigned to you yet.</p>
			</div>
		{:else}
			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
				{#each accounts as account (account.id)}
					<a
						href="/team/accounts/{account.id}"
						class="flex items-center justify-between card-account"
					>
						<div>
							<h2 class="mb-2 text-lg font-semibold text-theme">{account.name}</h2>
							{#if account.primaryAddress}
								<p class="text-sm text-theme-secondary">
									{account.primaryAddress.streetAddress}
								</p>
								<p class="text-sm text-theme-muted">
									{account.primaryAddress.city}, {account.primaryAddress.state}
									{account.primaryAddress.zipCode}
								</p>
							{/if}
							{#if account.addresses && account.addresses.length > 0}
								<p class="mt-3 text-xs text-theme-muted">
									{account.addresses.length} location{account.addresses.length === 1 ? '' : 's'}
								</p>
							{/if}
						</div>
						<svg
							class="h-5 w-5 flex-shrink-0 text-theme-muted"
							style="fill: none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 5l7 7-7 7"
							/>
						</svg>
					</a>
				{/each}
			</div>
		{/if}
	</ContentContainer>
</div>
