import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { cached } from "@/lib/cache";
import { avatarImageUrl } from "@/lib/format";
import { formatDate } from "@/lib/format-date";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
import { auth } from "@/lib/auth";

export const revalidate = 120;

async function getHotelData() {
	const [hotelName, imagerRaw] = await Promise.all([
		siteSettings.get("hotel_name", "Hotel"),
		siteSettings.get(
			"habbo_imaging_url",
			"https://www.habbo.com/habbo-imaging/avatarimage",
		),
	]);
	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";

	const [online, users, rooms, articles, recentUsers, recentPhotos] =
		await Promise.all([
			cached("online_count", 10_000, () =>
				prisma.user.count({ where: { online: "1" } }),
			).catch(() => 0),
			cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0),
			cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0),
			prisma.websiteArticles
				.findMany({ orderBy: { createdAt: "desc" }, take: 5 })
				.catch(() => []),
			prisma.user
				.findMany({
					where: { online: "1" },
					select: { username: true, look: true },
					take: 30,
				})
				.catch(() => []),
			prisma.cameraWeb
				.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
				.catch(() => []),
		]);

	return {
		hotelName,
		imager,
		online,
		users,
		rooms,
		articles,
		recentUsers,
		recentPhotos,
	};
}

export default async function Home() {
	const session = await auth();
	if (session?.user?.id) redirect("/me");

	const tp = await getTranslations("pages.home");
	const th = await getTranslations("header");
	const {
		hotelName,
		imager,
		online,
		users,
		rooms,
		articles,
		recentUsers,
		recentPhotos,
	} = await getHotelData();

	return (
		<div className="flex flex-col gap-16 pb-16">
			<style>{`
				@keyframes train-scroll {
					0% { transform: translateX(0); }
					100% { transform: translateX(-50%); }
				}
				.train-track {
					animation: train-scroll 40s linear infinite;
					display: flex;
					gap: 0.75rem;
					width: max-content;
				}
				.train-track:hover {
					animation-play-state: paused;
				}
			`}</style>
			{/* ── 1. Welcome section ── */}
			<div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-16">
				<div className="flex-1 text-center lg:text-left">
					<div
						className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border"
						style={{
							background:
								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
							borderColor:
								"color-mix(in srgb, var(--color-primary) 20%, transparent)",
							color: "var(--color-primary-readable, var(--color-primary))",
						}}
					>
						<span className="w-2 h-2 rounded-full bg-green-500" />
						{th("online", { count: online, hotel: hotelName ?? "Hotel" })}
					</div>
					<h1
						className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-4"
						style={{ color: "var(--color-text-readable)" }}
					>
						{tp("welcome", { hotelName: hotelName ?? "Hotel" })}
					</h1>
					<p
						className="text-base md:text-lg leading-relaxed max-w-xl mb-8"
						style={{
							color:
								"var(--color-text-muted-readable, var(--color-text-muted))",
						}}
					>
						{th("tagline")}
					</p>
					<div className="flex flex-wrap gap-3 justify-center lg:justify-start">
						<Link
							href="/register"
							className="inline-flex items-center gap-2.5 font-extrabold text-sm px-7 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
							style={{
								background: "var(--color-primary)",
								color: "var(--color-primary-foreground)",
								boxShadow:
									"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
							}}
						>
							<Image
								src="/assets/images/EnterHubbly.png"
								alt=""
								width={20}
								height={20}
								unoptimized
							/>
							{tp("enterHotel", { hotelName: hotelName ?? "Hotel" })}
						</Link>
						<Link
							href="/client"
							className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95"
							style={{
								borderColor:
									"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
								color: "var(--color-text-readable)",
							}}
						>
							{th("nitroClient")}
						</Link>
					</div>
				</div>
				<div className="shrink-0 flex items-end gap-6">
					<div className="relative">
						<div
							className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.1] blur-[60px]"
							style={{ background: "var(--color-primary)" }}
						/>
						<Image
							src="/assets/images/FrankwithBag.gif"
							alt="Frank"
							width={160}
							height={210}
							className="object-contain drop-shadow-2xl relative"
							unoptimized
							priority
						/>
					</div>
					<div className="hidden sm:flex flex-col gap-2">
						{recentUsers.slice(0, 5).map((u) => (
							<div
								key={u.username}
								className="flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors hover:bg-black/5 dark:hover:bg-white/5"
							>
								<Image
									src={avatarImageUrl(imager, u.look, {
										headOnly: true,
										direction: 2,
										size: "s",
									})}
									alt=""
									width={28}
									height={34}
									className="rounded-md"
									unoptimized
								/>
								<div>
									<p
										className="text-xs font-bold leading-tight"
										style={{ color: "var(--color-text-readable)" }}
									>
										{u.username}
									</p>
									<p className="text-[10px] font-semibold text-green-500">
										{tp("statsOnline")}
									</p>
								</div>
							</div>
						))}
					</div>
				</div>
			</div>

			{/* ── 2. Stats ── */}
			<div className="grid grid-cols-3 gap-4">
				{[
					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "🟢" },
					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "👤" },
					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "🏠" },
				].map((s) => (
					<div
						key={s.label}
						className="rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
						style={{
							background: "var(--color-surface)",
							borderColor:
								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
						}}
					>
						<div
							className="text-3xl md:text-4xl font-black tracking-tight mb-0.5"
							style={{ color: "var(--color-primary)" }}
						>
							{s.value}
						</div>
						<div
							className="text-xs font-bold uppercase tracking-widest"
							style={{ color: "var(--color-text-muted)" }}
						>
							{s.label}
						</div>
					</div>
				))}
			</div>

			{/* ── 3. User train ── */}
			{recentUsers.length > 0 && (
				<div
					className="rounded-2xl border overflow-hidden py-3"
					style={{
						background: "var(--color-surface)",
						borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
					}}
				>
					<div className="train-track">
						{[...recentUsers, ...recentUsers].map((u, i) => (
							<div
								key={`${u.username}-${i}`}
								className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-xl transition-all duration-200 hover:scale-110"
								style={{
									background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
								}}
							>
								<Image
									src={avatarImageUrl(imager, u.look, {
										headOnly: true,
										direction: 2,
										size: "s",
									})}
									alt={u.username}
									width={34}
									height={42}
									className="rounded-md"
									unoptimized
								/>
								<span
									className="text-[9px] font-bold truncate max-w-[54px] text-center leading-tight"
									style={{ color: "var(--color-text-readable)" }}
								>
									{u.username}
								</span>
							</div>
						))}
					</div>
				</div>
			)}

			{/* ── 4. Features ── */}
			<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
				{[
					{
						img: "/assets/images/icons/star.gif",
						title: tp("featuresAvatar"),
						desc: tp("featuresAvatarDesc"),
					},
					{
						img: "/assets/images/icons/catalog.png",
						title: tp("featuresFurniture"),
						desc: tp("featuresFurnitureDesc"),
					},
					{
						img: "/assets/images/icons/navigation/community.png",
						title: tp("featuresCommunity"),
						desc: tp("featuresCommunityDesc"),
					},
					{
						img: "/assets/images/icons/navigation/bb.png",
						title: tp("featuresGames"),
						desc: tp("featuresGamesDesc"),
					},
				].map((f) => (
					<div
						key={f.title}
						className="rounded-2xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
						style={{
							background: "var(--color-surface)",
							borderColor:
								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
						}}
					>
						<div
							className="w-11 h-11 rounded-xl flex items-center justify-center mb-3.5"
							style={{
								background:
									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
							}}
						>
							<Image src={f.img} alt="" width={24} height={24} unoptimized />
						</div>
						<h3
							className="text-sm font-extrabold mb-1.5"
							style={{ color: "var(--color-text-readable)" }}
						>
							{f.title}
						</h3>
						<p
							className="text-xs leading-relaxed"
							style={{ color: "var(--color-text-muted)" }}
						>
							{f.desc}
						</p>
					</div>
				))}
			</div>

			{/* ── 5. News + Sidebar ── */}
			<div className="grid lg:grid-cols-12 gap-6">
				<div className="lg:col-span-8 space-y-4">
					<div className="flex items-center justify-between">
						<h2
							className="text-xl font-black tracking-tight"
							style={{ color: "var(--color-text-readable)" }}
						>
							{tp("latestNews")}
						</h2>
						<Link
							href="/news"
							className="text-sm font-bold hover:underline"
							style={{ color: "var(--color-primary)" }}
						>
							{tp("allNews")}
						</Link>
					</div>
					{articles.length > 0 ? (
						<div className="space-y-3">
							{articles.slice(0, 4).map((a) => (
								<Link
									key={a.slug}
									href={`/news/${a.slug}`}
									className="flex gap-3.5 items-start rounded-2xl border p-4 transition-all duration-200 hover:-translate-y-0.5"
									style={{
										background: "var(--color-surface)",
										borderColor:
											"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
										textDecoration: "none",
									}}
								>
									<div className="relative w-14 h-14 shrink-0 rounded-xl overflow-hidden">
										{a.image ? (
											<Image
												src={a.image}
												alt=""
												fill
												className="object-cover"
												unoptimized
											/>
										) : (
											<div
												className="w-full h-full"
												style={{
													background: `color-mix(in srgb, var(--color-primary) 15%, transparent)`,
												}}
											/>
										)}
									</div>
									<div className="min-w-0">
										<h3
											className="text-sm font-extrabold leading-snug"
											style={{ color: "var(--color-text-readable)" }}
										>
											{a.title}
										</h3>
										<p
											className="text-xs font-semibold mt-1"
											style={{ color: "var(--color-text-muted)" }}
										>
											{formatDate(a.createdAt, "date", "")}
										</p>
									</div>
								</Link>
							))}
						</div>
					) : (
						<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
							{tp("noArticles")}
						</p>
					)}
				</div>

				<aside className="lg:col-span-4 space-y-4">
					{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 flex items-center gap-2"
								style={{ color: "var(--color-text-muted)" }}
							>
								<span className="w-2 h-2 rounded-full bg-green-500" />
								{tp("recentUsers")}
							</h3>
							<div className="grid grid-cols-3 gap-2">
								{recentUsers.slice(0, 9).map((u) => (
									<div
										key={u.username}
										className="flex flex-col items-center gap-1 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={30}
											height={36}
											className="rounded-md"
											unoptimized
										/>
										<span
											className="text-[9px] font-bold truncate w-full text-center leading-tight"
											style={{ color: "var(--color-text-readable)" }}
										>
											{u.username}
										</span>
									</div>
								))}
							</div>
						</div>
					)}

					{recentPhotos.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)" }}
							>
								{tp("recentPhotos")}
							</h3>
							<div className="grid grid-cols-2 gap-2">
								{recentPhotos.map((p) => (
									<Link
										key={p.id}
										href="/photos"
										className="block rounded-lg overflow-hidden aspect-square"
									>
										<Image
											src={p.url}
											alt=""
											width={200}
											height={200}
											className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
											unoptimized
										/>
									</Link>
								))}
							</div>
						</div>
					)}

					<div
						className="rounded-2xl border p-5 text-center"
						style={{
							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), transparent)`,
							borderColor:
								"color-mix(in srgb, var(--color-primary) 15%, transparent)",
						}}
					>
						<Image
							src="/assets/images/FrankwithBag.gif"
							alt=""
							width={48}
							height={60}
							className="object-contain mx-auto mb-2 opacity-50"
							unoptimized
						/>
						<p
							className="text-xs font-bold"
							style={{ color: "var(--color-text-muted)" }}
						>
							{tp("joinNow", { hotelName: hotelName ?? "Hotel" })}
						</p>
					</div>
				</aside>
			</div>

			{/* ── 6. CTA ── */}
			<div
				className="rounded-2xl border text-center px-6 py-10"
				style={{
					background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface))`,
					borderColor:
						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
				}}
			>
				<h2
					className="text-2xl md:text-3xl font-black tracking-tight mb-2"
					style={{ color: "var(--color-text-readable)" }}
				>
					{tp("joinNow", { hotelName: hotelName ?? "Hotel" })}
				</h2>
				<p
					className="text-sm mb-6 max-w-sm mx-auto"
					style={{ color: "var(--color-text-muted)" }}
				>
					{tp("welcomeBody")}
				</p>
				<Link
					href="/register"
					className="inline-flex items-center gap-2.5 font-extrabold text-sm px-8 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
					style={{
						background: "var(--color-primary)",
						color: "var(--color-primary-foreground)",
						boxShadow:
							"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
					}}
				>
					<Image
						src="/assets/images/EnterHubbly.png"
						alt=""
						width={20}
						height={20}
						unoptimized
					/>
					{tp("register")}
				</Link>
			</div>
		</div>
	);
}