import { FC, useState } from 'react'
import { useGetFeedbacks } from './hooks/useFeedBackData'
import { Feedback } from './types/FeedbackTypes'
import PageLoading from '../../components/PageLoading'
import Pagination from '../../components/Pagination'
import Td from '../../components/Td'
import { formatDate } from '../../helpers/func'
import { Eye } from 'iconsax-react'
import DefaulModal from '../../components/DefaulModal'

const List: FC = () => {
    const [page, setPage] = useState<number>(1)
    const [selectedFeedback, setSelectedFeedback] = useState<Feedback | null>(null)
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
    const { data, isLoading } = useGetFeedbacks(page)

    const handleViewFeedback = (feedback: Feedback) => {
        setSelectedFeedback(feedback)
        setIsModalOpen(true)
    }

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

    if (isLoading) {
        return <PageLoading />
    }

    const feedbacks = data?.data?.feedbacks || []
    const pager = data?.data?.pager

    const renderUserInfo = (feedback: Feedback) => {
        const contact = feedback.email || feedback.phone || 'نامشخص'

        return (
            <div className="text-right">
                <div className="text-xs text-gray-400">{contact}</div>
            </div>
        )
    }

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    لیست فیدبک‌ها
                </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="کاربر" />
                                    <Td text="IP" />
                                    <Td text="پلتفرم" />
                                    <Td text="سرویس" />
                                    <Td text="محتوا" />
                                    <Td text="امتیاز" />
                                    <Td text="تاریخ" />
                                    <Td text="" />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    feedbacks.map((feedback: Feedback) => {
                                        return (
                                            <tr key={feedback.id} className='tr'>
                                                <Td text="">
                                                    {renderUserInfo(feedback)}
                                                </Td>
                                                <Td text="">
                                                    <div className="text-xs text-gray-500 font-mono">
                                                        {feedback.metadata.userIp}
                                                    </div>
                                                </Td>
                                                <Td text={feedback.metadata?.platform ?? ''} />
                                                <Td text="">
                                                    <div className="text-right">
                                                        <div className="font-medium text-gray-900">
                                                            {feedback.service.name}
                                                        </div>
                                                        <div className="text-sm text-gray-500">
                                                            {feedback.service.title}
                                                        </div>
                                                    </div>
                                                </Td>

                                                <Td text="">
                                                    <div className="max-w-xs">
                                                        <p className="text-sm text-gray-900 line-clamp-3">
                                                            {feedback.content}
                                                        </p>
                                                    </div>
                                                </Td>
                                                <Td text="">
                                                    {feedback.rating}
                                                </Td>
                                                <Td text="">
                                                    <div className="text-sm text-gray-900">
                                                        {formatDate(feedback.createdAt)}
                                                    </div>
                                                </Td>

                                                <Td text="">
                                                    <span
                                                        className='text-[blue] cursor-pointer flex items-center gap-2'
                                                        onClick={() => handleViewFeedback(feedback)}
                                                    >
                                                        <Eye size={20} color='blue' />
                                                        <span className='text-xs'>مشاهده</span>
                                                    </span>
                                                </Td>

                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>

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

                        {pager && pager.totalPages > 1 && (
                            <Pagination
                                totalPages={pager.totalPages}
                                currentPage={page}
                                onPageChange={setPage}
                            />
                        )}
                    </div>
            }

            {/* مودال نمایش جزئیات فیدبک */}
            <DefaulModal
                open={isModalOpen}
                close={closeModal}
                isHeader={true}
                title_header="جزئیات فیدبک"
                width={600}
            >
                {selectedFeedback && (
                    <div className="space-y-6 mt-6">
                        {selectedFeedback.content}

                    </div>
                )}
            </DefaulModal>
        </div>
    )
}

export default List