import { Button } from '@/components/ui/button'
import React, { useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import { Add, Minus, Trash } from 'iconsax-react'
import { PRIMARY_COLOR } from '@/config/const'
import { toast } from '@/components/Toast'
import { useLocalCart } from '../hooks/useLocalCart'

interface OfflineCartProps {
    variantId: string
}

const OfflineCart: React.FC<OfflineCartProps> = ({ variantId }) => {
    const { id } = useParams()

    // Local cart hooks for non-logged in users
    const {
        addToLocalCart,
        updateLocalCartItem,
        removeFromLocalCart,
        getLocalCartItem,
    } = useLocalCart()

    const [isInCart, setIsInCart] = useState<boolean>(false)
    const [quantity, setQuantity] = useState<number>(1)

    const handleAddToCart = () => {
        addToLocalCart(Number(id), variantId, 1)
        setIsInCart(true)
        setQuantity(1)
        toast('محصول به سبد خرید اضافه شد', 'success')
    }

    useEffect(() => {
        // Check local cart for non-logged in users
        const localItem = getLocalCartItem(Number(id), variantId)
        if (localItem) {
            setIsInCart(true)
            setQuantity(localItem.quantity)
        } else {
            setIsInCart(false)
        }
    }, [variantId, id, getLocalCartItem])

    const handleQuantityChange = (number: number) => {
        if (number === 0) {
            handleEmptyCart()
            return
        }

        setQuantity(number)
        updateLocalCartItem(Number(id), variantId, number)
    }

    const handleEmptyCart = () => {
        removeFromLocalCart(Number(id), variantId)
        toast('محصول از سبد خرید حذف شد', 'success')
        setIsInCart(false)
        setQuantity(0)
    }

    return (
        <div>
            {
                !isInCart ?
                    <Button className='w-full mt-8' onClick={handleAddToCart}>
                        افزودن به سبد خرید
                    </Button>
                    :
                    <div className={"flex items-center gap-2 sm:gap-4 mt-8"}>
                        <div className="h-10 sm:h-12 rounded-lg sm:rounded-xl border border-border bg-white px-2 sm:px-4 flex-1 flex items-center justify-between">
                            <button
                                type="button"
                                onClick={() => handleQuantityChange(quantity + 1)}
                                className="p-1"
                                aria-label="increase quantity"
                            >
                                <Add size={18} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                            </button>
                            <span className="text-sm sm:text-[18px] font-medium text-primary">
                                {quantity}
                            </span>
                            <button
                                type="button"
                                onClick={() => handleQuantityChange(quantity - 1)}
                                className="p-1"
                                aria-label="decrease quantity"
                            >
                                <Minus size={18} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                            </button>
                        </div>

                        <button
                            type="button"
                            onClick={handleEmptyCart}
                            className="h-10 w-10 sm:h-12 sm:w-12 rounded-lg sm:rounded-xl border border-border grid place-items-center bg-white"
                            aria-label="remove from cart"
                        >
                            <Trash size={18} color="#AD3434" className="sm:w-5 sm:h-5" />
                        </button>
                    </div>
            }
        </div>
    )
}

export default OfflineCart
