"use client";

import { useEffect, useState } from "react";
import { Loader2, CheckCircle2, XCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import axiosInstance from "@/lib/axios";
import axios from "axios";
import Image from "next/image";

export default function VerifyAddressPaymentPage({}: {}) {
  const searchParams = useSearchParams();
  const reference = searchParams.get("reference");
  const trxref = searchParams.get("trxref");

  const [status, setStatus] = useState<"verifying" | "success" | "failed">(
    "verifying"
  );
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  const verifyPayment = async () => {
      console.log("does this code even work?");
      if (!reference || !trxref) {
        setStatus("failed");
        return;
      }

       const userToken = localStorage.getItem('userToken')
        const apiUrl = process.env["NEXT_PUBLIC_DEV_URL"];

      try {
        const res = await axiosInstance.post(`/paystack/address/verify`, {
          reference,
          trxref,
        },  {
        // headers: {
        //   Authorization: `Bearer ${userToken}`,
        //   'Content-Type': 'application/json',
        // },
      });

        if (res.data.status === "success") {
          console.log("it ran");
          setStatus("success");
        } else {
          setStatus("failed");
        }
      } catch (err) {
        console.log("it err ran");
        console.error("Verification error:", err);
        setStatus("failed");
      }
    };

  useEffect(() => {
    

    verifyPayment();
  }, []);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center text-center px-6">
      {status === "verifying" && (
        <>
          <Loader2 className="h-12 w-12 animate-spin text-[#EF2424] mb-4" />
          <h2 className="text-xl font-semibold">Verifying your payment...</h2>
          <p className="text-gray-500 mt-2">
            Please wait while we confirm your transaction.
          </p>
        </>
      )}

      {status === "success" && (
        <div className="md:w-[699px] w-[85%]  h-[300px] bg-white rounded-[8px] flex items-center justify-center flex-col">
          <Image src='/images/CheckMark.svg' alt="" width={100} height={100} objectFit="cover"/>
          <h2 className="text-xl font-semibold">
            Payment Successful
          </h2>
          <Link href="/user/dashboard" className="w-full">
            <Button className="bg-[#666666] text-white h-12 md:px-10 px-4 cursor-pointer mt-6 md:w-[60%] w-full">
              Done
            </Button>
          </Link>
        </div>
      )}

      {status === "failed" && (
       <div className="md:w-[699px] w-[85%] h-[300px] bg-white rounded-[8px] flex items-center justify-center flex-col">
          <Image src='/images/Cancel.svg' alt="" width={100} height={100} objectFit="cover"/>
          <h2 className="text-xl font-semibold">
            Payment Failed
          </h2>
          <Link href="/user/dashboard" className="w-full">
          <Button className="bg-[#f2f2f2] text-black h-12 md:px-10 mb-4 px-4 cursor-pointer mt-6 md:w-[60%] w-full" onClick={() => verifyPayment()}>
              Re-verify Transaction
            </Button>
            <Button className="bg-[#666666] text-white h-12 md:px-10 px-4 cursor-pointer mt-6 md:w-[60%] w-full">
              Done
            </Button>
          </Link>
        </div>
      )}
    </div>
  );
}
