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

	let editing = false;
	let name = '';
	let discord = '';
	let showLastPixel = false;
	let saving = false;
	let error = '';

	$: if ($currentUser && !editing) {
		name = $currentUser.name;
		discord = $currentUser.discord || '';
		showLastPixel = $currentUser.showLastPixel;
	}

	$: levelProgress = $currentUser ? getLevelProgress($currentUser.pixelsPainted) : 0;

	function startEdit() {
		editing = true;
		error = '';
	}

	function cancelEdit() {
		editing = false;
		error = '';
		if ($currentUser) {
			name = $currentUser.name;
			discord = $currentUser.discord || '';
			showLastPixel = $currentUser.showLastPixel;
		}
	}

	async function saveProfile() {
		if (!$currentUser) return;

		saving = true;
		error = '';

		try {
			await currentUser.updateProfile({
				name: name.trim(),
				discord: discord.trim() || undefined,
				showLastPixel
			});
			editing = false;
		} catch (e) {
			error = e instanceof Error ? e.message : 'Failed to update profile';
		} finally {
			saving = false;
		}
	}
</script>

{#if $currentUser}
	<div class="card bg-base-100 shadow-xl">
		<div class="card-body">
			<h2 class="card-title">User Profile</h2>

			<div class="flex items-center gap-4 mb-4">
				<div class="avatar placeholder">
					<div class="bg-primary text-primary-content rounded-full w-16 h-16">
						{#if $currentUser.picture}
							<img src={$currentUser.picture} alt={$currentUser.name} />
						{:else}
							<span class="text-2xl">{$currentUser.name[0].toUpperCase()}</span>
						{/if}
					</div>
				</div>
				<div>
					<h3 class="text-xl font-semibold">{$currentUser.name}</h3>
					<p class="text-sm text-base-content/60">Level {$userLevel}</p>
				</div>
			</div>

			{#if !editing}
				<div class="space-y-3">
					<div>
						<p class="text-xs uppercase text-base-content/50">Username</p>
						<p>{$currentUser.name}</p>
					</div>

					{#if $currentUser.discord}
						<div>
							<p class="text-xs uppercase text-base-content/50">Discord</p>
							<p>{$currentUser.discord}</p>
						</div>
					{/if}

					<div>
						<p class="text-xs uppercase text-base-content/50">Pixels Painted</p>
						<p>{$currentUser.pixelsPainted.toLocaleString()}</p>
					</div>

					<div>
						<p class="text-xs uppercase text-base-content/50">Level Progress</p>
						<progress class="progress progress-primary w-full" value={levelProgress} max="100"></progress>
						<p class="text-xs text-base-content/60 mt-1">{levelProgress.toFixed(1)}% to Level {$userLevel + 1}</p>
					</div>

					<div>
						<p class="text-xs uppercase text-base-content/50">Droplets</p>
						<p class="text-lg font-semibold">{$currentUser.droplets.toLocaleString()}</p>
					</div>

					<div class="form-control">
						<label class="label cursor-pointer justify-start gap-2">
							<input type="checkbox" class="checkbox checkbox-sm" bind:checked={$currentUser.showLastPixel} disabled />
							<span class="label-text">Show last painted pixel</span>
						</label>
					</div>
				</div>

				<div class="card-actions justify-end mt-4">
					<button class="btn btn-primary btn-sm" on:click={startEdit}>
						{$t('edit')}
					</button>
				</div>
			{:else}
				<div class="space-y-3">
					<div class="form-control">
						<label class="label" for="name">
							<span class="label-text">Username</span>
						</label>
						<input
							id="name"
							type="text"
							class="input input-bordered"
							bind:value={name}
							maxlength="32"
							required
						/>
					</div>

					<div class="form-control">
						<label class="label" for="discord">
							<span class="label-text">Discord (optional)</span>
						</label>
						<input
							id="discord"
							type="text"
							class="input input-bordered"
							bind:value={discord}
							maxlength="32"
							placeholder="username#0000"
						/>
					</div>

					<div class="form-control">
						<label class="label cursor-pointer justify-start gap-2">
							<input type="checkbox" class="checkbox" bind:checked={showLastPixel} />
							<span class="label-text">Show last painted pixel</span>
						</label>
					</div>

					{#if error}
						<div class="alert alert-error">
							<span>{error}</span>
						</div>
					{/if}
				</div>

				<div class="card-actions justify-end mt-4 gap-2">
					<button class="btn btn-ghost btn-sm" on:click={cancelEdit} disabled={saving}>
						{$t('cancel')}
					</button>
					<button class="btn btn-primary btn-sm" on:click={saveProfile} disabled={saving || !name.trim()}>
						{#if saving}Saving...{:else}{$t('save')}{/if}
					</button>
				</div>
			{/if}
		</div>
	</div>
{/if}
