<script lang="ts">
	import SectionHeader from '$lib/components/admin/SectionHeader.svelte';
	import { IconEdit } from '$lib/components/icons';

	interface WaveCustomer {
		id: string;
		name: string;
		email: string | null;
		isArchived: boolean;
	}

	interface Props {
		waveCustomerId: string | null | undefined;
		linkedWaveCustomer: WaveCustomer | null;
		onLink: () => void;
	}

	let { waveCustomerId, linkedWaveCustomer, onLink }: Props = $props();
</script>

<div class="card-padded">
	<SectionHeader
		title="Wave Integration"
		buttonText={waveCustomerId ? 'Change' : 'Link'}
		buttonIcon="none"
		onButtonClick={onLink}
	/>

	{#if linkedWaveCustomer}
		<!-- Linked Wave customer shown prominently -->
		<div
			class="rounded-lg border-2 border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20"
		>
			<div class="flex items-start justify-between">
				<div class="min-w-0 flex-1">
					<div class="flex items-center gap-2">
						<span class="text-lg font-bold text-blue-700 dark:text-blue-400">
							{linkedWaveCustomer.name}
						</span>
						<span class="badge-primary">Linked</span>
					</div>
					{#if linkedWaveCustomer.email}
						<p class="mt-1 text-sm text-blue-600 dark:text-blue-500">
							{linkedWaveCustomer.email}
						</p>
					{/if}
					<p class="mt-1 font-mono text-xs text-blue-500 dark:text-blue-600">
						{waveCustomerId}
					</p>
				</div>
				<button
					type="button"
					onclick={onLink}
					class="shrink-0 rounded p-1.5 text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900/40"
					aria-label="Change linked Wave customer"
				>
					<IconEdit />
				</button>
			</div>
		</div>
	{:else if waveCustomerId}
		<!-- Has ID but couldn't find matching Wave customer -->
		<div
			class="rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-900/20"
		>
			<div class="flex items-start justify-between">
				<div>
					<div class="flex items-center gap-2">
						<span class="text-sm font-medium text-yellow-700 dark:text-yellow-400">
							Linked to unknown Wave customer
						</span>
						<span class="badge-warning">Unknown</span>
					</div>
					<p class="mt-1 font-mono text-xs text-yellow-600 dark:text-yellow-500">
						{waveCustomerId}
					</p>
				</div>
				<button
					type="button"
					onclick={onLink}
					class="shrink-0 rounded p-1.5 text-yellow-600 hover:bg-yellow-100 dark:text-yellow-400 dark:hover:bg-yellow-900/40"
					aria-label="Change linked Wave customer"
				>
					<IconEdit />
				</button>
			</div>
		</div>
	{:else}
		<p class="text-center text-theme-muted">
			No Wave customer linked. Click "Link" to connect this customer to Wave.
		</p>
	{/if}
</div>
