import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useGetReports } from '../hooks/useIconData'
import PageLoading from '../../../components/PageLoading'
import Td from '../../../components/Td'
import { ReportItem } from '../types/Types'
import moment from 'moment-jalaali'
import { Eye } from 'iconsax-react'
import DefaulModal from '../../../components/DefaulModal'

const WarningsList: FC = () => {

    const { t } = useTranslation('global')
    const { data: reports, isLoading } = useGetReports()
    const [selectedReport, setSelectedReport] = useState<ReportItem | null>(null)
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false)

    const reportsList = (reports as { data?: ReportItem[] })?.data || []

    const handleViewReport = (report: ReportItem) => {
        setSelectedReport(report)
        setIsModalOpen(true)
    }

    const closeModal = () => {
        setIsModalOpen(false)
        setSelectedReport(null)
    }

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('report.list_report')}
                </div>
            </div>

            {
                isLoading ?
                    <PageLoading />
                    :
                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                        <table className='w-full text-sm '>
                            <thead className='thead'>
                                <tr>
                                    <Td text={t('report.subject')} />
                                    <Td text={t('report.content')} />
                                    <Td text={t('report.phone')} />
                                    <Td text={t('report.scope')} />
                                    <Td text={t('report.status')} />
                                    <Td text={t('report.date')} />
                                    <Td text={t('report.detail')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    reportsList.map((item: ReportItem) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.subject} />
                                                <Td text={item.content?.substring(0, 50) + (item.content?.length > 50 ? '...' : '')} />
                                                <Td text={item.phone || '-'} />
                                                <Td text={item.scope} />
                                                <Td text={item.status} />
                                                <Td text={''}>
                                                    <div className='dltr text-right'>
                                                        {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
                                                    </div>
                                                </Td>
                                                <Td text={''}>
                                                    <div className='flex items-center gap-2'>
                                                        <Eye
                                                            size={20}
                                                            color='#8C90A3'
                                                            className='cursor-pointer'
                                                            onClick={() => handleViewReport(item)}
                                                        />
                                                    </div>
                                                </Td>
                                                <Td text={''} />
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>

                        {reportsList.length === 0 && (
                            <div className="text-center py-12">
                                <div className="text-gray-500 text-lg">هیچ گزارشی یافت نشد</div>
                            </div>
                        )}
                    </div>
            }

            {/* مودال نمایش متن کامل گزارش */}
            <DefaulModal
                open={isModalOpen}
                close={closeModal}
                isHeader={true}
                title_header={t('report.detail')}
                width={600}
            >
                {selectedReport && (
                    <div className="space-y-6 mt-6">
                        <div>
                            <div className="text-sm font-medium text-gray-600 mb-2">{t('report.subject')}</div>
                            <div className="text-base text-gray-900">{selectedReport.subject}</div>
                        </div>
                        <div>
                            <div className="text-sm font-medium text-gray-600 mb-2">{t('report.content')}</div>
                            <div className="text-base text-gray-900 whitespace-pre-wrap">{selectedReport.content}</div>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            {selectedReport.phone && (
                                <div>
                                    <div className="text-sm font-medium text-gray-600 mb-2">{t('report.phone')}</div>
                                    <div className="text-base text-gray-900">{selectedReport.phone}</div>
                                </div>
                            )}
                            <div>
                                <div className="text-sm font-medium text-gray-600 mb-2">{t('report.scope')}</div>
                                <div className="text-base text-gray-900">{selectedReport.scope}</div>
                            </div>
                            <div>
                                <div className="text-sm font-medium text-gray-600 mb-2">{t('report.status')}</div>
                                <div className="text-base text-gray-900">{selectedReport.status}</div>
                            </div>
                            <div>
                                <div className="text-sm font-medium text-gray-600 mb-2">{t('report.date')}</div>
                                <div className="text-base text-gray-900 dltr text-right">
                                    {moment(selectedReport.createdAt).format('jYYYY-jMM-jDD HH:mm')}
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </DefaulModal>
        </div>
    )
}

export default WarningsList