import { eq } from "drizzle-orm";
import Image from "next/image";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { updateMotto } from "@/actions/user-settings";
import { Reveal } from "@/components/motion-reveal";
import { auth } from "@/lib/auth";
import { db, User } from "@/lib/db";
import { avatarImageUrl } from "@/lib/format";

export default async function SettingsPage() {
	const t = await getTranslations("pages.settings");
	const session = await auth();
	if (!session?.user?.id) redirect("/login");

	const id = Number(session.user.id);

	let user: {
		username: string;
		motto: string;
		look: string;
		mail: string | null;
	} | null = null;
	try {
		const [row] = await db
			.select({
				username: User.username,
				motto: User.motto,
				look: User.look,
				mail: User.mail,
			})
			.from(User)
			.where(eq(User.id, id))
			.limit(1);
		user = row ?? null;
	} catch {
		user = null;
	}

	if (!user) redirect("/login");

	const avatar = avatarImageUrl(user.look, { size: "l" });

	return (
		<div className="flex flex-col gap-6 pb-14">
			{/* Header */}
			<Reveal>
				<div
					className="relative overflow-hidden rounded-xl border px-5 py-4"
					style={{
						background:
							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
						backdropFilter: "blur(14px)",
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
					}}
				>
					<div className="flex items-center gap-3">
						<div
							className="w-10 h-10 rounded-xl flex items-center justify-center"
							style={{
								background:
									"color-mix(in srgb, var(--color-primary) 14%, transparent)",
							}}
						>
							<Image
								src="/assets/images/icons/navigation/me.png"
								alt=""
								width={22}
								height={22}
								unoptimized
							/>
						</div>
						<div>
							<h1
								className="text-lg font-black tracking-tight"
								style={{
									color: "var(--color-text-readable)",
									fontFamily: "var(--font-nunito)",
								}}
							>
								{t("accountSettings")}
							</h1>
							<p
								className="text-xs"
								style={{ color: "var(--color-text-muted)" }}
							>
								{t("accountSettingsSubtitle")}
							</p>
						</div>
					</div>
				</div>
			</Reveal>

			{/* Profile card */}
			<Reveal delay={0.05}>
				<div
					className="overflow-hidden rounded-xl border card-premium"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
					}}
				>
					<div
						className="flex items-center gap-2.5 px-4 py-3"
						style={{
							background:
								"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
						}}
					>
						<Image
							src="/assets/images/icons/navigation/me.png"
							alt=""
							width={18}
							height={18}
							unoptimized
						/>
						<h2
							className="text-sm font-bold text-white"
							style={{ fontFamily: "var(--font-nunito)" }}
						>
							{t("publicProfile")}
						</h2>
					</div>
					<div
						className="p-5 flex items-center gap-5"
						style={{ backgroundColor: "var(--color-surface)" }}
					>
						<div className="shrink-0">
							<div
								className="rounded-xl overflow-hidden border"
								style={{
									borderColor:
										"color-mix(in srgb, var(--color-primary) 15%, transparent)",
								}}
							>
								<Image
									src={avatar}
									alt={`${user.username} avatar`}
									width={80}
									height={120}
									className="block"
									unoptimized
								/>
							</div>
						</div>
						<div className="min-w-0 flex-1">
							<h3
								className="text-base font-extrabold"
								style={{ color: "var(--color-text-readable)" }}
							>
								{user.username}
							</h3>
							<p
								className="text-sm mt-0.5"
								style={{ color: "var(--color-text-muted)" }}
							>
								{user.motto || (
									<span style={{ fontStyle: "italic", opacity: 0.5 }}>
										{t("noMotto")}
									</span>
								)}
							</p>
							<p
								className="text-xs mt-1.5 font-medium"
								style={{
									color:
										"color-mix(in srgb, var(--color-text-muted) 70%, transparent)",
								}}
							>
								{user.mail || t("noEmail")}
							</p>
						</div>
					</div>
				</div>
			</Reveal>

			{/* Motto form */}
			<Reveal delay={0.1}>
				<div
					className="overflow-hidden rounded-xl border"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
					}}
				>
					<div
						className="flex items-center gap-2.5 px-4 py-3"
						style={{
							background:
								"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
						}}
					>
						<Image
							src="/assets/images/icons/star.gif"
							alt=""
							width={18}
							height={18}
							unoptimized
						/>
						<h2
							className="text-sm font-bold text-white"
							style={{ fontFamily: "var(--font-nunito)" }}
						>
							{t("changeMotto")}
						</h2>
					</div>
					<div
						className="p-5"
						style={{ backgroundColor: "var(--color-surface)" }}
					>
						<p
							className="text-xs mb-4"
							style={{ color: "var(--color-text-muted)" }}
						>
							{t("changeMottoSubtitle")}
						</p>
						<form
							action={updateMotto}
							className="flex flex-col gap-3"
							style={{ maxWidth: 520 }}
						>
							<input
								name="motto"
								defaultValue={user.motto}
								maxLength={127}
								placeholder={t("mottoPlaceholder")}
								aria-label="Motto"
								className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
								style={{
									backgroundColor: "var(--color-background)",
									color: "var(--color-text-readable)",
									borderColor:
										"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
								}}
							/>
							<div>
								<button
									type="submit"
									className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.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 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
									}}
								>
									{t("saveMotto")}
								</button>
							</div>
						</form>
					</div>
				</div>
			</Reveal>

			{/* Security card */}
			<Reveal delay={0.15}>
				<div
					className="overflow-hidden rounded-xl border"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
					}}
				>
					<div
						className="flex items-center gap-2.5 px-4 py-3"
						style={{
							background:
								"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
						}}
					>
						<Image
							src="/assets/images/icons/navigation/goody.png"
							alt=""
							width={18}
							height={18}
							unoptimized
						/>
						<h2
							className="text-sm font-bold text-white"
							style={{ fontFamily: "var(--font-nunito)" }}
						>
							{t("securityTitle")}
						</h2>
					</div>
					<div
						className="p-5"
						style={{ backgroundColor: "var(--color-surface)" }}
					>
						<p
							className="text-xs mb-4"
							style={{ color: "var(--color-text-muted)" }}
						>
							{t("securityDescription")}
						</p>
						<Link
							href="/settings/2fa"
							className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.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)",
							}}
						>
							{t("twoFactorLink")}
						</Link>
					</div>
				</div>
			</Reveal>

			{/* Sessions link */}
			<Reveal delay={0.2}>
				<Link
					href="/settings/sessions"
					className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
					style={{
						borderColor:
							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
					}}
				>
					<div
						className="flex items-center justify-between px-5 py-4"
						style={{ backgroundColor: "var(--color-surface)" }}
					>
						<div className="flex items-center gap-3">
							<div
								className="w-10 h-10 rounded-xl flex items-center justify-center"
								style={{
									background:
										"color-mix(in srgb, var(--color-primary) 14%, transparent)",
								}}
							>
								<Image
									src="/assets/images/icons/navigation/community.png"
									alt=""
									width={20}
									height={20}
									unoptimized
								/>
							</div>
							<div>
								<span
									className="text-sm font-extrabold"
									style={{ color: "var(--color-text-readable)" }}
								>
									Session Management
								</span>
								<p
									className="text-xs mt-0.5"
									style={{ color: "var(--color-text-muted)" }}
								>
									View active sessions and sign out everywhere
								</p>
							</div>
						</div>
						<span
							className="text-lg font-bold"
							style={{ color: "var(--color-text-muted)" }}
						>
							→
						</span>
					</div>
				</Link>
			</Reveal>
		</div>
	);
}