<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 searchQuery = $state('');

	let accounts = $derived(data.accounts ?? []);

	let filteredAccounts = $derived(
		accounts.filter((a) => {
			if (!searchQuery) return true;
			const query = searchQuery.toLowerCase();
			const matchesName = a.name.toLowerCase().includes(query);
			const matchesCustomer = a.customer?.name.toLowerCase().includes(query) ?? false;
			const matchesLocation = a.addresses.some(
				(addr) =>
					addr.city.toLowerCase().includes(query) || addr.state.toLowerCase().includes(query)
			);
			return matchesName || matchesCustomer || matchesLocation;
		})
	);

	function getPrimaryAddress(account: (typeof accounts)[number]) {
		return account.addresses.find((a) => a.isPrimary) ?? account.addresses[0] ?? null;
	}

	function formatAddress(address: { city: string; state: string } | null): string {
		if (!address) return '';
		return `${address.city}, ${address.state}`;
	}
</script>

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

<div class="py-8">
	<ContentContainer>
		<PageHeader
			title="Accounts"
			subtitle="{accounts.length} account{accounts.length !== 1 ? 's' : ''}"
			backHref="/team"
			colorScheme="primary"
		/>

		<!-- Search -->
		<div class="mb-6">
			<div class="relative">
				<svg
					class="absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-theme-muted"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
					/>
				</svg>
				<input
					type="text"
					bind:value={searchQuery}
					placeholder="Search by account, customer, or location..."
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme py-2 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
				/>
			</div>
		</div>

		<!-- Account List -->
		{#if filteredAccounts.length > 0}
			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
				{#each filteredAccounts as account (account.id)}
					{@const primaryAddress = getPrimaryAddress(account)}
					<a
						href="/team/accounts/{account.id}"
						class="flex items-center justify-between card-account"
					>
						<div class="min-w-0 flex-1">
							<h2 class="text-lg font-semibold text-theme">{account.name}</h2>
							{#if account.customer}
								<p class="mt-1 text-sm text-theme-muted">{account.customer.name}</p>
							{/if}
							{#if primaryAddress}
								<p class="text-sm text-theme-muted">{formatAddress(primaryAddress)}</p>
							{/if}
						</div>
						<IconChevronRight class="h-5 w-5 shrink-0 text-theme-muted" />
					</a>
				{/each}
			</div>
		{:else if searchQuery}
			<div class="rounded-lg border border-theme bg-theme-secondary py-12 text-center">
				<svg
					class="mx-auto h-12 w-12 text-theme-muted"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="1.5"
						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
					/>
				</svg>
				<h3 class="mt-4 text-lg font-medium text-theme">No accounts found</h3>
				<p class="mt-2 text-theme-secondary">No accounts match your search.</p>
				<button
					type="button"
					onclick={() => (searchQuery = '')}
					class="mt-4 text-primary-500 hover:text-primary-600"
				>
					Clear search
				</button>
			</div>
		{:else}
			<div class="rounded-lg border border-theme bg-theme-secondary py-12 text-center">
				<svg
					class="mx-auto h-12 w-12 text-theme-muted"
					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>
				<h3 class="mt-4 text-lg font-medium text-theme">No accounts</h3>
				<p class="mt-2 text-theme-secondary">No accounts available.</p>
			</div>
		{/if}
	</ContentContainer>
</div>
