"use client";
import React, { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
} from "../ui/dialog";
import {  useRouter, useSearchParams } from "next/navigation";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import CheckoutForm from "../cards/checkoutForm";
import { Icons } from '../icons';

interface PaymentModalProps {
  open: boolean;
  setOpen: (open: boolean) => void;
  price: number;
  clientSecret: string;
  stripePublishableKey?: string;
  onSuccess?: () => void;
}

const PaymentModal = ({ 
  open, 
  setOpen, 
  price, 
  clientSecret: propClientSecret,
  stripePublishableKey,
  onSuccess 
}: PaymentModalProps) => {
  const searchParams = useSearchParams();
  const router = useRouter();
  
  const [stripePromise, setStripePromise] = useState<any>(null);
  const [clientSecret, setClientKey] = useState("");
  
  const appearance: any = {
    variables: {
      colorPrimary: "#2878F7",
    },
    rules: {
      ".Input:focus": {
        boxShadow: "none",
      },
      ".Input--invalid": {
        boxShadow: "none",
      },
    },
  };

  useEffect(() => {
    const initializeStripe = async () => {
      const key = stripePublishableKey;
      
      if (!key) {
        console.error("Stripe publishable key is not available");
        return;
      }
      
      try {
        const stripe = await loadStripe(key);
        setStripePromise(stripe);
      } catch (error) {
        console.error("Failed to load Stripe:", error);
      }
    };

    initializeStripe();
  }, [stripePublishableKey]);

  // Set client secret from props or sessionStorage
  useEffect(() => {
    const clientSecrets = propClientSecret || sessionStorage.getItem("clientSecret") || '';
    setClientKey(clientSecrets);
    
    return () => {
      setClientKey("");
    };
  }, [propClientSecret]);

  useEffect(() => {
    const handlePopState = () => {
      setOpen(false);
      router.back();
    };

    window.addEventListener("popstate", handlePopState);

    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);

  const handleClose = () => {
    setClientKey("");
    sessionStorage.removeItem('clientSecret');
    setOpen(false);
  };

  return (
    <Dialog open={open}>
      <DialogContent className="gap-0 max-h-[500px]">
        <div className="flex justify-end ">
          <span
            className="p-0 bg-transparent cursor-pointer border-0 shadow-none"
            onClick={handleClose}
          >
            <Icons.CrossIcon />
          </span>
        </div>
        {clientSecret && stripePromise && (
          <Elements
            stripe={stripePromise}
            options={{ clientSecret, appearance }}
          >
            <CheckoutForm 
              price={price} 
              onSuccess={onSuccess}
            />
          </Elements>
        )}
        {!stripePromise && clientSecret && (
          <div className="flex items-center justify-center p-4">
            <p className="text-gray-500">Loading payment gateway...</p>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
};

export default PaymentModal;