import type { Metadata } from "next";
import Link from "next/link";
import { PageHeader } from "@/components/PageHeader";
import { Section } from "@/components/Section";
import { ResendVerificationButton } from "@/components/auth/ResendVerificationButton";
import { verifyEmailToken } from "@/lib/auth/verifyEmailToken";

export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "E-Mail bestätigen", robots: { index: false, follow: false } };

type Args = { params: Promise<{ token: string }> };

export default async function VerifyEmailPage({ params }: Args) {
  const { token } = await params;
  const verified = await verifyEmailToken(token);

  return (
    <>
      <PageHeader
        eyebrow="Konto"
        title={verified ? "E-Mail-Adresse bestätigt" : "Bestätigung fehlgeschlagen"}
        crumbs={[{ title: "E-Mail bestätigen" }]}
      />
      <Section tone="plain">
        <div className="mx-auto max-w-md text-center">
          {verified ? (
            <>
              <p className="text-base leading-relaxed text-anouma-plum">Dein Konto ist jetzt aktiviert.</p>
              <Link
                href="/konto"
                className="mt-6 inline-flex rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium text-white transition-colors hover:bg-anouma-plum"
              >
                Zum Konto
              </Link>
            </>
          ) : (
            <>
              <p className="text-base leading-relaxed text-anouma-plum">
                Dieser Verifizierungslink ist ungültig oder abgelaufen.
              </p>
              <div className="mt-6 flex flex-col items-center gap-4">
                <ResendVerificationButton variant="email-prompt" triggerLabel="Neuen Link anfordern" />
                <Link href="/login" className="text-sm font-medium text-anouma-mauve-dark underline underline-offset-4">
                  Zur Anmeldung
                </Link>
              </div>
            </>
          )}
        </div>
      </Section>
    </>
  );
}