import { type FC, useState } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import Button from '../../../components/Button'
import StatusWithText from '../../../components/StatusWithText'
import { type SellerDocument } from '../types/Types'
import { useChangeStatusDocument } from '../hooks/useSellerData'
import { Eye, Import, CloseCircle } from 'iconsax-react'

interface Props {
    open: boolean
    close: () => void
    documents: SellerDocument[]
    sellerId: string
}

const DocumentsModal: FC<Props> = ({ open, close, documents, sellerId }) => {
    const [selectedImage, setSelectedImage] = useState<string | null>(null)
    const changeStatusMutation = useChangeStatusDocument()

    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 isImage = (url: string) => {
        const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
        const lowerUrl = url.toLowerCase()
        return imageExtensions.some(ext => lowerUrl.includes(ext))
    }

    const handleDownload = (url: string, fileName: string) => {
        const link = document.createElement('a')
        link.href = url
        link.download = fileName
        link.target = '_blank'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }

    const handleApprove = async (documentId: string) => {
        try {
            await changeStatusMutation.mutateAsync({
                sellerId,
                params: {
                    docsId: documentId,
                    status: 'Approved'
                }
            })
            // Refresh documents or update local state
        } catch (error) {
            console.error('خطا در تایید مدرک:', error)
        }
    }

    const handleReject = async (documentId: string) => {
        try {
            await changeStatusMutation.mutateAsync({
                sellerId,
                params: {
                    docsId: documentId,
                    status: 'REJECTED'
                }
            })
            // Refresh documents or update local state
        } catch (error) {
            console.error('خطا در رد مدرک:', error)
        }
    }

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader
            title_header="مدارک فروشنده"
            width={600}
        >
            <div className="space-y-4 mt-5">
                {documents.length === 0 ? (
                    <div className="text-center py-8 text-gray-500">
                        هیچ مدرکی یافت نشد
                    </div>
                ) : (
                    documents.map((document) => (
                        <div
                            key={document._id}
                            className="border border-gray-200 rounded-lg p-4 space-y-3"
                        >
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <span className="font-medium">{document.type}</span>
                                    <StatusWithText
                                        variant={getStatusVariant(document.status)}
                                        text={getStatusText(document.status)}
                                    />
                                </div>
                                <div className="flex gap-2">
                                    {isImage(document.docsUrl) && (
                                        <button
                                            onClick={() => setSelectedImage(document.docsUrl)}
                                            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>
                                    )}
                                    <button
                                        onClick={() => handleDownload(document.docsUrl, `${document.type}_${document._id}`)}
                                        className="flex items-center gap-2 px-3 py-1 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-colors"
                                    >
                                        <Import color="#8C90A3" size={16} />
                                        <span className="text-sm">دانلود</span>
                                    </button>
                                </div>
                            </div>

                            {isImage(document.docsUrl) && (
                                <div className="mt-3">
                                    <img
                                        src={document.docsUrl}
                                        alt={document.type}
                                        className="w-full max-h-48 object-contain rounded-lg border"
                                        onError={(e) => {
                                            e.currentTarget.style.display = 'none'
                                        }}
                                    />
                                </div>
                            )}

                            {document.comment && (
                                <div className="text-sm text-gray-600 bg-gray-50 p-2 rounded">
                                    {document.comment}
                                </div>
                            )}

                            <div className="text-xs text-gray-500">
                                ایجاد شده: {new Date(document.createdAt).toLocaleDateString('fa-IR')}
                            </div>

                            {document.status === 'Pending' && (
                                <div className="flex gap-2">
                                    <Button
                                        size="sm"
                                        variant="primary"
                                        onClick={() => handleApprove(document._id)}
                                        isLoading={changeStatusMutation.isPending}
                                        className="flex-1"
                                    >
                                        تایید
                                    </Button>
                                    <Button
                                        size="sm"
                                        variant="danger"
                                        onClick={() => handleReject(document._id)}
                                        isLoading={changeStatusMutation.isPending}
                                        className="flex-1"
                                    >
                                        رد
                                    </Button>
                                </div>
                            )}
                        </div>
                    ))
                )}
            </div>

            {/* Image Preview Modal */}
            {selectedImage && (
                <DefaulModal
                    open={!!selectedImage}
                    close={() => setSelectedImage(null)}
                    width={800}
                >
                    <div className="relative">
                        <button
                            onClick={() => setSelectedImage(null)}
                            className="absolute top-2 right-2 z-10 bg-black/50 text-white rounded-full p-2 hover:bg-black/70 transition-colors"
                        >
                            <CloseCircle size={24} />
                        </button>
                        <img
                            src={selectedImage}
                            alt="پیش‌نمایش مدرک"
                            className="w-full max-h-[70vh] object-contain rounded-lg"
                        />
                    </div>
                </DefaulModal>
            )}
        </DefaulModal>
    )
}

export default DocumentsModal
