<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card';
	import { Input } from '$lib/components/ui/input';
	import { Label } from '$lib/components/ui/label';
	import { ThemeToggle } from '$lib/components/ui/theme-toggle';
	import { LanguageToggle } from '$lib/components/ui/language-toggle';
	import type { PageData } from './$types';
	import { signIn } from '@auth/sveltekit/client';
	import { languageStore } from '$lib/stores/language.svelte';

	let { data }: { data: PageData } = $props();

	const t = $derived(languageStore.t);

	let isSubmitting = $state(false);

	async function handleSubmit(e: SubmitEvent) {
		e.preventDefault();
		isSubmitting = true;

		const formData = new FormData(e.target as HTMLFormElement);
		const username = formData.get('username') as string;
		const password = formData.get('password') as string;

		try {
			await signIn('credentials', {
				username,
				password,
				callbackUrl: '/dashboard'
			});
		} catch (error) {
			console.error('Sign in error:', error);
		} finally {
			isSubmitting = false;
		}
	}
</script>

<div class="min-h-screen flex items-center justify-center p-4">
	<div class="absolute top-4 right-4 flex items-center gap-1 sm:gap-2">
		<LanguageToggle />
		<ThemeToggle />
	</div>
	<Card class="w-full max-w-md">
		<CardHeader>
			<CardTitle class="text-2xl">{t.auth.welcomeBack}</CardTitle>
			<CardDescription>{t.auth.signInPrompt}</CardDescription>
		</CardHeader>
		<CardContent class="space-y-4">
			{#if data.registered}
				<div class="bg-green-50 border border-green-200 text-green-700 dark:bg-green-950 dark:border-green-800 dark:text-green-300 px-4 py-3 rounded">
					Account created successfully! Please sign in.
				</div>
			{/if}

			{#if data.error}
				<div class="bg-red-50 border border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300 px-4 py-3 rounded">
					Invalid username or password
				</div>
			{/if}

			<form onsubmit={handleSubmit} class="space-y-4">
				<div class="space-y-2">
					<Label for="username">{t.form.username}</Label>
					<Input id="username" name="username" type="text" required />
				</div>

				<div class="space-y-2">
					<Label for="password">{t.form.password}</Label>
					<Input id="password" name="password" type="password" required />
				</div>

				<Button type="submit" class="w-full" disabled={isSubmitting}>
					{isSubmitting ? t.auth.signingIn : t.auth.signIn}
				</Button>
			</form>

			{#if data.oauthProviders.length > 0}
				<div class="relative">
					<div class="absolute inset-0 flex items-center">
						<span class="w-full border-t"></span>
					</div>
					<div class="relative flex justify-center text-xs uppercase">
						<span class="bg-card px-2 text-muted-foreground">{t.auth.continueWith}</span>
					</div>
				</div>

				{#each data.oauthProviders as provider}
					<Button
						type="button"
						variant="outline"
						class="w-full"
						onclick={() => signIn(provider.id, { callbackUrl: '/dashboard' })}
					>
						{t.auth.signIn} with {provider.name}
					</Button>
				{/each}
			{/if}

			<div class="text-center text-sm text-muted-foreground">
				{t.auth.dontHaveAccount}
				<a href="/signup" class="text-primary hover:underline">{t.auth.signUp}</a>
			</div>
		</CardContent>
	</Card>
</div>
