import { headers } from "next/headers";
import Image from "next/image";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { RegisterForm } from "@/components/auth/register-form";
import { cached } from "@/lib/cache";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { captchaConfig } from "@/lib/services/captcha";
import { resolveHotelName } from "@/lib/hotel-name";
import { siteSettings } from "@/lib/services/site-settings";

export default async function RegisterPage() {
	const th = await getTranslations("header");
	const tpr = await getTranslations("pages.register");
	const [hotelName, imagerRaw, cfg] = await Promise.all([
		resolveHotelName(),
		siteSettings.get(
			"habbo_imaging_url",
			"https://www.habbo.com/habbo-imaging/avatarimage",
		),
		captchaConfig(),
	]);
	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
	const nonce = (await headers()).get("x-nonce") ?? undefined;

	const [online, recentUsers, latestUsers] = await Promise.all([
		cached("online_count", 10_000, () =>
			prisma.user.count({ where: { online: "1" } }),
		).catch(() => 0),
		prisma.user
			.findMany({
				where: { online: "1" },
				select: { username: true, look: true },
				take: 8,
			})
			.catch(() => []),
		prisma.user
			.findMany({
				orderBy: { accountCreated: "desc" },
				select: { username: true, look: true },
				take: 8,
			})
			.catch(() => []),
	]);

	return (
		<div className="flex flex-col lg:flex-row gap-10">
			{/* Left panel */}
			<div className="lg:w-80 shrink-0 space-y-4">
				<div
					className="rounded-2xl border p-6 text-center"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-primary) 20%, transparent)",
						background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface))`,
					}}
				>
					<Image
						src="/assets/images/FrankwithBag.gif"
						alt="Frank"
						width={130}
						height={170}
						className="object-contain mx-auto drop-shadow-xl"
						unoptimized
						priority
					/>
					<div
						className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
						style={{
							borderColor:
								"color-mix(in srgb, var(--color-primary) 18%, transparent)",
							background:
								"color-mix(in srgb, var(--color-primary) 10%, transparent)",
							color: "var(--color-primary-readable, var(--color-primary))",
						}}
					>
						<span className="w-2 h-2 rounded-full bg-green-500" />
						{tpr("usersOnline", { count: online })}
					</div>
					<h1
						className="text-xl font-black"
						style={{ color: "var(--color-text-readable)" }}
					>
						{tpr("title")} — {hotelName}
					</h1>
					<p
						className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
						style={{ color: "var(--color-text-muted)" }}
					>
						{th("tagline")}
					</p>
				</div>

				{recentUsers.length > 0 && (
					<div
						className="rounded-2xl border p-4"
						style={{
							background: "var(--color-surface)",
							borderColor:
								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
						}}
					>
						<h3
							className="text-xs font-bold uppercase tracking-widest mb-3"
							style={{ color: "var(--color-text-muted)" }}
						>
							{tpr("whoIsOnline")}
						</h3>
						<div className="grid grid-cols-4 gap-1.5">
							{recentUsers.map((u) => (
								<div
									key={u.username}
									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
									style={{
										background:
											"color-mix(in srgb, var(--color-primary) 4%, transparent)",
									}}
								>
									<Image
										src={avatarImageUrl(imager, u.look, {
											headOnly: true,
											direction: 2,
											size: "s",
										})}
										alt=""
										width={26}
										height={32}
										className="rounded-md"
										unoptimized
									/>
									<span
										className="text-[8px] font-bold truncate w-full text-center leading-tight"
										style={{ color: "var(--color-text-readable)" }}
									>
										{u.username}
									</span>
								</div>
							))}
						</div>
					</div>
				)}

				{latestUsers.length > 0 && (
					<div
						className="rounded-2xl border p-4"
						style={{
							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
							backdropFilter: "blur(8px)",
							WebkitBackdropFilter: "blur(8px)",
							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
						}}
					>
						<h3
							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
							style={{ color: "var(--color-text-muted)" }}
						>
							✨ Newest citizens
						</h3>
						<div className="grid grid-cols-4 gap-1.5">
							{latestUsers.map((u) => (
								<div
									key={u.username}
									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
									style={{
										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
									}}
								>
									<Image
										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
										alt=""
										width={26}
										height={32}
										className="rounded-md"
										unoptimized
									/>
									<span
										className="text-[8px] font-bold truncate w-full text-center leading-tight"
										style={{ color: "var(--color-text-readable)" }}
									>
										{u.username}
									</span>
								</div>
							))}
						</div>
					</div>
				)}

				<p
					className="text-xs text-center"
					style={{ color: "var(--color-text-muted)" }}
				>
					{tpr("alreadyHaveAccountPre")}{" "}
					<Link
						href="/login"
						className="font-extrabold hover:underline"
						style={{
							color: "var(--color-primary-readable, var(--color-primary))",
						}}
					>
						{tpr("alreadyHaveAccountLink")}
					</Link>
				</p>
			</div>

			{/* Right: form */}
			<div className="flex-1">
				<div className="mb-6">
					<h2
						className="text-2xl font-black tracking-tight"
						style={{ color: "var(--color-text-readable)" }}
					>
						{tpr("title")}
					</h2>
					<p
						className="text-sm mt-0.5"
						style={{ color: "var(--color-text-muted)" }}
					>
						{tpr("subtitle")}
					</p>
				</div>
				<RegisterForm
					hotelName={hotelName}
					captcha={{
						provider: cfg.provider,
						siteKey: cfg.siteKey || undefined,
					}}
					nonce={nonce}
				/>
			</div>
		</div>
	);
}