<script lang="ts">
	// @ts-nocheck
	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
	import { appController } from '$lib/app/controller';
	import { appState } from '$lib/app/store';
	import { Button } from '$lib/components/ui/button/index.js';
	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	import { Label } from '$lib/components/ui/label/index.js';
	import { Separator } from '$lib/components/ui/separator/index.js';
</script>

<AppChrome pageKey="auth">
	<section id="screen-auth" class="flex flex-col items-center justify-center min-h-[70vh] animate-fade-in max-w-sm mx-auto">
		<Card class="glass-card w-full rounded-3xl border-white/10 bg-[#16161d]/80 shadow-2xl">
			<CardHeader class="items-center gap-4 px-6 pt-6 text-center">
				<div
					class="flex size-20 items-center justify-center rounded-3xl bg-gradient-to-tr from-blue-600 to-indigo-600 shadow-lg shadow-blue-900/20"
				>
					<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
						/>
					</svg>
				</div>
				<div class="flex flex-col gap-2">
					<CardTitle class="text-3xl font-bold tracking-tight text-white">PhoneCam Web</CardTitle>
					<CardDescription class="text-sm text-gray-400">Sign in to manage visual security from your browser.</CardDescription>
				</div>
			</CardHeader>
			<CardContent class="flex flex-col gap-4 px-6">
				<div class="flex flex-col gap-2">
					<Label class="sr-only" for="authEmail">Email</Label>
					<Input
						id="authEmail"
						type="email"
						placeholder="Email address"
						class="h-12 rounded-xl border-white/10 bg-black/40 text-sm text-white placeholder:text-gray-500"
						value={$appState.authForm.email}
						oninput={(event) => appController.setAuthField('email', (event.currentTarget as HTMLInputElement).value)}
					/>
				</div>
				<div class="flex flex-col gap-2">
					<Label class="sr-only" for="authPassword">Password</Label>
					<Input
						id="authPassword"
						type="password"
						placeholder="Password"
						class="h-12 rounded-xl border-white/10 bg-black/40 text-sm text-white placeholder:text-gray-500"
						value={$appState.authForm.password}
						oninput={(event) => appController.setAuthField('password', (event.currentTarget as HTMLInputElement).value)}
					/>
				</div>
				{#if $appState.isRegistering}
					<div id="authNameField" class="flex flex-col gap-2">
						<Label class="sr-only" for="authName">Name</Label>
						<Input
							id="authName"
							type="text"
							placeholder="Your Name"
							class="h-12 rounded-xl border-white/10 bg-black/40 text-sm text-white placeholder:text-gray-500"
							value={$appState.authForm.name}
							oninput={(event) => appController.setAuthField('name', (event.currentTarget as HTMLInputElement).value)}
						/>
					</div>
				{/if}
			</CardContent>
			<CardFooter class="flex flex-col items-stretch gap-4 border-0 bg-transparent px-6 pb-6 pt-2">
				<Button
					id="signInBtn"
					class="btn-premium h-12 w-full rounded-xl text-base text-white shadow-lg shadow-blue-900/20"
					onclick={() => appController.submitAuth()}
				>
					{$appState.isRegistering ? 'Create Account' : 'Sign In'}
				</Button>
				<div class="flex w-full items-center gap-3 text-xs text-gray-600">
					<Separator class="flex-1 bg-white/10" />
					<span>OR</span>
					<Separator class="flex-1 bg-white/10" />
				</div>
				<Button
					id="toggleAuthModeBtn"
					variant="ghost"
					class="h-12 w-full rounded-xl border border-white/5 text-gray-400 hover:bg-white/5 hover:text-white"
					onclick={() => appController.toggleAuthMode()}
				>
					{$appState.isRegistering ? 'I already have an account' : 'Create an account'}
				</Button>
			</CardFooter>
		</Card>
	</section>
</AppChrome>
