"use client";

import Link from "next/link";
import { useRooSports } from "@/components/app-provider";
import { getPublicChildDisplay } from "@/lib/privacy";

export default function BookingSuccessPage() {
  const { bookings, children, role, user, getLiveEvent } = useRooSports();
  const booking = [...bookings].reverse().find((item) => item.status === "confirmed");
  const event = booking ? getLiveEvent(booking.eventId) : undefined;
  const child = booking ? children.find((item) => item.id === booking.participantId) : undefined;
  const participant =
    role === "parent"
      ? child
        ? getPublicChildDisplay(child)
        : "Athlete"
      : user
        ? `${user.firstName} (me)`
        : "Me";

  return (
    <div className="mx-auto max-w-3xl py-4 text-[#0b0f12] sm:py-10">
      <section className="rs-soft-panel overflow-hidden rounded-[2.6rem] text-center">
        <div className="relative overflow-hidden bg-[#dfecef] px-6 py-12">
          <span className="absolute -right-12 -top-16 h-48 w-48 rounded-full bg-[#ffd47e]/70" />
          <span className="absolute right-2 top-2 h-28 w-28 rounded-full border-[18px] border-white/38" />
          <span className="material-symbols-outlined relative fill text-7xl text-[#ef7d00]">check_circle</span>
          <p className="relative mt-4 text-xs font-bold uppercase tracking-[0.18em] text-[#617078]">You are booked</p>
          <h1 className="relative mt-2 text-3xl font-extrabold tracking-[-0.05em] sm:text-5xl">See you on the field.</h1>
        </div>
        <div className="bg-white/35 p-6 sm:p-10">
          {event ? (
            <>
              <h2 className="text-xl font-bold">{event.title}</h2>
              <p className="mt-2 text-sm text-[#647283]">
                {event.dateLabel} at {event.time} · {event.venue}
              </p>
              <div className="mx-auto mt-7 grid max-w-md gap-3 rounded-[1.6rem] bg-white/48 p-5 text-left text-sm">
                <p className="flex justify-between gap-4">
                  <span className="text-[#6a7888]">Participant</span>
                  <strong>{participant}</strong>
                </p>
                <p className="flex justify-between gap-4">
                  <span className="text-[#6a7888]">Status</span>
                  <strong className="text-[#267044]">Confirmed</strong>
                </p>
                <p className="flex justify-between gap-4">
                  <span className="text-[#6a7888]">Payment</span>
                  <strong>
                    {booking?.paymentStatus === "not_required"
                      ? "Not required"
                      : booking?.paymentStatus === "paid"
                        ? "Paid"
                        : "Pending"}
                  </strong>
                </p>
                <p className="flex justify-between gap-4">
                  <span className="text-[#6a7888]">Players joined</span>
                  <strong>
                    {event.joined}/{event.capacity}
                  </strong>
                </p>
              </div>
            </>
          ) : (
            <p className="text-sm text-[#647283]">Your booking has been saved.</p>
          )}
          <div className="mt-7 grid gap-3 sm:grid-cols-2">
            <Link href="/my-events" className="rs-primary-action rounded-full px-5 py-3.5 text-sm font-bold">
              View My Events
            </Link>
            <Link href="/discover" className="rs-secondary-action rounded-full px-5 py-3.5 text-sm font-bold">
              Find another activity
            </Link>
          </div>
          <p className="mt-6 text-xs leading-5 text-[#738091]">
            Public lists show nicknames or athlete IDs only—never a child&apos;s full legal name.
          </p>
        </div>
      </section>
    </div>
  );
}