<script lang="ts">
	import { Mail, X, RefreshCw, Check } from 'lucide-svelte';
	import { Button } from '$lib/components/ui/button';

	interface Props {
		email: string;
	}

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

	let dismissed = $state(false);
	let resending = $state(false);
	let resendSuccess = $state(false);

	async function resendVerification() {
		resending = true;
		resendSuccess = false;

		try {
			const response = await fetch('/api/auth/resend-verification', { method: 'POST' });
			const result = await response.json();

			if (result.success) {
				resendSuccess = true;
				// Reset success message after 5 seconds
				setTimeout(() => {
					resendSuccess = false;
				}, 5000);
			}
		} catch (error) {
			console.error('Failed to resend verification:', error);
		} finally {
			resending = false;
		}
	}
</script>

{#if !dismissed}
	<div class="bg-amber-50 border-b border-amber-200">
		<div class="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
				<div class="flex items-center gap-3">
					<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100">
						<Mail class="h-4 w-4 text-amber-600" />
					</div>
					<div class="min-w-0">
						<p class="text-sm font-medium text-amber-800">
							Please verify your email address
						</p>
						<p class="text-xs text-amber-600 truncate">
							Check <span class="font-medium">{email}</span> for verification link
						</p>
					</div>
				</div>

				<div class="flex items-center gap-2 sm:shrink-0">
					{#if resendSuccess}
						<span class="flex items-center gap-1.5 text-sm text-green-600">
							<Check class="h-4 w-4" />
							Email sent!
						</span>
					{:else}
						<Button
							variant="ghost"
							size="sm"
							onclick={resendVerification}
							disabled={resending}
							class="text-amber-700 hover:bg-amber-100 hover:text-amber-800"
						>
							{#if resending}
								<RefreshCw class="mr-1.5 h-3.5 w-3.5 animate-spin" />
								Sending...
							{:else}
								<RefreshCw class="mr-1.5 h-3.5 w-3.5" />
								Resend
							{/if}
						</Button>
					{/if}
					<Button
						variant="ghost"
						size="sm"
						onclick={() => (dismissed = true)}
						class="text-amber-600 hover:bg-amber-100 hover:text-amber-800 p-1.5"
						aria-label="Dismiss"
					>
						<X class="h-4 w-4" />
					</Button>
				</div>
			</div>
		</div>
	</div>
{/if}
