<script lang="ts">
	import type { PageData } from './$types';

	interface Props {
		data: PageData;
	}

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

	const statCards = $derived.by(() => [
		{
			label: 'Total Characters',
			value: data.stats.totalCharacters,
			icon: '🗣️',
			bgColor: 'bg-blue-500/10 border-blue-500/20'
		},
		{
			label: 'In Daily Mode',
			value: data.stats.charactersInDaily,
			icon: '📅',
			bgColor: 'bg-green-500/10 border-green-500/20'
		},
		{
			label: 'Devil Fruits',
			value: data.stats.totalDevilFruits,
			icon: '🍎',
			bgColor: 'bg-red-500/10 border-red-500/20'
		},
		{
			label: 'Arcs',
			value: data.stats.totalArcs,
			icon: '📚',
			bgColor: 'bg-purple-500/10 border-purple-500/20'
		},
		{
			label: 'Total Users',
			value: data.stats.totalUsers,
			icon: '👥',
			bgColor: 'bg-yellow-500/10 border-yellow-500/20'
		},
		{
			label: 'Admin Users',
			value: data.stats.adminUsers,
			icon: '🔑',
			bgColor: 'bg-orange-500/10 border-orange-500/20'
		}
	]);
</script>

<svelte:head>
	<title>Admin Dashboard - OnePieceDle</title>
</svelte:head>

<div class="space-y-8">
	<!-- Welcome Section -->
	<div class="rounded-lg border border-white/10 bg-gradient-to-r from-amber-600/20 to-amber-700/10 p-6">
		<h2 class="text-2xl font-bold text-white">Welcome Back!</h2>
		<p class="mt-2 text-gray-400">
			{#if data.stats.dailyCharacterWins > 0}
				<strong class="text-amber-400">{data.stats.dailyCharacterWins}</strong>
				{data.stats.dailyCharacterWins === 1 ? 'person has' : 'people have'} found today's daily character!
			{:else}
				No one has found today's daily character yet.
			{/if}
		</p>
	</div>

	<!-- Stats Grid -->
	<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
		{#each statCards as card}
			<div
				class={`rounded-lg border p-6 transition-all hover:shadow-lg hover:shadow-white/5 ${card.bgColor}`}
			>
				<div class="flex items-center justify-between">
					<div>
						<p class="text-sm font-medium text-gray-400">{card.label}</p>
						<p class="mt-2 text-3xl font-bold text-white">{card.value}</p>
					</div>
					<div class="text-4xl">{card.icon}</div>
				</div>
			</div>
		{/each}
	</div>

	<!-- Quick Actions -->
	<div class="rounded-lg border border-white/10 bg-slate-800/50 p-6">
		<h3 class="mb-4 text-lg font-bold text-white">Quick Actions</h3>
		<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
			<a
				href="/admin/characters"
				class="rounded-lg bg-slate-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-slate-600"
			>
				↳ Manage Characters
			</a>
			<a
				href="/admin/devil-fruits"
				class="rounded-lg bg-slate-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-slate-600"
			>
				↳ Manage Devil Fruits
			</a>
			<a
				href="/admin/arcs"
				class="rounded-lg bg-slate-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-slate-600"
			>
				↳ Manage Arcs
			</a>
			<a
				href="/admin/users"
				class="rounded-lg bg-slate-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-slate-600"
			>
				↳ Manage Users
			</a>
			<a
				href="/admin/config"
				class="rounded-lg bg-slate-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-slate-600"
			>
				↳ App Settings
			</a>
		</div>
	</div>
</div>
