<script lang="ts">
	import { Button } from '$lib/components/ui/button/index.js';
	import { Label } from '$lib/components/ui/label/index.js';
	import * as Field from '$lib/components/ui/field/index.js';
	import { NativeSelect } from '$lib/components/ui/native-select/index.js';
	import { Progress } from '$lib/components/ui/progress/index.js';
	import { Badge } from '$lib/components/ui/badge/index.js';
	import ThemeToggle from '$lib/components/layout/theme-toggle.svelte';
	import { getThemeState } from '$lib/theme/theme.svelte';
	import { COLOR_TOKENS, FONT_TOKENS, FONT_STACKS, PRESETS } from '$lib/theme/presets';
	import { RotateCcw, Funnel, Star } from '@lucide/svelte';

	const theme = getThemeState();

	const RADII = [
		{ label: 'Square', value: '0rem' },
		{ label: 'Slight', value: '0.25rem' },
		{ label: 'Rounded', value: '0.625rem' },
		{ label: 'Soft', value: '1rem' }
	];
</script>

<div class="flex max-w-3xl flex-col gap-8 pb-10">
	<header class="flex items-start justify-between gap-4">
		<div>
			<h2 class="font-serif text-lg font-medium">Appearance</h2>
			<p class="text-sm text-muted-foreground">
				Changes apply immediately and are remembered on this browser. Light and dark are edited
				separately &mdash; you are editing <strong>{theme.mode}</strong>.
			</p>
		</div>
		<div class="flex items-center gap-2">
			<ThemeToggle />
			{#if theme.isCustomised}
				<Button variant="outline" size="sm" onclick={() => theme.reset()}>
					<RotateCcw class="size-3.5" />
					Reset
				</Button>
			{/if}
		</div>
	</header>

	<!-- Presets -->
	<section class="flex flex-col gap-3">
		<Label class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Theme</Label>
		<div class="grid gap-3 sm:grid-cols-3">
			{#each PRESETS as preset (preset.id)}
				<button
					type="button"
					onclick={() => theme.setPreset(preset.id)}
					aria-pressed={theme.config.preset === preset.id}
					class="flex flex-col gap-3 rounded-lg border p-3 text-left transition-colors hover:bg-muted aria-pressed:border-primary aria-pressed:bg-accent"
				>
					<div class="flex gap-1">
						{#each ['background', 'card', 'primary', 'muted-foreground', 'flag'] as key (key)}
							<span
								class="size-5 rounded border"
								style="background:{preset[theme.mode][key]}"
								aria-hidden="true"
							></span>
						{/each}
					</div>
					<div>
						<span class="text-sm font-medium">{preset.name}</span>
						<p class="text-xs text-muted-foreground">{preset.description}</p>
					</div>
				</button>
			{/each}
		</div>
	</section>

	<!-- Colours -->
	<section class="flex flex-col gap-3">
		<Label class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Colours</Label
		>
		<div class="grid gap-x-6 gap-y-1 sm:grid-cols-2">
			{#each COLOR_TOKENS as token (token.key)}
				<div class="flex items-center gap-3 rounded-md px-2 py-2 hover:bg-muted">
					<input
						type="color"
						id="color-{token.key}"
						value={theme.palette[token.key]}
						oninput={(e) => theme.setColor(token.key, e.currentTarget.value)}
						class="size-7 shrink-0 cursor-pointer rounded border bg-transparent"
					/>
					<label for="color-{token.key}" class="min-w-0 flex-1 cursor-pointer">
						<span class="block text-sm">{token.label}</span>
						<span class="block truncate text-xs text-muted-foreground">{token.hint}</span>
					</label>
					<code class="font-mono text-xs text-muted-foreground">{theme.palette[token.key]}</code>
				</div>
			{/each}
		</div>
	</section>

	<!-- Radius -->
	<section class="flex flex-col gap-3">
		<Label class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Corners</Label
		>
		<div class="flex flex-wrap gap-2">
			{#each RADII as option (option.value)}
				<button
					type="button"
					onclick={() => theme.setRadius(option.value)}
					aria-pressed={theme.radius === option.value}
					class="flex items-center gap-2 border px-3 py-2 text-sm transition-colors hover:bg-muted aria-pressed:border-primary aria-pressed:bg-accent"
					style="border-radius:{option.value}"
				>
					<span
						class="size-4 border bg-primary"
						style="border-radius:{option.value}"
						aria-hidden="true"
					></span>
					{option.label}
				</button>
			{/each}
		</div>
	</section>

	<!-- Fonts -->
	<section class="flex flex-col gap-3">
		<Label class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Fonts</Label>
		<div class="grid gap-4 sm:grid-cols-3">
			{#each FONT_TOKENS as token (token.key)}
				<Field.Field>
					<Field.Label for="font-{token.key}">{token.label}</Field.Label>
					<NativeSelect
						id="font-{token.key}"
						value={theme.fonts[token.key]}
						onchange={(e) => theme.setFont(token.key, e.currentTarget.value)}
					>
						{#each FONT_STACKS as stack (stack.label)}
							<option value={stack.value}>{stack.label}</option>
						{/each}
					</NativeSelect>
				</Field.Field>
			{/each}
		</div>
	</section>

	<!-- Preview -->
	<section class="flex flex-col gap-3">
		<Label class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Preview</Label
		>
		<div class="rounded-lg border bg-sidebar p-4">
			<div class="flex flex-col gap-4 rounded-lg border bg-card p-4">
				<div class="flex items-baseline justify-between gap-4">
					<h3 class="font-serif text-base">Frankenstein</h3>
					<span class="font-mono text-xs text-muted-foreground tabular-nums">280 pp · 1818</span>
				</div>

				<Progress value={0.62} max={1} class="h-1 rounded [&>div]:bg-flag" />

				<div class="flex flex-wrap items-center gap-2">
					<Badge>Fiction</Badge>
					<Badge variant="outline">Gothic</Badge>
					<span class="font-mono text-xs font-semibold text-success">Finished</span>
					<Star class="size-4 fill-star text-star" />
					<span class="relative inline-flex">
						<Funnel class="size-4 text-muted-foreground" />
						<span class="absolute -top-0.5 -right-0.5 size-1.5 rounded-full bg-flag"></span>
					</span>
				</div>

				<div class="flex flex-wrap gap-2">
					<Button size="sm">Read</Button>
					<Button size="sm" variant="outline">Download</Button>
					<Button size="sm" variant="destructive">Delete</Button>
				</div>
			</div>
		</div>
	</section>
</div>
