import { AppDispatch, RootState } from "@/redux/slices";
import { getPaymentDetailsList } from "@/redux/thunks/Booking/booking.thunk";
import { BookingContent } from "@/src/types/StaticContent/booking.content.type";
import Image from "next/image";
import React, { useEffect, useRef, useState } from "react";
import { useFormContext } from "react-hook-form";
import { useDispatch, useSelector } from "react-redux";
import checkIcon from "../../../public/images/icon-checkboxfilled.svg";
import MasterCard from "../../../public/images/logo-mastercard.svg";

interface RadioPaymentProps {
    addPaymentBtn?: boolean;
    selectedPaymentData?: any;
    setSelectedPaymentData?: any
    BOOKING: BookingContent
}

const RadioPayment: React.FC<RadioPaymentProps> = ({ selectedPaymentData, setSelectedPaymentData, BOOKING }) => {
    const dispatch = useDispatch<AppDispatch>();
    const { register, setValue, watch, trigger, formState: { errors } } = useFormContext();
    // State to keep track of the selected payment method
    const [selectedMethod, setSelectedMethod] = useState<string>(null);
    const [isTabActive, setIsTabActive] = useState(false);

    const { paymentDetailsList } = useSelector((state: RootState) => state.booking);

    // Content Ref
    const contentRef = useRef<HTMLDivElement>(null);
    // Height State
    const [height, setHeight] = useState("0px");
    // Opacity State
    const [opacity, setOpacity] = useState(0);

    // Function to update the selected payment method and log it to the console
    const handleSelection = (Data: any) => {
        setSelectedMethod(Data?.paymentDetailId);
        setIsTabActive(false);
    };

    // Handle tab for the toggle
    const handleTab = () => {
        setIsTabActive(true)
        setSelectedPaymentData(null);
        setSelectedMethod(null);
        setValue('cardNumber', '');
        setValue('cardExpiry', '');
        setValue('cardCvv', '');
        setValue('name', '');
        setValue('saveForFutureUsage', false);
    }

    // Effect for the height and opacity of the tab toggle item
    useEffect(() => {
        if (isTabActive && contentRef.current) {
            setHeight(`${contentRef.current.scrollHeight}px`);
            setOpacity(1);
        } else {
            setHeight("0px");
            setOpacity(0);
        }
    }, [isTabActive]);

    useEffect(() => {
        if (paymentDetailsList && paymentDetailsList?.data?.length === 0) {
            setIsTabActive(true)
        }
        if (paymentDetailsList && paymentDetailsList?.data?.length > 0) {
            setSelectedMethod(paymentDetailsList?.data[0]?.paymentDetailId)
            setSelectedPaymentData(paymentDetailsList?.data[0])
        }
    }, [paymentDetailsList])

    useEffect(() => {
        dispatch(getPaymentDetailsList({ page: 1, perPage: 20 }))
    }, [])

    useEffect(() => {
        if (selectedPaymentData) {
            setValue('cardNumber', selectedPaymentData?.cardNumber);
            setValue('cardExpiry', selectedPaymentData?.cardExpiry);
            setValue('cardCvv', selectedPaymentData?.cardCvv);
            setValue('name', selectedPaymentData?.name);
        }
    }, [selectedPaymentData])

    return (
        <>
            <div className="flex flex-col gap-3 mb-4 lg:mb-0">
                {paymentDetailsList && paymentDetailsList?.data?.length > 0 && paymentDetailsList?.data?.map((option) => (
                    <label
                        key={option?.paymentDetailId}
                        className={`relative w-full px-3.5 py-2.5 border-2 rounded-xl cursor-pointer transition-all ${selectedMethod === option?.paymentDetailId ? "border-secondaryColor" : "border-[#EAECF0]"}`}
                    >
                        <input
                            type="radio"
                            name="payment"
                            value={option?.paymentDetailId}
                            checked={selectedMethod === option?.paymentDetailId}
                            onChange={() => handleSelection(option)}
                            className="hidden" // Hiding the default radio input
                        />
                        <div className={`flex gap-3 max-w-[calc(100%-25px)]`}>
                            <div className={`flex items-center justify-center border border-[#F2F4F7] shrink-0 h-[32px] w-[46px] rounded-md`}>
                                <Image src={MasterCard} alt="logo" />
                            </div>
                            <div className="flex flex-col">
                                {(
                                    <>
                                        <span className={`fs-16 !mb-0 !font-fw500 ${selectedMethod === option?.paymentDetailId ? "text-secondaryColor" : "text-grey344Color"}`}>{option?.cardType} {BOOKING.ENDING_IN} {option?.cardNumber.slice(-4)}</span>
                                        <span className={`fs-16 !mb-0 !font-fw500 ${selectedMethod === option?.paymentDetailId ? "text-secondaryColor" : "text-grey344Color"}`}>{BOOKING.EXPIRY} {option?.cardExpiry}</span>
                                    </>
                                )}
                                <div className={`mt-2 flex gap-3`}>
                                    {/* <button type="button" className={`fs-14 !text-left text-grey475Color !font-fw500 cursor-pointer`}>Set as default</button> */}
                                    <button type="button" onClick={() => { setSelectedMethod(option?.paymentDetailId); setIsTabActive(true); setSelectedPaymentData(option) }} className={`fs-14 !text-left text-primaryColor !font-fw500 cursor-pointer`}>{BOOKING.EDIT}</button>
                                </div>
                            </div>
                        </div>
                        {selectedMethod === option?.paymentDetailId ?
                            (// Display check icon when the option is selected
                                <span className={`w-[16px] h-[16px] absolute top-[10px] right-[14px] flex rounded-full overflow-hidden`}>
                                    <Image src={checkIcon} alt="check-icon" className={`w-full h-full object-cover`} />
                                </span>)
                            :
                            (// Display an empty circle when the option is not selected
                                <span className={`w-[16px] h-[16px] absolute top-[10px] right-[14px] flex rounded-full overflow-hidden border border-[#D0D5DD]`}></span>)}
                    </label>
                ))}
                {paymentDetailsList && paymentDetailsList?.data?.length > 0 && <button
                    onClick={handleTab}
                    type="button"
                    className={`text-grey475Color !font-fw500 mt-4 group hover:text-secondaryColor inline-flex w-max items-center gap-2 cursor-pointer`}>
                    <i className="Icon IconPlus !bg-grey67 !w-[18px] !h-[18px] group-hover:!bg-secondaryColor"></i>
                    {BOOKING.ADD_NEW_PAYMENT_METHOD}
                </button>}

                <div ref={contentRef}
                    className=""
                    style={{
                        maxHeight: height,
                        opacity: opacity,
                        transition: "max-height 0.2s ease-in-out, opacity 0.2s ease-in-out",
                        overflowY: "hidden",
                    }}
                >
                    <div className="!mt-4">
                        <div className="InputWrapper">
                            <label htmlFor="cardNumber">{BOOKING.CARD_NUMBER}</label>
                            <div className="relative">
                                <div className="absolute top-1/2 transform -translate-y-1/2 left-3.5 flex items-center justify-center w-[35px] h-[24px] rounded-md bg-white">
                                    <Image className="!w-[24px]" src={MasterCard} alt="MasterCard" width={24} height={24} />
                                </div>
                                <input
                                    id="cardNumber"
                                    inputMode="numeric"
                                    className="!bg-bgColor !shadow-none !pl-14"
                                    type="text"
                                    placeholder="1234 1234 1234 1234"
                                    {...register("cardNumber")}
                                    onKeyDown={(e) => {
                                        const allowedKeys = [
                                            "Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"
                                        ];
                                        if (
                                            !/^\d$/.test(e.key) && // If key is not a digit
                                            !allowedKeys.includes(e.key)
                                        ) {
                                            e.preventDefault(); // Block non-numeric
                                        }
                                    }}
                                    onPaste={(e) => {
                                        const paste = e.clipboardData.getData('text');
                                        if (!/^\d+$/.test(paste)) {
                                            e.preventDefault(); // Block paste if non-numeric
                                        }
                                    }}
                                />
                            </div>
                            {errors.cardNumber && <span className="error-msg">{errors.cardNumber.message as string}</span>}
                        </div>
                        <div className="flex flex-wrap md:flex-nowrap md:gap-5">
                            <div className="InputWrapper">
                                <label htmlFor="cardExpiry">{BOOKING.EXPIRY_DATE}</label>
                                <input
                                    className="!bg-bgColor !shadow-none !appearance-none"
                                    type="text"
                                    inputMode="numeric"
                                    name="cardExpiry"
                                    placeholder="MM/YY"
                                    id="cardExpiry"
                                    maxLength={5}
                                    value={watch("cardExpiry") || ""}
                                    onChange={(e) => {
                                        let value = e.target.value.replace(/\D/g, "");
                                        if (value.length >= 3) {
                                            value = value.slice(0, 2) + "/" + value.slice(2, 4);
                                        }
                                        setValue("cardExpiry", value, { shouldValidate: true });
                                        trigger("cardExpiry");
                                    }}
                                    onKeyDown={(e) => {
                                        if (
                                            ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete"].includes(e.key)
                                        ) {
                                            return;
                                        }

                                        if (!/^\d$/.test(e.key)) {
                                            e.preventDefault();
                                        }
                                    }}
                                />
                                {errors.cardExpiry && <span className="error-msg">{errors.cardExpiry.message as string}</span>}
                            </div>
                            <div className="InputWrapper">
                                <label htmlFor="cardCvv">{BOOKING.CVV}</label>
                                <input
                                    {...register("cardCvv", {
                                        maxLength: 4,
                                        pattern: /^[0-9]{1,4}$/,
                                    })}
                                    className="!bg-bgColor !shadow-none !appearance-none"
                                    maxLength={4}
                                    type="text"
                                    name="cardCvv"
                                    placeholder="123"
                                    id="cardCvv"
                                    inputMode="numeric"
                                    onKeyDown={(e) => {
                                        // Allow control keys (backspace, tab, etc.)
                                        if (
                                            ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete"].includes(e.key)
                                        ) {
                                            return;
                                        }

                                        // Block non-numeric input
                                        if (!/^\d$/.test(e.key)) {
                                            e.preventDefault();
                                        }
                                    }}
                                />
                                {errors.cardCvv && <span className="error-msg">{errors.cardCvv.message as string}</span>}
                            </div>
                            <div className="InputWrapper !mb-[20px]">
                                <label htmlFor="name">{BOOKING.NAME_ON_CARD}</label>
                                <input
                                    {...register("name", {
                                        onChange: (e) => {
                                            let value = e.target.value;

                                            // Allow only alphabets and spaces
                                            value = value.replace(/[^a-zA-Z\s]/g, "");

                                            // Capitalize the first letter (if not empty)
                                            const capitalized =
                                                value.charAt(0).toUpperCase() + value.slice(1);

                                            e.target.value = capitalized;
                                            return e;
                                        },
                                    })}
                                    className="!bg-bgColor !shadow-none"
                                    id="name"
                                    type="text"
                                    name="name"
                                    placeholder="Veronica Smith"
                                />
                                {errors.name && <span className="error-msg">{errors.name.message as string}</span>}
                            </div>
                        </div>
                        {!selectedMethod && <div className="flex gap-3 md:gap-5 mt-5 md:mt-2">
                            <div className='InputWrapper'>
                                <div className={`CommonCheckbox !p-0`}>
                                    <label htmlFor="saveForFutureUsage">
                                        <input
                                            {...register("saveForFutureUsage")}
                                            type="checkbox" name="saveForFutureUsage" id="saveForFutureUsage" />
                                        <span className={`fs-16 !text-grey667Color`}>{BOOKING.SAVE_THIS_CARD}</span>
                                    </label>
                                </div>
                                {errors.saveForFutureUsage && <span className="error-msg">{errors.saveForFutureUsage.message as string}</span>}
                            </div>
                        </div>}
                    </div>
                </div>
            </div>
        </>
    );
};

export default RadioPayment;