<script lang="ts">
	import { localStorageStore } from '$lib/utils.svelte';
	import Icon from '@iconify/svelte';
	import { currentTheme } from '$lib/stores/settings';

	const themes = [
		'light',
		'dark',
		'cupcake',
		'bumblebee',
		'emerald',
		'synthwave',
		'retro',
		'valentine',
		'halloween',
		'garden',
		'forest',
		'aqua',
		'lofi',
		'pastel',
		'fantasy',
		'luxury',
		'dracula',
		'autumn',
		'business',
		'lemonade',
		'night',
		'coffee',
		'winter',
		'dim',
		'nord',
		'sunset',
		'caramellatte',
		'abyss'
	];

	function getThemePreviewClasses(theme: string): string {
		const themeClasses: Record<string, string> = {
			dark: 'bg-gray-900 border-gray-700',
			cupcake: 'bg-pink-50 border-pink-200',
			bumblebee: 'bg-yellow-50 border-yellow-200',
			emerald: 'bg-emerald-50 border-emerald-200',
			synthwave: 'bg-purple-900 border-purple-700',
			retro: 'bg-orange-50 border-orange-200',
			valentine: 'bg-pink-100 border-pink-300',
			halloween: 'bg-orange-900 border-orange-700',
			garden: 'bg-green-50 border-green-200',
			forest: 'bg-green-800 border-green-600',
			aqua: 'bg-cyan-50 border-cyan-200',
			lofi: 'bg-gray-100 border-gray-300',
			pastel: 'bg-purple-50 border-purple-200',
			fantasy: 'bg-purple-100 border-purple-300',
			luxury: 'bg-gray-800 border-yellow-500',
			dracula: 'bg-gray-900 border-pink-500',
			autumn: 'bg-orange-100 border-red-300',
			business: 'bg-slate-100 border-slate-300',
			lemonade: 'bg-yellow-100 border-yellow-300',
			night: 'bg-gray-900 border-blue-500',
			coffee: 'bg-amber-100 border-amber-400',
			winter: 'bg-blue-100 border-blue-300',
			dim: 'bg-gray-800 border-gray-600',
			nord: 'bg-slate-200 border-slate-400',
			sunset: 'bg-orange-200 border-red-400',
			caramellatte: 'bg-yellow-100 border-yellow-300',
			abyss: 'bg-gray-900 border-blue-500'
		};
		return themeClasses[theme] || 'bg-white border-gray-200';
	}
</script>

<section id="appearance" class="bg-base-200 rounded-xl p-6">
	<div class="flex items-center gap-3 mb-6">
		<Icon icon="mdi:palette" class="w-6 h-6 text-primary" />
		<div>
			<h2 class="text-xl font-semibold text-base-content">Theme</h2>
			<p class="text-base-content/70 text-sm">Choose your preferred color scheme</p>
		</div>
	</div>

	<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
		{#each themes as theme}
			<button
				onclick={() => ($currentTheme = theme)}
				class="group relative p-3 rounded-lg border-2 transition-all hover:scale-105 {$currentTheme ===
				theme
					? 'border-primary ring-2 ring-primary/30'
					: 'border-base-300 hover:border-primary/50'} {getThemePreviewClasses(theme)}"
			>
				<p
					class="text-xs font-medium capitalize {theme.includes('dark') ||
					theme === 'night' ||
					theme === 'forest' ||
					theme === 'synthwave' ||
					theme === 'halloween' ||
					theme === 'dracula' ||
					theme === 'luxury' ||
					theme === 'dim' ||
					theme === 'abyss'
						? 'text-white'
						: 'text-gray-700'}"
				>
					{theme}
				</p>
				{#if $currentTheme === theme}
					<div
						class="absolute -top-1 -right-1 w-6 h-6 bg-primary rounded-full flex items-center justify-center"
					>
						<Icon icon="mdi:check" class="w-4 h-4 text-primary-content" />
					</div>
				{/if}
			</button>
		{/each}
	</div>
</section>
