import { and, asc, count, desc, eq, gt, inArray, or } from "drizzle-orm";
import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import type { CSSProperties, ReactNode } from "react";
import { claimReferral } from "@/actions/referral";

import { Reveal } from "@/components/motion-reveal";
import { auth } from "@/lib/auth";
import {
	db,
	MessengerFriendships,
	MessengerOffline,
	Rooms,
	User,
	UserReferrals,
	UsersBadges,
	UsersSettings,
	WebsiteLoginLogs,
	WebsiteSetting,
} from "@/lib/db";
import { avatarImageUrl } from "@/lib/format";
import { resolveHotelName } from "@/lib/hotel-name";
import { siteSettings } from "@/lib/services/site-settings";
import CopyReferralButton from "./CopyReferralButton";

// TODO: Cache Components adoption. Refactor this route so this opt-out can be removed.
// See: https://nextjs.org/docs/app/guides/migrating-to-cache-components
export const instant = false;

export const metadata = { title: "My dashboard" };

type SearchParams = Promise<{ claimed?: string; error?: string }>;

function feedbackStyle(tone: "success" | "error" | "warning"): CSSProperties {
	const accent =
		tone === "error"
			? "var(--color-danger)"
			: tone === "warning"
				? "var(--color-accent)"
				: "var(--color-primary)";
	return {
		margin: 0,
		padding: "0.85rem 1rem",
		borderRadius: "var(--radius-md)",
		border: `1px solid ${accent}`,
		color: "var(--color-text-readable, var(--color-text))",
		fontSize: "0.9rem",
		fontWeight: 600,
		background: "var(--color-surface)",
		borderLeft: `4px solid ${accent}`,
	};
}

const ERROR_MESSAGES: Record<string, string> = {
	not_enough: "You do not have enough referrals to claim your reward yet.",
	no_referrals:
		"You haven't referred anyone yet — share your link to get started.",
	bad_config:
		"The referral reward is not configured correctly. Please contact a staff member.",
	error: "Something went wrong while claiming your reward. Please try again.",
};

function getErrorMessage(error: string): string {
	if (error === "not_enough") return ERROR_MESSAGES.not_enough;
	if (error === "no_referrals") return ERROR_MESSAGES.no_referrals;
	if (error === "bad_config") return ERROR_MESSAGES.bad_config;
	return ERROR_MESSAGES.error;
}

