import { type FC } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import { Calendar, Call, Card, User as UserIcon, Shop, Money } from 'iconsax-react'
import type { WithdrawalRequestData } from '../WithdrawalRequest'

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

const WithdrawalRequestModal: FC<Props> = ({ open, close, request }) => {

    const formatCurrency = (amount: number) => {
        return new Intl.NumberFormat('fa-IR', {
            style: 'currency',
            currency: 'IRR',
            minimumFractionDigits: 0,
        }).format(amount);
    };

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

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

    const getStatusColor = (status: string) => {
        switch (status) {
            case 'Approved': return 'text-green-600';
            case 'Pending': return 'text-yellow-600';
            default: return 'text-gray-600';
        }
    };

    if (!request) return null;

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader={true}
            title_header="جزئیات درخواست برداشت"
            width={700}
        >
            <div className="p-4 space-y-6">
                {/* Seller Information */}
                <div className="border-b pb-4">
                    <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                        <UserIcon size={20} />
                        اطلاعات فروشنده
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                        <div className="flex items-center gap-2">
                            <UserIcon size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">نام و نام خانوادگی:</span>
                                <p className="font-medium">{request.wallet?.seller?.fullName || '-'}</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2">
                            <Card size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">ایمیل:</span>
                                <p className="font-medium">{request.wallet?.seller?.email || '-'}</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2">
                            <Call size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">شماره تلفن:</span>
                                <p className="font-medium">{request.wallet?.seller?.phoneNumber}</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2">
                            <Calendar size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">تاریخ تولد:</span>
                                <p className="font-medium">
                                    {request.wallet?.seller?.dateOfBirth ? formatDate(request.wallet.seller.dateOfBirth) : '-'}
                                </p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2">
                            <Shop size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">نوع کسب‌وکار:</span>
                                <p className="font-medium">{request.wallet?.seller?.businessType || '-'}</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2">
                            <div className="w-4 h-4 rounded-full bg-gray-400"></div>
                            <div>
                                <span className="text-sm text-gray-500">وضعیت حساب:</span>
                                <p className={`font-medium ${getStatusColor(request.wallet?.seller?.accountStatus || '')}`}>
                                    {getStatusText(request.wallet?.seller?.accountStatus || '')}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Wallet Information */}
                <div className="border-b pb-4">
                    <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                        <Money size={20} />
                        اطلاعات کیف پول
                    </h3>
                    <div className="grid grid-cols-2 gap-4">
                        <div className="flex items-center gap-2">
                            <Money size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">موجودی:</span>
                                <p className="font-medium text-green-600">{formatCurrency(request.wallet?.balance || 0)}</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2">
                            <Calendar size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">تاریخ ایجاد کیف پول:</span>
                                <p className="font-medium">{formatDate(request.wallet?.createdAt || '')}</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-2 col-span-2">
                            <Calendar size={16} className="text-gray-500" />
                            <div>
                                <span className="text-sm text-gray-500">آخرین بروزرسانی:</span>
                                <p className="font-medium">{formatDate(request.wallet?.updatedAt || '')}</p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Additional Information */}
                <div>
                    <h3 className="text-lg font-semibold mb-4">اطلاعات تکمیلی</h3>
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <span className="text-sm text-gray-500">تاریخ عضویت:</span>
                            <p className="font-medium">
                                {request.wallet?.seller?.createdAt ? formatDate(request.wallet.seller.createdAt) : '-'}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-gray-500">وضعیت تکمیل ثبت‌نام:</span>
                            <p className={`font-medium ${request.wallet?.seller?.isRegisterCompleted ? 'text-green-600' : 'text-red-600'}`}>
                                {request.wallet?.seller?.isRegisterCompleted ? 'تکمیل شده' : 'ناتمام'}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-gray-500">فروشنده عمده:</span>
                            <p className={`font-medium ${request.wallet?.seller?.isWholesaler ? 'text-blue-600' : 'text-gray-600'}`}>
                                {request.wallet?.seller?.isWholesaler ? 'بله' : 'خیر'}
                            </p>
                        </div>

                        <div>
                            <span className="text-sm text-gray-500">تعداد درخواست‌های برداشت:</span>
                            <p className="font-medium">{request.withdrawals?.length || 0}</p>
                        </div>
                    </div>
                </div>
            </div>
        </DefaulModal>
    )
}

export default WithdrawalRequestModal