<script lang="ts">
	import { enhance } from '$app/forms';
	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>Back Office — Catatan Warung</title>
</svelte:head>

<div class="relative flex min-h-screen overflow-hidden bg-slate-950">
	<div class="pointer-events-none absolute inset-0">
		<div class="absolute -left-32 top-0 h-96 w-96 rounded-full bg-violet-600/20 blur-3xl"></div>
		<div class="absolute -right-32 bottom-0 h-96 w-96 rounded-full bg-indigo-600/20 blur-3xl"></div>
		<div
			class="absolute inset-0 opacity-[0.03]"
			style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 32px 32px;"
		></div>
	</div>

	<div class="relative z-10 grid min-h-screen w-full lg:grid-cols-2">
		<div class="hidden flex-col justify-between p-12 text-white lg:flex">
			<div>
				<div class="mb-8 flex items-center gap-3">
					<div
						class="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 text-2xl shadow-lg shadow-violet-500/30"
					>
						⚙️
					</div>
					<div>
						<p class="text-lg font-bold">Catatan Warung</p>
						<p class="text-sm text-violet-300">Back Office</p>
					</div>
				</div>
				<h1 class="text-4xl font-extrabold leading-tight tracking-tight">
					Kelola platform<br />dari satu tempat
				</h1>
				<p class="mt-4 max-w-md text-lg text-slate-400">
					Panel admin untuk mengelola member, paket langganan, dan seluruh data aplikasi SaaS.
				</p>
			</div>

			<div class="space-y-4">
				{#each [
					{ icon: '👥', text: 'Kelola member & langganan' },
					{ icon: '💎', text: 'Atur paket & privilege' },
					{ icon: '📊', text: 'Pantau statistik platform' }
				] as item}
					<div class="flex items-center gap-3 text-slate-300">
						<span class="flex h-9 w-9 items-center justify-center rounded-xl bg-white/5 text-base">{item.icon}</span>
						<span>{item.text}</span>
					</div>
				{/each}
			</div>
		</div>

		<div class="flex items-center justify-center px-6 py-12">
			<div class="w-full max-w-md">
				<div class="mb-8 text-center lg:hidden">
					<div
						class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 text-2xl"
					>
						⚙️
					</div>
					<h2 class="text-2xl font-bold text-white">Back Office</h2>
					<p class="text-sm text-slate-400">Login khusus administrator</p>
				</div>

				<div class="rounded-2xl border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur-xl">
					<div class="mb-6 hidden lg:block">
						<h2 class="text-2xl font-bold text-white">Masuk Back Office</h2>
						<p class="mt-1 text-sm text-slate-400">Hanya untuk akun platform admin</p>
					</div>

					{#if data.forbidden}
						<div class="alert alert-warning mb-4 text-sm">
							<span>⚠️</span>
							<span>Anda perlu login sebagai admin untuk mengakses back office.</span>
						</div>
					{/if}

					{#if form?.error}
						<div class="alert alert-error mb-4 text-sm">
							<span>{form.error}</span>
						</div>
					{/if}

					<form
						method="POST"
						class="space-y-4"
						use:enhance={() => {
							loading = true;
							return async ({ update }) => {
								loading = false;
								await update();
							};
						}}
					>
						<label class="form-control">
							<span class="label-text font-medium text-slate-300">Email Admin</span>
							<input
								name="email"
								type="email"
								class="input input-bordered w-full bg-slate-900/50 text-white"
								placeholder="admin@catatanwarung.com"
								value={form?.email ?? ''}
								required
								autocomplete="email"
							/>
						</label>

						<label class="form-control">
							<span class="label-text font-medium text-slate-300">Password</span>
							<div class="flex gap-2">
								<input
									name="password"
									type={showPassword ? 'text' : 'password'}
									class="input input-bordered flex-1 bg-slate-900/50 text-white"
									placeholder="••••••••"
									required
									autocomplete="current-password"
								/>
								<button
									type="button"
									class="btn btn-ghost btn-square text-slate-400"
									onclick={() => (showPassword = !showPassword)}
									aria-label="Toggle password"
								>
									{showPassword ? '🙈' : '👁️'}
								</button>
							</div>
						</label>

						<button
							type="submit"
							class="btn mt-2 w-full border-0 bg-gradient-to-r from-violet-600 to-indigo-600 text-white hover:from-violet-500 hover:to-indigo-500"
							disabled={loading}
						>
							{#if loading}
								<span class="loading loading-spinner loading-sm"></span>
								Memverifikasi...
							{:else}
								Masuk Back Office
							{/if}
						</button>
					</form>

					<div class="divider my-6 text-xs text-slate-500">Demo admin</div>
					<div class="rounded-xl bg-slate-900/50 p-4 text-center text-sm text-slate-400">
						<p><span class="text-slate-300">Email:</span> backoffice@catatanwarung.com</p>
						<p><span class="text-slate-300">Password:</span> backoffice123</p>
					</div>

					<p class="mt-6 text-center text-xs text-slate-500">
						Pemilik warung?
						<a href="/login" class="link link-primary">Login member →</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
