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

type Props = {
    items: RequestItemType[]
    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-[340px] shrink-0 rounded-3xl xl:sticky xl:top-6 h-fit'>
            {/* Header */}
            <div className='flex items-center gap-2 px-5 pt-5 pb-4 border-b border-[#f0f2f8]'>
                <ShoppingCart size={20} color='black' variant='Bold' />
                <span className='text-sm font-semibold'>اقلام درخواست</span>
                {items.length > 0 && (
                    <span className='mr-auto text-xs bg-primary/15 text-primary font-medium rounded-full px-2.5 py-0.5 tabular-nums'>
                        {items.length} قلم
                    </span>
                )}
            </div>

            {/* Items */}
            <div className='px-5 py-4'>
                {items.length === 0 ? (
                    <div className='flex flex-col items-center justify-center gap-3 py-8 text-center'>
                        <div className='size-12 rounded-full bg-gray-50 flex items-center justify-center'>
                            <ShoppingCart size={22} color='#c0c4d0' />
                        </div>
                        <p className='text-description text-xs leading-6 max-w-[200px]'>
                            هنوز قلمی اضافه نشده. فرم را پر کنید و روی «افزودن به لیست» بزنید.
                        </p>
                    </div>
                ) : (
                    <ul className='space-y-2 max-h-[380px] overflow-y-auto -mx-1 px-1'>
                        {items.map((item, index) => (
                            <li
                                key={index}
                                className={clx(
                                    'border rounded-2xl px-4 py-3 transition-all',
                                    editingIndex === index
                                        ? 'border-primary bg-primary/5 shadow-sm'
                                        : 'border-[#eef0f6] hover:border-gray-300',
                                )}
                            >
                                <div className='flex items-start justify-between gap-2'>
                                    <span className='text-sm font-medium truncate leading-6'>
                                        {getProductTitle(item.productId)}
                                    </span>
                                    <span className='text-[10px] text-description shrink-0 bg-gray-100 rounded-full px-2 py-0.5'>
                                        #{index + 1}
                                    </span>
                                </div>
                                <div className='flex gap-3 mt-2'>
                                    <button
                                        type='button'
                                        onClick={() => onEdit(index)}
                                        className='flex items-center gap-1 text-xs text-primary hover:opacity-75 transition-opacity'
                                    >
                                        <Edit2 size={14} color='currentColor' />
                                        ویرایش
                                    </button>
                                    <button
                                        type='button'
                                        onClick={() => onRemove(index)}
                                        className='flex items-center gap-1 text-xs text-red-500 hover:opacity-75 transition-opacity mr-auto'
                                    >
                                        <Trash size={14} color='currentColor' />
                                        حذف
                                    </button>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}
            </div>

            {/* Submit footer */}
            <div className='px-5 pb-5 pt-3 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='currentColor' />
                        <span>ثبت نهایی درخواست</span>
                    </div>
                </Button>
                {items.length === 0 && (
                    <p className='text-description text-[10px] text-center mt-2'>
                        حداقل یک قلم برای ثبت لازم است
                    </p>
                )}
            </div>
        </div>
    )
}

export default RequestItemsList