<script lang="ts">
	import type { MemberWithDues } from '$lib/types/database';
	import { CreditCard, Calendar, AlertCircle, CheckCircle2, Clock } from 'lucide-svelte';
	import { Button } from '$lib/components/ui/button';

	interface Props {
		member: MemberWithDues;
	}

	let { member }: Props = $props();

	// 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: 'Dues 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.`
				};
			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);
</script>

<div class="glass-card overflow-hidden">
	<div class="border-b border-slate-200/50 px-6 py-4">
		<h3 class="flex items-center gap-2 text-base font-semibold text-slate-900">
			<CreditCard class="h-5 w-5 text-monaco-600" />
			Dues Status
		</h3>
	</div>

	<div class="p-6">
		<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-4 grid grid-cols-2 gap-4 text-sm">
			<div>
				<p class="text-slate-500">Annual Dues</p>
				<p class="font-semibold text-slate-900">
					{member.annual_dues ? `€${member.annual_dues.toFixed(2)}` : '€50.00'}
				</p>
			</div>
			<div>
				<p class="text-slate-500">Membership Type</p>
				<p class="font-semibold text-slate-900">{member.membership_type_name || 'Regular'}</p>
			</div>
			<div>
				<p class="text-slate-500">Last Payment</p>
				<p class="font-semibold text-slate-900">{formatDate(member.last_payment_date)}</p>
			</div>
			<div>
				<p class="text-slate-500">Next Due Date</p>
				<p class="font-semibold text-slate-900">{formatDate(member.current_due_date)}</p>
			</div>
		</div>

		<div class="mt-6">
			<Button href="/payments" variant="monaco" size="sm" class="w-full">
				<Calendar class="mr-2 h-4 w-4" />
				View Payment Details
			</Button>
		</div>
	</div>
</div>
