'use client'
import React from 'react'
import Image from 'next/image'
import { Checkbox } from '@/components/ui/checkbox'
import { ShipmentItemDetail } from '../../../types/Types'

interface ProductSelectionProps {
    items: ShipmentItemDetail[]
    selectedItems: string[]
    onItemSelect: (itemId: string, checked: boolean) => void
}

const ProductSelection: React.FC<ProductSelectionProps> = ({
    items,
    selectedItems,
    onItemSelect
}) => {
    return (
        <div className='space-y-0'>
            {items.length === 0 && (
                <div className='text-center py-8 text-gray-500'>
                    هیچ آیتمی برای نمایش وجود ندارد
                </div>
            )}
            {items.map((item, index) => {
                const availableQuantity = item.quantity - item.cancelled_quantity - item.returned_quantity
                const canReturn = availableQuantity > 0

                return (
                    <div key={item._id}>
                        <div className={`p-4 ${!canReturn ? 'opacity-60' : ''}`}>
                            <div className='flex items-start gap-4'>
                                <div className='flex items-center justify-center'>
                                    <Checkbox
                                        id={item._id}
                                        checked={selectedItems.includes(item._id)}
                                        onCheckedChange={(checked) => onItemSelect(item._id, checked as boolean)}
                                        disabled={!canReturn}
                                        className={`w-5 h-5 ${!canReturn ? 'opacity-70' : ''}`}
                                    />
                                </div>

                                <Image
                                    src={item.product.imagesUrl.cover}
                                    width={80}
                                    height={80}
                                    className='w-20 h-20 object-cover rounded-lg border flex-shrink-0'
                                    alt={item.product.title_fa}
                                />

                                <div className='flex-1 min-w-0'>
                                    <div className='font-medium text-sm leading-relaxed mb-2'>
                                        {item.product.title_fa}
                                    </div>

                                    <div className='flex items-center gap-2 mb-2'>
                                        <div className='w-3 h-3 bg-gray-800 rounded-full'></div>
                                        <span className='text-xs text-gray-600'>مشکی</span>
                                    </div>

                                    <div className='text-xs text-gray-500 mb-1'>
                                        کد کالا: {item.product._id || 'نامشخص'}
                                    </div>

                                    <div className='text-xs text-gray-500 mb-1'>
                                        فروشنده: سندس کالا
                                    </div>

                                    <div className='text-xs text-gray-500 mb-2'>
                                        وضعیت: آونگ
                                    </div>

                                    <div className='text-sm font-bold text-primary'>
                                        {Intl.NumberFormat('fa-IR').format(item.selling_price)} تومان
                                    </div>

                                    {!canReturn && (
                                        <div className='text-xs text-red-500 mt-2'>
                                            این آیتم قابل مرجوع کردن نیست
                                        </div>
                                    )}

                                </div>
                            </div>
                        </div>
                        {index < items.length - 1 && (
                            <div className='border-t border-gray-200'></div>
                        )}
                    </div>
                )
            })}
        </div>
    )
}

export default ProductSelection
