import { type FC } from 'react'
import DefaulModal from '@/components/DefaulModal'
import { type ProductRequest } from '../types/Types'
import StatusWithText from '@/components/StatusWithText'
import { User, Shop, Box, Map, Global, Archive, TickCircle, CloseCircle, Video, Camera } from 'iconsax-react'

interface Props {
    open: boolean
    close: () => void
    request: ProductRequest | null
}

const ProductRequestDetailModal: FC<Props> = ({ open, close, request }) => {
    if (!request) return null

    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;
        }
    };


    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader={true}
            title_header="جزئیات درخواست ایجاد محصول"
            width={900}
        >
            <div className="space-y-6 mt-4 max-h-[70vh] overflow-y-auto">
                {/* اطلاعات فروشنده */}
                <div className="bg-gray-50 rounded-lg p-4">
                    <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <User size={20} color="#6B7280" />
                        اطلاعات فروشنده
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <span className="text-sm text-gray-600">نام فروشنده:</span>
                            <p className="font-medium">{request.seller?.fullName || '-'}</p>
                        </div>
                        <div>
                            <span className="text-sm text-gray-600">شناسه فروشنده:</span>
                            <p className="font-medium font-mono text-sm">{request.seller?._id || '-'}</p>
                        </div>
                    </div>
                </div>

                {/* اطلاعات فروشگاه */}
                <div className="bg-blue-50 rounded-lg p-4">
                    <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <Shop size={20} color="#3B82F6" />
                        اطلاعات فروشگاه
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <span className="text-sm text-gray-600">نام فروشگاه:</span>
                            <p className="font-medium">{request.shop?.shopName || '-'}</p>
                        </div>
                        <div>
                            <span className="text-sm text-gray-600">کد فروشگاه:</span>
                            <p className="font-medium">{request.shop?.shopCode || '-'}</p>
                        </div>
                        {request.shop?.address && (
                            <>
                                <div className="md:col-span-2">
                                    <span className="text-sm text-gray-600 flex items-center gap-1">
                                        <Map size={16} />
                                        آدرس:
                                    </span>
                                    <p className="font-medium">{request.shop.address.address}</p>
                                    <p className="text-sm text-gray-500 mt-1">
                                        {request.shop.address.city?.name}، {request.shop.address.province?.name}
                                    </p>
                                    {request.shop.address.postalCode && (
                                        <p className="text-sm text-gray-500">
                                            کد پستی: {request.shop.address.postalCode}
                                        </p>
                                    )}
                                </div>
                            </>
                        )}
                    </div>
                </div>

                {/* اطلاعات محصول */}
                <div className="bg-green-50 rounded-lg p-4">
                    <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <Box size={20} color="#10B981" />
                        اطلاعات محصول
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <span className="text-sm text-gray-600">نام محصول:</span>
                            <p className="font-medium">{request.productName}</p>
                        </div>
                        <div>
                            <span className="text-sm text-gray-600">برند:</span>
                            <p className="font-medium">{request.brand?.title_fa} ({request.brand?.title_en})</p>
                        </div>
                        <div>
                            <span className="text-sm text-gray-600">دسته‌بندی:</span>
                            <p className="font-medium">{request.category?.title_fa}</p>
                        </div>
                        <div>
                            <span className="text-sm text-gray-600 flex items-center gap-1">
                                <Global size={16} />
                                منبع:
                            </span>
                            <p className="font-medium">{request.source}</p>
                        </div>
                        <div className="md:col-span-2">
                            <span className="text-sm text-gray-600">توضیحات:</span>
                            <p className="font-medium mt-1 p-3 bg-white rounded border">{request.description}</p>
                        </div>
                    </div>
                </div>

                {/* ابعاد محصول */}
                {request.dimensions && (
                    <div className="bg-purple-50 rounded-lg p-4">
                        <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                            <Archive size={20} color="#8B5CF6" />
                            ابعاد و وزن محصول
                        </h3>
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div>
                                <span className="text-sm text-gray-600">وزن بسته (گرم):</span>
                                <p className="font-medium">{request.dimensions.package_weight}</p>
                            </div>
                            <div>
                                <span className="text-sm text-gray-600">ارتفاع (سانتی‌متر):</span>
                                <p className="font-medium">{request.dimensions.package_height}</p>
                            </div>
                            <div>
                                <span className="text-sm text-gray-600">طول (سانتی‌متر):</span>
                                <p className="font-medium">{request.dimensions.package_length}</p>
                            </div>
                            <div>
                                <span className="text-sm text-gray-600">عرض (سانتی‌متر):</span>
                                <p className="font-medium">{request.dimensions.package_width}</p>
                            </div>
                        </div>
                    </div>
                )}

                {/* مزایا و معایب */}
                {(request.advantages?.length > 0 || request.disAdvantages?.length > 0) && (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {request.advantages && request.advantages.length > 0 && (
                            <div className="bg-green-50 rounded-lg p-4">
                                <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                                    <TickCircle size={20} color="#10B981" />
                                    مزایا
                                </h3>
                                <ul className="space-y-2">
                                    {request.advantages.map((advantage, index) => (
                                        <li key={index} className="flex items-start gap-2">
                                            <TickCircle size={16} color="#10B981" className="mt-0.5 flex-shrink-0" />
                                            <span className="text-sm">{advantage}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}

                        {request.disAdvantages && request.disAdvantages.length > 0 && (
                            <div className="bg-red-50 rounded-lg p-4">
                                <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
                                    <CloseCircle size={20} color="#EF4444" />
                                    معایب
                                </h3>
                                <ul className="space-y-2">
                                    {request.disAdvantages.map((disadvantage, index) => (
                                        <li key={index} className="flex items-start gap-2">
                                            <CloseCircle size={16} color="#EF4444" className="mt-0.5 flex-shrink-0" />
                                            <span className="text-sm">{disadvantage}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}
                    </div>
                )}

                {/* خدمات درخواست شده */}
                <div className="bg-yellow-50 rounded-lg p-4">
                    <h3 className="text-lg font-semibold text-gray-800 mb-3">خدمات درخواست شده</h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className={`p-3 rounded-lg border-2 ${request.requestPhotography ? 'border-green-200 bg-green-100' : 'border-gray-200 bg-gray-100'}`}>
                            <div className="flex items-center gap-2 mb-2">
                                <Camera size={18} color={request.requestPhotography ? "#10B981" : "#6B7280"} />
                                <span className="font-medium">عکاسی محصول</span>
                            </div>
                            {request.requestPhotography && request.requestPhotosCount && (
                                <p className="text-sm text-gray-600">تعداد عکس: {request.requestPhotosCount}</p>
                            )}
                        </div>

                        <div className={`p-3 rounded-lg border-2 ${request.expertReview ? 'border-green-200 bg-green-100' : 'border-gray-200 bg-gray-100'}`}>
                            <div className="flex items-center gap-2 mb-2">
                                <User size={18} color={request.expertReview ? "#10B981" : "#6B7280"} />
                                <span className="font-medium">بررسی تخصصی</span>
                            </div>
                        </div>

                        <div className={`p-3 rounded-lg border-2 ${request.unboxingVideo ? 'border-green-200 bg-green-100' : 'border-gray-200 bg-gray-100'}`}>
                            <div className="flex items-center gap-2 mb-2">
                                <Video size={18} color={request.unboxingVideo ? "#10B981" : "#6B7280"} />
                                <span className="font-medium">ویدیو باز کردن بسته</span>
                            </div>
                        </div>
                    </div>
                </div>

                {/* وضعیت درخواست */}
                <div className="bg-gray-50 rounded-lg p-4">
                    <div>
                        <span className="text-sm text-gray-600 mb-2 block">وضعیت درخواست:</span>
                        <StatusWithText
                            variant={getStatusVariant(request.requestStatus)}
                            text={getStatusText(request.requestStatus)}
                        />
                    </div>
                </div>
            </div>
        </DefaulModal>
    )
}

export default ProductRequestDetailModal