import { notFound, redirect } from "next/navigation";
import { db } from "@/lib/db";
import { getPublicConference } from "@/lib/conference";
import { formatMoney } from "@/lib/utils";
import { Card } from "@/components/ui";
import { mockPayAction } from "../../register/actions";

export const metadata = { title: "Payment" };

export default async function PayPage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string; regId: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const { slug, regId } = await params;
  const { error } = await searchParams;
  const conf = await getPublicConference(slug);
  const registration = await db.registration.findUnique({
    where: { id: regId },
    include: { ticketType: true },
  });
  if (!registration || registration.conferenceId !== conf.id) notFound();
  if (registration.status === "CONFIRMED") redirect(`/c/${slug}/ticket/${registration.regCode}`);

  const paySuccess = mockPayAction.bind(null, slug, regId, "success");
  const payFailure = mockPayAction.bind(null, slug, regId, "failure");

  return (
    <main className="mx-auto max-w-md px-4 py-16">
      <Card className="overflow-hidden">
        <div className="border-b border-zinc-800 px-6 py-4" style={{ background: `${conf.primaryColor}14` }}>
          <div className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Secure checkout · mock gateway</div>
          <div className="mt-1 font-semibold text-zinc-100">{conf.name}</div>
        </div>
        <div className="space-y-3 px-6 py-5 text-sm">
          {error && (
            <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-red-600">
              Payment failed. No money was deducted — please try again.
            </div>
          )}
          <div className="flex justify-between"><span className="text-zinc-500">Pass</span><span className="font-medium text-zinc-200">{registration.ticketType.name}</span></div>
          <div className="flex justify-between"><span className="text-zinc-500">Attendee</span><span className="font-medium text-zinc-200">{registration.name}</span></div>
          <div className="flex justify-between"><span className="text-zinc-500">Registration ID</span><span className="font-mono text-zinc-300">{registration.regCode}</span></div>
          {registration.amount !== registration.ticketType.price && (
            <div className="flex justify-between"><span className="text-zinc-500">Coupon applied</span><span className="text-emerald-600">−{formatMoney(registration.ticketType.price - registration.amount)}</span></div>
          )}
          <div className="flex justify-between border-t border-zinc-800 pt-3 text-base">
            <span className="font-medium text-zinc-300">Total</span>
            <span className="font-bold text-zinc-100">{formatMoney(registration.amount)}</span>
          </div>
        </div>
        <div className="space-y-2 px-6 pb-6">
          <form action={paySuccess}>
            <button className="w-full rounded-lg py-2.5 text-sm font-semibold text-white transition hover:opacity-90" style={{ background: conf.primaryColor }}>
              Pay {formatMoney(registration.amount)}
            </button>
          </form>
          <form action={payFailure}>
            <button className="w-full rounded-lg border border-zinc-700 py-2 text-xs text-zinc-500 transition hover:bg-zinc-800">
              Simulate failed payment
            </button>
          </form>
          <p className="pt-1 text-center text-[11px] text-zinc-600">
            This build ships a Razorpay/Stripe-shaped mock gateway — no real money moves.
          </p>
        </div>
      </Card>
    </main>
  );
}