import Link from "next/link";

import {
  verifyPaystackPayment,
} from "../../../lib/paystack/verifyPayment";

import PaymentSuccessClient from "./PaymentSuccessClient";


export const dynamic =
  "force-dynamic";


export default async function PaymentCallbackPage({
  searchParams,
}: {
  searchParams: Promise<{
    reference?: string;
    trxref?: string;
  }>;
}) {
  const params =
    await searchParams;


  const reference =
    params.reference ||
    params.trxref ||
    "";


  // =============================================
  // MISSING PAYMENT REFERENCE
  // =============================================

  if (!reference) {
    return (
      <main className="min-h-screen bg-[#fffaf4] text-[#2b2118]">

        <CustomerHeader />


        <section className="mx-auto max-w-3xl px-5 py-16 md:px-10 md:py-24">

          <div className="rounded-[32px] bg-white p-8 text-center shadow-sm md:p-12">

            <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-[#f1e5d8] text-3xl font-black">
              ?
            </div>


            <p className="mt-6 text-sm font-black uppercase tracking-[0.2em] text-[#9b6a44]">
              Payment Verification
            </p>


            <h1 className="mt-3 text-3xl font-black md:text-4xl">
              Payment Reference Missing
            </h1>


            <p className="mx-auto mt-4 max-w-lg leading-7 text-black/55">
              We could not identify the payment transaction.
              Please return to your order instead of making
              another payment immediately.
            </p>


            <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">

              <Link
                href="/order-tracking"
                className="inline-flex items-center justify-center rounded-full bg-[#2b2118] px-7 py-4 font-black text-white transition hover:opacity-90"
              >
                Track Your Order
              </Link>


              <Link
                href="/"
                className="inline-flex items-center justify-center rounded-full border border-[#2b2118] px-7 py-4 font-black transition hover:bg-[#2b2118] hover:text-white"
              >
                Return to PELCY
              </Link>

            </div>

          </div>

        </section>


        <CustomerFooter />

      </main>
    );
  }


  // =============================================
  // VERIFY PAYMENT WITH PAYSTACK
  // =============================================

  const verification =
    await verifyPaystackPayment(
      reference
    );


  // =============================================
  // VERIFICATION FAILED
  // =============================================

  if (
    !verification.success ||
    !verification.order
  ) {
    return (
      <main className="min-h-screen bg-[#fffaf4] text-[#2b2118]">

        <CustomerHeader />


        <section className="mx-auto max-w-3xl px-5 py-16 md:px-10 md:py-24">

          <div className="rounded-[32px] bg-white p-8 text-center shadow-sm md:p-12">

            <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-red-100 text-3xl font-black text-red-700">
              !
            </div>


            <p className="mt-6 text-sm font-black uppercase tracking-[0.2em] text-red-600">
              Payment Verification
            </p>


            <h1 className="mt-3 text-3xl font-black md:text-4xl">
              Payment Verification Failed
            </h1>


            <p className="mx-auto mt-4 max-w-lg leading-7 text-black/55">
              {verification.message}
            </p>


            <div className="mx-auto mt-6 max-w-lg rounded-[20px] bg-amber-50 px-5 py-4 text-sm font-semibold leading-6 text-amber-800">
              Do not make another payment yet.
              First check your order status or contact PELCY
              if you believe payment was already completed.
            </div>


            <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">

              <Link
                href="/order-tracking"
                className="inline-flex items-center justify-center rounded-full bg-[#2b2118] px-7 py-4 font-black text-white transition hover:opacity-90"
              >
                Check Order Status
              </Link>


              <Link
                href="/"
                className="inline-flex items-center justify-center rounded-full border border-[#2b2118] px-7 py-4 font-black transition hover:bg-[#2b2118] hover:text-white"
              >
                Return to PELCY
              </Link>

            </div>

          </div>

        </section>


        <CustomerFooter />

      </main>
    );
  }


  // =============================================
  // PAYMENT VERIFIED SUCCESSFULLY
  // =============================================

  return (
    <main className="min-h-screen bg-[#fffaf4] text-[#2b2118]">

      <CustomerHeader />


      <section className="mx-auto max-w-4xl px-5 py-12 md:px-10 md:py-16">

        <div className="mb-8">

          <div className="flex flex-wrap items-center gap-3 text-sm">

            <div className="flex items-center gap-2 rounded-full bg-[#f1e5d8] px-4 py-2 font-bold">

              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2b2118] text-xs text-white">
                ✓
              </span>

              Cart

            </div>


            <span className="text-black/25">
              →
            </span>


            <div className="flex items-center gap-2 rounded-full bg-[#f1e5d8] px-4 py-2 font-bold">

              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2b2118] text-xs text-white">
                ✓
              </span>

              Checkout

            </div>


            <span className="text-black/25">
              →
            </span>


            <div className="flex items-center gap-2 rounded-full bg-green-700 px-4 py-2 font-bold text-white">

              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs text-green-700">
                ✓
              </span>

              Payment Complete

            </div>

          </div>

        </div>


        <PaymentSuccessClient
          orderNumber={
            verification.order.orderNumber
          }
          customerName={
            verification.order.customerName
          }
          total={
            verification.order.total
          }
        />

      </section>


      <section className="border-t border-black/5 bg-[#f1e5d8]">

        <div className="mx-auto grid max-w-5xl gap-5 px-5 py-10 md:grid-cols-3 md:px-10">

          <InfoCard
            icon="✓"
            title="Payment Verified"
            text="Your payment has been securely verified."
          />


          <InfoCard
            icon="📦"
            title="Order Received"
            text="Your PELCY order is now ready for fulfilment processing."
          />


          <InfoCard
            icon="📍"
            title="Track Delivery"
            text="Use your order number and phone number to follow your delivery progress."
          />

        </div>

      </section>


      <CustomerFooter />

    </main>
  );
}


