import { type FC, useState } from 'react'
import { type WholesaleRequest } from '../types/Types'
import StatusWithText from '../../../components/StatusWithText'
import Td from '../../../components/Td'
import Button from '../../../components/Button'
import ModalConfrim from '../../../components/ModalConfrim'
import { Calendar, Call, Card, User as UserIcon, Shop, TickCircle } from 'iconsax-react'

interface Props {
    request: WholesaleRequest
    onApprove: (id: string) => void
}

const WholesaleRequestTableRow: FC<Props> = ({ request, onApprove }) => {
    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
    const getStatusVariant = (status: string) => {
        switch (status) {
            case 'Approved': return 'success';
            case 'Pending': return 'warning';
            default: return 'warning';
        }
    };

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

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

    const handleApprove = () => {
        setIsConfirmOpen(true);
    };

    const confirmApprove = () => {
        onApprove(request._id);
        setIsConfirmOpen(false);
    };

    return (
        <>
            <tr key={request._id} 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">
                        <Card size={16} color="#8C90A3" />
                        <span>{request.seller?.email || '-'}</span>
                    </div>
                </Td>
                <Td text="">
                    <div className="flex items-center gap-1">
                        <Call size={16} color="#8C90A3" />
                        <span>{request.seller?.phoneNumber}</span>
                    </div>
                </Td>
                <Td text="">
                    <StatusWithText
                        variant={getStatusVariant(request.status)}
                        text={getStatusText(request.status)}
                    />
                </Td>
                <Td text="">
                    <div className="flex items-center gap-1">
                        <Calendar size={16} color="#8C90A3" />
                        <span>{formatDate(request.createdAt)}</span>
                    </div>
                </Td>
                <Td text="">
                    {request.status === 'Pending' ? (
                        <Button
                            variant="primary"
                            size="sm"
                            className="w-auto px-3"
                            onClick={handleApprove}
                        >
                            <div className="flex items-center gap-1">
                                <TickCircle color="#fff" size={14} />
                                تایید
                            </div>
                        </Button>
                    ) : (
                        <span className="text-gray-400 text-sm">{request.status}</span>
                    )}
                </Td>
            </tr>
            <ModalConfrim
                isOpen={isConfirmOpen}
                close={() => setIsConfirmOpen(false)}
                onConfrim={confirmApprove}
                label="آیا از تایید این درخواست عمده‌فروشی اطمینان دارید؟"
            />
        </>
    )
}

export default WholesaleRequestTableRow
