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 { resolveHotelName } from "@/lib/hotel-name";
import { siteSettings } from "@/lib/services/site-settings";
import { auth } from "@/lib/auth";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { LanguageSwitcher } from "@/components/language-switcher";

export const revalidate = 120;

async function getHotelData() {
	const [hotelName, imagerRaw] = await Promise.all([
		resolveHotelName(),
		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, latestUsers] =
		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(() => []),
			prisma.user
				.findMany({
					orderBy: { accountCreated: "desc" },
					select: { username: true, look: true },
					take: 8,
				})
				.catch(() => []),
		]);

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

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,
		latestUsers,
	} = await getHotelData();

	return (
		<div className="flex flex-col gap-14 pb-14">
			{/* ── Toolbar ── */}
			<div
				className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5"
				style={{
					background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
					backdropFilter: "blur(8px)",
					WebkitBackdropFilter: "blur(8px)",
					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
				}}
			>
				<LanguageSwitcher />
				<ThemeSwitcher />
			</div>
			{/* ── 1. Hero ── */}
			<div
				className="relative overflow-hidden rounded-3xl border px-6 py-10 md:px-10 md:py-14 lg:py-16"
				style={{
					background: `url(/assets/images/background.png) center/cover no-repeat`,
					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
				}}
			>
				<div
					className="absolute inset-0"
					style={{
						background:
							"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 50%, color-mix(in srgb, var(--color-surface) 20%, transparent) 100%)",
					}}
				/>
				<div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14">
					<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 backdrop-blur-sm"
							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="relative flex h-2 w-2">
								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
							</span>
							{th("online", { count: online, hotel: hotelName })}
						</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 })}
						</h1>
						<p
							className="text-base md:text-lg leading-relaxed max-w-xl mb-8"
							style={{ color: "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("register")}
							</Link>
							<Link
								href="/login"
								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 backdrop-blur-sm"
								style={{
									borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
									color: "var(--color-text-readable)",
									background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
								}}
							>
								{th("login")}
							</Link>
						</div>
					</div>
					<div className="shrink-0 relative">
						<div
							className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.15] blur-[60px]"
							style={{ background: "var(--color-primary)" }}
						/>
						<Image
							src="/assets/images/FrankwithBag.gif"
							alt="Frank"
							width={180}
							height={240}
							className="object-contain drop-shadow-2xl relative"
							unoptimized
							priority
						/>
					</div>
				</div>
			</div>

			{/* ── 2. Stats ── */}
			<div className="grid grid-cols-3 gap-4">
				{[
					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/navigation/home.png" },
					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/navigation/me.png" },
					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
				].map((s) => (
					<div
						key={s.label}
						className="relative overflow-hidden rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
						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)",
						}}
					>
						<div
							className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
							style={{ background: "var(--color-primary)" }}
						/>
						<div className="relative">
							<Image src={s.icon} alt="" width={28} height={28} className="mx-auto mb-1.5 opacity-50" unoptimized />
							<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>
				))}
			</div>

			{/* ── 3. 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: "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)",
						}}
					>
						<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>

			{/* ── 4. Newest citizens ── */}
			{latestUsers.length > 0 && (
				<div>
					<h2 className="text-xl font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
						{tp("latestUsers", { count: users.toLocaleString() })}
					</h2>
					<div className="grid grid-cols-4 sm:grid-cols-8 gap-3">
						{latestUsers.map((u) => (
							<div
								key={u.username}
								className="flex flex-col items-center gap-1.5 p-3 rounded-2xl border transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
								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)",
								}}
							>
								<div className="relative">
									<div className="absolute -inset-2 rounded-full opacity-[0.1] blur-[12px]" style={{ background: "var(--color-primary)" }} />
									<Image
										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "m" })}
										alt={u.username}
										width={40}
										height={50}
										className="rounded-lg relative"
										unoptimized
									/>
								</div>
								<span className="text-[10px] font-bold truncate max-w-[64px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
									{u.username}
								</span>
							</div>
						))}
					</div>
				</div>
			)}

			{/* ── 5. News ── */}
			<div className="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="grid sm:grid-cols-2 gap-4">
						{articles.slice(0, 4).map((a) => (
							<Link
								key={a.slug}
								href={`/news/${a.slug}`}
								className="flex gap-4 items-start rounded-2xl border p-4 transition-all duration-200 hover:-translate-y-0.5"
								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)",
									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>

			{/* ── 6. Online users row ── */}
			{recentUsers.length > 0 && (
				<div className="text-center">
					<h3 className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center justify-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="flex flex-wrap justify-center gap-2">
						{recentUsers.slice(0, 10).map((u) => (
							<div
								key={u.username}
								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={30}
									height={36}
									className="rounded-md"
									unoptimized
								/>
								<span className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
									{u.username}
								</span>
							</div>
						))}
					</div>
				</div>
			)}

			{/* ── 7. Bottom CTA ── */}
			<div
				className="relative overflow-hidden rounded-2xl border text-center px-6 py-10"
				style={{
					background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 70%, transparent))`,
					borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
				}}
			>
				<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)" }}>
					{tp("joinNow", { hotelName })}
				</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>

			{/* ── 8. Recent photos (compact) ── */}
			{recentPhotos.length > 0 && (
				<div className="text-center">
					<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-4 gap-2 max-w-sm mx-auto">
						{recentPhotos.slice(0, 4).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>
	);
}