import { type FC } from 'react'
import Button from '@/components/Button'
import { Edit, ShoppingCart, TickSquare, Trash } from 'iconsax-react'
import { useGetProducts } from '../hooks/useRequestData'
import type { RequestType } from '../type/Types'
import { clx } from '@/helpers/utils'

type Props = {
    items: RequestType[]
    editingIndex: number | null
    onEdit: (index: number) => void
    onRemove: (index: number) => void
    onSubmit: () => void
    isPending: boolean
}

const RequestItemsList: FC<Props> = ({
    items,
    editingIndex,
    onEdit,
    onRemove,
    onSubmit,
    isPending,
}) => {
    const { data: productsData } = useGetProducts()

    const getProductTitle = (productId?: string) =>
        productsData?.data?.find((p) => p.id === productId)?.title ?? 'محصول'

    return (
        <div className='bg-white w-full xl:w-[320px] shrink-0 py-6 px-5 h-fit rounded-3xl xl:sticky xl:top-6'>
            <div className='flex items-center gap-2'>
                <ShoppingCart size={20} color='black' />
                <span className='text-sm font-medium'>اقلام درخواست</span>
                {items.length > 0 && (
                    <span className='text-xs bg-primary/20 text-black rounded-full px-2 py-0.5 mr-auto'>
                        {items.length}
                    </span>
                )}
            </div>

            {items.length === 0 ? (
                <p className='text-description text-xs mt-6 leading-6'>
                    هنوز قلمی اضافه نشده. فرم را پر کنید و روی «افزودن به لیست» بزنید.
                </p>
            ) : (
                <ul className='mt-4 space-y-3 max-h-[360px] overflow-y-auto'>
                    {items.map((item, index) => (
                        <li
                            key={index}
                            className={clx(
                                'border rounded-2xl p-3 transition-colors',
                                editingIndex === index
                                    ? 'border-primary bg-primary/5'
                                    : 'border-[#f0f2f8]'
                            )}
                        >
                            <div className='text-sm font-medium truncate'>
                                {getProductTitle(item.productId)}
                            </div>
                            {item.attachments.length > 0 && (
                                <div className='text-description text-xs mt-1'>
                                    {item.attachments.length} پیوست
                                </div>
                            )}
                            <div className='flex gap-2 mt-3'>
                                <button
                                    type='button'
                                    onClick={() => onEdit(index)}
                                    className='flex items-center gap-1 text-xs text-[#3B82F6] hover:opacity-80'
                                >
                                    <Edit size={16} color='#3B82F6' />
                                    ویرایش
                                </button>
                                <button
                                    type='button'
                                    onClick={() => onRemove(index)}
                                    className='flex items-center gap-1 text-xs text-red-500 hover:opacity-80 mr-auto'
                                >
                                    <Trash size={16} color='#ef4444' />
                                    حذف
                                </button>
                            </div>
                        </li>
                    ))}
                </ul>
            )}

            <div className='mt-6 pt-4 border-t border-[#f0f2f8]'>
                <Button
                    className='w-full'
                    onClick={onSubmit}
                    isLoading={isPending}
                    disabled={items.length === 0}
                >
                    <div className='flex gap-2 items-center justify-center'>
                        <TickSquare size={20} color='black' />
                        <span>ثبت نهایی درخواست</span>
                    </div>
                </Button>
                {items.length === 0 && (
                    <p className='text-description text-[10px] text-center mt-2'>
                        حداقل یک قلم برای ثبت لازم است
                    </p>
                )}
            </div>
        </div>
    )
}

export default RequestItemsList