<script lang="ts">
	import { offCanvas } from '$lib/stores/offCanvas.svelte';
	import WaveCustomerForm from './WaveCustomerForm.svelte';
	import type { WaveCustomer } from './types';

	interface Props {
		customers: WaveCustomer[];
		onDelete: (customer: WaveCustomer) => void;
	}

	let { customers, onDelete }: Props = $props();

	let searchQuery = $state('');

	let filteredCustomers = $derived.by(() => {
		if (!searchQuery.trim()) return customers;
		const query = searchQuery.toLowerCase();
		return customers.filter(
			(c) =>
				c.name.toLowerCase().includes(query) ||
				(c.email && c.email.toLowerCase().includes(query)) ||
				(c.firstName && c.firstName.toLowerCase().includes(query)) ||
				(c.lastName && c.lastName.toLowerCase().includes(query))
		);
	});

	function formatCurrency(value: string): string {
		const num = parseFloat(value.replace(/,/g, ''));
		return `$${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
	}

	function openCreateForm() {
		offCanvas.showRight({
			title: 'New Customer',
			content: createFormContent
		});
	}

	function openEditForm(customer: WaveCustomer) {
		selectedCustomer = customer;
		offCanvas.showRight({
			title: 'Edit Customer',
			content: editFormContent
		});
	}

	let selectedCustomer = $state<WaveCustomer | null>(null);
</script>

{#snippet createFormContent()}
	<WaveCustomerForm />
{/snippet}

{#snippet editFormContent()}
	<WaveCustomerForm customer={selectedCustomer} />
{/snippet}

<div class="space-y-4">
	<!-- Header with search and add button -->
	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
		<div class="relative flex-1 sm:max-w-xs">
			<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 customers..."
				class="placeholder-theme-muted w-full rounded-lg border border-theme bg-theme-card py-2 pr-4 pl-10 text-theme focus:border-accent6-500 focus:ring-1 focus:ring-accent6-500"
			/>
		</div>

		<button
			type="button"
			onclick={openCreateForm}
			class="flex items-center justify-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600"
		>
			<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
			</svg>
			Add Customer
		</button>
	</div>

	<!-- Customers List -->
	{#if filteredCustomers.length > 0}
		<div class="grid grid-cols-1 gap-4">
			{#each filteredCustomers as customer (customer.id)}
				<div
					class="flex min-w-0 items-start justify-between gap-4 rounded-lg border border-theme bg-theme-card p-4"
				>
					<div class="min-w-0 flex-1">
						<div class="flex flex-wrap items-center gap-2">
							<h3 class="font-medium text-theme">{customer.name}</h3>
							{#if parseFloat(customer.overdueAmount.value) > 0}
								<span
									class="rounded-full bg-error-500/10 px-2 py-0.5 text-xs font-medium text-error-600 dark:text-error-400"
								>
									Overdue
								</span>
							{/if}
						</div>

						<div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-theme-muted">
							{#if customer.email}
								<span class="flex items-center gap-1.5">
									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
										/>
									</svg>
									{customer.email}
								</span>
							{/if}
							{#if customer.phone}
								<span class="flex items-center gap-1.5">
									<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
										/>
									</svg>
									{customer.phone}
								</span>
							{/if}
						</div>

						{#if parseFloat(customer.outstandingAmount.value) > 0}
							<div class="mt-2 flex flex-wrap items-center gap-3 text-sm">
								<span class="text-theme-secondary">
									Outstanding: <span class="font-medium text-theme"
										>{formatCurrency(customer.outstandingAmount.value)}</span
									>
								</span>
								{#if parseFloat(customer.overdueAmount.value) > 0}
									<span class="text-error-600 dark:text-error-400">
										Overdue: <span class="font-medium"
											>{formatCurrency(customer.overdueAmount.value)}</span
										>
									</span>
								{/if}
							</div>
						{/if}
					</div>

					<div class="flex flex-shrink-0 items-center gap-2">
						<button
							type="button"
							onclick={() => openEditForm(customer)}
							class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
							aria-label="Edit customer"
						>
							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
								/>
							</svg>
						</button>
						<button
							type="button"
							onclick={() => onDelete(customer)}
							class="rounded-lg p-2 text-theme-muted hover:bg-error-500/10 hover:text-error-600 dark:hover:text-error-400"
							aria-label="Delete customer"
						>
							<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
								/>
							</svg>
						</button>
					</div>
				</div>
			{/each}
		</div>
	{:else if searchQuery}
		<div class="empty-state py-12">
			<svg
				class="empty-state-icon text-accent6-400"
				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>
			<h2 class="empty-state-title">No Customers Found</h2>
			<p class="empty-state-text">No customers match your search criteria.</p>
		</div>
	{:else}
		<div class="empty-state py-12">
			<svg
				class="empty-state-icon text-accent6-400"
				style="fill: none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="1.5"
					d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
				/>
			</svg>
			<h2 class="empty-state-title">No Customers</h2>
			<p class="empty-state-text">Get started by adding your first customer.</p>
			<button
				type="button"
				onclick={openCreateForm}
				class="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent6-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent6-600"
			>
				<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 4v16m8-8H4"
					/>
				</svg>
				Add Customer
			</button>
		</div>
	{/if}
</div>
