import Link from "next/link";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function BookingSuccessPage({
  searchParams,
}: {
  searchParams: Promise<{ session_id?: string }>;
}) {
  const { session_id: sessionId } = await searchParams;

  const booking = sessionId
    ? await prisma.booking.findUnique({
        where: { stripeSessionId: sessionId },
        include: { service: true },
      })
    : null;

  return (
    <section className="px-6 py-24 text-center">
      <div className="mx-auto max-w-lg">
        <p className="text-xs uppercase tracking-wide-plus text-rose-dark">Booking Confirmed</p>
        <h1 className="mt-3 font-display text-4xl text-rosewood">
          {booking?.status === "paid" ? "You're all set!" : "Thanks &mdash; almost there"}
        </h1>

        {booking ? (
          <div className="mt-8 rounded-2xl bg-blush p-8 text-left">
            <p className="font-display text-xl text-rosewood">{booking.service.name}</p>
            <p className="mt-2 text-sm text-ink/70">
              {booking.date} at {booking.startTime}
            </p>
            <p className="mt-2 text-sm text-ink/70">
              A confirmation has been sent to {booking.customerEmail}.
            </p>
            {booking.status !== "paid" && (
              <p className="mt-4 text-sm text-rose-dark">
                We&apos;re still confirming your payment with Stripe &mdash; this page will
                update shortly. Refresh in a moment if the status doesn&apos;t change.
              </p>
            )}
          </div>
        ) : (
          <p className="mt-6 text-sm text-ink/70">
            We couldn&apos;t find that booking. If you completed payment, check your email for
            confirmation.
          </p>
        )}

        <Link
          href="/"
          className="mt-10 inline-block rounded-full bg-rosewood px-8 py-3 text-xs uppercase tracking-wide-plus text-cream transition hover:bg-rose-dark"
        >
          Back to Home
        </Link>
      </div>
    </section>
  );
}