/* =============================================
   CUSTOMER HEADER
============================================= */

function CustomerHeader() {
  return (
    <header className="sticky top-0 z-50 border-b border-black/5 bg-[#fffaf4]/95 backdrop-blur">

      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-10">

        <Link
          href="/"
          className="text-2xl font-black tracking-[0.22em]"
        >
          PELCY
        </Link>


        <nav className="hidden items-center gap-8 text-sm font-medium md:flex">

          <Link
            href="/"
            className="transition hover:opacity-60"
          >
            Home
          </Link>


          <Link
            href="/#products"
            className="transition hover:opacity-60"
          >
            Products
          </Link>


          <Link
            href="/order-tracking"
            className="font-bold transition hover:opacity-60"
          >
            Track Order
          </Link>

        </nav>


        <Link
          href="/order-tracking"
          className="rounded-full bg-[#2b2118] px-5 py-3 text-sm font-black text-white transition hover:opacity-90"
        >
          Track Order
        </Link>

      </div>

    </header>
  );
}


/* =============================================
   INFO CARD
============================================= */

function InfoCard({
  icon,
  title,
  text,
}: {
  icon: string;
  title: string;
  text: string;
}) {
  return (
    <div className="rounded-[24px] bg-white p-6">

      <div className="text-2xl">
        {icon}
      </div>


      <h3 className="mt-4 font-black">
        {title}
      </h3>


      <p className="mt-2 text-sm leading-6 text-black/50">
        {text}
      </p>

    </div>
  );
}


/* =============================================
   CUSTOMER FOOTER
============================================= */

function CustomerFooter() {
  return (
    <footer className="bg-[#19130f] text-white">

      <div className="mx-auto flex max-w-7xl flex-col justify-between gap-7 px-5 py-10 md:flex-row md:items-center md:px-10">

        <div>

          <p className="text-xl font-black tracking-[0.2em]">
            PELCY
          </p>

          <p className="mt-2 text-sm text-white/45">
            Fresh goodness, delivered.
          </p>

        </div>


        <div className="flex flex-wrap gap-5 text-sm text-white/60">

          <Link
            href="/"
            className="hover:text-white"
          >
            Home
          </Link>


          <Link
            href="/#products"
            className="hover:text-white"
          >
            Products
          </Link>


          <Link
            href="/order-tracking"
            className="hover:text-white"
          >
            Track Order
          </Link>

        </div>


        <p className="text-sm text-white/45">
          © 2026 PELCY. All rights reserved.
        </p>

      </div>

    </footer>
  );
}