"use client";

import {
  useStripe,
  useElements,
  PaymentElement,
} from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
import { useGlobalContext } from "@/context/Provider";
import { Button } from "../ui/button";
import { useRouter, useSearchParams } from "next/navigation";
import Loader from "../common/loader";

const CheckoutForm = ({ price }: any) => {
  const { Toast } = useGlobalContext();
  const searchParams = useSearchParams();
  const orderId = sessionStorage.getItem("orderId");
  const queryParams = Object.fromEntries(searchParams.entries());
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      setLoading(true);

      if (!stripe || !elements) {
        Toast.error(
          "Payment service is not available. Please try again later."
        );
        return;
      }

      const baseUrl = window.location.origin;
      const currentPath = window.location.pathname;

      let returnUrl = `${baseUrl}/orderDetail?id=${orderId}`;

      if (currentPath.includes("wallet")) {
        returnUrl = `${baseUrl}/wallet`;
      } else if (currentPath.match(/\/dineout\/[^/]+\/slots/)) {
        returnUrl = `${baseUrl}/home`;
      }

      const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: returnUrl,
        },
      });

      if (error) {
        throw new Error(error.message || "Payment confirmation error.");
      }

    } catch (error: any) {
      const errorMessage =
        typeof error === "string"
          ? error
          : error?.message || "An unexpected error occurred.";
      Toast.error(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const fetchIntentStatus = async () => {
      if (!stripe) return;

      const clientSecret = sessionStorage.getItem("clientSecret");
      if (!clientSecret) return;

      const { paymentIntent } =
        await stripe.retrievePaymentIntent(clientSecret);
      sessionStorage.removeItem("clientSecret");

      switch (paymentIntent?.status) {
        case "succeeded":
          setMessage("Payment succeeded!");
          break;
        case "processing":
          setMessage("Your payment is processing.");
          break;
        case "requires_payment_method":
          setMessage("Your payment was not successful, please try again.");
          break;
        default:
          setMessage("Something went wrong.");
          break;
      }
    };

    fetchIntentStatus();
  }, [stripe]);

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <div className="w-full max-h-[400px] overflow-x-hidden overflow-y-scroll">
          <PaymentElement id="payment-element" />
        </div>
        <div className="w-full">
          <div className="pt-4 flex justify-end">
            <Button
              variant="default"
              className="px-4 mb-3 theme-background text-white d-flex align-items-center justify-content-center"
              type="submit"
              disabled={!stripe || !elements || loading}
            >
              <Loader loading={loading} />
              Pay ${price}
            </Button>
          </div>
          {/* {message && (
            <div className="text-sm text-gray-600 text-right pt-2">
              {message}
            </div>
          )} */}
        </div>
      </div>
    </form>
  );
};

export default CheckoutForm;