'use client'
import { Button } from "@/components/ui/button"
import CartItem from "@/app/cart/components/CartItem"
import CartSummary from "@/components/CartSummary"
import Layout from "@/hoc/Layout"
import { Trash } from "iconsax-react"
import { NextPage } from "next"
import { useGetCart, useRemoveAllCart } from "./hooks/useCartData"
import { toast } from "@/components/Toast"
import { useState } from "react"

const Cart: NextPage = () => {

    const { data, isLoading, error } = useGetCart();
    const removeAllCartMutation = useRemoveAllCart()
    const [isClearingAll, setIsClearingAll] = useState(false)

    const handleClearAll = async () => {
        if (!data?.results?.cart?.items?.length) return

        setIsClearingAll(true)
        try {
            await removeAllCartMutation.mutateAsync()
            toast('همه محصولات از سبد خرید حذف شدند', 'success')
        } catch {
            toast('خطا در حذف محصولات', 'error')
        } finally {
            setIsClearingAll(false)
        }
    }

    if (isLoading) {
        return (
            <div className="mt-12 sm:mt-14 px-3 sm:px-4 md:px-8 lg:px-20">
                <div className="flex items-center justify-center h-64">
                    <div className="text-lg">در حال بارگذاری...</div>
                </div>
            </div>
        )
    }

    if (error) {
        return (
            <div className="mt-12 sm:mt-14 px-3 sm:px-4 md:px-8 lg:px-20">
                <div className="flex items-center justify-center h-64">
                    <div className="text-lg text-red-500">خطا در بارگذاری سبد خرید</div>
                </div>
            </div>
        )
    }

    const cart = data?.results?.cart
    const items = cart?.items || []

    if (!items.length) {
        return (
            <div className="mt-12 sm:mt-14 px-3 sm:px-4 md:px-8 lg:px-20">
                <div className="flex items-center justify-center h-64">
                    <div className="text-lg">سبد خرید شما خالی است</div>
                </div>
            </div>
        )
    }

    return (
        <div className="mt-12 sm:mt-14 px-3 sm:px-4 md:px-8 lg:px-20">
            <div className="border-b border-border flex flex-row justify-between items-center gap-3 sm:gap-4">
                <div className="flex items-center gap-2 sm:gap-3 pb-3 sm:pb-4 lg:pb-6 border-b-2 border-primary relative top-[1px]">
                    <div className="text-sm sm:text-base lg:text-lg font-medium">
                        سبد خرید
                    </div>
                    <div className="size-6 sm:size-7 lg:size-8 rounded-md sm:rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary text-xs sm:text-sm font-medium">
                        {cart?.items_count || 0}
                    </div>
                </div>

                <Button
                    onClick={handleClearAll}
                    disabled={isClearingAll || !items.length}
                    className="bg-white shadow h-8 sm:h-9 lg:h-10 w-auto px-2 sm:px-3 lg:px-4 flex-shrink-0 disabled:opacity-50"
                >
                    <div className="flex items-center gap-1 sm:gap-1.5 lg:gap-2">
                        <Trash size={12} color="#AD3434" className="sm:w-4 sm:h-4 lg:w-5 lg:h-5" />
                        <div className="text-xs sm:text-sm text-[#AD3434] font-light hidden sm:block">
                            {isClearingAll ? 'در حال حذف...' : 'حذف همه از سبد خرید'}
                        </div>
                        <div className="text-xs text-[#AD3434] font-light sm:hidden">
                            {isClearingAll ? 'حذف...' : 'حذف همه'}
                        </div>
                    </div>
                </Button>
            </div>

            <div className="mt-4 sm:mt-5 lg:mt-6 flex flex-col lg:flex-row gap-3 sm:gap-4 lg:gap-6">
                <div className="flex-1 border border-border rounded-lg sm:rounded-xl lg:rounded-2xl overflow-hidden">
                    {items.map((item, index) => {
                        if (!item || !item.product || !item.variant) {
                            return null
                        }
                        return (
                            <CartItem
                                key={`${item.product._id}-${item.variant._id}`}
                                item={item}
                                noBorder={index === 0}
                            />
                        )
                    })}
                </div>
                <CartSummary
                    itemsCount={cart?.items_count || 0}
                    itemsPrice={cart?.retail_price || 0}
                    discount={cart?.total_discount || 0}
                    total={cart?.payable_price || 0}
                    confirmHref="/cart/shipping"
                    confirmLabel="ادامه به آدرس و ارسال"
                    className="w-full lg:w-[360px] xl:w-[400px]"
                />
            </div>
        </div>
    )
}

export default function CartWithLayout() {
    return (
        <Layout>
            <Cart />
        </Layout>
    )
}