'use client'
import Image from 'next/image'
import { ShoppingCart } from 'iconsax-react'
import { useGetDetailProduct } from '@/app/product/hooks/useProductData'

interface ChatProductCardProps {
    productId?: string | null
}

export default function ChatProductCard({ productId }: ChatProductCardProps) {
    const { data: productData, isLoading, error } = useGetDetailProduct(productId || '')
    const product = productData?.results?.product

    // Show loading state
    if (isLoading) {
        return (
            <div className="p-6">
                <div className="w-full h-32 mb-4 bg-gray-200 rounded-lg animate-pulse"></div>
                <div className="h-4 bg-gray-200 rounded animate-pulse mb-3"></div>
                <div className="h-4 bg-gray-200 rounded animate-pulse w-3/4 mb-4"></div>
                <div className="h-10 bg-gray-200 rounded-lg animate-pulse"></div>
            </div>
        )
    }

    // Show error state
    if (error) {
        return (
            <div className="p-6 text-center text-red-500">
                <p className="text-sm">خطا در بارگذاری اطلاعات محصول</p>
            </div>
        )
    }

    const formatPrice = (price: number) => {
        return price.toLocaleString('fa-IR')
    }

    if (!productId) {
        return (
            <div className="p-6 text-center text-gray-500">
                <p className="text-sm">محصولی انتخاب نشده</p>
            </div>
        )
    }

    if (!product) {
        return (
            <div className="p-6 text-center text-gray-500">
                <p className="text-sm">اطلاعات محصول در دسترس نیست</p>
            </div>
        )
    }

    return (
        <div className="p-6">
            {/* Product Image */}
            <div className="w-full h-32 mb-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
                <Image
                    src={product.imagesUrl.cover}
                    alt={product.title_fa}
                    width={80}
                    height={80}
                    className="object-contain"
                />
            </div>

            {/* Product Title */}
            <h3 className="text-sm text-gray-900 font-medium mb-3 leading-tight line-clamp-3">
                {product.title_fa}
            </h3>

            {/* Price */}
            <div className="mb-4">
                <div className="flex items-baseline gap-1 mb-1">
                    <span className="text-lg font-bold text-gray-900">
                        {formatPrice(product.default_variant.price.selling_price)}
                    </span>
                    <span className="text-sm text-gray-500">تومان</span>
                </div>
                {product.default_variant.price.discount_percent > 0 && (
                    <p className="text-xs text-gray-400 line-through">
                        {formatPrice(product.default_variant.price.retailPrice)} تومان
                    </p>
                )}
            </div>

            {/* Add to Cart Button */}
            <button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground py-2.5 rounded-lg font-medium text-sm transition-colors flex items-center justify-center gap-2">
                <ShoppingCart size={16} />
                افزودن به سبد
            </button>
        </div>
    )
}
