'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-4'>
            <h3 className='mb-4'>انتخاب آیتم‌های مورد نظر برای کنسل کردن</h3>
            {items.map((item) => {
                const availableQuantity = item.quantity - item.cancelled_quantity - item.returned_quantity
                const canCancel = availableQuantity > 0

                return (
                    <div key={item._id} className={`p-4 border rounded-lg ${!canCancel ? 'opacity-50' : ''}`}>
                        <div className='flex items-start gap-4'>
                            <Checkbox
                                id={item._id}
                                checked={selectedItems.includes(item._id)}
                                onCheckedChange={(checked) => onItemSelect(item._id, checked as boolean)}
                                disabled={!canCancel}
                                className='mt-1'
                            />

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

                            <div className='flex-1 min-w-0'>
                                <div className='font-medium truncate'>
                                    {item.product.title_fa}
                                </div>

                                <div className='mt-2 text-sm text-gray-600 space-y-1'>
                                    <div>تعداد کل: {item.quantity}</div>
                                    <div>قابل کنسل: {availableQuantity}</div>
                                    <div className='text-primary font-medium'>
                                        {Intl.NumberFormat('fa-IR').format(item.selling_price)} تومان
                                    </div>
                                </div>

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

export default ProductSelection
