<script lang="ts">
	import {
		CreditCard,
		Calendar,
		CheckCircle2,
		AlertCircle,
		Clock,
		Building2,
		Copy,
		Check
	} from 'lucide-svelte';

	let { data } = $props();
	const { member, payments, paymentSettings } = data;

	let copiedField = $state<string | null>(null);

	// Format date
	function formatDate(dateStr: string | null): string {
		if (!dateStr) return 'N/A';
		return new Date(dateStr).toLocaleDateString('en-US', {
			year: 'numeric',
			month: 'long',
			day: 'numeric'
		});
	}

	// Get dues status info
	function getDuesInfo(status: string | null) {
		switch (status) {
			case 'current':
				return {
					icon: CheckCircle2,
					color: 'text-green-600',
					bg: 'bg-green-50',
					border: 'border-green-200',
					label: 'Current',
					description: 'Your membership dues are paid and up to date.'
				};
			case 'due_soon':
				return {
					icon: Clock,
					color: 'text-yellow-600',
					bg: 'bg-yellow-50',
					border: 'border-yellow-200',
					label: 'Due Soon',
					description: `Your dues are due on ${formatDate(member?.current_due_date)}.`
				};
			case 'overdue':
				return {
					icon: AlertCircle,
					color: 'text-red-600',
					bg: 'bg-red-50',
					border: 'border-red-200',
					label: 'Overdue',
					description: `Your dues are ${member?.days_overdue} days overdue. Please pay soon.`
				};
			case 'never_paid':
			default:
				return {
					icon: CreditCard,
					color: 'text-slate-600',
					bg: 'bg-slate-50',
					border: 'border-slate-200',
					label: 'Payment Required',
					description: 'Please pay your membership dues to activate your membership.'
				};
		}
	}

	const duesInfo = getDuesInfo(member?.dues_status);

	// Copy to clipboard
	async function copyToClipboard(text: string, field: string) {
		try {
			await navigator.clipboard.writeText(text);
			copiedField = field;
			setTimeout(() => (copiedField = null), 2000);
		} catch (err) {
			console.error('Failed to copy:', err);
		}
	}
</script>

<svelte:head>
	<title>Payments | Monaco USA</title>
</svelte:head>

