<script lang="ts">
import { onMount } from 'svelte';

type Theme = 'light' | 'dark';

function systemPrefersDark(): boolean {
	return window.matchMedia('(prefers-color-scheme: dark)').matches;
}

function resolveInitialTheme(): Theme {
	const saved = localStorage.getItem('theme');
	if (saved === 'light' || saved === 'dark') return saved;
	return systemPrefersDark() ? 'dark' : 'light';
}

let theme = $state<Theme>('light');

onMount(() => {
	theme = resolveInitialTheme();
});

function toggle() {
	theme = theme === 'dark' ? 'light' : 'dark';
	localStorage.setItem('theme', theme);
	document.documentElement.setAttribute('data-theme', theme);
}
</script>

<button
	type="button"
	onclick={toggle}
	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
	title={theme === 'dark' ? 'light mode' : 'dark mode'}
	class="rounded p-1.5 text-ink-2 transition-colors hover:bg-muted hover:text-ink"
>
	{#if theme === 'dark'}
		<!-- Sun icon — click to go light -->
		<svg
			class="h-4 w-4"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			aria-hidden="true"
		>
			<circle cx="12" cy="12" r="4" />
			<path
				stroke-linecap="round"
				d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
			/>
		</svg>
	{:else}
		<!-- Moon icon — click to go dark -->
		<svg
			class="h-4 w-4"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			aria-hidden="true"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
			/>
		</svg>
	{/if}
</button>
