import { getTranslations, setRequestLocale } from "next-intl/server";
import type { Metadata } from "next";
import { Link } from "@/i18n/navigation";
import { CheckCircle2, XCircle } from "lucide-react";
import AuthLayout from "@/components/auth/AuthLayout";
import ResendVerificationForm from "@/components/auth/ResendVerificationForm";
import {
  consumeEmailVerifyToken,
  verifyUserEmail,
} from "@/lib/auth-tokens";
import { resolveBrand } from "@/lib/brand-server";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "auth" });

  return {
    title: t("verifyEmailTitle"),
    description: t("verifyEmailSubtitle"),
    robots: { index: false, follow: false },
  };
}

async function VerifyEmailResult({ token }: { token: string }) {
  const t = await getTranslations("auth");
  const brand = await resolveBrand();
  const email = await consumeEmailVerifyToken(token);
  const success = Boolean(email);

  if (success && email) {
    await verifyUserEmail(email);
  }

  return (
    <AuthLayout
      title={success ? t("emailVerifiedTitle") : t("verificationFailedTitle")}
      subtitle={success ? t("emailVerifiedSubtitle") : t("verificationFailedSubtitle")}
    >
      <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-6 text-center">
        <div
          className={`mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full ${
            success ? "bg-emerald-500/10" : "bg-red-500/10"
          }`}
        >
          {success ? (
            <CheckCircle2 className="h-6 w-6 text-emerald-400" />
          ) : (
            <XCircle className="h-6 w-6 text-red-400" />
          )}
        </div>

        <p className="text-sm text-[var(--text-muted)]">
          {success
            ? t("emailVerifiedHint", { appName: brand.name })
            : t("verificationFailedHint")}
        </p>

        <Link
          href="/login"
          className="mt-6 inline-flex cursor-pointer text-sm font-medium text-[var(--accent)] transition-colors hover:text-[var(--accent-hover)]"
        >
          {t("backToSignIn")}
        </Link>

        {!success && (
          <p className="mt-3 text-sm text-[var(--text-muted)]">
            <Link
              href="/verify-email"
              className="cursor-pointer font-medium text-[var(--accent)] transition-colors hover:text-[var(--accent-hover)]"
            >
              {t("resendVerification")}
            </Link>
          </p>
        )}
      </div>
    </AuthLayout>
  );
}

export default async function VerifyEmailPage({
  params,
  searchParams,
}: {
  params: Promise<{ locale: string }>;
  searchParams: Promise<{ token?: string }>;
}) {
  const { locale } = await params;
  const { token } = await searchParams;
  setRequestLocale(locale);

  if (token) {
    return <VerifyEmailResult token={token} />;
  }

  return <ResendVerificationForm />;
}