import { useState } from 'react';
import { CardElement, useStripe, useElements, CardCvcElement, CardNumberElement, CardExpiryElement } from '@stripe/react-stripe-js';
import GradientBorderButton from '@/Component/Common/Forms/GradientBorderButton';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import { LoaderSVG, PayNowSVG } from '@/Component/Common/SVGs/CommonSVG';
import { BaseURL, PaymentSecretAPI, SaveCardAPI } from '@/Utils/APIRequest/Endpoints';
import { CustomToast } from '@/Utils/CustomToast';
import usePost from '@/Utils/Hooks/usePost';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import Cookies from 'js-cookie';

const ActivePlanStepTwo = (props) => {
  const { setModal, refetch, setCardType, translations } = props
  const stripe: any = useStripe();
  const elements: any = useElements();
  const [loader, setLoader] = useState(false);

  const getResponsiveFontSize = () => {
    if (typeof window === 'undefined') return '16px';
    const screenWidth = window.innerWidth;
    if (screenWidth < 480) return '13px';
    return '16px';
  };
  const appearance = {
    theme: 'night',
    variables: {
      colorPrimary: '#0570de',
      colorBackground: '#ffffff',
      colorText: '#30313d',
      colorDanger: '#df1b41',
      fontFamily: 'Ideal Sans, system-ui, sans-serif',
      spacingUnit: '2px',
      borderRadius: '4px',
      // See all possible variables below
    }
  };
  const cardElementOptions: any = {
    showIcon: true,
    iconStyle: "solid",
    style: {
      theme: "night",
      base: {
        '.Label--floating': {
          backgroundColor: "MenuIcon"
        },
        '.Input': {
          borderColor: '#E0E6EB',
          backGround: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)',
        },
        fontSize: getResponsiveFontSize(),
        iconColor: "blue",
        color: '#424770',
        '::placeholder': {
          color: '#aab7c4',
        },
      },
      invalid: {
        color: '#9e2146',
      },
      complete: {
        color: "green"
      },
      // theme: 'night',
      variables: { colorPrimaryText: '#262626' }
    },
  };

  // API POST
  const { isPending, mutate } = usePost(SaveCardAPI, null, (response) => {
    setLoader((prev) => !prev)
    if (response.status == 200 || response.status == 201) {
      refetch();
      CustomToast("success", 'Card Save Successfully')
      setCardType("card_list")
    }
  }, null)

  // const handleSubmit = async (e) => {
  //   e.preventDefault()
  //   setLoader((prev) => !prev)
  //   const cardElement = elements.getElement(CardCvcElement, CardNumberElement, CardExpiryElement, appearance);

  //   const { error, paymentMethod } = await stripe.createPaymentMethod({
  //     type: 'card',
  //     card: cardElement,
  //   });

  //   if (error) {
  //     setLoader((prev) => !prev)
  //     CustomToast("error", error?.message)
  //   } else if (paymentMethod?.id) {
  //     setLoader((prev) => !prev)
  //     let obj: any = {
  //       "source_id": paymentMethod?.id
  //     }
  //     mutate(obj)
  //   }
  // }

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoader(true);

    const cardElement = elements.getElement(CardCvcElement, CardNumberElement, CardExpiryElement, appearance);

    try {
      // Get setupIntent secret from your backend
      const token = Cookies.get("bat") || Cookies.get("verifyUAT");
      const response = await fetch(`${BaseURL}${PaymentSecretAPI}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        }
      });

      const { data } = await response.json();

      const result = await stripe.confirmCardSetup(data, {
        payment_method: {
          card: cardElement
        },
      });

      if (result.error) {
        CustomToast("error", result.error.message);
        setLoader(false);
      } else {
        // Success - send payment_method.id
        const paymentMethodId = result.setupIntent.payment_method;
        let obj: any = {
          "source_id": paymentMethodId
        }
        mutate(obj);
      }
    } catch (error) {
      console.error("Setup Intent error:", error);
      CustomToast("error", "Something went wrong while saving your card.");
      setLoader(false);
    }
  };


  return (
    <>
      {/* border-b border-lightGray */}
      <div className=" pb-5">
        <div className="flex items-center gap-5">
          <PayNowSVG customClass="min-w-14 min-h-14" />
          <div>
            <h2 className="2xl:text-xl text-lg font-bold text-black leading-tight">{translations?.addNewCard}</h2>
            {/* <p className="text-sm font-normal text-black">Lorem ipsum dolor sit amet consectetur. Sem massa volutpat nec fermentum. Ipsum volutpat nibh tincidunt suspendisse in condimentum lacus quam. Ornare nulla aenean consectetur turpis. Mattis eu eget ultrices vitae. </p> */}
          </div>
        </div>
      </div>
      <form onSubmit={handleSubmit}>
        <div className="grid col-cols-12 gap-2 pt-5">
          {/* <CardElement options={cardElementOptions} /> */}
          <div className="relative col-span-12 ">
            <label htmlFor="" className="absolute left-2 text-xs block -top-3 text-primary bg-white p-1">{translations?.cardNumber}</label>
            <CardNumberElement options={cardElementOptions} className="border border-gray rounded-xl p-3 mb-2" />
          </div>
          <div className="relative col-span-6 border border-gray rounded-xl p-3 mb-2">
            <label htmlFor="" className="absolute left-2 text-xs block -top-3 text-primary bg-white p-1">{translations?.expireDate}</label>
            <CardExpiryElement options={cardElementOptions} className="" />
          </div>
          <div className="relative col-span-6 border border-gray rounded-xl p-3 mb-2">
            <label htmlFor="" className="absolute left-2 text-xs block -top-3 text-primary bg-white p-1">{translations?.cvv}</label>
            <CardCvcElement options={cardElementOptions} className="" />
          </div>
        </div>
        <div className='mt-4 flex gap-3 justify-center'>
          <GradientButton customClass='!px-8 flex items-center justify-center' buttonType="submit">
            {translations?.submit}
            {(loader || isPending) && <LoaderSVG customClass="ml-2" />}
          </GradientButton>
          <BorderButton customClass=' flex items-center justify-center !px-8' onClick={() => setCardType("card_list")}>
            {translations?.back}
          </BorderButton>
        </div>
        {/* <button type="submit" className="border border-primary rounded-md py-2.5 px-3 text-base font-medium focus-visible:outline-none bg-white text-[#158CF9] mt-4 m-auto block hover:bg-[#158CF9] hover:text-white ">{"Submit"} {(loader || isPending) && <LoaderSVG />}</button> */}
      </form>
    </>

  )
}

export default ActivePlanStepTwo;