<div class="space-y-6">
	<div>
		<h1 class="text-2xl font-bold text-slate-900">Payments</h1>
		<p class="text-slate-500">View your dues status and payment history</p>
	</div>

	<div class="grid gap-6 lg:grid-cols-3">
		<!-- Dues Status -->
		<div class="lg:col-span-2">
			<div class="glass-card p-6">
				<h2 class="mb-4 flex items-center gap-2 text-lg font-semibold text-slate-900">
					<CreditCard class="h-5 w-5 text-monaco-600" />
					Dues Status
				</h2>

				<div
					class="flex items-start gap-4 rounded-lg border p-4 {duesInfo.bg} {duesInfo.border}"
				>
					<svelte:component this={duesInfo.icon} class="h-6 w-6 flex-shrink-0 {duesInfo.color}" />
					<div class="flex-1">
						<p class="font-medium {duesInfo.color}">{duesInfo.label}</p>
						<p class="mt-1 text-sm text-slate-600">{duesInfo.description}</p>
					</div>
				</div>

				<div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
					<div class="rounded-lg bg-slate-50 p-4">
						<p class="text-sm text-slate-500">Annual Dues</p>
						<p class="mt-1 text-xl font-semibold text-slate-900">
							€{(member?.annual_dues || 50).toFixed(2)}
						</p>
					</div>
					<div class="rounded-lg bg-slate-50 p-4">
						<p class="text-sm text-slate-500">Membership Type</p>
						<p class="mt-1 text-xl font-semibold text-slate-900">
							{member?.membership_type_name || 'Regular'}
						</p>
					</div>
					<div class="rounded-lg bg-slate-50 p-4">
						<p class="text-sm text-slate-500">Last Payment</p>
						<p class="mt-1 text-xl font-semibold text-slate-900">
							{formatDate(member?.last_payment_date)}
						</p>
					</div>
					<div class="rounded-lg bg-slate-50 p-4">
						<p class="text-sm text-slate-500">Next Due Date</p>
						<p class="mt-1 text-xl font-semibold text-slate-900">
							{formatDate(member?.current_due_date)}
						</p>
					</div>
				</div>
			</div>
		</div>

		<!-- Payment Instructions -->
		<div class="lg:col-span-1">
			<div class="glass-card p-6">
				<h2 class="mb-4 flex items-center gap-2 text-lg font-semibold text-slate-900">
					<Building2 class="h-5 w-5 text-monaco-600" />
					Payment Details
				</h2>

				<p class="mb-4 text-sm text-slate-600">
					Please make your payment via bank transfer to:
				</p>

				<div class="space-y-3">
					{#if paymentSettings?.bank_name}
						<div>
							<p class="text-xs font-medium uppercase text-slate-500">Bank</p>
							<p class="text-sm text-slate-900">{paymentSettings.bank_name}</p>
						</div>
					{/if}

					<div>
						<p class="text-xs font-medium uppercase text-slate-500">Account Holder</p>
						<p class="text-sm text-slate-900">
							{paymentSettings?.account_holder || 'ASSOCIATION MONACO USA'}
						</p>
					</div>

					<div>
						<p class="text-xs font-medium uppercase text-slate-500">IBAN</p>
						<div class="flex items-center gap-2">
							<code class="flex-1 rounded bg-slate-100 px-2 py-1 text-xs text-slate-900">
								{paymentSettings?.iban || 'MC58 1756 9000 0104 0050 1001 860'}
							</code>
							<button
								onclick={() =>
									copyToClipboard(
										paymentSettings?.iban || 'MC58 1756 9000 0104 0050 1001 860',
										'iban'
									)}
								class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
								aria-label="Copy IBAN"
							>
								{#if copiedField === 'iban'}
									<Check class="h-4 w-4 text-green-600" />
								{:else}
									<Copy class="h-4 w-4" />
								{/if}
							</button>
						</div>
					</div>

					<div>
						<p class="text-xs font-medium uppercase text-slate-500">Reference</p>
						<div class="flex items-center gap-2">
							<code class="flex-1 rounded bg-monaco-50 px-2 py-1 text-xs font-medium text-monaco-700">
								{member?.member_id}
							</code>
							<button
								onclick={() => copyToClipboard(member?.member_id || '', 'reference')}
								class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
								aria-label="Copy reference"
							>
								{#if copiedField === 'reference'}
									<Check class="h-4 w-4 text-green-600" />
								{:else}
									<Copy class="h-4 w-4" />
								{/if}
							</button>
						</div>
					</div>
				</div>

				<p class="mt-4 text-xs text-slate-500">
					Please include your Member ID ({member?.member_id}) in the payment reference.
				</p>
			</div>
		</div>
	</div>

	<!-- Payment History -->
	<div class="glass-card overflow-hidden">
		<div class="border-b border-slate-200 px-6 py-4">
			<h2 class="flex items-center gap-2 text-lg font-semibold text-slate-900">
				<Calendar class="h-5 w-5 text-monaco-600" />
				Payment History
			</h2>
		</div>

		{#if payments && payments.length > 0}
			<div class="overflow-x-auto">
				<table class="w-full">
					<thead class="bg-slate-50">
						<tr>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Date
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Amount
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Period Covered
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Reference
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Method
							</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-slate-100">
						{#each payments as payment}
							<tr class="hover:bg-slate-50">
								<td class="whitespace-nowrap px-6 py-4 text-sm text-slate-900">
									{formatDate(payment.payment_date)}
								</td>
								<td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-900">
									€{payment.amount.toFixed(2)}
								</td>
								<td class="whitespace-nowrap px-6 py-4 text-sm text-slate-500">
									Until {formatDate(payment.due_date)}
								</td>
								<td class="whitespace-nowrap px-6 py-4 text-sm text-slate-500">
									{payment.reference || '-'}
								</td>
								<td class="whitespace-nowrap px-6 py-4 text-sm capitalize text-slate-500">
									{payment.payment_method?.replace('_', ' ') || 'Bank Transfer'}
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		{:else}
			<div class="flex flex-col items-center justify-center p-12 text-center">
				<CreditCard class="mb-4 h-12 w-12 text-slate-300" />
				<p class="font-medium text-slate-900">No payments yet</p>
				<p class="mt-1 text-sm text-slate-500">
					Your payment history will appear here once you make your first payment.
				</p>
			</div>
		{/if}
	</div>
</div>
