import { count, desc, eq } from "drizzle-orm";
import { headers } from "next/headers";
import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { AmbientOrbs } from "@/components/ambient-orbs";
import { AnimatedCounter } from "@/components/animated-counter";
import { HomeLoginForm } from "@/components/auth/home-login-form";
import { Clock } from "@/components/clock";
import { SectionCard } from "@/components/home-section";
import { LanguageSwitcher } from "@/components/language-switcher";
import { Reveal } from "@/components/motion-reveal";
import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { TypewriterText } from "@/components/typewriter-text";
import { auth } from "@/lib/auth";
import { cached } from "@/lib/cache";
import { CameraWeb, db, Rooms, User } from "@/lib/db";
import { formatDate } from "@/lib/format-date";
import { resolveHotelName } from "@/lib/hotel-name";
import { captchaConfig } from "@/lib/services/captcha";
import { getNewsList } from "@/lib/services/news-list";
import { siteSettings } from "@/lib/services/site-settings";

async function getHotelData() {
	const [hotelName, logo] = await Promise.all([
		resolveHotelName(),
		siteSettings.get("cms_logo", ""),
	]);

	const [
		online,
		users,
		rooms,
		articles,
		recentUsers,
		recentPhotos,
		latestUsers,
	] = await Promise.all([
		cached("online_count", 10_000, () =>
			db
				.select({ total: count() })
				.from(User)
				.where(eq(User.online, "1"))
				.then((rows) => rows[0]?.total ?? 0),
		).catch(() => 0),
		cached("total_users", 300_000, () =>
			db
				.select({ total: count() })
				.from(User)
				.then((rows) => rows[0]?.total ?? 0),
		).catch(() => 0),
		cached("total_rooms", 300_000, () =>
			db
				.select({ total: count() })
				.from(Rooms)
				.then((rows) => rows[0]?.total ?? 0),
		).catch(() => 0),
		getNewsList(4),
		cached("home_online_users", 15_000, () =>
			db
				.select({ username: User.username, look: User.look })
				.from(User)
				.where(eq(User.online, "1"))
				.limit(30),
		).catch(() => []),
		cached("home_recent_photos", 60_000, () =>
			db
				.select({ id: CameraWeb.id, url: CameraWeb.url })
				.from(CameraWeb)
				.orderBy(desc(CameraWeb.timestamp))
				.limit(4),
		).catch(() => []),
		cached("home_latest_users", 60_000, () =>
			db
				.select({ username: User.username, look: User.look })
				.from(User)
				.orderBy(desc(User.accountCreated))
				.limit(8),
		).catch(() => []),
	]);

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

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,
		online,
		users,
		rooms,
		articles,
		recentUsers,
		recentPhotos,
		latestUsers,
		logo,
	} = await getHotelData();

	const captcha = await captchaConfig();
	const nonce = (await headers()).get("x-nonce") ?? undefined;

	return (
		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
			{/* ── Top Bar ── */}
			<Reveal>
				<div
					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
					style={{
						background:
							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
						backdropFilter: "blur(14px)",
						WebkitBackdropFilter: "blur(14px)",
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
					}}
				>
					<div className="flex items-center gap-3">
						{logo ? (
							<Image
								src={logo}
								alt={hotelName}
								width={100}
								height={28}
								className="shrink-0 object-contain"
								unoptimized
								style={{ maxHeight: 28, width: "auto", height: "auto" }}
							/>
						) : (
							<Image
								src="/assets/images/icons/lighthouse.png"
								alt={hotelName}
								width={28}
								height={28}
								className="shrink-0"
								unoptimized
							/>
						)}
						<span
							className="text-sm font-extrabold uppercase tracking-wide"
							style={{ color: "var(--color-text-readable)" }}
						>
							{hotelName}
						</span>
					</div>
					<div
						className="flex items-center gap-1.5 rounded-lg px-2 py-1"
						style={{
							background:
								"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
						}}
					>
						<LanguageSwitcher />
						<div
							className="w-px h-5"
							style={{
								background:
									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
							}}
						/>
						<Clock />
						<div
							className="w-px h-5"
							style={{
								background:
									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
							}}
						/>
						<ThemeSwitcher />
					</div>
				</div>
			</Reveal>

			{/* ── Hero ── */}
			<Reveal>
				<div
					className="relative overflow-hidden rounded-3xl border"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
					}}
				>
					<Image
						src="/assets/images/next_header.jpg"
						alt=""
						fill
						priority
						sizes="100vw"
						style={{ objectFit: "cover", objectPosition: "center 20%" }}
					/>
					<div
						className="absolute inset-0"
						style={{
							background:
								"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, transparent) 0%, color-mix(in srgb, var(--color-surface) 45%, transparent) 50%, color-mix(in srgb, var(--color-surface) 12%, transparent) 100%)",
						}}
					/>
					<AmbientOrbs />
					<div
						className="relative flex flex-col items-center gap-8 px-6 py-12 md:flex-row md:px-12 md:py-16"
						style={{ zIndex: 2 }}
					>
						<div className="flex-1 text-center md: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 font-black leading-[1.05] tracking-tight mb-3 md:text-5xl lg:text-6xl"
								style={{
									color: "var(--color-text-readable)",
									fontFamily: "var(--font-nunito)",
								}}
							>
								<TypewriterText text={tp("welcome", { hotelName })} />
							</h1>
							<p
								className="text-base leading-relaxed max-w-xl mb-7 md:text-lg"
								style={{ color: "var(--color-text-muted)" }}
							>
								{th("tagline")}
							</p>
							<div className="flex flex-wrap gap-3 justify-center md: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 animate-float">
							<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={170}
								height={230}
								className="object-contain drop-shadow-2xl relative"
								unoptimized
								priority
							/>
						</div>
					</div>
				</div>
			</Reveal>

			{/* ── Stats ── */}
			<Reveal>
				<div className="grid grid-cols-3 gap-4 stagger-children">
					{[
						{
							value: online,
							label: tp("statsOnline"),
							icon: "/assets/images/icons/online-friends.png",
						},
						{
							value: users,
							label: tp("statsCitizens"),
							icon: "/assets/images/icons/friends.png",
						},
						{
							value: rooms,
							label: tp("statsRooms"),
							icon: "/assets/images/icons/catalog.png",
						},
					].map((s) => (
						<div
							key={s.label}
							className="relative overflow-hidden rounded-2xl border bg-[var(--color-surface)] p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
							style={{
								borderColor:
									"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
								boxShadow:
									"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, 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">
								<div
									className="mx-auto mb-2.5 flex h-10 w-10 items-center justify-center rounded-xl"
									style={{
										background:
											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
									}}
								>
									<Image
										src={s.icon}
										alt=""
										width={24}
										height={24}
										unoptimized
									/>
								</div>
								<div
									className="mb-0.5 text-3xl font-black tracking-tight md:text-4xl"
									style={{ color: "var(--color-primary)" }}
								>
									<AnimatedCounter value={s.value} />
								</div>
								<div
									className="text-xs font-bold uppercase tracking-widest"
									style={{ color: "var(--color-text-muted)" }}
								>
									{s.label}
								</div>
							</div>
						</div>
					))}
				</div>
			</Reveal>

			{/* ── Login + News ── */}
			<div className="flex flex-col gap-4 md:flex-row">
				{/* Left: Login & Register */}
				<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
					<SectionCard
						title={th("login")}
						icon="/assets/images/icons/navigation/me.png"
						bodyClassName="p-4"
					>
						<HomeLoginForm
							captcha={{
								provider: captcha.provider,
								siteKey: captcha.siteKey || undefined,
								field: captcha.field || undefined,
							}}
							nonce={nonce}
						/>
					</SectionCard>

					<Link href="/register" className="relative block group">
						<div
							className="overflow-hidden rounded-2xl border transition-all duration-200 group-hover:shadow-lg"
							style={{
								borderColor:
									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
							}}
						>
							<Image
								src="/assets/images/EnterHubbly.png"
								alt="Register"
								width={300}
								height={100}
								className="block w-full"
								unoptimized
							/>
						</div>
						<span
							className="pointer-events-none absolute inset-0 flex items-center text-2xl font-extrabold text-white md:text-3xl"
							style={{
								marginLeft: "18px",
								fontFamily: "var(--font-nunito)",
								textShadow: "0 2px 8px rgba(0,0,0,0.6)",
							}}
						>
							{tp("register")}
						</span>
					</Link>

					{latestUsers.length > 0 && (
						<SectionCard
							title={tp("latestUsers", { count: users.toLocaleString() })}
							icon="/assets/images/icons/navigation/goody.png"
							bodyClassName="p-4"
						>
							<div className="grid grid-cols-4 gap-2">
								{latestUsers.map((u) => (
									<div
										key={u.username}
										className="flex flex-col items-center gap-1"
									>
										<UserAvatarThumbnail
											figure={u.look}
											alt={u.username}
											options={{ direction: 3 }}
										/>
										<span
											className="max-w-[64px] truncate text-center text-[11px] font-bold leading-tight"
											style={{ color: "var(--color-text-readable)" }}
										>
											{u.username}
										</span>
									</div>
								))}
							</div>
						</SectionCard>
					)}
				</Reveal>

				{/* Right: News */}
				<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
					<SectionCard
						title={tp("latestNews")}
						icon="/assets/images/icons/article.gif"
						actionHref="/news"
						actionLabel={tp("allNews")}
					>
						{articles.length > 0 ? (
							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
								{articles.slice(0, 4).map((a) => (
									<Link
										key={a.slug}
										href={`/news/${a.slug}`}
										className="group relative w-full overflow-hidden rounded-xl transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
										style={{
											height: "200px",
											backgroundColor: "var(--color-background)",
											border:
												"1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
										}}
									>
										<div className="relative h-full w-full overflow-hidden rounded-xl">
											<Image
												src={a.image}
												alt={a.title}
												fill
												sizes="(max-width: 768px) 100vw, 400px"
												className="rounded-xl object-cover transition-all duration-300 group-hover:scale-105"
											/>
											<div className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full bg-black/50 opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
												<span className="text-sm font-bold text-white">→</span>
											</div>
											<div
												className="absolute bottom-0 left-0 w-full p-2.5"
												style={{
													background:
														"linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)",
												}}
											>
												<h3 className="truncate text-base font-bold text-white text-shadow-sm">
													{a.title}
												</h3>
												<p
													className="mt-0.5 text-[11px] font-semibold opacity-80"
													style={{ color: "var(--color-text-muted)" }}
												>
													{formatDate(a.createdAt, "date", "")}
												</p>
											</div>
										</div>
									</Link>
								))}
							</div>
						) : (
							<p
								className="py-8 text-center text-sm"
								style={{ color: "var(--color-text-muted)" }}
							>
								{tp("noArticles")}
							</p>
						)}
					</SectionCard>
				</Reveal>
			</div>

			{/* ── Online users ── */}
			{recentUsers.length > 0 && (
				<Reveal>
					<SectionCard
						title={tp("recentUsers")}
						icon="/assets/images/icons/navigation/goody.png"
						actionHref="/community"
						actionLabel={tp("allUsers")}
					>
						<div className="flex flex-wrap justify-center gap-2">
							{recentUsers.slice(0, 12).map((u) => (
								<div
									key={u.username}
									className="flex flex-col items-center gap-0.5 rounded-lg px-2 py-1.5 transition-all duration-200 hover:scale-110 hover:shadow-md"
									style={{
										background:
											"color-mix(in srgb, var(--color-primary) 5%, transparent)",
									}}
								>
									<UserAvatarThumbnail
										figure={u.look}
										alt={u.username}
										options={{ direction: 2 }}
										className="rounded-md"
									/>
									<span
										className="max-w-[50px] truncate text-center text-[9px] font-bold leading-tight"
										style={{ color: "var(--color-text-readable)" }}
									>
										{u.username}
									</span>
								</div>
							))}
						</div>
					</SectionCard>
				</Reveal>
			)}

			{/* ── Bottom CTA ── */}
			<Reveal>
				<div
					className="relative overflow-hidden rounded-3xl border px-6 py-12 text-center"
					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="mb-2 text-2xl font-black tracking-tight md:text-3xl"
						style={{
							color: "var(--color-text-readable)",
							fontFamily: "var(--font-nunito)",
						}}
					>
						{tp("joinNow", { hotelName })}
					</h2>
					<p
						className="mb-6 max-w-sm mx-auto text-sm"
						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>
			</Reveal>

			{/* ── Recent photos ── */}
			{recentPhotos.length > 0 && (
				<Reveal>
					<SectionCard
						title={tp("recentPhotos")}
						icon="/assets/images/icons/camera.png"
					>
						<div className="mx-auto grid max-w-sm grid-cols-4 gap-2">
							{recentPhotos.slice(0, 4).map((p) => (
								<Link
									key={p.id}
									href="/photos"
									className="block aspect-square overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-md"
									style={{
										borderColor:
											"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
									}}
								>
									<Image
										src={p.url}
										alt=""
										width={200}
										height={200}
										className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
										unoptimized
									/>
								</Link>
							))}
						</div>
					</SectionCard>
				</Reveal>
			)}
		</div>
	);
}