<script lang="ts">
	import {
		Users,
		Search,
		Filter,
		Mail,
		Phone,
		Calendar,
		MapPin,
		Flag,
		ChevronDown,
		Eye,
		UserCircle,
		CreditCard,
		CheckCircle2,
		Clock,
		AlertCircle,
		XCircle
	} from 'lucide-svelte';
	import { Input } from '$lib/components/ui/input';
	import CountryFlag from '$lib/components/ui/CountryFlag.svelte';
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';

	let { data } = $props();
	const { members, statuses, stats, filters } = data;

	let searchQuery = $state(filters.search);
	let statusFilter = $state(filters.status);
	let roleFilter = $state(filters.role);
	let showFilters = $state(false);

	// Debounce search
	let searchTimeout: ReturnType<typeof setTimeout>;
	function handleSearch(value: string) {
		clearTimeout(searchTimeout);
		searchTimeout = setTimeout(() => {
			updateFilters({ search: value });
		}, 300);
	}

	function updateFilters(newFilters: Record<string, string>) {
		const params = new URLSearchParams($page.url.searchParams);
		for (const [key, value] of Object.entries(newFilters)) {
			if (value && value !== 'all') {
				params.set(key, value);
			} else {
				params.delete(key);
			}
		}
		goto(`?${params.toString()}`, { replaceState: true });
	}

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

	// Get status info
	function getStatusInfo(status: string | null) {
		switch (status) {
			case 'active':
				return { icon: CheckCircle2, color: 'text-green-600', bg: 'bg-green-100' };
			case 'pending':
				return { icon: Clock, color: 'text-yellow-600', bg: 'bg-yellow-100' };
			case 'inactive':
				return { icon: XCircle, color: 'text-slate-500', bg: 'bg-slate-100' };
			case 'expired':
				return { icon: AlertCircle, color: 'text-red-600', bg: 'bg-red-100' };
			default:
				return { icon: UserCircle, color: 'text-slate-500', bg: 'bg-slate-100' };
		}
	}

	// Get dues status info
	function getDuesInfo(status: string | null) {
		switch (status) {
			case 'current':
				return { color: 'text-green-600', bg: 'bg-green-100', label: 'Current' };
			case 'due_soon':
				return { color: 'text-yellow-600', bg: 'bg-yellow-100', label: 'Due Soon' };
			case 'overdue':
				return { color: 'text-red-600', bg: 'bg-red-100', label: 'Overdue' };
			case 'never_paid':
			default:
				return { color: 'text-slate-500', bg: 'bg-slate-100', label: 'Never Paid' };
		}
	}

	// Get role badge
	function getRoleBadge(role: string) {
		switch (role) {
			case 'admin':
				return { color: 'text-purple-700', bg: 'bg-purple-100', label: 'Admin' };
			case 'board':
				return { color: 'text-blue-700', bg: 'bg-blue-100', label: 'Board' };
			default:
				return { color: 'text-slate-600', bg: 'bg-slate-100', label: 'Member' };
		}
	}
</script>

<svelte:head>
	<title>Members Directory | Monaco USA</title>
</svelte:head>

