"use client";

import CartControls from '@/components/CartControls'
import { clx } from '@/helpers/utils';
import { ArchiveTick, Shop, TruckFast } from 'iconsax-react'
import Image from 'next/image'
import { FC } from 'react'
import { CartItemType } from '../types/Types'
import { useUpdateCart, useRemoveFromCart } from '../hooks/useCartData'
import { toast } from '@/components/Toast'
import { PRIMARY_COLOR } from '@/config/const';

type Props = {
    noBorder?: boolean
    item: CartItemType
}

const CartItem: FC<Props> = (props) => {

    const { noBorder, item } = props
    const updateCartMutation = useUpdateCart()
    const removeFromCartMutation = useRemoveFromCart()

    if (!item) {
        return null
    }

    const handleQuantityChange = async (newQuantity: number) => {
        try {
            await updateCartMutation.mutateAsync({
                productId: item.product._id,
                variantId: item.variant._id,
                quantity: newQuantity
            })
            toast('تعداد به‌روزرسانی شد', 'success')
        } catch {
            toast('خطا در به‌روزرسانی تعداد', 'error')
        }
    }

    const handleRemove = async () => {
        try {
            await removeFromCartMutation.mutateAsync({
                productId: item.product._id,
                variantId: item.variant._id
            })
            toast('محصول از سبد خرید حذف شد', 'success')
        } catch {
            toast('خطا در حذف محصول', 'error')
        }
    }

    return (
        <div className={clx(
            'p-4 sm:p-6 lg:p-10 flex flex-col sm:flex-row gap-4 sm:gap-6 lg:gap-10 border-t border-border',
            noBorder && 'border-0'
        )}>
            <div className="flex-shrink-0 flex justify-center sm:justify-start">
                <Image
                    src={item.product.imagesUrl.cover}
                    alt={item.product.title_fa}
                    width={200}
                    height={200}
                    className='w-24 h-24 sm:w-32 sm:h-32 lg:max-w-[150px] lg:max-h-[150px] object-contain'
                />
            </div>

            <div className='flex-1 min-w-0'>
                <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-4'>
                    <div className='text-sm sm:text-base font-medium leading-relaxed sm:max-w-[250px] sm:truncate'>
                        {item.product.title_fa}
                    </div>
                    <div className="text-lg sm:text-xl font-semibold text-primary">
                        {item.variant.price.selling_price.toLocaleString()} <span className='text-xs sm:text-sm'>تومان</span>
                    </div>
                </div>

                <div className='font-light text-[#333333] mt-4 sm:mt-6 lg:mt-14'>
                    {item.variant.size && (
                        <div className='flex items-center gap-2.5 mb-3 sm:mb-4'>
                            <div className='w-5 sm:w-6 flex-shrink-0'>
                                <div className='size-3 sm:size-[14px] rounded-full bg-black'></div>
                            </div>
                            <div className='text-xs sm:text-sm'>{item.variant.size.value}</div>
                        </div>
                    )}

                    <div className='flex items-center gap-2.5 mb-3 sm:mb-4'>
                        <div className='w-5 sm:w-6 flex-shrink-0'>
                            <Shop size={16} color='#333333' className="sm:w-5 sm:h-5" />
                        </div>
                        <div className='text-xs sm:text-sm'>فروشنده {item.variant.shop.shopName}</div>
                    </div>

                    <div className='flex items-center gap-2.5 mb-4 sm:mb-6'>
                        <div className='w-5 sm:w-6 flex-shrink-0'>
                            <ArchiveTick size={16} color='#333333' className="sm:w-5 sm:h-5" />
                        </div>
                        <div className='text-xs sm:text-sm'>گارانتی {item.variant.warranty.name}</div>
                    </div>

                    <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4'>
                        <div className='flex items-center gap-2.5'>
                            <div className='w-5 sm:w-6 flex-shrink-0'>
                                <TruckFast size={16} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                            </div>
                            <div className='text-xs sm:text-sm'>
                                ارسال از {item.variant.shop.shopName} حداکثر پس از {item.variant.shipmentMethod[0]?.deliveryTime || 3} روز کاری
                            </div>
                        </div>

                        <div className="flex justify-center sm:justify-end">
                            <CartControls
                                onChange={handleQuantityChange}
                                onRemove={handleRemove}
                                quantity={item.quantity}
                                max={item.variant.stock}
                                className={updateCartMutation.isPending || removeFromCartMutation.isPending ? 'opacity-50 pointer-events-none' : ''}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CartItem