import Link from "next/link";
import { CheckCircle2 } from "lucide-react";
import { ClearCartOnSuccess } from "@/components/ClearCartOnSuccess";
import { prisma } from "@/lib/prisma";
import { currency } from "@/lib/utils";

function paymentCopy(status?: string) {
  if (status === "PAID") return "Payment confirmed.";
  if (status === "FAILED") return "Payment could not be completed.";
  if (status === "REFUNDED") return "Payment refunded.";
  return "Payment pending / submitted for review.";
}

export default async function PaymentSuccessPage({ searchParams }: { searchParams: { order?: string } }) {
  const order = searchParams.order
    ? await prisma.order.findUnique({ where: { orderNumber: searchParams.order }, include: { items: true } })
    : null;
  const paid = order?.paymentStatus === "PAID";

  return (
    <section className="container-grid py-16">
      <ClearCartOnSuccess active={paid} />
      <div className="mx-auto max-w-2xl rounded border border-[#E5E1D8] bg-white p-8 text-center shadow-sm">
        <div className="mx-auto grid h-14 w-14 place-items-center rounded-full bg-[#E8F5F2] text-[#0F766E]">
          <CheckCircle2 size={30} />
        </div>
        <h1 className="mt-5 text-3xl font-black">{paid ? "Payment Confirmed" : "Order Submitted"}</h1>
        <p className="mt-3 text-[#666]">{paid ? "Your payment was captured successfully and the order is now in fulfillment review." : "Your order request was received and is ready for fulfillment review."}</p>

        <div className="mt-5 grid gap-3 rounded bg-[#F7F5EF] p-4 text-left">
          <div>
            <span className="text-sm text-[#666]">Order number</span>
            <div className="font-black">{order?.orderNumber || searchParams.order || "Pending assignment"}</div>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <div>
              <span className="text-sm text-[#666]">Payment status</span>
              <div className="font-black">{order ? paymentCopy(order.paymentStatus) : "Order lookup pending."}</div>
            </div>
            <div>
              <span className="text-sm text-[#666]">Fulfillment status</span>
              <div className="font-black">{order?.fulfillmentStatus || "Pending review"}</div>
            </div>
          </div>
        </div>

        {order?.paymentStatus === "PENDING" ? (
          <div className="mt-4 rounded border border-[#D8C98F] bg-[#FFF9E8] p-4 text-left text-sm text-[#5F4709]">
            Payment is not finalized yet. Our team will review this order and coordinate the next payment or fulfillment step.
          </div>
        ) : null}

        {order ? (
          <div className="mt-5 rounded border border-[#E5E1D8] p-4 text-left">
            <h2 className="font-black">Order summary</h2>
            <div className="mt-3 grid gap-2 text-sm">
              {order.items.map((item) => (
                <div key={item.id} className="flex justify-between gap-3">
                  <span>{item.productNameSnapshot} x {item.quantity}</span>
                  <strong>{currency(Number(item.totalSalePriceSnapshot) * item.quantity)}</strong>
                </div>
              ))}
            </div>
            <div className="mt-3 flex justify-between border-t border-[#E5E1D8] pt-3 font-black">
              <span>Total</span>
              <span>{currency(String(order.grandTotal))}</span>
            </div>
          </div>
        ) : null}

        <div className="mt-6 rounded border border-[#E5E1D8] p-4 text-left">
          <h2 className="font-black">Next steps</h2>
          <ol className="mt-3 grid gap-2 text-sm text-[#555]">
            <li>1. Your order is reviewed by our fulfillment team.</li>
            <li>2. Payment status and inventory details are confirmed.</li>
            <li>3. Fulfillment coordination and tracking are provided when available.</li>
          </ol>
        </div>
        <Link href="/products" className="btn btn-primary mt-6">View More Products</Link>
      </div>
    </section>
  );
}