<script lang="ts">
	import { goto } from '$app/navigation';
	import { onMount } from 'svelte';
	import { api } from '$lib/api';
	import { login } from '$lib/auth.svelte';
	import { t, initLocale, getLocale, setLocale } from '$lib/i18n';
	import { initTheme, getTheme, setTheme, type Theme } from '$lib/theme.svelte';

	const theme = getTheme();
	let username = $state('');
	let password = $state('');
	let error = $state('');
	let submitting = $state(false);

	onMount(async () => {
		initLocale();
		initTheme();
		try {
			const res = await api<{ needs_setup: boolean }>('/auth/needs-setup');
			if (res.needs_setup) goto('/setup');
		} catch { /* ignore */ }
	});

	async function handleSubmit(e: SubmitEvent) {
		e.preventDefault();
		error = '';
		submitting = true;
		try {
			await login(username, password);
			goto('/');
		} catch (err: any) {
			error = err.message || 'Login failed';
		}
		submitting = false;
	}
</script>

<div class="min-h-screen flex items-center justify-center bg-[var(--color-background)]">
	<div class="w-full max-w-sm">
		<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg p-6 shadow-sm">
			<div class="flex justify-end gap-1 mb-4">
				<button onclick={() => { setLocale(getLocale() === 'en' ? 'ru' : 'en'); window.location.reload(); }}
					class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">
					{getLocale().toUpperCase()}
				</button>
				<button onclick={() => { const o: Theme[] = ['light','dark','system']; setTheme(o[(o.indexOf(theme.current)+1)%3]); }}
					class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">
					{theme.resolved === 'dark' ? '🌙' : '☀️'}
				</button>
			</div>
			<h1 class="text-xl font-semibold text-center mb-1">{t('app.name')}</h1>
			<p class="text-sm text-[var(--color-muted-foreground)] text-center mb-6">{t('auth.signInTitle')}</p>

			{#if error}
				<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>
			{/if}

			<form onsubmit={handleSubmit} class="space-y-4">
				<div>
					<label for="username" class="block text-sm font-medium mb-1.5">{t('auth.username')}</label>
					<input id="username" type="text" bind:value={username} required
						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]" />
				</div>
				<div>
					<label for="password" class="block text-sm font-medium mb-1.5">{t('auth.password')}</label>
					<input id="password" type="password" bind:value={password} required
						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]" />
				</div>
				<button type="submit" disabled={submitting}
					class="w-full py-2 px-4 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50">
					{submitting ? t('auth.signingIn') : t('auth.signIn')}
				</button>
			</form>
		</div>
	</div>
</div>
