"use client";

import {
  useEffect,
  useRef,
} from "react";

import Link from "next/link";

import {
  useCart,
} from "../../context/CartContext";


export default function PaymentSuccessClient({
  orderNumber,
  customerName,
  total,
}: {
  orderNumber: string;
  customerName: string;
  total: number;
}) {
  const {
    clearCart,
  } = useCart();

  const cartClearedRef =
    useRef(false);


  useEffect(() => {
    if (
      cartClearedRef.current
    ) {
      return;
    }

    cartClearedRef.current =
      true;

    clearCart();
  }, [
    clearCart,
  ]);


  return (
    <div className="mx-auto max-w-2xl rounded-[32px] bg-white p-8 text-center shadow-sm md:p-10">

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


      <p className="mt-6 text-sm font-black uppercase tracking-[0.2em] text-green-700">
        Payment Successful
      </p>


      <h1 className="mt-3 text-4xl font-black">
        Thank You
        {customerName
          ? `, ${customerName}`
          : ""}
      </h1>


      <p className="mt-4 text-black/55">
        Your payment has been verified and
        your PELCY order has been received.
      </p>


      <div className="mt-8 rounded-[24px] bg-[#fffaf4] p-6 text-left">

        <div className="flex justify-between gap-5">

          <span className="text-black/50">
            Order Number
          </span>

          <strong className="text-right">
            {orderNumber}
          </strong>

        </div>


        <div className="mt-4 flex justify-between gap-5">

          <span className="text-black/50">
            Amount Paid
          </span>

          <strong className="text-xl">
            ₦
            {Number(
              total
            ).toLocaleString(
              "en-NG"
            )}
          </strong>

        </div>


        <div className="mt-4 flex justify-between gap-5">

          <span className="text-black/50">
            Payment Status
          </span>

          <strong className="text-green-700">
            PAID
          </strong>

        </div>

      </div>


      <p className="mt-6 text-sm text-black/50">
        Keep your order number safe. You will need
        it together with your phone number to track
        your order.
      </p>


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

        <Link
          href="/order-tracking"
          className="inline-flex items-center justify-center rounded-full bg-[#a46b2a] px-8 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 bg-[#2b2118] px-8 py-4 font-black text-white transition hover:opacity-90"
        >
          Return to PELCY
        </Link>

      </div>

    </div>
  );
}