<script lang="ts">
	// @ts-nocheck
	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, 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';

	let { mode = 'login' } = $props<{ mode?: 'login' | 'signup' }>();

	const isSignup = () => mode === 'signup';
	const title = () => (isSignup() ? 'Create your PhoneCam account' : 'Sign in to PhoneCam');
	const description = () =>
		isSignup()
			? 'Create an account to finish setting up this browser.'
			: 'Use your account to open the dashboard and continue setup.';
	const primaryLabel = () => (isSignup() ? 'Create account' : 'Sign in');
	const secondaryLabel = () => (isSignup() ? 'Sign in instead' : 'Create an account');
	const secondaryPrompt = () => (isSignup() ? 'Already have an account?' : 'Need an account?');
	const secondaryHref = () => (isSignup() ? '/auth/login' : '/auth/signup');

	$effect(() => {
		appController.setAuthMode(isSignup());
	});
</script>

<section class="mx-auto flex min-h-full w-full max-w-5xl flex-col px-4 py-8 sm:px-6">
	<nav class="flex items-center border-b border-white/10 pb-4">
		<Button
			href="/"
			variant="ghost"
			class="h-auto rounded-full px-3 text-sm font-semibold text-white hover:bg-white/5 hover:text-sky-200"
		>
			PhoneCam
		</Button>
	</nav>

	<div class="flex flex-1 items-center justify-center pt-8">
		<Card variant="glass" class="w-full max-w-md rounded-3xl border-white/10 bg-black/45 backdrop-blur-xl">
			<CardHeader class="space-y-3 px-6 pt-6 text-left sm:px-7 sm:pt-7">
				<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-200/80">PhoneCam</p>
				<div class="space-y-2">
					<CardTitle class="text-3xl font-semibold tracking-tight text-white">{title()}</CardTitle>
					<CardDescription class="text-sm leading-6 text-slate-400">{description()}</CardDescription>
				</div>
			</CardHeader>

			<CardContent class="space-y-5 px-6 pb-6 sm:px-7 sm:pb-7">
				{#if isSignup()}
					<div id="authNameField" class="space-y-2">
						<Label for="authName" class="text-sm font-medium text-slate-200">Display name</Label>
						<Input
							id="authName"
							type="text"
							placeholder="Jane Doe"
							class="h-11 rounded-2xl border-white/10 bg-white/[0.04] text-sm text-white placeholder:text-slate-500"
							value={$appState.authForm.name}
							oninput={(event) => appController.setAuthField('name', (event.currentTarget as HTMLInputElement).value)}
						/>
					</div>
				{/if}

				<div class="space-y-2">
					<Label for="authEmail" class="text-sm font-medium text-slate-200">Email</Label>
					<Input
						id="authEmail"
						type="email"
						placeholder="name@example.com"
						class="h-11 rounded-2xl border-white/10 bg-white/[0.04] text-sm text-white placeholder:text-slate-500"
						value={$appState.authForm.email}
						oninput={(event) => appController.setAuthField('email', (event.currentTarget as HTMLInputElement).value)}
					/>
				</div>

				<div class="space-y-2">
					<Label for="authPassword" class="text-sm font-medium text-slate-200">Password</Label>
					<Input
						id="authPassword"
						type="password"
						placeholder="Enter your password"
						class="h-11 rounded-2xl border-white/10 bg-white/[0.04] text-sm text-white placeholder:text-slate-500"
						value={$appState.authForm.password}
						oninput={(event) => appController.setAuthField('password', (event.currentTarget as HTMLInputElement).value)}
					/>
				</div>

				<Button
					id="signInBtn"
					variant="premium"
					class="h-11 w-full rounded-2xl text-sm font-semibold"
					onclick={() => appController.submitAuth()}
				>
					{primaryLabel()}
				</Button>

				<div class="border-t border-white/10 pt-4 text-center text-sm text-slate-400">
					<span>{secondaryPrompt()}</span>
					<Button
						href={secondaryHref()}
						variant="ghost"
						class="ml-1 h-auto rounded-full px-2 text-sm font-medium text-white hover:bg-transparent hover:text-sky-200"
					>
						{secondaryLabel()}
					</Button>
				</div>
			</CardContent>
		</Card>
	</div>
</section>
