import Link from "next/link";
import { notFound } from "next/navigation";
import { AdminPageHeader, StatusBadge } from "@/components/admin/admin-ui";
import { RegistrationSupportActions } from "@/components/admin/registration-support-actions";
import { getAdminRegistration } from "@/lib/admin-data";
import { formatAdminCurrency, formatAdminDate } from "@/lib/admin-format";

export default async function RegistrationSupportPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const registration = await getAdminRegistration(id);
  if (!registration) notFound();

  return (
    <div className="min-h-[42rem] pb-8">
      <AdminPageHeader
        eyebrow="Registration support"
        title={registration.participant}
        description="Resolve this booking first, then use account recovery only when the normal self-service flow cannot work."
        action={
          <Link href="/admin/registrations" className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500 transition hover:text-[#1D4ED8]">
            <span className="material-symbols-outlined text-[18px]">arrow_back</span>
            Registrations
          </Link>
        }
      />

      <div className="mt-6 grid gap-5 xl:grid-cols-[1.2fr_0.8fr]">
        <section className="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-xs sm:p-7">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div>
              <p className="text-[10px] font-extrabold uppercase tracking-[0.13em] text-slate-400">Event</p>
              <h2 className="mt-1 text-2xl font-bold tracking-tight text-[#0D1B2A]">{registration.eventTitle}</h2>
              <p className="mt-1 text-xs text-slate-500">{formatAdminDate(registration.eventStartsAt, true)}</p>
            </div>
            <StatusBadge value={registration.registrationStatus} />
          </div>

          <dl className="mt-6 grid gap-x-8 gap-y-5 sm:grid-cols-2">
            {[
              ["Participant", registration.participant],
              ["Participant type", registration.participantType],
              ["Account owner", registration.registeredByName],
              ["Email", registration.registeredBy],
              ["Phone", registration.phone || "Not provided"],
              ["Account role", registration.accountRole.replaceAll("_", " ")],
              ["Booked", formatAdminDate(registration.createdAt, true)],
              ["Amount", formatAdminCurrency(registration.amountCents)],
            ].map(([label, value]) => (
              <div key={label}>
                <dt className="text-[10px] font-extrabold uppercase tracking-[0.13em] text-slate-400">{label}</dt>
                <dd className="mt-1 text-sm font-semibold capitalize text-[#0D1B2A]">{value}</dd>
              </div>
            ))}
          </dl>

          <div className="mt-6 grid gap-3 sm:grid-cols-3">
            <div className="rounded-xl border border-slate-100 bg-slate-50 p-4">
              <p className="text-[10px] font-extrabold uppercase tracking-[0.12em] text-slate-400">Payment</p>
              <div className="mt-2"><StatusBadge value={registration.paymentStatus} /></div>
            </div>
            <div className="rounded-xl border border-slate-100 bg-slate-50 p-4">
              <p className="text-[10px] font-extrabold uppercase tracking-[0.12em] text-slate-400">Account</p>
              <div className="mt-2"><StatusBadge value={registration.accountStatus} /></div>
            </div>
            <div className="rounded-xl border border-slate-100 bg-slate-50 p-4">
              <p className="text-[10px] font-extrabold uppercase tracking-[0.12em] text-slate-400">Email</p>
              <p className="mt-2 text-xs font-semibold text-[#0D1B2A]">{registration.emailVerifiedAt ? "Verified" : "Not verified"}</p>
            </div>
          </div>
          {registration.paymentId && (
            <Link
              href={`/admin/payments/${registration.paymentId}`}
              className="mt-6 inline-flex items-center gap-1.5 text-xs font-semibold text-[#1D4ED8] transition hover:text-[#2563EB]"
            >
              Open payment and refund controls
              <span className="material-symbols-outlined text-[17px]">arrow_forward</span>
            </Link>
          )}
        </section>

        <RegistrationSupportActions
          registrationId={registration.id}
          registrationStatus={registration.registrationStatus}
        />
      </div>
    </div>
  );
}