<script lang="ts">
	import { onMount } from 'svelte';
	import { currentUser } from '$lib/stores/user';
	import { goto } from '$app/navigation';
	import { api } from '$lib/api/client';
	import { t } from '$lib/i18n';
	import { STORE_ITEMS } from '$lib/constants/config';

	let purchasing = false;
	let error = '';
	let success = '';

	onMount(() => {
		if (!$currentUser) {
			goto('/join?r=/store');
		}
	});

	async function purchase(itemId: number, amount?: number, variant?: number) {
		if (!$currentUser) return;

		purchasing = true;
		error = '';
		success = '';

		try {
			await api.purchase({ id: itemId, amount, variant });
			await currentUser.fetch();
			success = 'Purchase successful!';
			setTimeout(() => (success = ''), 3000);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Purchase failed';
		} finally {
			purchasing = false;
		}
	}

	function canAfford(price: number): boolean {
		return $currentUser ? $currentUser.droplets >= price : false;
	}
</script>

<svelte:head>
	<title>Store - FurryPlace</title>
</svelte:head>

{#if $currentUser}
	<div class="mx-auto max-w-5xl px-4 py-6">
		<div class="mb-6">
			<h1 class="text-3xl font-bold">Store</h1>
			<p class="text-base-content/60 mt-2">
				You have <span class="font-semibold text-primary">{$currentUser.droplets.toLocaleString()}</span> droplets
			</p>
		</div>

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

		{#if success}
			<div class="alert alert-success mb-6">
				<span>{success}</span>
			</div>
		{/if}

		<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
			<!-- Max Charges -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h2 class="card-title">+5 Max Charges</h2>
					<p class="text-sm text-base-content/60">
						Increase your maximum charge capacity by 5. Stack multiple purchases.
					</p>
					<div class="mt-4">
						<p class="text-xs text-base-content/50">Current: {$currentUser.maxCharges}</p>
					</div>
					<div class="card-actions justify-between items-center mt-4">
						<span class="text-lg font-bold text-primary">500 droplets</span>
						<button
							class="btn btn-primary btn-sm"
							on:click={() => purchase(70)}
							disabled={purchasing || !canAfford(500)}
						>
							{purchasing ? 'Processing...' : 'Purchase'}
						</button>
					</div>
				</div>
			</div>

			<!-- Paint Charges -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h2 class="card-title">+30 Charges</h2>
					<p class="text-sm text-base-content/60">
						Instantly refill 30 paint charges. Great for quick painting sessions!
					</p>
					<div class="mt-4">
						<p class="text-xs text-base-content/50">
							Current: {$currentUser.currentCharges}/{$currentUser.maxCharges}
						</p>
					</div>
					<div class="card-actions justify-between items-center mt-4">
						<span class="text-lg font-bold text-primary">500 droplets</span>
						<button
							class="btn btn-primary btn-sm"
							on:click={() => purchase(80)}
							disabled={purchasing || !canAfford(500)}
						>
							{purchasing ? 'Processing...' : 'Purchase'}
						</button>
					</div>
				</div>
			</div>

			<!-- Paid Colors -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h2 class="card-title">Unlock Paid Colors</h2>
					<p class="text-sm text-base-content/60">
						Unlock all premium colors permanently. Expand your artistic palette!
					</p>
					<div class="mt-4">
						<p class="text-xs text-base-content/50">32 additional colors</p>
					</div>
					<div class="card-actions justify-between items-center mt-4">
						<span class="text-lg font-bold text-primary">2,000 droplets</span>
						<button
							class="btn btn-primary btn-sm"
							on:click={() => purchase(100)}
							disabled={purchasing || !canAfford(2000)}
						>
							{purchasing ? 'Processing...' : 'Purchase'}
						</button>
					</div>
				</div>
			</div>

			<!-- Flags -->
			<div class="card bg-base-100 shadow-xl">
				<div class="card-body">
					<h2 class="card-title">Unlock Country Flag</h2>
					<p class="text-sm text-base-content/60">
						Unlock a country flag to represent your nation. Get 10% charge discount in your region!
					</p>
					<div class="mt-4">
						<p class="text-xs text-base-content/50">Choose any country flag</p>
					</div>
					<div class="card-actions justify-between items-center mt-4">
						<span class="text-lg font-bold text-primary">20,000 droplets</span>
						<button
							class="btn btn-primary btn-sm"
							on:click={() => purchase(110)}
							disabled={purchasing || !canAfford(20000)}
						>
							{purchasing ? 'Processing...' : 'Purchase'}
						</button>
					</div>
				</div>
			</div>
		</div>

		<div class="mt-8 p-4 rounded-box bg-base-200">
			<h3 class="font-semibold mb-2">How to earn droplets?</h3>
			<ul class="text-sm text-base-content/70 space-y-1 list-disc list-inside">
				<li>Paint pixels to earn droplets</li>
				<li>Participate in community events</li>
				<li>Complete daily challenges</li>
			</ul>
		</div>
	</div>
{:else}
	<div class="flex min-h-screen items-center justify-center">
		<div class="text-center">
			<p class="text-lg">Loading...</p>
		</div>
	</div>
{/if}
