'use client'

import { CartQuantityControl } from '@/components/CartQuantityControl'
import { VariableWeightSlider } from '@/components/product/VariableWeightSlider'
import PlusIcon from '@/components/icons/PlusIcon'
import { ef } from '@/lib/helpers/utfNumbers'
import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart'
import {
    getPrimaryVariantId,
    getPurchaseUnitLabel,
    getVariableQuantityRange,
    isVariablePricing,
} from '@/app/[name]/(Main)/types/Types'
import { ArrowLeft, Cup, Heart, TruckTick } from 'iconsax-react'
import Image from 'next/image'
import { useParams, useRouter } from 'next/navigation'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useGetProduct, useToggleFavorite } from './hooks/useProductData'
import { useGetAbout } from '../about/hooks/useAboutData'
import { useGetProfile } from '../../(Profile)/profile/hooks/userProfileData'
import { toast } from '@/components/Toast'
import { getToken } from '@/lib/api/func'

type Props = object

function ProductPage({ }: Props) {

    const { id, name } = useParams();
    const router = useRouter();
    const { isSuccess } = useGetProfile();
    const { data: product, isLoading } = useGetProduct(id as string);
    const { data: about } = useGetAbout();
    const { items, addToCart, removeFromCart, setCartQuantity, isCartMutating } = useCart();
    const [isFavorite, setIsFavorite] = useState<boolean>(false);
    const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
    const [selectedWeight, setSelectedWeight] = useState<number>(1);
    const isUserInteractingRef = useRef(false);
    const cartSyncTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
    const pendingCartWeightRef = useRef<number | null>(null);
    const { mutate: toggleFavorite } = useToggleFavorite();

    const productId = product?.data?.id || id as string;
    const cartId = useMemo(() => {
        if (!product?.data) return null;
        return selectedVariantId ?? getPrimaryVariantId(product.data) ?? productId;
    }, [product?.data, selectedVariantId, productId]);
    const quantity = useMemo(() => {
        if (!cartId) return 0;
        const item = items?.[cartId] ?? items?.[String(cartId)];
        if (item && typeof item === 'object' && 'quantity' in item) {
            return item.quantity || 0;
        }
        return 0;
    }, [items, cartId]);

    const handleAddToCart = () => {
        if (cartId) {
            addToCart(cartId);
        }
    };

    const handleAddVariableToCart = () => {
        if (!cartId) return;
        if (cartSyncTimerRef.current) {
            clearTimeout(cartSyncTimerRef.current);
            cartSyncTimerRef.current = null;
        }
        pendingCartWeightRef.current = null;
        isUserInteractingRef.current = false;
        setCartQuantity(cartId, selectedWeight);
    };

    const clearCartSyncTimer = useCallback(() => {
        if (cartSyncTimerRef.current) {
            clearTimeout(cartSyncTimerRef.current);
            cartSyncTimerRef.current = null;
        }
    }, []);

    const handleVariableWeightChange = useCallback((weight: number) => {
        isUserInteractingRef.current = true;
        setSelectedWeight(weight);
        clearCartSyncTimer();
        pendingCartWeightRef.current = null;
    }, [clearCartSyncTimer]);

    const handleVariableWeightCommit = useCallback((weight: number) => {
        if (!isSuccess || !cartId || quantity <= 0) {
            isUserInteractingRef.current = false;
            return;
        }

        pendingCartWeightRef.current = weight;
        clearCartSyncTimer();

        cartSyncTimerRef.current = setTimeout(() => {
            cartSyncTimerRef.current = null;
            const pendingWeight = pendingCartWeightRef.current;
            pendingCartWeightRef.current = null;

            if (pendingWeight == null || !cartId) {
                isUserInteractingRef.current = false;
                return;
            }

            const currentItem = items?.[cartId] ?? items?.[String(cartId)];
            const currentQty = currentItem && typeof currentItem === 'object' && 'quantity' in currentItem
                ? currentItem.quantity
                : 0;

            if (Math.abs(pendingWeight - currentQty) > 0.0001) {
                setCartQuantity(cartId, pendingWeight);
            }
            isUserInteractingRef.current = false;
        }, 1000);
    }, [isSuccess, cartId, quantity, clearCartSyncTimer, items, setCartQuantity]);

    const handleRemoveFromCart = () => {
        if (cartId) {
            removeFromCart(cartId);
        }
    };

    const handleToggleFavorite = async () => {
        if (!productId) return;

        const token = await getToken();
        if (!token || !isSuccess) {
            toast('ابتدا لاگین کنید', 'error');
            return;
        }

        // به‌روزرسانی خوش‌بینانه: تغییر state قبل از ارسال درخواست
        const previousFavorite = isFavorite;
        setIsFavorite(!isFavorite);

        toggleFavorite(productId, {
            onSuccess: () => {
                // تایید تغییر در صورت موفقیت
            },
            onError: () => {
                // بازگرداندن به حالت قبلی در صورت خطا
                setIsFavorite(previousFavorite);
                toast('خطا در تغییر وضعیت علاقه‌مندی', 'error');
            },
        });
    };

    useEffect(() => {
        const typed = product as unknown as { data?: { isFavorite?: boolean } };
        const isFav = Boolean(typed?.data?.isFavorite);
        setIsFavorite(isFav);
    }, [product]);

    useEffect(() => {
        if (!product?.data) return;
        const variants = product.data.variants ?? [];
        if (!variants.length) {
            setSelectedVariantId(product.data.id);
            return;
        }
        setSelectedVariantId((prev) => prev ?? variants[0].id);
    }, [product?.data]);

    useEffect(() => {
        if (!product?.data || !isVariablePricing(product.data) || !cartId) return;
        if (isUserInteractingRef.current) return;

        const { min } = getVariableQuantityRange(product.data);
        const targetWeight = quantity > 0 ? quantity : min;
        setSelectedWeight((prev) => (
            Math.abs(prev - targetWeight) < 0.0001 ? prev : targetWeight
        ));
    }, [product?.data, cartId, quantity]);

    useEffect(() => () => {
        clearCartSyncTimer();
    }, [clearCartSyncTimer]);

    if (isLoading) {
        return (
            <div className='flex items-center justify-center min-h-[400px]'>
                <p className='text-disabled-text'>در حال بارگذاری...</p>
            </div>
        );
    }

    if (!product?.data) {
        return (
            <div className='flex items-center justify-center min-h-[400px]'>
                <p className='text-disabled-text'>کالا یافت نشد</p>
            </div>
        );
    }

    const productData = product.data;
    const productName = productData.title || productData.name || '';
    const productImage = typeof productData.image === 'string'
        ? productData.image
        : Array.isArray(productData.images) && productData.images.length > 0
            ? typeof productData.images[0] === 'string'
                ? productData.images[0]
                : typeof productData.images[0] === 'object' && productData.images[0] !== null && 'url' in productData.images[0]
                    ? (productData.images[0] as { url: string }).url
                    : '/assets/images/no-image.png'
            : '/assets/images/no-image.png';
    const categoryName = productData.category?.title;
    const variants = productData.variants ?? [];
    const hasVariants = Boolean(productData.attribute?.trim());
    const selectedVariant = selectedVariantId
        ? variants.find((v) => v.id === selectedVariantId) ?? variants[0]
        : variants[0];
    const price = hasVariants
        ? (selectedVariant?.price ?? 0)
        : (productData.price ?? selectedVariant?.price ?? 0);
    const isVariable = isVariablePricing(productData);
    const weightRange = isVariable ? getVariableQuantityRange(productData) : null;
    const unitPriceLabel = isVariable
        ? getPurchaseUnitLabel(productData.purchaseUnit)
        : '';
    const calculatedPrice = isVariable ? Math.round(price * selectedWeight) : price;
    // const prepareTime = productData.prepareTime || 0;
    const content = Array.isArray(productData.content)
        ? productData.content.join('، ')
        : productData.content || productData.desc || '';

    const handleBackToMenu = () => {
        const urlParams = new URLSearchParams(window.location.search);
        const categoryParam = urlParams.get('category') || productData.category?.id;
        if (categoryParam) {
            router.push(`/${name}?category=${categoryParam}`);
        } else {
            router.push(`/${name}`);
        }
    };

    return (
        <div className={`lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10`}>
            <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
                <Image
                    className='w-full object-cover bg-[#F2F2F9] h-full'
                    src={productImage}
                    alt={productName}
                    height={100}
                    width={100}
                    unoptimized
                    priority
                />
                <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
                    <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
                        {categoryName || '-'}
                    </div>
                    <button onClick={handleBackToMenu} className='p-2 rounded-full bg-container/40'>
                        <ArrowLeft size={18} className='stroke-primary dark:stroke-foreground' />
                    </button>
                </div>
            </div>

            <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
                <div className="w-full inline-flex justify-between items-center">
                    <h5 className="text-base font-bold">
                        {productName}
                    </h5>
                    <button
                        onClick={handleToggleFavorite}
                        className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'
                    >
                        <Heart
                            variant={isFavorite ? 'Bold' : 'Outline'}
                            size={24}
                            color='currentColor'
                            className={isFavorite ? 'fill-primary dark:fill-foreground' : ''}
                        />
                    </button>
                </div>

                <div className="mt-4 text-xs">
                    {/* <div className='flex items-center gap-1'>
                        <Clock size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text'>
                            زمان پخت و آماده سازی: {prepareTime > 0 ? `${ef(String(prepareTime))} دقیقه` : '-'}
                        </span>
                    </div> */}
                    <div className='flex items-center gap-2 mt-2'>
                        <Cup size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text flex gap-1'>
                            {about?.data?.plan === 'base' ? (
                                <>
                                    <div>۰</div>
                                    <span>امتیاز برای هر بار خرید</span>
                                </>
                            ) : about?.data?.score?.purchaseScore && about?.data?.score?.purchaseAmount ? (
                                <>
                                    <div>
                                        {ef(
                                            Math.round(
                                                price *
                                                (Number(about.data.score.purchaseScore) / Number(about.data.score.purchaseAmount))
                                            ).toLocaleString('en-US')
                                        )}
                                    </div>
                                    <span>امتیاز برای هر بار خرید</span>
                                </>
                            ) : (
                                <span>-</span>
                            )}
                        </span>
                    </div>
                    <div className='flex items-center gap-2 mt-2'>
                        <TruckTick size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text'>
                            {productData.pickupServe ? 'ارسال با پیک' : '-'}
                        </span>
                    </div>
                </div>

                <div className="mt-7 text-xs">
                    <p className='font-bold'>محتویات:</p>
                    <p className='mt-2 leading-6'>{content || '-'}</p>
                </div>

                {hasVariants && variants.length > 0 && (
                    <div className='mt-6 text-xs'>
                        <p className='font-bold'>{productData.attribute}</p>
                        <div className='flex flex-wrap gap-2 mt-2'>
                            {variants.map((variant) => (
                                <button
                                    key={variant.id}
                                    type="button"
                                    onClick={() => setSelectedVariantId(variant.id)}
                                    className={`px-3 py-1 rounded-full border text-xs ${variant.id === selectedVariant?.id
                                        ? 'bg-primary text-white border-primary'
                                        : 'bg-background text-foreground border-border'
                                        }`}
                                >
                                    {variant.value}
                                </button>
                            ))}
                        </div>
                    </div>
                )}

                {isVariable && weightRange ? (
                    <div className='mt-8'>
                        <p className='text-sm font-bold'>
                            قیمت هر {unitPriceLabel}{' '}
                            <span dir='ltr'>T {ef(price.toLocaleString('en-US'))}</span>
                        </p>

                        <VariableWeightSlider
                            className='mt-10 mb-8'
                            value={selectedWeight}
                            min={weightRange.min}
                            max={weightRange.max}
                            step={weightRange.pitch}
                            purchaseUnit={productData.purchaseUnit}
                            onChange={handleVariableWeightChange}
                            onCommit={handleVariableWeightCommit}
                        />

                        <div className='flex items-center gap-3'>
                            <div
                                dir='ltr'
                                className='flex-1 rounded-xl bg-[#EAECF0] dark:bg-neutral-700 px-4 py-3.5 text-sm font-semibold text-center'
                            >
                                {ef(calculatedPrice.toLocaleString('en-US'))} T
                            </div>
                            <button
                                type='button'
                                onClick={handleAddVariableToCart}
                                disabled={isCartMutating || !cartId}
                                className='flex-1 inline-flex items-center justify-center gap-2 rounded-xl bg-black text-white px-4 py-3.5 text-sm font-semibold disabled:opacity-60 disabled:cursor-not-allowed'
                            >
                                {isCartMutating ? (
                                    <span className="size-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                ) : (
                                    <PlusIcon className='text-white' />
                                )}
                                <span>{quantity > 0 ? 'بروزرسانی' : 'افزودن'}</span>
                            </button>
                        </div>
                    </div>
                ) : (
                    <div className='mt-12 flex justify-between items-center'>
                        <span dir='ltr'>{ef(price.toLocaleString('en-US'))} T</span>
                        <CartQuantityControl
                            quantity={quantity}
                            onAdd={handleAddToCart}
                            onRemove={handleRemoveFromCart}
                            isMutating={isCartMutating}
                            addDisabled={!cartId}
                        />
                    </div>
                )}
            </div>
        </div>
    )
}

export default ProductPage
