<script lang="ts">
	import { currentUser, userLevel } from '$lib/stores/user';
	import { getLevelProgress } from '$lib/utils/level';
	import { minidenticon } from 'minidenticons';

	let dropdownOpen = false;
	let showEditProfile = false;
	let isMuted = false;

	$: levelProgress = $currentUser ? getLevelProgress($currentUser.pixelsPainted) : 0;
	$: svgURI = $currentUser
		? 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon($currentUser.name, 90, 50))
		: '';

	function toggleDropdown() {
		dropdownOpen = !dropdownOpen;
	}

	function closeDropdown() {
		dropdownOpen = false;
	}

	function toggleMute() {
		isMuted = !isMuted;
	}
</script>

{#if $currentUser}
	<div class="relative dropdown dropdown-end">
		<!-- Profile Button -->
		<button
			on:click={toggleDropdown}
			class="btn size-12 p-0 shadow-md bg-primary"
			title="Show profile"
		>
			<div class="relative w-max">
				<!-- Background circle -->
				<div class="bg-base-content/20 size-12 rounded-full"></div>

				<!-- Level progress ring -->
				<div
					class="level-fill center-absolute absolute size-12 rotate-[215deg] rounded-full"
					style="--angle: {(levelProgress / 100) * 360}deg; --color: var(--color-secondary);"
				></div>

				<!-- Avatar -->
				<div class="avatar center-absolute absolute">
					<div class="size-10 rounded-full">
						<div class="bg-base-200 minidenticon">
							{@html minidenticon($currentUser.name, 90, 50)}
						</div>
					</div>
					<!-- Edit profile button -->
					<button
						class="btn btn-circle btn-sm absolute -bottom-1 -right-1"
						on:click|stopPropagation={() => (showEditProfile = true)}
						title="Edit profile"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 -960 960 960"
							fill="currentColor"
							class="size-4"
						>
							<path
								d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"
							/>
						</svg>
					</button>
				</div>

				<!-- Level badge -->
				<div
					class="text-primary-content bg-secondary absolute bottom-0 left-0 -left-1 flex items-center justify-center rounded-full px-[5px] py-0 text-xs font-bold"
				>
					{$userLevel}
				</div>
			</div>
		</button>

		<!-- Dropdown Menu -->
		{#if dropdownOpen}
			<div
				class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-50 relative right-1 w-[min(100vw-24px,400px)] translate-y-2 border p-4 shadow-md"
			>
				<!-- Close button -->
				<button on:click={closeDropdown} class="btn btn-ghost btn-circle absolute right-2 top-2">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 -960 960 960"
						fill="currentColor"
						class="size-5"
					>
						<path
							d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
						/>
					</svg>
				</button>

				<!-- Profile Info -->
				<section class="flex gap-2">
					<div class="relative">
						<div class="avatar relative rounded-full border-3 border-primary">
							<div class="border-base-300 size-20 rounded-full border-2">
								<div class="bg-base-200 minidenticon">
									{@html minidenticon($currentUser.name, 90, 50)}
								</div>
							</div>
						</div>
					</div>

					<div>
						<div class="flex items-center gap-1.5 pr-8 text-lg font-medium">
							<h3 class="line-clamp-1 text-ellipsis text-lg" title={$currentUser.name}>
								{$currentUser.name}
							</h3>
							<span class="text-rose-500">#{$currentUser.id}</span>
							{#if $currentUser.country}
								<span class="tooltip font-flag ml-0.5" data-tip={$currentUser.country}>
									{$currentUser.country === 'US' ? '🇺🇸' : '🇧🇷'}
								</span>
							{/if}
						</div>

						{#if $currentUser.discord}
							<div class="mt-1">
								<span class="tooltip h-4">
									<div class="tooltip-content">
										<span>Discord: {$currentUser.discord}</span>
									</div>
									<button class="flex items-center gap-1 text-sm">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 127.14 96.36"
											fill="currentColor"
											class="size-4"
										>
											<path
												d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
											/>
										</svg>
									</button>
								</span>
							</div>
						{/if}

						<div class="flex items-center gap-1">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 -960 960 960"
								fill="currentColor"
								class="inline size-4"
							>
								<path
									d="M240-120q-45 0-89-22t-71-58q26 0 53-20.5t27-59.5q0-50 35-85t85-35q50 0 85 35t35 85q0 66-47 113t-113 47Zm230-240L360-470l358-358q11-11 27.5-11.5T774-828l54 54q12 12 12 28t-12 28L470-360Z"
								/>
							</svg>
							<span
								>Pixels painted: <span class="text-primary font-semibold"
									>{$currentUser.pixelsPainted.toLocaleString()}</span
								></span
							>
						</div>

						<div class="flex items-center gap-1">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 -960 960 960"
								fill="currentColor"
								class="inline size-4"
							>
								<path
									d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"
								/>
							</svg>
							<span class="text-secondary">
								<span class="font-semibold">Level {$userLevel}</span> ({levelProgress.toFixed(0)}%)
							</span>
						</div>
					</div>
				</section>

				<!-- Menu Items -->
				<section class="mt-3 flex flex-col gap-2">
					<div class="mb-1 flex items-center justify-between">
						<h3 class="text-lg font-semibold">Menu</h3>
						<div class="flex items-center gap-1">
							<!-- Language selector -->
							<div class="dropdown dropdown-end">
								<button class="btn btn-sm btn-circle" tabindex="0" title="Language">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 -960 960 960"
										fill="currentColor"
										class="size-5"
									>
										<path
											d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"
										/>
									</svg>
								</button>
								<ul
									tabindex="0"
									class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 border border-base-300 p-2 shadow"
								>
									<li>
										<button class="font-flag">🇺🇸 English</button>
									</li>
									<li>
										<button class="font-flag">🇧🇷 Português</button>
									</li>
								</ul>
							</div>

							<!-- Mute button -->
							<button
								class="btn btn-sm btn-circle"
								on:click={toggleMute}
								title={isMuted ? 'Unmute' : 'Mute'}
							>
								{#if isMuted}
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 -960 960 960"
										fill="currentColor"
										class="size-5"
									>
										<path
											d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z"
										/>
									</svg>
								{:else}
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 -960 960 960"
										fill="currentColor"
										class="size-5"
									>
										<path
											d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z"
										/>
									</svg>
								{/if}
							</button>
						</div>
					</div>

					<a class="btn w-full" href="/profile">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 -960 960 960"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
							/>
						</svg>
						Profile
					</a>

					<a class="btn w-full" href="/alliance">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 -960 960 960"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M40-160v-160q0-34 23.5-57t56.5-23h131q20 0 38 10t29 27q29 39 71.5 61t90.5 22q49 0 91.5-22t70.5-61q13-17 30.5-27t36.5-10h131q34 0 57 23t23 57v160H640v-91q-35 25-75.5 38T480-200q-43 0-84-13.5T320-252v92H40Zm440-160q-38 0-72-17.5T351-386q-17-25-42.5-39.5T253-440q22-37 93-58.5T480-520q63 0 134 21.5t93 58.5q-29 0-55 14.5T609-386q-22 32-56 49t-73 17Z"
							/>
						</svg>
						Alliance
					</a>

					<a class="btn w-full" href="/store">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 -960 960 960"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Z"
							/>
						</svg>
						Store
					</a>

					<a class="btn w-full" href="/leaderboard">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 -960 960 960"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M160-200h160v-320H160v320Zm240 0h160v-560H400v560Zm240 0h160v-240H640v240ZM80-120v-480h240v-240h320v320h240v400H80Z"
							/>
						</svg>
						Leaderboard
					</a>

					<!-- Social Media Buttons -->
					<a
						class="btn w-full"
						href="https://www.twitch.tv/directory/category/wplace"
						target="_blank"
						rel="noopener noreferrer"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 256 268"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M17.458 0L0 46.556v186.201h63.983v34.934h34.931l34.898-34.934h52.36L256 162.954V0H17.458zm23.259 23.263H232.73v128.029l-40.739 40.741H128L93.113 226.92v-34.886H40.717V23.263zm64.008 116.405H128V69.844h-23.275v69.824zm63.997 0h23.27V69.844h-23.27v69.824z"
							/>
						</svg>
						Livestreams
					</a>

					<a
						class="btn w-full"
						href="https://discord.gg/wplace"
						target="_blank"
						rel="noopener noreferrer"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 127.14 96.36"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
							/>
						</svg>
						Discord
					</a>

					<a
						class="btn w-full"
						href="https://www.reddit.com/r/wplace_unofficial"
						target="_blank"
						rel="noopener noreferrer"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 24 24"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0zm4.388 3.199c.605 0 1.126.21 1.551.628.426.418.64.948.64 1.59 0 .613-.213 1.128-.64 1.546-.425.418-.946.628-1.551.628-.578 0-1.075-.21-1.486-.628-.412-.418-.619-.933-.619-1.546 0-.642.207-1.172.619-1.59.411-.418.908-.628 1.486-.628zM5.423 9.636c.853 0 1.573.3 2.16.902.586.6.879 1.334.879 2.201 0 .866-.293 1.6-.879 2.2-.587.6-1.307.9-2.16.9-.852 0-1.573-.3-2.159-.9-.587-.6-.88-1.334-.88-2.2 0-.867.293-1.601.88-2.2.586-.602 1.307-.903 2.159-.903zm13.154 0c.853 0 1.574.3 2.161.902.586.6.879 1.334.879 2.201 0 .866-.293 1.6-.879 2.2-.587.6-1.308.9-2.161.9-.852 0-1.573-.3-2.159-.9-.587-.6-.88-1.334-.88-2.2 0-.867.293-1.601.88-2.2.586-.602 1.307-.903 2.159-.903zM12 15.314c1.777 0 3.309.48 4.597 1.44.964.72 1.446 1.584 1.446 2.592H5.957c0-1.008.482-1.872 1.445-2.592 1.289-.96 2.821-1.44 4.598-1.44z"
							/>
						</svg>
						Reddit
					</a>

					<button class="btn w-full" on:click={() => currentUser.logout()}>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 -960 960 960"
							fill="currentColor"
							class="size-5"
						>
							<path
								d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"
							/>
						</svg>
						Log Out
					</button>
				</section>
			</div>
		{/if}
	</div>
{:else}
	<a href="/join" class="btn btn-primary shadow-md">Login</a>
{/if}

<style>
	.level-fill {
		background: conic-gradient(
			var(--color) 0deg,
			var(--color) var(--angle),
			transparent var(--angle)
		);
		-webkit-mask: radial-gradient(
			farthest-side,
			transparent calc(100% - 3px),
			white calc(100% - 2px)
		);
		mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 2px));
	}

	.center-absolute {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.minidenticon :global(svg) {
		width: 100%;
		height: 100%;
	}
</style>