<div class="space-y-6">
	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
		<div>
			<h1 class="text-2xl font-bold text-slate-900">Members Directory</h1>
			<p class="text-slate-500">View and manage association members</p>
		</div>
	</div>

	<!-- Stats Cards -->
	<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
		<div class="glass-card p-4">
			<div class="flex items-center gap-3">
				<div class="rounded-lg bg-slate-100 p-2">
					<Users class="h-5 w-5 text-slate-600" />
				</div>
				<div>
					<p class="text-2xl font-bold text-slate-900">{stats.total}</p>
					<p class="text-xs text-slate-500">Total Members</p>
				</div>
			</div>
		</div>
		<div class="glass-card p-4">
			<div class="flex items-center gap-3">
				<div class="rounded-lg bg-green-100 p-2">
					<CheckCircle2 class="h-5 w-5 text-green-600" />
				</div>
				<div>
					<p class="text-2xl font-bold text-slate-900">{stats.active}</p>
					<p class="text-xs text-slate-500">Active</p>
				</div>
			</div>
		</div>
		<div class="glass-card p-4">
			<div class="flex items-center gap-3">
				<div class="rounded-lg bg-yellow-100 p-2">
					<Clock class="h-5 w-5 text-yellow-600" />
				</div>
				<div>
					<p class="text-2xl font-bold text-slate-900">{stats.pending}</p>
					<p class="text-xs text-slate-500">Pending</p>
				</div>
			</div>
		</div>
		<div class="glass-card p-4">
			<div class="flex items-center gap-3">
				<div class="rounded-lg bg-slate-100 p-2">
					<XCircle class="h-5 w-5 text-slate-500" />
				</div>
				<div>
					<p class="text-2xl font-bold text-slate-900">{stats.inactive}</p>
					<p class="text-xs text-slate-500">Inactive</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Filters -->
	<div class="glass-card p-4">
		<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
			<div class="relative flex-1">
				<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
				<Input
					type="search"
					placeholder="Search by name, email, or member ID..."
					value={searchQuery}
					oninput={(e) => {
						searchQuery = e.currentTarget.value;
						handleSearch(e.currentTarget.value);
					}}
					class="h-10 pl-9"
				/>
			</div>

			<button
				onclick={() => (showFilters = !showFilters)}
				class="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
			>
				<Filter class="h-4 w-4" />
				Filters
				<ChevronDown class="h-4 w-4 transition-transform {showFilters ? 'rotate-180' : ''}" />
			</button>
		</div>

		{#if showFilters}
			<div class="mt-4 flex flex-wrap gap-4 border-t border-slate-200 pt-4">
				<div>
					<label class="mb-1 block text-xs font-medium text-slate-500">Status</label>
					<select
						bind:value={statusFilter}
						onchange={() => updateFilters({ status: statusFilter })}
						class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
					>
						<option value="all">All Statuses</option>
						{#each statuses as status}
							<option value={status.name}>{status.display_name}</option>
						{/each}
					</select>
				</div>

				<div>
					<label class="mb-1 block text-xs font-medium text-slate-500">Role</label>
					<select
						bind:value={roleFilter}
						onchange={() => updateFilters({ role: roleFilter })}
						class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm"
					>
						<option value="all">All Roles</option>
						<option value="member">Member</option>
						<option value="board">Board</option>
						<option value="admin">Admin</option>
					</select>
				</div>
			</div>
		{/if}
	</div>

	<!-- Members Table -->
	<div class="glass-card overflow-hidden">
		{#if members.length === 0}
			<div class="flex flex-col items-center justify-center p-12 text-center">
				<Users class="mb-4 h-16 w-16 text-slate-300" />
				<h3 class="text-lg font-medium text-slate-900">No members found</h3>
				<p class="mt-1 text-slate-500">
					{filters.search || filters.status !== 'all' || filters.role !== 'all'
						? 'Try adjusting your search or filters.'
						: 'Members will appear here when added.'}
				</p>
			</div>
		{:else}
			<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">
								Member
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Contact
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Status
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Dues
							</th>
							<th class="px-6 py-3 text-left text-xs font-medium uppercase text-slate-500">
								Member Since
							</th>
							<th class="px-6 py-3 text-right text-xs font-medium uppercase text-slate-500">
								Actions
							</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-slate-100">
						{#each members as member}
							{@const statusInfo = getStatusInfo(member.status_name)}
							{@const duesInfo = getDuesInfo(member.dues_status)}
							{@const roleBadge = getRoleBadge(member.role)}
							<tr class="hover:bg-slate-50">
								<td class="px-6 py-4">
									<div class="flex items-center gap-3">
										{#if member.avatar_url}
											<img
												src={member.avatar_url}
												alt=""
												class="h-10 w-10 rounded-full object-cover"
											/>
										{:else}
											<div
												class="flex h-10 w-10 items-center justify-center rounded-full bg-monaco-100 text-monaco-700"
											>
												{member.first_name?.[0]}{member.last_name?.[0]}
											</div>
										{/if}
										<div>
											<div class="flex items-center gap-2">
												<p class="font-medium text-slate-900">
													{member.first_name} {member.last_name}
												</p>
												<span
													class="rounded-full px-2 py-0.5 text-xs font-medium {roleBadge.bg} {roleBadge.color}"
												>
													{roleBadge.label}
												</span>
												{#if member.nationality && member.nationality.length > 0}
													<div class="flex items-center gap-0.5">
														{#each member.nationality as code}
															<CountryFlag {code} size="xs" />
														{/each}
													</div>
												{/if}
											</div>
											<p class="text-xs text-slate-500">{member.member_id}</p>
										</div>
									</div>
								</td>
								<td class="px-6 py-4">
									<div class="space-y-1">
										<div class="flex items-center gap-1.5 text-sm text-slate-600">
											<Mail class="h-3.5 w-3.5" />
											<a href="mailto:{member.email}" class="hover:text-monaco-600">
												{member.email}
											</a>
										</div>
										{#if member.phone}
											<div class="flex items-center gap-1.5 text-sm text-slate-500">
												<Phone class="h-3.5 w-3.5" />
												{member.phone}
											</div>
										{/if}
									</div>
								</td>
								<td class="px-6 py-4">
									<span
										class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium {statusInfo.bg} {statusInfo.color}"
									>
										<svelte:component this={statusInfo.icon} class="h-3.5 w-3.5" />
										{member.status_display_name || member.status_name || 'Unknown'}
									</span>
								</td>
								<td class="px-6 py-4">
									<div class="space-y-1">
										<span
											class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {duesInfo.bg} {duesInfo.color}"
										>
											{duesInfo.label}
										</span>
										{#if member.current_due_date}
											<p class="text-xs text-slate-500">
												Due: {formatDate(member.current_due_date)}
											</p>
										{/if}
									</div>
								</td>
								<td class="px-6 py-4 text-sm text-slate-500">
									{formatDate(member.member_since)}
								</td>
								<td class="px-6 py-4 text-right">
									<div class="flex justify-end gap-2">
										<a
											href="/board/members/{member.id}"
											class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
											title="View Details"
										>
											<Eye class="h-4 w-4" />
										</a>
										<a
											href="/board/dues?member={member.id}"
											class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-monaco-600"
											title="Manage Dues"
										>
											<CreditCard class="h-4 w-4" />
										</a>
									</div>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		{/if}
	</div>
</div>
