<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);
</script>

<svelte:head>
	<title>Login Member — Catatan Warung</title>
</svelte:head>

<FlashToast message={data.oauthError} type="warning" />
<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">
				Kelola warung Anda dengan mudah &amp; rapi
			</h1>
			<p class="mt-4 max-w-md text-lg text-white/80">
				Masuk sebagai member untuk mencatat penjualan, stok, dan laporan harian warung Anda.
			</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
					>
					Pencatatan transaksi real-time
				</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
					>
					Laporan keuangan harian
				</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
					>
					Aman &amp; hanya untuk member terdaftar
				</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">Selamat Datang!</h2>
					<p class="mt-1 text-sm text-base-content/60">Masuk ke akun member Anda</p>
				</div>

				<form
					method="POST"
					class="flex flex-col gap-4"
					use:enhance={() => {
						loading = true;
						return async ({ update }) => {
							loading = false;
							await update();
						};
					}}
				>
					<div class="form-control">
						<label class="label" for="email">
							<span class="label-text font-medium">Email</span>
						</label>
						<label class="input input-bordered flex items-center gap-2 focus-within:input-primary">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-5 w-5 opacity-50"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
								/>
							</svg>
							<input
								id="email"
								name="email"
								type="email"
								placeholder="nama@email.com"
								class="grow"
								value={form?.email ?? ''}
								required
								autocomplete="email"
							/>
						</label>
					</div>

					<div class="form-control">
						<label class="label" for="password">
							<span class="label-text font-medium">Password</span>
						</label>
						<label class="input input-bordered flex items-center gap-2 focus-within:input-primary">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-5 w-5 opacity-50"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
								/>
							</svg>
							<input
								id="password"
								name="password"
								type={showPassword ? 'text' : 'password'}
								placeholder="••••••••"
								class="grow"
								required
								autocomplete="current-password"
							/>
							<button
								type="button"
								class="btn btn-ghost btn-xs"
								onclick={() => (showPassword = !showPassword)}
								aria-label={showPassword ? 'Sembunyikan password' : 'Tampilkan password'}
							>
								{showPassword ? '🙈' : '👁️'}
							</button>
						</label>
					</div>

					<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}
							Masuk Sekarang
						{/if}
					</button>
				</form>

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

				<p class="text-center text-sm text-base-content/60">
					Belum punya akun?
					<a href="/daftar" class="link link-primary font-medium">Daftar gratis</a>
				</p>

				<div class="divider text-xs text-base-content/40">Akun demo member</div>
				<div class="rounded-xl bg-base-200/80 p-4 text-center text-sm">
					<p class="text-base-content/70">
						<span class="font-medium text-base-content">Email:</span> member@catatanwarung.com
					</p>
					<p class="text-base-content/70">
						<span class="font-medium text-base-content">Password:</span> member123
					</p>
				</div>

				<p class="text-center text-xs text-base-content/40">
					Staf platform / admin?
					<a href="/backoffice/login" class="link link-primary">Back Office →</a>
				</p>
			</div>
		</div>
	</div>
</div>
