import { type FC, useState } from 'react'
import { type Seller } from '../types/Types'
import StatusWithText from '../../../components/StatusWithText'
import Td from '../../../components/Td'
import SellerToggle from './SellerToggle'
import DocumentsModal from './DocumentsModal'
import { Calendar, Call, Card, User as UserIcon, Shop, Eye } from 'iconsax-react'

interface Props {
    seller: Seller
    onViewContract: (contract?: Seller['contracts']) => void
}

const SellerTableRow: FC<Props> = ({ seller, onViewContract }) => {
    const [documentsModalOpen, setDocumentsModalOpen] = 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');
    };

    return (
        <>
            <DocumentsModal
                open={documentsModalOpen}
                close={() => setDocumentsModalOpen(false)}
                documents={seller.documents || []}
                sellerId={seller._id}
            />
            <tr key={seller._id} className='tr'>
                <Td text="">
                    <div className="flex items-center gap-1">
                        <UserIcon size={16} color="#8C90A3" />
                        <span>{seller.fullName || '-'}</span>
                    </div>
                </Td>
                <Td text="">
                    <div className="flex items-center gap-1">
                        <Shop size={16} color="#8C90A3" />
                        <span>{seller.shop?.shopName || '-'}</span>
                    </div>
                </Td>
                <Td text="">
                    <div className="flex items-center gap-1">
                        <Card size={16} color="#8C90A3" />
                        <span>{seller.email || '-'}</span>
                    </div>
                </Td>
                <Td text="">
                    <div className="flex items-center gap-1">
                        <Call size={16} color="#8C90A3" />
                        <span>{seller.phoneNumber}</span>
                    </div>
                </Td>
                <Td text="">
                    <StatusWithText
                        variant={getStatusVariant(seller.accountStatus)}
                        text={getStatusText(seller.accountStatus)}
                    />
                </Td>
                <Td text={seller.businessType || '-'} />
                <Td text="">
                    <div className="flex items-center gap-1">
                        <Calendar size={16} color="#8C90A3" />
                        <span>{formatDate(seller.createdAt)}</span>
                    </div>
                </Td>
                <Td text="">
                    {seller.contracts ? (
                        <button
                            onClick={() => onViewContract(seller.contracts)}
                            className="flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors"
                        >
                            <Eye color="#8C90A3" size={16} />
                            <span className="text-sm">مشاهده</span>
                        </button>
                    ) : (
                        <span className="text-gray-400 text-sm">-</span>
                    )}
                </Td>
                <Td text="">
                    <button
                        onClick={() => setDocumentsModalOpen(true)}
                        className="flex items-center gap-1 hover:bg-gray-50 px-2 py-1 rounded transition-colors"
                    >
                        <Card size={16} color="#8C90A3" />
                        <span>مدارک ({seller.documents?.length || 0})</span>
                    </button>
                </Td>
                <Td text="">
                    <SellerToggle
                        sellerId={seller._id}
                        isActive={seller.accountStatus === 'Approved'}
                    />
                </Td>
            </tr>
        </>
    )
}

export default SellerTableRow
