Epicnabbo-Catalogus-Updated-Daily/src/app/(site)/verify/page.tsx

import { eq } from "drizzle-orm";
import { CheckCircle2, Clock, MailX } from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { isValidVerificationToken } from "@/actions/email-verify";
import { db, User } from "@/lib/db";

type Status = "verified" | "already" | "invalid" | "unavailable";

function StatusCard({
	icon,
	title,
	subtitle,
	children,
	color,
}: {
	icon: React.ReactNode;
	title: string;
	subtitle: string;
	children: React.ReactNode;
	color: string;
}) {
	const gradientMap: Record<string, string> = {
		green:
			"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
		yellow:
			"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
		red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
		blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
	};

	return (
		<main className="flex min-h-[60vh] items-center justify-center px-4">
			<div
				className="w-full max-w-md overflow-hidden rounded-xl border"
				style={{
					borderColor:
						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
					backgroundColor: "var(--color-surface)",
				}}
			>
				<div
					className="flex items-center gap-2.5 px-5 py-4"
					style={{ background: gradientMap[color] ?? gradientMap.blue }}
				>
					<span className="text-white">{icon}</span>
					<h1 className="text-sm font-bold text-white">{title}</h1>
				</div>
				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
					<div
						className="flex h-16 w-16 items-center justify-center rounded-full"
						style={{
							background:
								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
						}}
					>
						{icon}
					</div>
					<p
						className="text-sm font-semibold"
						style={{ color: "var(--color-text-muted)" }}
					>
						{subtitle}
					</p>
					{children}
				</div>
			</div>
		</main>
	);
}

export default async function VerifyPage({
	searchParams,
}: {
	searchParams: Promise<{
		token?: string;
		email?: string;
	}>;
}) {
	const t = await getTranslations("pages.verify");
	const { token = "", email = "" } = await searchParams;
	const normalisedEmail = email.trim().toLowerCase();

	let status: Status = "invalid";

	if (normalisedEmail && token) {
		const ok = await isValidVerificationToken(normalisedEmail, token);
		if (ok) {
			try {
				const [user] = await db
					.select({ id: User.id, mailVerified: User.mailVerified })
					.from(User)
					.where(eq(User.mail, normalisedEmail))
					.limit(1);
				if (!user) {
					status = "invalid";
				} else if (user.mailVerified === "1") {
					status = "already";
				} else {
					await db
						.update(User)
						.set({ mailVerified: "1" })
						.where(eq(User.id, user.id));
					status = "verified";
				}
			} catch {
				status = "unavailable";
			}
		}
	}

	const linkClass =
		"btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg";
	const linkStyle = {
		background: "var(--color-primary)",
		color: "var(--color-primary-foreground)",
		boxShadow:
			"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
	};

	return (
		<>
			{status === "verified" && (
				<StatusCard
					icon={<CheckCircle2 size={22} />}
					title={t("verifiedTitle")}
					subtitle={t("verifiedSubtitle")}
					color="green"
				>
					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
						{t("verifiedBody")}
					</p>
					<Link href="/login" className={linkClass} style={linkStyle}>
						{t("goToLogin")}
					</Link>
				</StatusCard>
			)}

			{status === "already" && (
				<StatusCard
					icon={<CheckCircle2 size={22} />}
					title={t("alreadyTitle")}
					subtitle={t("alreadySubtitle")}
					color="yellow"
				>
					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
						{t("alreadyBody")}
					</p>
					<Link href="/login" className={linkClass} style={linkStyle}>
						{t("goToLogin")}
					</Link>
				</StatusCard>
			)}

			{status === "unavailable" && (
				<StatusCard
					icon={<Clock size={22} />}
					title={t("unavailableTitle")}
					subtitle={t("unavailableSubtitle")}
					color="blue"
				>
					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
						{t("unavailableBody")}
					</p>
				</StatusCard>
			)}

			{status === "invalid" && (
				<StatusCard
					icon={<MailX size={22} />}
					title={t("invalidTitle")}
					subtitle={t("invalidSubtitle")}
					color="red"
				>
					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
						{t("invalidBody")}
					</p>
					<Link
						href="/login"
						className={`${linkClass} !shadow-none`}
						style={{
							background: "transparent",
							color: "var(--color-text-readable)",
							border:
								"2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
						}}
					>
						{t("backToLogin")}
					</Link>
				</StatusCard>
			)}
		</>
	);
}