import type { Metadata } from "next";
import Link from "next/link";
import { getLocale, getTranslations } from "next-intl/server";
import { TrialConfirmForm } from "@/components/trial/confirm-form";
import { formatDateKey } from "@/lib/trial/dates";
import { peekTrialSignup } from "@/server/services/trial/signup";

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations("trial.meta");
  return { title: t("confirmTitle") };
}

export const dynamic = "force-dynamic";

/**
 * L15 Testphase: landing page of the confirmation link. Shows the pending signup (link is only
 * checked, not consumed); provisioning happens on the POST of the button (TrialConfirmForm).
 */
export default async function TrialConfirmPage({ searchParams }: { searchParams: Promise<{ token?: string }> }) {
  const { token = "" } = await searchParams;
  const [t, locale] = await Promise.all([getTranslations("trial.confirm"), getLocale()]);
  const signup = await peekTrialSignup(token);

  return (
    <div className="shadow-card mt-4 w-full max-w-md self-start rounded-2xl border bg-card p-6 sm:p-8">
      <h1 className="font-heading text-xl font-semibold">{t("title")}</h1>
      {signup ? (
        <>
          <p className="mt-1 text-sm text-muted-foreground">{t("intro")}</p>
          <dl className="mt-4 divide-y rounded-lg border text-sm">
            <div className="flex justify-between gap-3 px-3 py-2"><dt className="text-muted-foreground">{t("company")}</dt><dd className="text-right font-medium">{signup.companyName}</dd></div>
            <div className="flex justify-between gap-3 px-3 py-2"><dt className="text-muted-foreground">{t("until")}</dt><dd className="font-medium">{formatDateKey(signup.trialEndDate, locale)}</dd></div>
            <div className="flex justify-between gap-3 px-3 py-2"><dt className="text-muted-foreground">{t("sampleData")}</dt><dd className="font-medium">{signup.sampleData ? t("yes") : t("no")}</dd></div>
          </dl>
          <TrialConfirmForm token={token} />
        </>
      ) : (
        <>
          <p role="alert" className="mt-4 rounded-lg bg-[rgba(255,107,107,0.16)] px-3 py-2 text-sm text-[var(--risk)]">{t("invalid")}</p>
          <div className="mt-4 flex flex-col gap-1 text-center">
            <Link href="/testen" className="flex min-h-11 items-center justify-center text-sm font-semibold text-[var(--ui-primary)]">{t("toSignup")}</Link>
            <Link href="/login" className="flex min-h-11 items-center justify-center text-sm text-muted-foreground">{t("toLogin")}</Link>
          </div>
        </>
      )}
    </div>
  );
}