'use client'
import React, { useState } from 'react'
import Image from 'next/image'
import { MessageText, ShieldTick, Truck, CloseCircle, MessageAdd } from 'iconsax-react'
import { ShipmentItemDetail } from '../../types/Types'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import AddComment from '@/app/product/components/AddComment'
import { PRIMARY_COLOR } from '@/config/const'
import { Separator } from '@/components/ui/separator'

interface OrderProductItemProps {
    item: ShipmentItemDetail
    shipperName: string
    onCancelClick: () => void
}

const OrderProductItem: React.FC<OrderProductItemProps> = ({ item, shipperName }) => {

    const { id } = useParams()
    const [isCommentModalOpen, setIsCommentModalOpen] = useState(false)

    return (
        <div className='mt-8 py-7 border-t items-start flex gap-6 sm:flex-row flex-col'>
            <Image
                src={item.product.imagesUrl.cover}
                width={80}
                height={80}
                className='w-20 h-20 object-cover rounded-lg border'
                alt={item.product.title_fa}
            />

            <div className='flex-1 w-full'>
                <div className='truncate max-w-[90%] font-medium'>
                    {item.product.title_fa}
                </div>

                <div className='mt-4 text-[#999999] space-y-3'>
                    <div className='flex gap-2'>
                        <div>تعداد اقلام :‌</div>
                        <div>{item.quantity}</div>
                    </div>
                    <div className='flex gap-2'>
                        <div>تعداد کنسلی :‌</div>
                        <div>{item.cancelled_quantity}</div>
                    </div>
                    <div className='flex gap-2'>
                        <div>تعداد مرجوعی :‌</div>
                        <div>{item.returned_quantity}</div>
                    </div>

                    <div className='flex gap-3 items-center'>
                        <div className='size-3 bg-black rounded-full'></div>
                        <div>
                            {item.variant.meterage?.value ||
                                item.variant.size?.value ||
                                'ندارد'}
                        </div>
                    </div>

                    <div className='flex gap-3 items-center'>
                        <MessageText size={20} className="text-gray-400" />
                        <div className="font-mono">
                            SKP_{item.product._id}
                        </div>
                    </div>

                    <div className='flex gap-3 items-center'>
                        <ShieldTick size={20} className="text-green-500" />
                        <div>
                            گارانتی {item.variant.warranty.duration} {item.variant.warranty.name}
                        </div>
                    </div>

                    <div className='flex gap-3 items-center'>
                        <Truck size={20} className="text-primary" />
                        <div>
                            {shipperName}
                        </div>
                    </div>
                </div>

                <div className='mt-8 flex justify-between items-center'>
                    <div>
                        <div className='text-lg font-semibold'>
                            {Intl.NumberFormat('fa-IR').format(item.selling_price)}
                        </div>
                        <div className='text-xs mt-1 text-gray-500'>تومان</div>
                    </div>

                    <div className='flex gap-4 items-center'>
                        <button
                            onClick={() => setIsCommentModalOpen(true)}
                            className='flex items-center cursor-pointer gap-2 text-primary rounded-lg transition-colors'
                        >
                            <MessageAdd color={PRIMARY_COLOR} size={16} />
                            <div>ثبت دیدگاه</div>
                        </button>

                        <Separator orientation='vertical' color='gray' style={{ height: 24 }} />

                        {item.quantity !== item.cancelled_quantity && (
                            <Link href={`/profile/orders/${id}/cancel`}>
                                <button
                                    className='flex items-center cursor-pointer gap-2 text-[#B3261E]  rounded-lg transition-colors'
                                >
                                    <CloseCircle color='#B3261E' size={16} />
                                    <div>لغو سفارش</div>
                                </button>
                            </Link>
                        )}
                    </div>
                </div>
            </div>

            <AddComment
                open={isCommentModalOpen}
                close={() => setIsCommentModalOpen(false)}
                productId={item.product._id.toString()}
            />
        </div>
    )
}

export default OrderProductItem
