'use client';

import { Card, Icon, Wallet2 } from 'iconsax-react';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { useGetPaymentMethod } from '../../hooks/useOrderData';
import { useCheckoutStore } from '../../store/Store';
import { useGetUserWallet } from '@/app/[name]/(Main)/transactions/hooks/useTransactionData';
import { useGetCartItems } from '@/app/[name]/(Dialogs)/cart/hooks/useCartData';
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';

type PaymentSectionProps = {
    paymentType: string;
    onPaymentTypeChange: (id: string) => void;
};

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const getIconByMethod = (method: "CardOnDelivery" | "Cash" | "Online", _gateway: string | null): Icon => {
    if (method === "Online" || method === "CardOnDelivery") {
        return Card;
    }
    if (method === "Cash") {
        return Wallet2;
    }
    return Card;
};

const isWalletPayment = (method: string, gateway: string | null): boolean => {
    return gateway?.toLowerCase() === 'wallet' || method.toLowerCase() === 'wallet';
};

export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSectionProps) => {

    const { t: tOrderDetail } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
    const { t: tOrders } = useTranslation('orders');
    const { data: paymentMethod } = useGetPaymentMethod();
    const { setIsSelectedPayment } = useCheckoutStore();
    const { data: userWallet } = useGetUserWallet();
    const { isSuccess } = useGetProfile();
    const { data: cartData } = useGetCartItems(isSuccess);

    const walletAmount = userWallet?.data?.balance ?? 0;
    const totalAmount = cartData?.data?.total ?? 0;
    const isWalletInsufficient = walletAmount < totalAmount;

    const formatPrice = useCallback(
        (value: number) => value.toLocaleString('fa-IR'),
        []
    );

    const getPaymentMethodTranslation = useCallback((method: string, fallbackTitle: string) => {
        const translationKey = `paymentMethod.${method}`;
        const translation = tOrders(translationKey);
        return translation !== translationKey ? translation : fallbackTitle;
    }, [tOrders]);

    const paymentOptions = useMemo(() => {
        if (!paymentMethod?.data) return [];

        return paymentMethod.data
            .filter(item => item.enabled)
            .sort((a, b) => a.order - b.order)
            .map(item => ({
                id: item.id,
                label: getPaymentMethodTranslation(item.method, item.title),
                icon: getIconByMethod(item.method, item.gateway),
                method: item.method,
                gateway: item.gateway,
                isWallet: isWalletPayment(item.method, item.gateway),
            }));
    }, [paymentMethod, getPaymentMethodTranslation]);

    return (
        <section className="bg-container rounded-container box-shadow-normal p-4">
            <div className="py-3">
                <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionPayment.Title")}</h3>

                <RadioGroup
                    value={paymentType}
                    onValueChange={(value) => {
                        onPaymentTypeChange(value);
                        setIsSelectedPayment(true);
                    }}
                    className='flex flex-col gap-6 mt-6'
                >
                    {paymentOptions.map(({ id, label, icon: Icon, isWallet }) => {
                        const isDisabled = isWallet && isWalletInsufficient;
                        const walletOption = paymentOptions.find(opt => opt.id === id && opt.isWallet);

                        return (
                            <div key={id} className='flex items-center justify-between'>
                                <RadioGroupItem
                                    value={id}
                                    id={`paymentMethod${id}`}
                                    disabled={isDisabled}
                                />
                                <label
                                    className={`flex items-center gap-2 ${isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
                                    htmlFor={`paymentMethod${id}`}
                                >
                                    <div className='flex gap-1'>
                                        {walletOption && (
                                            <span className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
                                                ({formatPrice(walletAmount)} T)
                                            </span>
                                        )}

                                        <span className='text-xs mt-0.5'>{label}</span>
                                    </div>
                                    <Icon
                                        size={16}
                                        color='currentColor'
                                        className='mr-2'
                                    />
                                </label>
                            </div>
                        );
                    })}
                </RadioGroup>
            </div>
        </section>
    );
};

