<script lang="ts">
	import { enhance } from '$app/forms';
	import GoogleSignInButton from '$lib/components/GoogleSignInButton.svelte';
	import FlashToast from '$lib/components/ui/FlashToast.svelte';
	import type { ActionData, PageData } from './$types';

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

	let loading = $state(false);
	let showPassword = $state(false);
	let showKonfirmasi = $state(false);
</script>

<svelte:head>
	<title>Daftar — Catatan Warung</title>
</svelte:head>

<FlashToast message={data.oauthError} type="error" />
<FlashToast message={form?.error} type="error" />

<div
	class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-700 px-4 py-10"
>
	<div class="pointer-events-none absolute inset-0 overflow-hidden">
		<div
			class="absolute -left-20 -top-20 h-72 w-72 rounded-full bg-white/10 blur-3xl"
		></div>
		<div
			class="absolute -bottom-24 -right-16 h-96 w-96 rounded-full bg-yellow-300/20 blur-3xl"
		></div>
		<div
			class="absolute left-1/2 top-1/3 h-64 w-64 -translate-x-1/2 rounded-full bg-white/5 blur-2xl"
		></div>
	</div>

	<div class="relative z-10 grid w-full max-w-5xl gap-8 lg:grid-cols-2 lg:items-center">
		<div class="hidden text-white lg:block">
			<div class="badge badge-warning badge-lg mb-6 gap-2 border-0 font-semibold">
				<span>🏪</span> Catatan Warung
			</div>
			<h1 class="text-4xl font-extrabold leading-tight tracking-tight">
				Mulai catat warung Anda hari ini
			</h1>
			<p class="mt-4 max-w-md text-lg text-white/80">
				Daftar gratis dan dapatkan paket Free — catat penjualan, kelola stok, dan pantau
				keuangan warung.
			</p>
			<ul class="mt-8 space-y-3 text-white/90">
				<li class="flex items-center gap-3">
					<span class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-sm"
						>✓</span
					>
					Registrasi cepat dengan email atau Google
				</li>
				<li class="flex items-center gap-3">
					<span class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-sm"
						>✓</span
					>
					Paket gratis langsung aktif
				</li>
				<li class="flex items-center gap-3">
					<span class="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-sm"
						>✓</span
					>
					Tanpa kartu kredit
				</li>
			</ul>
		</div>

		<div class="card w-full bg-base-100/95 shadow-2xl backdrop-blur-sm">
			<div class="card-body gap-6 p-8">
				<div class="text-center lg:text-left">
					<div
						class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 text-3xl shadow-lg lg:mx-0"
					>
						🏪
					</div>
					<h2 class="text-2xl font-bold text-base-content">Buat Akun Baru</h2>
					<p class="mt-1 text-sm text-base-content/60">Gratis — paket Free otomatis aktif</p>
				</div>

				{#if data.googleEnabled}
					<GoogleSignInButton mode="register" label="Daftar dengan Google" />
					<div class="divider text-xs text-base-content/40">atau daftar dengan email</div>
				{/if}

				<form
					method="POST"
					class="flex flex-col gap-4"
					use:enhance={() => {
						loading = true;
						return async ({ update }) => {
							loading = false;
							await update();
						};
					}}
				>
					<label class="form-control w-full">
						<div class="label">
							<span class="label-text font-medium">Nama lengkap</span>
						</div>
						<input
							type="text"
							name="nama"
							placeholder="Contoh: Budi Santoso"
							class="input input-bordered w-full {form?.field === 'nama' ? 'input-error' : ''}"
							value={form?.nama ?? ''}
							required
							minlength="2"
							autocomplete="name"
						/>
					</label>

					<label class="form-control w-full">
						<div class="label">
							<span class="label-text font-medium">Email</span>
						</div>
						<input
							type="email"
							name="email"
							placeholder="nama@email.com"
							class="input input-bordered w-full {form?.field === 'email' ? 'input-error' : ''}"
							value={form?.email ?? ''}
							required
							autocomplete="email"
						/>
					</label>

					<label class="form-control w-full">
						<div class="label">
							<span class="label-text font-medium">Password</span>
						</div>
						<div class="relative">
							<input
								type={showPassword ? 'text' : 'password'}
								name="password"
								placeholder="Minimal 6 karakter"
								class="input input-bordered w-full pr-12 {form?.field === 'password'
									? 'input-error'
									: ''}"
								required
								minlength="6"
								autocomplete="new-password"
							/>
							<button
								type="button"
								class="btn btn-ghost btn-sm absolute right-1 top-1/2 -translate-y-1/2"
								onclick={() => (showPassword = !showPassword)}
								aria-label={showPassword ? 'Sembunyikan password' : 'Tampilkan password'}
							>
								{showPassword ? '🙈' : '👁️'}
							</button>
						</div>
					</label>

					<label class="form-control w-full">
						<div class="label">
							<span class="label-text font-medium">Konfirmasi password</span>
						</div>
						<div class="relative">
							<input
								type={showKonfirmasi ? 'text' : 'password'}
								name="konfirmasi"
								placeholder="Ulangi password"
								class="input input-bordered w-full pr-12 {form?.field === 'konfirmasi'
									? 'input-error'
									: ''}"
								required
								minlength="6"
								autocomplete="new-password"
							/>
							<button
								type="button"
								class="btn btn-ghost btn-sm absolute right-1 top-1/2 -translate-y-1/2"
								onclick={() => (showKonfirmasi = !showKonfirmasi)}
								aria-label={showKonfirmasi ? 'Sembunyikan password' : 'Tampilkan password'}
							>
								{showKonfirmasi ? '🙈' : '👁️'}
							</button>
						</div>
					</label>

					<button
						type="submit"
						class="btn btn-primary mt-2 w-full border-0 bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-lg hover:from-emerald-600 hover:to-teal-700"
						disabled={loading}
					>
						{#if loading}
							<span class="loading loading-spinner loading-sm"></span>
							Memproses...
						{:else}
							Daftar Sekarang
						{/if}
					</button>
				</form>

				<p class="text-center text-sm text-base-content/60">
					Sudah punya akun?
					<a href="/login" class="link link-primary font-medium">Masuk di sini</a>
				</p>
			</div>
		</div>
	</div>
</div>
