<script lang="ts">
	import { enhance } from '$app/forms';
	import { resolve } from '$app/paths';
	import { t } from '$lib/i18n';
	import type { ActionData } from './$types';

	export let form: ActionData;

	let isSignUp = false;
	let name = '';
	let username = '';
	let email = '';
	let password = '';
	let confirmPassword = '';
	let isLoading = false;

	const handleToggle = () => {
		isSignUp = !isSignUp;
		name = '';
		username = '';
		email = '';
		password = '';
		confirmPassword = '';
		form = null;
	};
</script>

<svelte:head>
	<title>OnePieceDle - {isSignUp ? $t.game.login.titleSignUp : $t.game.login.titleSignIn}</title>
</svelte:head>

<main class="relative min-h-[calc(100vh-5rem)] bg-slate-950 text-slate-100">
	<div class="absolute inset-0 bg-linear-to-br from-slate-950/85 via-slate-900/60 to-slate-950/80"></div>
	<div
		class="absolute inset-0 mix-blend-screen opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,84,0.35),transparent_55%)]"
	></div>

	<div class="relative mx-auto flex w-full max-w-2xl flex-col items-center justify-center px-6 py-10">
		<div class="w-full space-y-8">
			<!-- Header -->
			<div class="text-center">
				<h1 class="text-4xl font-black uppercase tracking-[0.3em] text-amber-50 sm:text-5xl">
					OnePieceDle
				</h1>
				<p class="mt-4 text-slate-300">
					{isSignUp ? $t.game.login.headerSignUp : $t.game.login.headerSignIn}
				</p>
			</div>

			<!-- Form Card -->
			<div class="rounded-3xl border border-white/10 bg-white/5 p-8 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
				<form
					method="POST"
					action={isSignUp ? '?/signUpEmail' : '?/signInEmail'}
					use:enhance={() => {
						isLoading = true;
						return async ({ update }) => {
							isLoading = false;
							await update();
						};
					}}
					class="space-y-6"
				>
					<!-- Name Field (Sign Up Only) -->
					{#if isSignUp}
						<div>
							<label for="name" class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">
								{$t.game.login.nameLabel}
							</label>
							<input
								id="name"
								type="text"
								name="name"
								bind:value={name}
								required
								placeholder={$t.game.login.namePlaceholder}
								class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
							/>
						</div>
					{/if}

					<!-- Username Field (Sign Up Only) -->
					{#if isSignUp}
						<div>
							<label for="username" class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">
								{$t.game.login.usernameLabel}
							</label>
							<input
								id="username"
								type="text"
								name="username"
								bind:value={username}
								required
								placeholder={$t.game.login.usernamePlaceholder}
								class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
							/>
						</div>
					{/if}

					<!-- Email / Username Field -->
					<div>
						<label for="identifier" class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">
							{isSignUp ? $t.game.login.identifierLabelSignUp : $t.game.login.identifierLabelSignIn}
						</label>
						<input
							id="identifier"
							type={isSignUp ? 'email' : 'text'}
							name={isSignUp ? 'email' : 'identifier'}
							bind:value={email}
							required
							placeholder={isSignUp ? $t.game.login.identifierPlaceholderSignUp : $t.game.login.identifierPlaceholderSignIn}
							class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
						/>
					</div>

					<!-- Password Field -->
					<div>
						<label for="password" class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">
						{$t.game.login.passwordLabel}
						</label>
						<input
							id="password"
							type="password"
							name="password"
							bind:value={password}
							required
							placeholder="••••••••"
							class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
						/>
					</div>

					<!-- Confirm Password Field (Sign Up Only) -->
					{#if isSignUp}
						<div>
							<label
								for="confirmPassword"
								class="block text-sm font-semibold uppercase tracking-[0.2em] text-amber-100"
							>
								{$t.game.login.confirmPasswordLabel}
							</label>
							<input
								id="confirmPassword"
								type="password"
								name="confirmPassword"
								bind:value={confirmPassword}
								required
								placeholder="••••••••"
								class="mt-3 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-slate-500 transition focus:border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-300/30"
							/>
						</div>
					{/if}

					<!-- Error Message -->
					{#if form?.message}
						<div class="rounded-lg border border-red-500/30 bg-red-900/20 px-4 py-3 text-sm text-red-200">
							{form.message}
						</div>
					{/if}

					<!-- Submit Button -->
					<button
						type="submit"
						disabled={isLoading}
						class="w-full rounded-full bg-amber-300 px-6 py-3 text-sm font-semibold text-slate-900 transition disabled:opacity-50 hover:bg-amber-200"
					>
						{isLoading ? $t.game.login.loading : isSignUp ? $t.game.login.submitSignUp : $t.game.login.submitSignIn}
					</button>
				</form>

				<!-- Toggle Sign Up / Login -->
				<div class="mt-6 border-t border-white/10 pt-6">
					<p class="text-center text-sm text-slate-400">
						{isSignUp ? $t.game.login.togglePromptSignUp : $t.game.login.togglePromptSignIn}
						<button
							type="button"
							on:click={handleToggle}
							class="text-amber-300 transition hover:text-amber-200"
						>
							{isSignUp ? $t.game.login.toggleActionSignUp : $t.game.login.toggleActionSignIn}
						</button>
					</p>
				</div>
			</div>

			<!-- Back to Home -->
			<div class="text-center">
				<a href={resolve("/")} class="text-sm text-slate-400 transition hover:text-slate-300">
					← {$t.game.login.backHome}
				</a>
			</div>
		</div>
	</div>
</main>
