<script lang="ts">
	import { onMount } from 'svelte';
	import { goto } from '$app/navigation';

	let errorMsg = $state('');
	let loading = $state(false);

	async function handleSubmit(e: Event) {
		e.preventDefault();
		loading = true;
		errorMsg = '';
		const formData = new FormData(e.target as HTMLFormElement);
		try {
			const res = await fetch('/api/auth/login', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					username: formData.get('username'),
					password: formData.get('password')
				})
			});
			if (!res.ok) {
				const err = await res.json().catch(() => ({}));
				errorMsg = err.error || 'Credenciais inválidas';
				return;
			}
			const { token } = await res.json();
			document.cookie = `auth_token=${token}; path=/; max-age=${7 * 24 * 60 * 60}; SameSite=Lax`;
			goto('/admin');
		} catch {
			errorMsg = 'Erro de conexão com o servidor';
		} finally {
			loading = false;
		}
	}

	onMount(async () => {
		const hasToken = document.cookie.split(';').some(c => c.trim().startsWith('auth_token='));
		if (!hasToken) return;
		try {
			const res = await fetch('/api/auth/verify', {
				headers: { Authorization: `Bearer ${getCookie('auth_token')}` }
			});
			if (res.ok) goto('/admin');
		} catch { /* ignore */ }
	});

	function getCookie(name: string) {
		return document.cookie.split('; ').find(r => r.startsWith(name + '='))?.split('=')[1] ?? '';
	}
</script>

<svelte:head>
	<title>Login — YAUM</title>
</svelte:head>

<div class="flex min-h-screen items-start justify-center pt-36">
	<div class="w-full max-w-sm">
		<div class="mb-8 text-center">
			<h1 class="text-xl font-semibold tracking-tight text-white">YAUM</h1>
			<p class="mt-1 text-sm text-[var(--text-muted)]">Yet Another Uptime Monitor</p>
		</div>

		<div class="rounded-2xl border border-[var(--border-color)] bg-[var(--bg-card)] p-6">
			<form onsubmit={handleSubmit} class="space-y-4">
				<div>
					<label for="username" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Usuário</label>
					<input
						id="username"
						name="username"
						type="text"
						required
						autocomplete="username"
						placeholder="admin"
						class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
					/>
				</div>

				<div>
					<label for="password" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Senha</label>
					<input
						id="password"
						name="password"
						type="password"
						required
						autocomplete="current-password"
						placeholder="••••••••"
						class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
					/>
				</div>

				{#if errorMsg}
					<p class="rounded-lg bg-[var(--red)]/5 px-3 py-2 text-xs text-[var(--red)]">{errorMsg}</p>
				{/if}

				<button
					type="submit"
					disabled={loading}
					class="w-full rounded-xl border border-[var(--green)]/50 bg-[var(--green)]/10 px-4 py-2.5 text-sm font-medium text-[var(--green)] transition-all hover:bg-[var(--green)]/20 disabled:opacity-50"
				>
					{loading ? 'Entrando…' : 'Entrar'}
				</button>
			</form>
		</div>

		<p class="mt-6 text-center text-xs text-[var(--text-muted)]">
			<a href="/" class="underline transition-colors hover:text-white">← Voltar ao Dashboard</a>
		</p>
	</div>
</div>
