<script lang="ts">
	import { onMount } from 'svelte';
	import type { User } from 'better-auth/types';
	import { resolve } from '$app/paths';

	interface Props {
		user: (User & { isAdmin?: boolean }) | null;
	}

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

	let isMenuOpen = $state(false);
	let menuElement: HTMLDivElement | undefined;

	const toggleMenu = () => {
		isMenuOpen = !isMenuOpen;
	};

	const closeMenu = () => {
		isMenuOpen = false;
	};

	const handleLogout = async () => {
		const formData = new FormData();
		const response = await fetch('/login?/logout', {
			method: 'POST',
			body: formData
		});
		if (response.ok) {
			window.location.href = '/';
		}
	};

	onMount(() => {
		const handleClickOutside = (event: MouseEvent) => {
			if (menuElement && !menuElement.contains(event.target as Node)) {
				closeMenu();
			}
		};

		document.addEventListener('click', handleClickOutside);
		return () => document.removeEventListener('click', handleClickOutside);
	});
</script>

<div bind:this={menuElement} class="relative">
	{#if user}
		<button
			onclick={toggleMenu}
			class="flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-2 py-2 pr-4 transition hover:border-amber-300/50 hover:bg-white/10"
		>
			{#if user.image}
				<img
					src={user.image}
					alt={user.name || 'Profil'}
					class="h-8 w-8 rounded-full object-cover"
				/>
			{:else}
				<div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-300/20 text-xs font-semibold text-amber-100">
					{user.name?.charAt(0).toUpperCase() || 'U'}
				</div>
			{/if}
			<span class="max-w-37.5 truncate text-sm font-semibold text-slate-100">
				{user.name || 'Utilisateur'}
			</span>
			<svg
				class="h-4 w-4 transition {isMenuOpen ? 'rotate-180' : ''}"
				fill="none"
				stroke="white"
				viewBox="0 0 24 24"
			>
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
			</svg>
		</button>

		{#if isMenuOpen}
			<div
				class="absolute right-0 top-full mt-2 w-48 rounded-xl border border-white/10 bg-slate-900/95 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur"
			>
				<a
					href={resolve("/profile")}
					onclick={closeMenu}
					class="block border-b border-white/5 px-4 py-3 text-sm font-semibold text-slate-100 transition hover:bg-white/5 hover:text-amber-100 first:rounded-t-xl"
				>
					Voir mon profil
				</a>
				{#if (user).isAdmin}
					<a
						href={resolve("/admin")}
						onclick={closeMenu}
						class="block border-b border-white/5 px-4 py-3 text-sm font-semibold text-amber-300 transition hover:bg-white/5 hover:text-amber-200"
					>
						Admin
					</a>
				{/if}
				<button
					onclick={handleLogout}
					class="w-full border-t border-white/5 px-4 py-3 text-sm font-semibold text-red-300 transition hover:bg-red-900/20 last:rounded-b-xl"
				>
					Se déconnecter
				</button>
			</div>
		{/if}
	{:else}
		<a
			href={resolve("/login")}
			class="rounded-full bg-amber-300 px-5 py-2.5 text-sm font-semibold text-slate-900 transition hover:bg-amber-200"
		>
			Se connecter
		</a>
	{/if}
</div>
