"use client";

import { useState, useMemo } from "react";
import clsx from "clsx";
import { 
    ProductOption, 
    ResolvedVariant
} from "@/components/catalog/type";
import { ProductAddToCart } from "@/app/(public)/product/_components/ProductAddToCart";
import { useCustomToast } from "@utils/hooks/useToast";
import { useAddProduct } from "@utils/hooks/useAddToCart";
import { redirect, RedirectType } from 'next/navigation'
import {
    isValueAvailable,
    isOptionValueAvailable,
    getFirstAvailable,
    getAvailableVariants,
    isCombinationAvailable,
    findNearestAvailableVariant
} from "@/utils/variantTools";
import { Price } from "@components/theme/ui/Price";


export function ProductInformation({
    name,
    productId,
    productOptions,
    flexibleVariants,
    isSaleable
}: {
    name: string;
    productId: number;
    productOptions: ProductOption[];
    flexibleVariants: ResolvedVariant[];
    isSaleable: string | undefined;
}) {
    const { isCartLoading, onAddToCart } = useAddProduct();
    const { showToast } = useCustomToast();
    
    // 记录当前哪个选项组刚刚被点击（用于实现“点击组内全部可点”）
    const [lastClickedOptionId, setLastClickedOptionId] = useState<number>(productOptions[0]?.id );

    const [productQty, setProductQty] = useState(1);

    // 获取所有可用变体（quantity > 0）
    const availableVariants = useMemo(() => {
        return getAvailableVariants(flexibleVariants);
    }, [flexibleVariants]);

    // 当前选中的选项值映射：option_id -> value_id
    const [selected, setSelected] = useState<Record<number, number>>(() => {
        let res: Record<number, number> = {};

        const defaultSelected = getFirstAvailable(productOptions, flexibleVariants);;
        if (defaultSelected) {
            res = defaultSelected;
        } else {
            // 极端情况：没有任何可用组合，默认全选每组第一个（但仍需标记为不可用，由禁用逻辑处理）
            productOptions.forEach((opt) => {
                res[opt.id] = opt.values[0]?.id;
            });
        }
        console.log('set default selected');
        return res;
    });

    // 计算每个选项值的禁用状态
    const disabledMap = useMemo(() => {
        const map: Record<number, boolean> = {};
        if (Object.keys(selected).length === 0) return map; // 没有选中的项

        productOptions.forEach((option) => {
            option.values.forEach((value) => {
                // 规则：如果该选项组是最近点击的组，校验组中的值是否存在可用变体
                if (option.id === lastClickedOptionId) {
                    //   map[value.id] = false;
                    map[value.id] = !isValueAvailable(value.id,availableVariants);
                } else {
                    // 校验其他组的选项值是否可用
                    map[value.id] = !isOptionValueAvailable(
                        option.id,
                        value.id,
                        selected,
                        productOptions,
                        availableVariants
                    );
                }
            });
        });
        return map;
    }, [selected, lastClickedOptionId, productOptions, availableVariants]);

    // 处理选项点击
    const handleOptionClick = (optionId: number, valueId: number) => {
        // 更新前需要判断当前选中的组合是否可以购买，如果可以购买正常更新；如果不能购买查找可以购买的组合然后更新
        let newSelected: Record<number, number> = {...selected,[optionId]: valueId};
        const selectedValueIds = Object.values(newSelected);
        if(!isCombinationAvailable(selectedValueIds, availableVariants)) {
            newSelected = findNearestAvailableVariant(optionId,valueId,{...newSelected},productOptions,availableVariants);
        }
        setSelected({ ...newSelected });
        // 记录当前点击的选项组
        setLastClickedOptionId(optionId);
    };

    // 判断当前选中的组合是否可购买（用于控制购买按钮等）
    const isCurrentSelectionAvailable = useMemo(() => {
        let res = true;
        if(isSaleable !== '1') {
            res = false;
        } else {
            const selectedIds = Object.values(selected);
            if (selectedIds.length !== productOptions.length) {
                res = false
            } else {
                res = isCombinationAvailable(selectedIds, availableVariants);
            }
        }
        return res;
    }, [selected, productOptions, flexibleVariants, isSaleable]);

    // 获取当前选中变体和价格等信息
    // useEffect和useMemo的执行时机不同，useMemo早于useEffect执行，如果使用useEffect初始化selected，则需要对selected做判断，当为空对象时返回占位对象
    const currentVariantInfo: {variant:ResolvedVariant | null; totalLinePrice: number; totalNowPrice: number; save: number;} = useMemo(() => {
        const selectedIds = Object.values(selected);
        let totalLinePrice = 0;
        let totalNowPrice = 0;
        let save = 0;
        const variant = flexibleVariants.find((v) => {
            const vIds = v.optionValues.map((ov) => ov.id);
            return selectedIds.length === vIds.length && selectedIds.every((id) => vIds.includes(id));
        });
        if (selectedIds.length === 0 || variant === undefined) {
            // 尚未初始化，返回一个安全占位对象
            return { variant: null, totalLinePrice: 0, totalNowPrice: 0, save: 0 };
        }
        
        if(variant.priceIndices && variant.priceIndices.length > 0) {
            totalLinePrice = Number(variant.priceIndices[0].regular_min_price) * productQty;
            totalNowPrice = Number(variant.priceIndices[0].min_price) * productQty;
        }
        if(totalLinePrice !== totalNowPrice) {
            save = -(totalLinePrice - totalNowPrice); 
        }

        return {
            variant, 
            totalLinePrice: totalLinePrice, 
            totalNowPrice: totalNowPrice,
            save: save
        };
    }, [selected, flexibleVariants, productQty]);


    const classNameOptionValueBtn = "text-ly-14 leading-ly-24 border border-solid rounded-lg pt-1.5 pb-1.5 pl-3 pr-3 bg-white";


    const handlerProductQty = (action: string) => {
        if (action === "increase") {
            setProductQty(productQty + 1);
        } else if (action === "decrease" && productQty > 1) {
            setProductQty(productQty - 1);
        }
    }

    async function addProductToCart(action:string = 'addtocart') {
        
        const params = { 
            productId: String(productId), 
            quantity: productQty,
            variantId: currentVariantInfo.variant?._id,
        };
        const res = await onAddToCart(params);
        console.log('onAddToCart result --- ', res);
        if(action === 'buynow') {
            if(res) {
                const responseData = res.data?.createAddProductInCart?.addProductInCart;
                if(responseData && responseData.success) {
                    redirect('/checkout?step=address', RedirectType.push);
                }
            }
        }
    } 

    const addToCartHandler = async () => {
   
        if(!isCurrentSelectionAvailable) {
            showToast("The selected options are not available!", "warning");
            return;
        }

        if(currentVariantInfo.variant && !isCartLoading) {
            addProductToCart();
        }
    };

    const buyNowHandler = () => {
        if(!isCurrentSelectionAvailable) {
            showToast("The selected options are not available!", "warning");
            return;
        }
        if(currentVariantInfo.variant && !isCartLoading) {
            addProductToCart('buynow');
        }
    };


    return (<>
        <div className="box-border w-full pr-4 pl-4">
            <h3 className="text-ly-12 mt-4 leading-ly-22">{name} {isSaleable}</h3>
      
            <div className="flex items-center mt-2">
                <Price 
                    className="text-ly-16 leading-ly-24 font-bold"
                    amount={String(currentVariantInfo.totalNowPrice)} 
                    currencyCode="USD"
                />
                {
                    currentVariantInfo.totalLinePrice !== currentVariantInfo.totalNowPrice && (
                        <>
                            <Price 
                                className="text-ly-12 leading-ly-20 text-ly-gray line-through ml-1"
                                amount={String(currentVariantInfo.totalLinePrice)} 
                                currencyCode="USD"
                            /><Price 
                                className="text-ly-12 leading-ly-20 text-ly-gray line-through ml-1"
                                amount={String(currentVariantInfo.totalLinePrice)} 
                                currencyCode="USD"
                            />
                            <Price 
                                className="text-ly-12 leading-ly-16 bg-ly-gold pr-1.5 pl-1.5 ml-3"
                                amount={String(currentVariantInfo.save)} 
                                currencyCode="USD"
                            />
                        </>
                    )
                }
                
            </div>
            
        </div>

        <div className="box-border w-full pr-4 pl-4 mt-6">
            {productOptions.map((option) => (
            <div key={option.id}>
                <div className="text-ly-12 font-medium">{option.label}</div>
                <div className="flex flex-wrap gap-3 mt-3">
                {option.values.map((value) => {
                    const isSelected = selected[option.id] === value.id;
                    const isDisabled = disabledMap[value.id] || false;
                    return (
                    <button
                        key={value.id}
                        type="button"
                        onClick={() => !isDisabled && handleOptionClick(option.id, value.id)}
                        className={clsx(classNameOptionValueBtn, {
                            'border-ly-green text-ly-green': isSelected,
                            'border-black text-black': !isSelected,
                            'opacity-40 cursor-not-allowed strokeline-bg-disabled': isDisabled
                        })}
                        
                        disabled={isDisabled}
                    >
                        {value.label}
                    </button>
                    );
                })}
                </div>
            </div>
            ))}

            <div className="text-ly-12 font-medium mt-4">Quantity*</div>
            <div className="w-full flex mt-3">
                <div className="flex border border-solid rounded-lg">
                    <button onClick={() => handlerProductQty('decrease')} type="button" className="flex-none w-7.5 h-9 flex items-center justify-center">
                        <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" d="M3.33325 8L12.6666 8" />
                        </svg>
                    </button>
                    <input type="text" className="w-15 h-9 leading-ly-36 text-center" value={productQty} readOnly />
                    <button onClick={() => handlerProductQty('increase')} type="button" className="flex-none w-7.5 h-9 flex items-center justify-center">
                        <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" d="M8.02026 3.3335L8.00806 12.6668" />
                            <path stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" d="M3.33325 8L12.6666 8" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <ProductAddToCart 
            isAvailable={isCurrentSelectionAvailable} 
            isLoading={isCartLoading}
            onAddToCart={addToCartHandler}
            onBuyNow={buyNowHandler}
        />
    </>);
}