import { type FC } from 'react'
import { type ProductRequest } from '../types/Types'
import StatusWithText from '../../../components/StatusWithText'
import Td from '../../../components/Td'
import { Calendar, User as UserIcon, Shop, Tag, Box, MessageSquare, Eye } from 'iconsax-react'

interface Props {
    request: ProductRequest
    onClick?: () => void
}

const ProductRequestTableRow: FC<Props> = ({ request, onClick }) => {
    const getStatusVariant = (status: string) => {
        switch (status) {
            case 'Approved': return 'success';
            case 'Rejected': return 'error';
            case 'Pending': return 'warning';
            case 'Draft': return 'warning';
            default: return 'warning';
        }
    };

    const getStatusText = (status: string) => {
        switch (status) {
            case 'Approved': return 'تایید شده';
            case 'Rejected': return 'رد شده';
            case 'Pending': return 'در انتظار';
            case 'Draft': return 'پیش‌نویس';
            default: return status;
        }
    };

    const formatDate = (dateString: string) => {
        if (!dateString) return '-';
        return new Date(dateString).toLocaleDateString('fa-IR');
    };

    return (
        <tr className='tr'>
            <Td text="">
                <div className="flex items-center gap-1">
                    <UserIcon size={16} color="#8C90A3" />
                    <span>{request.seller?.fullName || '-'}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Shop size={16} color="#8C90A3" />
                    <span>{request.shop?.shopName || '-'}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Box size={16} color="#8C90A3" />
                    <span>{request.productName}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Tag size={16} color="#8C90A3" />
                    <span>{request.brand?.title_fa || '-'}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <MessageSquare size={16} color="#8C90A3" />
                    <span>{request.category?.title_fa || '-'}</span>
                </div>
            </Td>
            <Td text="">
                <StatusWithText
                    variant={getStatusVariant(request.requestStatus)}
                    text={getStatusText(request.requestStatus)}
                />
            </Td>
            <Td text="">
                <div className="flex items-center gap-1">
                    <Calendar size={16} color="#8C90A3" />
                    <span>{formatDate(request._id ? new Date().toISOString() : '')}</span>
                </div>
            </Td>
            <Td text="">
                <div className="flex flex-col gap-1 text-xs">
                    {request.requestPhotography && <span>📸 عکاسی</span>}
                    {request.expertReview && <span>👨‍💼 بررسی تخصصی</span>}
                    {request.unboxingVideo && <span>📦 ویدیو باز کردن بسته</span>}
                </div>
            </Td>
            <Td text="">
                <Eye
                    size={16}
                    color="#8C90A3"
                    className="cursor-pointer hover:text-blue-500 transition-colors"
                    onClick={(e: React.MouseEvent) => {
                        e.stopPropagation();
                        onClick?.();
                    }}
                />
            </Td>
        </tr>
    )
}

export default ProductRequestTableRow