export default async function MePage({
	searchParams,
}: {
	searchParams: SearchParams;
}) {
	const session = await auth();
	if (!session?.user?.id) redirect("/login");

	const userId = Number(session.user.id);
	if (!Number.isFinite(userId) || userId <= 0) redirect("/login");

	const { claimed, error } = await searchParams;

	let content: ReactNode;
	try {
		const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";

		const [
			userRows,
			imagerBase,
			hotelName,
			neededRows,
			amountRows,
			currencyRows,
			alertRaw,
			recentRooms,
			badges,
			lastWebLoginRows,
			userSettingsRows,
			friendCountRows,
			unreadCountRows,
		] = await Promise.all([
			db
				.select({
					id: User.id,
					username: User.username,
					look: User.look,
					motto: User.motto,
					rank: User.rank,
					credits: User.credits,
					accountCreated: User.accountCreated,
					lastLogin: User.lastLogin,
					lastOnline: User.lastOnline,
				})
				.from(User)
				.where(eq(User.id, userId))
				.limit(1),
			siteSettings.get(
				"habbo_imaging_url",
				"https://www.habbo.com/habbo-imaging/avatarimage",
			),
			resolveHotelName(),
			db
				.select({ value: WebsiteSetting.value })
				.from(WebsiteSetting)
				.where(eq(WebsiteSetting.key, "referrals_needed"))
				.limit(1)
				.catch(() => []),
			db
				.select({ value: WebsiteSetting.value })
				.from(WebsiteSetting)
				.where(eq(WebsiteSetting.key, "referral_reward_amount"))
				.limit(1)
				.catch(() => []),
			db
				.select({ value: WebsiteSetting.value })
				.from(WebsiteSetting)
				.where(
					inArray(WebsiteSetting.key, [
						"referral_reward_currency_type",
						"referral_reward_currency",
					]),
				)
				.limit(1)
				.catch(() => []),
			siteSettings.get("hotel_alert_banner", ""),
			db
				.select({
					id: Rooms.id,
					name: Rooms.name,
					ownerName: Rooms.ownerName,
					users: Rooms.users,
					usersMax: Rooms.usersMax,
				})
				.from(Rooms)
				.orderBy(desc(Rooms.id))
				.limit(6)
				.catch(() => []),
			db
				.select({
					badgeCode: UsersBadges.badgeCode,
					slotId: UsersBadges.slotId,
				})
				.from(UsersBadges)
				.where(and(eq(UsersBadges.userId, userId), gt(UsersBadges.slotId, 0)))
				.orderBy(asc(UsersBadges.slotId))
				.catch(() => []),
			db
				.select({ createdAt: WebsiteLoginLogs.createdAt })
				.from(WebsiteLoginLogs)
				.where(eq(WebsiteLoginLogs.userId, userId))
				.orderBy(desc(WebsiteLoginLogs.id))
				.limit(1)
				.catch(() => []),
			db
				.select({
					achievementScore: UsersSettings.achievementScore,
					respectsReceived: UsersSettings.respectsReceived,
				})
				.from(UsersSettings)
				.where(eq(UsersSettings.userId, userId))
				.limit(1)
				.catch(() => []),
			db
				.select({ value: count() })
				.from(MessengerFriendships)
				.where(
					or(
						eq(MessengerFriendships.userOneId, userId),
						eq(MessengerFriendships.userTwoId, userId),
					),
				)
				.catch(() => [{ value: 0 }]),
			db
				.select({ value: count() })
				.from(MessengerOffline)
				.where(eq(MessengerOffline.userId, userId))
				.catch(() => [{ value: 0 }]),
		]);

		const user = userRows[0] ?? null;
		const neededRaw = neededRows[0] ?? null;
		const amountRaw = amountRows[0] ?? null;
		const currencyRaw = currencyRows[0] ?? null;
		const lastWebLogin = lastWebLoginRows[0] ?? null;
		const userSettings = userSettingsRows[0] ?? null;
		const friendCount = Number(friendCountRows[0]?.value ?? 0);
		const unreadCount = Number(unreadCountRows[0]?.value ?? 0);

		void lastWebLogin;

		if (!user) throw new Error("user-not-found");

		const needed = Number.parseInt(neededRaw?.value ?? "5", 10) || 5;
		const rewardAmount = Number.parseInt(amountRaw?.value ?? "30", 10) || 0;
		const rewardCurrency = (currencyRaw?.value ?? "diamonds")
			.trim()
			.toLowerCase();

		const [referrals] = await db
			.select({ referralsTotal: UserReferrals.referralsTotal })
			.from(UserReferrals)
			.where(eq(UserReferrals.userId, userId))
			.orderBy(desc(UserReferrals.id))
			.limit(1)
			.catch(() => []);
		const referralTotal = referrals ? Number(referrals.referralsTotal) : 0;
		const canClaim = referralTotal >= needed;
		const remaining = Math.max(0, needed - referralTotal);

		const friendships = await db
			.select({
				userOneId: MessengerFriendships.userOneId,
				userTwoId: MessengerFriendships.userTwoId,
			})
			.from(MessengerFriendships)
			.where(
				or(
					eq(MessengerFriendships.userOneId, userId),
					eq(MessengerFriendships.userTwoId, userId),
				),
			)
			.catch(() => []);

		const friendIds = Array.from(
			new Set(
				friendships
					.map((f) => (f.userOneId === userId ? f.userTwoId : f.userOneId))
					.filter((id) => id && id !== userId),
			),
		);

		const friends = friendIds.length
			? await db
					.select({
						id: User.id,
						username: User.username,
						look: User.look,
						motto: User.motto,
						online: User.online,
					})
					.from(User)
					.where(inArray(User.id, friendIds))
					.catch(() => [])
			: [];

		const onlineFriends = friends.filter((f) => f.online === "1");

		const registered = new Date(user.accountCreated * 1000)
			.toISOString()
			.slice(0, 10);
		const lastLoginDate = user.lastLogin
			? new Date(user.lastLogin * 1000).toISOString().slice(0, 10)
			: "Never";
		const lastOnlineDate = user.lastOnline
			? new Date(user.lastOnline * 1000).toISOString().slice(0, 10)
			: "Never";
		const referralLink = `/register?ref=${encodeURIComponent(user.username)}`;

		const imager =
			imagerBase ?? "https://www.habbo.com/habbo-imaging/avatarimage";
		const avatarFull = avatarImageUrl(imager, user.look, {
			size: "l",
			direction: 2,
		});
		content = (
			<div className="flex flex-col gap-8 pb-8">
				{claimed ? (
					<div role="status" style={feedbackStyle("success")}>
						Woah! You have successfully claimed your reward — keep up the good
						work!
					</div>
				) : null}
				{error ? (
					<div role="alert" style={feedbackStyle("error")}>
						{getErrorMessage(error)}
					</div>
				) : null}

				<Reveal>
					<div
						className="relative overflow-hidden rounded-2xl border p-6 flex items-start gap-6"
						style={{
							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface))`,
							borderColor:
								"color-mix(in srgb, var(--color-primary) 20%, transparent)",
						}}
					>
						<div
							className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10"
							style={{ background: "var(--color-primary)" }}
						/>
						<div className="relative shrink-0 flex flex-col items-center gap-3">
							<div
								className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]"
								style={{ background: "var(--color-primary)" }}
							/>
							<Image
								src={avatarFull}
								alt=""
								width={120}
								height={160}
								className="object-contain drop-shadow-xl relative"
								unoptimized
								priority
							/>
							<Link
								href="/client"
								className="btn-shine flex items-center justify-center gap-1.5 rounded-xl border py-2 px-4 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
								style={{
									background: "var(--color-primary)",
									color: "var(--color-primary-foreground)",
									borderColor:
										"color-mix(in srgb, var(--color-primary) 20%, transparent)",
									boxShadow:
										"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
								}}
							>
								<Image
									src="/assets/images/EnterHubbly.png"
									alt=""
									width={16}
									height={16}
									unoptimized
								/>
								Enter {hotelName}
							</Link>
						</div>
						<div className="flex-1 min-w-0 pt-1">
							<div
								className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider 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))",
								}}
							>
								Rank {user.rank}
							</div>
							<h1
								className="text-2xl md:text-3xl font-black tracking-tight"
								style={{ color: "var(--color-text-readable)" }}
							>
								{user.username}
							</h1>
							<p
								className="text-sm mt-1"
								style={{ color: "var(--color-text-muted)" }}
							>
								{user.motto || "No motto"}
							</p>
							<div className="flex flex-wrap gap-x-6 gap-y-1 mt-4 text-xs">
								<span style={{ color: "var(--color-text-muted)" }}>
									Registered:{" "}
									<strong style={{ color: "var(--color-text-readable)" }}>
										{registered}
									</strong>
								</span>
								<span style={{ color: "var(--color-text-muted)" }}>
									Last online:{" "}
									<strong style={{ color: "var(--color-text-readable)" }}>
										{lastOnlineDate}
									</strong>
								</span>
							</div>
						</div>
					</div>
				</Reveal>

				{alertRaw ? (
					<Reveal delay={0.05}>
						<div
							className="rounded-2xl border px-6 py-4 text-center"
							style={{
								background:
									"color-mix(in srgb, var(--color-accent) 12%, transparent)",
								borderColor:
									"color-mix(in srgb, var(--color-accent) 25%, transparent)",
							}}
						>
							<p
								className="text-sm font-bold"
								style={{ color: "var(--color-accent)" }}
							>
								{alertRaw}
							</p>
						</div>
					</Reveal>
				) : null}

				<Reveal delay={0.1}>
					<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
						{[
							{ value: user.credits.toLocaleString(), label: "Credits" },
							{ value: `Rank ${user.rank}`, label: "Hotel rank" },
							{
								value: (userSettings?.achievementScore ?? 0).toLocaleString(),
								label: "Achievement score",
							},
							{
								value: (userSettings?.respectsReceived ?? 0).toLocaleString(),
								label: "Respects",
							},
							{ value: friendCount.toLocaleString(), label: "Friends" },
							{ value: lastLoginDate, label: "Last login" },
						].map((s) => (
							<div
								key={s.label}
								className="relative rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
								style={{
									background: "var(--color-surface)",
									borderColor:
										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
								}}
							>
								<div
									className="text-xl md:text-2xl font-black tracking-tight mb-0.5"
									style={{ color: "var(--color-primary)" }}
								>
									{s.value}
								</div>
								<div
									className="text-[11px] font-bold uppercase tracking-widest"
									style={{ color: "var(--color-text-muted)" }}
								>
									{s.label}
								</div>
							</div>
						))}
					</div>
				</Reveal>

				<Reveal delay={0.15}>
					<div
						className="rounded-2xl border p-5"
						style={{
							background: "var(--color-surface)",
							borderColor:
								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
						}}
					>
						<div className="flex items-center justify-between mb-4">
							<div>
								<h2
									className="text-lg font-black tracking-tight"
									style={{ color: "var(--color-text-readable)" }}
								>
									Online friends
								</h2>
								<p
									className="text-xs mt-0.5"
									style={{ color: "var(--color-text-muted)" }}
								>
									{onlineFriends.length === 0
										? "None of your friends are online right now"
										: `${onlineFriends.length} of your ${friends.length} friends online`}
								</p>
							</div>
							<Link
								href="/friends"
								className="text-xs font-bold hover:underline shrink-0"
								style={{ color: "var(--color-primary)" }}
							>
								View all
							</Link>
						</div>
						{onlineFriends.length === 0 ? (
							<div className="text-center py-6">
								<p
									className="text-sm"
									style={{ color: "var(--color-text-muted)" }}
								>
									No friends online right now. Check back later!
								</p>
							</div>
						) : (
							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
								{onlineFriends.map((friend) => (
									<Link
										key={friend.id}
										href={`/u/${friend.username}`}
										className="flex items-center gap-3 p-3 rounded-xl transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
										style={{
											background:
												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
											textDecoration: "none",
										}}
									>
										<Image
											src={avatarImageUrl(imager, friend.look, {
												size: "s",
												headOnly: true,
											})}
											alt=""
											width={40}
											height={50}
											className="rounded-lg shrink-0"
											unoptimized
										/>
										<div className="min-w-0">
											<p
												className="text-sm font-extrabold truncate"
												style={{ color: "var(--color-text-readable)" }}
											>
												{friend.username}
											</p>
											<p
												className="text-[10px] font-semibold truncate mt-0.5"
												style={{ color: "var(--color-text-muted)" }}
											>
												{friend.motto || "No motto"}
											</p>
											<span
												className="inline-flex items-center gap-1 text-[10px] font-bold mt-1"
												style={{ color: "var(--color-success)" }}
											>
												<span
													className="w-1.5 h-1.5 rounded-full"
													style={{ background: "var(--color-success)" }}
												/>{" "}
												Online
											</span>
										</div>
									</Link>
								))}
							</div>
						)}
					</div>
				</Reveal>

				<Reveal delay={0.2}>
					<div
						className="rounded-2xl border p-5"
						style={{
							background: "var(--color-surface)",
							borderColor:
								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
						}}
					>
						<div className="mb-4">
							<h2
								className="text-lg font-black tracking-tight"
								style={{ color: "var(--color-text-readable)" }}
							>
								Refer a friend ({referralTotal}/{needed})
							</h2>
							<p
								className="text-xs mt-0.5"
								style={{ color: "var(--color-text-muted)" }}
							>
								Refer new users and earn in-game rewards
							</p>
						</div>
						<div className="flex flex-col gap-4">
							<p
								className="text-sm"
								style={{ color: "var(--color-text-muted)" }}
							>
								{rewardAmount > 0
									? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!`
									: `Invite ${needed} users through your referral link to claim a reward!`}
							</p>
							<div role="note" style={feedbackStyle("warning")}>
								Boosting referrals by making your own accounts will lead to
								removal of all progress, currency, inventory and a potential
								ban.
							</div>
							<div>
								<label
									htmlFor="referral-link"
									className="text-xs font-bold mb-1.5 block"
									style={{ color: "var(--color-text-muted)" }}
								>
									Your referral link
								</label>
								<div className="flex gap-2 flex-wrap">
									<input
										id="referral-link"
										type="text"
										readOnly
										defaultValue={referralLink}
										className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
										style={{
											backgroundColor: "var(--color-background)",
											color: "var(--color-text-readable, var(--color-text))",
											borderColor:
												"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
										}}
									/>
									<CopyReferralButton value={referralLink} />
								</div>
							</div>
							{canClaim ? (
								<form action={claimReferral}>
									<button
										type="submit"
										className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] 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)",
										}}
									>
										Claim your referral reward!
									</button>
								</form>
							) : (
								<button
									type="button"
									disabled
									className="w-full rounded-xl font-extrabold text-sm py-3.5 opacity-60 cursor-not-allowed"
									style={{
										background:
											"color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
										color: "var(--color-text-muted)",
									}}
								>
									{`Refer ${remaining} more ${remaining === 1 ? "user" : "users"} to unlock your reward`}
								</button>
							)}
						</div>
					</div>
				</Reveal>

				{recentRooms.length > 0 && (
					<Reveal delay={0.25}>
						<div
							className="rounded-2xl border p-5"
							style={{
								background: "var(--color-surface)",
								borderColor:
									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
							}}
						>
							<div className="flex items-center justify-between mb-4">
								<div>
									<h2
										className="text-lg font-black tracking-tight"
										style={{ color: "var(--color-text-readable)" }}
									>
										Recent rooms
									</h2>
									<p
										className="text-xs mt-0.5"
										style={{ color: "var(--color-text-muted)" }}
									>
										Newest rooms in the hotel
									</p>
								</div>
								<Link
									href="/community"
									className="text-xs font-bold hover:underline shrink-0"
									style={{ color: "var(--color-primary)" }}
								>
									View all
								</Link>
							</div>
							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
								{recentRooms.map((room) => (
									<Link
										key={room.id}
										href={`/room/${room.id}`}
										className="block rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
										style={{
											background:
												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
											borderColor:
												"color-mix(in srgb, var(--color-primary) 10%, transparent)",
										}}
									>
										<p
											className="text-sm font-extrabold truncate"
											style={{ color: "var(--color-text-readable)" }}
										>
											{room.name}
										</p>
										<p
											className="text-[10px] font-semibold mt-0.5"
											style={{ color: "var(--color-text-muted)" }}
										>
											{room.ownerName} &middot; {room.users}/{room.usersMax}
										</p>
									</Link>
								))}
							</div>
						</div>
					</Reveal>
				)}

				{badges.length > 0 && (
					<Reveal delay={0.3}>
						<div
							className="rounded-2xl border p-5"
							style={{
								background: "var(--color-surface)",
								borderColor:
									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
							}}
						>
							<div className="mb-4">
								<h2
									className="text-lg font-black tracking-tight"
									style={{ color: "var(--color-text-readable)" }}
								>
									Badges
								</h2>
								<p
									className="text-xs mt-0.5"
									style={{ color: "var(--color-text-muted)" }}
								>
									{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped
								</p>
							</div>
							<div className="flex flex-wrap gap-2">
								{badges.map((badge) => (
									<Image
										key={badge.badgeCode}
										src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`}
										alt={badge.badgeCode}
										width={40}
										height={40}
										className="rounded-md transition-transform hover:scale-110"
										unoptimized
									/>
								))}
							</div>
						</div>
					</Reveal>
				)}

				<Reveal delay={0.35}>
					<div
						className="rounded-2xl border p-5"
						style={{
							background: "var(--color-surface)",
							borderColor:
								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
						}}
					>
						<h2
							className="text-lg font-black tracking-tight mb-4"
							style={{ color: "var(--color-text-readable)" }}
						>
							Quick links
						</h2>
						<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
							{[
								{ href: "/messages", label: "Messages", badge: unreadCount },
								{ href: `/u/${user.username}`, label: "My profile", badge: 0 },
								{ href: "/settings", label: "Settings", badge: 0 },
								{ href: "/shop", label: "Shop", badge: 0 },
							].map((link) => (
								<Link
									key={link.href}
									href={link.href}
									className="relative flex items-center justify-center rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5 hover:shadow-md"
									style={{
										background:
											"color-mix(in srgb, var(--color-primary) 6%, transparent)",
										borderColor:
											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
										color: "var(--color-text-readable)",
									}}
								>
									{link.label}
									{link.badge > 0 && (
										<span
											className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none"
											style={{
												background: "var(--color-danger)",
												color: "white",
											}}
										>
											{link.badge > 99 ? "99+" : link.badge}
										</span>
									)}
								</Link>
							))}
						</div>
					</div>
				</Reveal>
			</div>
		);
	} catch {
		content = (
			<div
				className="rounded-2xl border p-6 text-center"
				style={{
					background: "var(--color-surface)",
					borderColor:
						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
				}}
			>
				<p
					className="text-sm font-bold"
					style={{ color: "var(--color-text-muted)" }}
				>
					We couldn&apos;t load your dashboard right now. Please try again
					shortly.
				</p>
			</div>
		);
	}

	return <main>{content}</main>;
}