import Link from "next/link";
import { prisma } from "@/lib/db";
import { sanitizeForDisplay } from "@/lib/sanitize";
import { TIERS, formatUSD } from "@/lib/tiers";

export const metadata = { title: "Thank you — PIFF" };

interface PageProps {
  searchParams: { donation?: string };
}

export default async function SuccessPage({ searchParams }: PageProps) {
  const id = searchParams.donation;
  const donation = id
    ? await prisma.donation.findUnique({ where: { id } })
    : null;

  return (
    <section className="mx-auto max-w-2xl px-6 py-20 text-center">
      <h1 className="font-display text-4xl font-bold text-text">
        Thank you.
      </h1>
      {donation ? (
        <>
          <p className="mt-4 text-lg text-text">
            Your contribution of{" "}
            <span className="font-semibold text-primary">
              {formatUSD(donation.amountCents)}
            </span>{" "}
            for the{" "}
            <span className="font-medium">
              {TIERS[donation.tierId as keyof typeof TIERS]?.label ?? donation.tierId}
            </span>{" "}
            has been received.
          </p>
          <div className="mt-6 rounded-2xl border border-border bg-surface p-6 text-left">
            <div className="text-xs uppercase tracking-wider text-textmuted">
              Your dedication
            </div>
            <div className="mt-2 text-lg italic text-text">
              &ldquo;{sanitizeForDisplay(donation.message)}&rdquo;
            </div>
            {donation.donorName && !donation.isAnonymous && (
              <div className="mt-1 text-sm text-textmuted">
                — {donation.donorName}
              </div>
            )}
          </div>
        </>
      ) : (
        <p className="mt-4 text-lg text-text">
          Your contribution has been received.
        </p>
      )}
      <p className="mt-6 text-textmuted">
        Your contribution to building HomeDividend will appear on the house
        once approved (typically within 24 hours). You will receive a
        tax-deductible receipt
        {donation?.donorEmail ? ` at ${donation.donorEmail}` : ""}.
      </p>
      <div className="mt-10 flex justify-center gap-4">
        <Link
          href="/donate"
          className="rounded-full bg-primary px-6 py-2.5 text-sm font-medium text-white hover:bg-primaryDark"
        >
          Donate another piece
        </Link>
        <Link
          href="/donate/donors"
          className="rounded-full border border-border bg-white px-6 py-2.5 text-sm font-medium text-text hover:bg-surface"
        >
          See the wall of donors
        </Link>
      </div>
    </section>
  );
}