<script lang="ts">
	import {
		UserCheck,
		UserX,
		Clock,
		Mail,
		Phone,
		MapPin,
		Flag,
		Calendar
	} from 'lucide-svelte';
	import { Button } from '$lib/components/ui/button';
	import { EmptyState } from '$lib/components/ui';
	import CountryFlag from '$lib/components/ui/CountryFlag.svelte';
	import { enhance } from '$app/forms';

	let { data, form } = $props();

	let rejectingId = $state<string | null>(null);
	let rejectReason = $state('');
	let submitting = $state(false);

	const pendingCount = $derived(data.pendingMembers.length);

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

<svelte:head>
	<title>Member Approvals | 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>
			<div class="flex items-center gap-3">
				<h1 class="text-2xl font-bold text-slate-900">Member Approvals</h1>
				{#if pendingCount > 0}
					<span class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-sm font-medium text-yellow-800">
						{pendingCount}
					</span>
				{/if}
			</div>
			<p class="text-slate-500">Review and approve pending membership applications</p>
		</div>
	</div>

	{#if form?.success && form?.approved}
		<div class="rounded-lg border border-green-200 bg-green-50 p-4">
			<p class="text-sm font-medium text-green-800">
				{form.approved} has been approved and notified by email.
			</p>
		</div>
	{/if}

	{#if form?.success && form?.rejected}
		<div class="rounded-lg border border-red-200 bg-red-50 p-4">
			<p class="text-sm font-medium text-red-800">
				{form.rejected}'s application has been rejected.
			</p>
		</div>
	{/if}

	{#if form?.error}
		<div class="rounded-lg border border-red-200 bg-red-50 p-4">
			<p class="text-sm font-medium text-red-800">{form.error}</p>
		</div>
	{/if}

	{#if pendingCount === 0}
		<div class="glass-card p-12">
			<EmptyState
				icon={UserCheck}
				title="No pending applications"
				description="All membership applications have been reviewed. New applications will appear here."
			/>
		</div>
	{:else}
		<div class="space-y-4">
			{#each data.pendingMembers as member}
				<div class="glass-card p-6">
					<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
						<!-- Member Info -->
						<div class="flex-1 space-y-3">
							<div class="flex items-center gap-3">
								<div class="flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100 text-lg font-medium text-yellow-700">
									{member.first_name?.[0]}{member.last_name?.[0]}
								</div>
								<div>
									<h3 class="text-lg font-semibold text-slate-900">
										{member.first_name} {member.last_name}
									</h3>
									<p class="text-sm text-slate-500">{member.member_id || 'ID pending'}</p>
								</div>
							</div>

							<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
								<div class="flex items-center gap-2 text-sm text-slate-600">
									<Mail class="h-4 w-4 text-slate-400" />
									<a href="mailto:{member.email}" class="hover:text-monaco-600">{member.email}</a>
								</div>
								{#if member.phone}
									<div class="flex items-center gap-2 text-sm text-slate-600">
										<Phone class="h-4 w-4 text-slate-400" />
										{member.phone}
									</div>
								{/if}
								{#if member.nationality && member.nationality.length > 0}
									<div class="flex items-center gap-2 text-sm text-slate-600">
										<Flag class="h-4 w-4 text-slate-400" />
										<div class="flex items-center gap-1">
											{#each member.nationality as code}
												<CountryFlag {code} size="xs" />
											{/each}
										</div>
									</div>
								{/if}
								{#if member.address}
									<div class="flex items-center gap-2 text-sm text-slate-600">
										<MapPin class="h-4 w-4 text-slate-400" />
										{member.address}
									</div>
								{/if}
								<div class="flex items-center gap-2 text-sm text-slate-500">
									<Calendar class="h-4 w-4 text-slate-400" />
									Applied: {formatDate(member.created_at)}
								</div>
							</div>
						</div>

						<!-- Actions -->
						<div class="flex flex-shrink-0 items-start gap-2">
							{#if rejectingId === member.id}
								<!-- Reject form with reason -->
								<form
									method="POST"
									action="?/reject"
									use:enhance={() => {
										submitting = true;
										return async ({ update }) => {
											submitting = false;
											rejectingId = null;
											rejectReason = '';
											await update();
										};
									}}
									class="flex flex-col gap-2"
								>
									<input type="hidden" name="member_id" value={member.id} />
									<textarea
										name="reason"
										bind:value={rejectReason}
										placeholder="Optional reason for rejection..."
										rows="2"
										class="w-64 rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-monaco-500 focus:outline-none focus:ring-1 focus:ring-monaco-500"
									></textarea>
									<div class="flex gap-2">
										<Button
											type="submit"
											variant="destructive"
											size="sm"
											disabled={submitting}
										>
											<UserX class="mr-1 h-4 w-4" />
											Confirm Reject
										</Button>
										<Button
											type="button"
											variant="outline"
											size="sm"
											onclick={() => { rejectingId = null; rejectReason = ''; }}
										>
											Cancel
										</Button>
									</div>
								</form>
							{:else}
								<form
									method="POST"
									action="?/approve"
									use:enhance={() => {
										submitting = true;
										return async ({ update }) => {
											submitting = false;
											await update();
										};
									}}
								>
									<input type="hidden" name="member_id" value={member.id} />
									<Button
										type="submit"
										size="sm"
										class="bg-green-600 hover:bg-green-700"
										disabled={submitting}
									>
										<UserCheck class="mr-1 h-4 w-4" />
										Approve
									</Button>
								</form>
								<Button
									variant="outline"
									size="sm"
									class="border-red-200 text-red-600 hover:bg-red-50"
									onclick={() => { rejectingId = member.id; }}
								>
									<UserX class="mr-1 h-4 w-4" />
									Reject
								</Button>
							{/if}
						</div>
					</div>
				</div>
			{/each}
		</div>
	{/if}
</div>
