<script lang="ts">
	import { t } from '$lib/i18n/index.svelte.ts';
	import { setup } from '$lib/auth.svelte.ts';

	let username = $state('');
	let password = $state('');
	let error = $state('');
	let loading = $state(false);

	async function handleSetup() {
		error = '';
		loading = true;
		try {
			await setup(username, password);
			window.location.href = '/';
		} catch (e: any) {
			error = e.message || 'Setup failed';
		} finally {
			loading = false;
		}
	}
</script>

<div class="min-h-screen flex items-center justify-center">
	<div class="w-full max-w-md p-8 bg-card rounded-2xl border border-border shadow-lg animate-fade-slide-in">
		<h1 class="text-2xl font-bold text-center mb-2">{t('app.name')}</h1>
		<p class="text-center text-muted-foreground mb-6">Create your admin account</p>

		<form onsubmit={(e) => { e.preventDefault(); handleSetup(); }} class="space-y-4">
			<div>
				<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.username')}</label>
				<input type="text" bind:value={username} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
			</div>
			<div>
				<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.password')}</label>
				<input type="password" bind:value={password} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required minlength="6" />
			</div>

			{#if error}
				<p class="text-sm text-destructive">{error}</p>
			{/if}

			<button type="submit" disabled={loading} class="w-full py-2.5 bg-primary text-primary-foreground rounded-[var(--radius)] font-medium hover:opacity-90 transition-opacity disabled:opacity-50">
				{loading ? t('common.loading') : t('auth.setup')}
			</button>
		</form>
	</div>
</div>
