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

	type Account = CustomerAccounts$result['accounts'][number];

	type LayoutData = PageData & {
		accounts?: Account[];
		customerNames?: Record<string, string>;
		customerIds?: string[];
	};

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

	let accounts = $derived(data.accounts ?? []);
	let customerNames = $derived(data.customerNames ?? ({} as Record<string, string>));
	let hasMultipleCustomers = $derived((data.customerIds?.length ?? 0) > 1);

	let searchQuery = $state('');

	let filteredAccounts = $derived(
		accounts.filter((account) => {
			if (!searchQuery) return true;
			const query = searchQuery.toLowerCase();
			return (
				account.name.toLowerCase().includes(query) ||
				account.primaryAddress?.streetAddress?.toLowerCase().includes(query) ||
				account.primaryAddress?.city?.toLowerCase().includes(query)
			);
		})
	);

	function getCustomerName(customerId: string): string {
		// customerId from account is already a UUID, not a Relay ID
		return customerNames[customerId] ?? 'Unknown';
	}
</script>

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

<div class="py-8">
	<ContentContainer>
		<CustomerPageHeader
			title="My Accounts"
			subtitle="View your service locations and account details."
			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"
					style="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 accounts..."
					class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2.5 pr-4 pl-10 text-theme focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none"
				/>
			</div>
		</div>

		<!-- Accounts List -->
		{#if filteredAccounts.length > 0}
			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
				{#each filteredAccounts as account (account.id)}
					<a
						href="/customer/accounts/{account.id}"
						class="flex min-w-0 flex-col gap-2 card-account"
					>
						<div class="flex min-w-0 items-start justify-between gap-2">
							<div class="min-w-0 flex-1">
								<h3 class="truncate text-lg font-semibold text-theme">{account.name}</h3>
								{#if account.primaryAddress}
									<p class="truncate 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}
							</div>
							<svg
								class="h-5 w-5 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>
						</div>

						{#if hasMultipleCustomers && account.customerId}
							<div class="mt-1">
								<span
									class="inline-flex items-center rounded-full bg-accent3-100 px-2 py-0.5 text-xs font-medium text-accent3-700 dark:bg-accent3-900/30 dark:text-accent3-400"
								>
									{getCustomerName(account.customerId)}
								</span>
							</div>
						{/if}
					</a>
				{/each}
			</div>
		{:else if searchQuery}
			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
				<svg
					class="mx-auto mb-4 h-12 w-12 text-theme-muted"
					style="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="mb-2 text-lg font-semibold text-theme">No Results</h3>
				<p class="text-theme-muted">No accounts match your search.</p>
			</div>
		{:else}
			<div class="rounded-xl border border-theme bg-theme-card p-8 text-center">
				<svg
					class="mx-auto mb-4 h-16 w-16 text-theme-muted"
					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="mb-2 text-lg font-semibold text-theme">No Accounts</h2>
				<p class="mx-auto max-w-md text-theme-muted">You don't have any service accounts yet.</p>
			</div>
		{/if}
	</ContentContainer>
</div>
