import Link from "next/link";
import { notFound } from "next/navigation";
import { AdminPageHeader, StatusBadge } from "@/components/admin/admin-ui";
import { PaymentActions } from "@/components/admin/payment-actions";
import { getAdminPayment } from "@/lib/admin-data";
import { formatAdminCurrency, formatAdminDate } from "@/lib/admin-format";

export default async function AdminPaymentPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const payment = await getAdminPayment(id);
  if (!payment) notFound();

  return (
    <div className="min-h-[42rem] pb-8">
      <AdminPageHeader
        eyebrow="Payment review"
        title={`${payment.participant} · ${formatAdminCurrency(payment.amountCents)}`}
        description={`${payment.eventTitle} · ${formatAdminDate(payment.eventStartsAt, true)}`}
        action={
          <div className="flex items-center gap-4">
            <StatusBadge value={payment.requiresRefund ? "refund-required" : payment.status} />
            <Link href="/admin/payments" 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>
              Payments
            </Link>
          </div>
        }
      />
      <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="grid gap-3 sm:grid-cols-3">
            {[
              ["Collected", formatAdminCurrency(payment.amountCents)],
              ["Refunded", formatAdminCurrency(payment.refundedCents)],
              ["Refundable", formatAdminCurrency(payment.refundableCents)],
            ].map(([label, value]) => (
              <div key={label} 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">{label}</p>
                <p className="mt-1 text-xl font-bold tracking-tight text-[#0D1B2A]">{value}</p>
              </div>
            ))}
          </div>
          <dl className="mt-6 grid gap-x-8 gap-y-5 sm:grid-cols-2">
            {[
              ["Account owner", payment.accountName],
              ["Email", payment.accountEmail],
              ["Provider", payment.provider],
              ["Provider reference", payment.providerPaymentId || "Not supplied"],
              ["Payment created", formatAdminDate(payment.createdAt, true)],
              ["Paid at", formatAdminDate(payment.paidAt, true)],
              ["Registration status", payment.registrationStatus.replaceAll("_", " ")],
              ["Event status", payment.eventStatus.replaceAll("_", " ")],
            ].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>
          <Link href={`/admin/registrations/${payment.registrationId}`} className="mt-6 inline-flex items-center gap-1.5 text-xs font-semibold text-[#1D4ED8] transition hover:text-[#2563EB]">
            Open registration support
            <span className="material-symbols-outlined text-[17px]">arrow_forward</span>
          </Link>

          <div className="mt-8 border-t border-slate-100 pt-6">
            <div className="flex items-center justify-between gap-4">
              <div>
                <p className="text-[10px] font-extrabold uppercase tracking-[0.16em] text-[#F97316]">Refund history</p>
                <h2 className="mt-0.5 text-lg font-bold tracking-tight text-[#0D1B2A]">Every adjustment stays visible</h2>
              </div>
              <span className="text-xs font-medium text-slate-400">{payment.refunds.length} record(s)</span>
            </div>
            {payment.refunds.length === 0 ? (
              <p className="mt-4 rounded-xl border border-slate-100 bg-slate-50 p-4 text-sm text-slate-500">No refunds have been issued for this payment.</p>
            ) : (
              <div className="mt-4 divide-y divide-slate-100">
                {payment.refunds.map((refund) => (
                  <article key={refund.id} className="grid gap-3 py-3.5 sm:grid-cols-[0.8fr_1fr_1.4fr_auto] sm:items-center">
                    <div>
                      <p className="text-sm font-bold text-[#0D1B2A]">{formatAdminCurrency(refund.amountCents)}</p>
                      <p className="mt-0.5 text-[11px] text-slate-400">{formatAdminDate(refund.createdAt, true)}</p>
                    </div>
                    <p className="text-xs font-semibold capitalize text-slate-700">{refund.reason.replaceAll("_", " ")}</p>
                    <p className="text-xs leading-5 text-slate-500">{refund.notes || "No internal notes"}{refund.processedBy ? ` · ${refund.processedBy}` : ""}</p>
                    <StatusBadge value={refund.status} />
                  </article>
                ))}
              </div>
            )}
          </div>
        </section>
        <PaymentActions paymentId={payment.id} provider={payment.provider} status={payment.status} refundableCents={payment.refundableCents} refunds={payment.refunds} />
      </div>
    </div>
  );
}