import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { updateMotto } from "@/actions/user-settings";
import { ContentCard } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

export const dynamic = "force-dynamic";

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 {
		user = await prisma.user.findUnique({
			where: { id },
			select: { username: true, motto: true, look: true, mail: true },
		});
	} catch {
		user = null;
	}

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

	let imagerBase = "https://www.habbo.com/habbo-imaging/avatarimage";
	try {
		imagerBase =
			(await siteSettings.get("habbo_imaging_url", imagerBase)) ?? imagerBase;
	} catch {
		// fall back to the default imager base
	}

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

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<ContentCard
				icon="⚙️"
				title={t("accountSettings")}
				subtitle={t("accountSettingsSubtitle")}
			/>

			<ContentCard
				icon="🙂"
				title={user.username}
				subtitle={t("publicProfile")}
			>
				<div
					style={{
						display: "flex",
						gap: "1.5rem",
						alignItems: "center",
						flexWrap: "wrap",
					}}
				>
					{/* eslint-disable-next-line @next/next/no-img-element */}
					<img
						className="avatar"
						src={avatar}
						alt={`${user.username} avatar`}
						width={100}
						height={150}
					/>
					<div style={{ minWidth: 0 }}>
						<p style={{ margin: "0 0 0.5rem", fontSize: "1.05rem" }}>
							{user.motto || <span className="muted">{t("noMotto")}</span>}
						</p>
						<p className="muted" style={{ margin: 0 }}>
							{user.mail || t("noEmail")}
						</p>
					</div>
				</div>
			</ContentCard>

			<ContentCard
				icon="✏️"
				title={t("changeMotto")}
				subtitle={t("changeMottoSubtitle")}
			>
				<form
					action={updateMotto}
					style={{
						display: "flex",
						flexDirection: "column",
						gap: "0.75rem",
						maxWidth: 520,
					}}
				>
					<input
						name="motto"
						defaultValue={user.motto}
						maxLength={127}
						placeholder={t("mottoPlaceholder")}
						aria-label="Motto"
					/>
					<div>
						<button type="submit" className="btn btn-primary">
							{t("saveMotto")}
						</button>
					</div>
				</form>
			</ContentCard>

			<div className="card-grid sm-2">
				<ContentCard
					icon="🔒"
					title={t("securityTitle")}
					subtitle={t("securitySubtitle")}
				>
					<p className="muted" style={{ marginTop: 0 }}>
						{t("securityDescription")}
					</p>
					<Link href="/settings/2fa" className="btn btn-outline">
						{t("twoFactorLink")}
					</Link>
				</ContentCard>

				<ContentCard
					icon="🔗"
					title={t("connectionsTitle")}
					subtitle={t("connectionsSubtitle")}
				>
					<p className="muted" style={{ marginTop: 0 }}>
						{t("connectionsDescription")}
					</p>
					<Link href="/settings/connections" className="btn btn-outline">
						{t("manageConnections")}
					</Link>
				</ContentCard>
			</div>
		</main>
	);
}