import { type FC } from 'react'
import DefaulModal from '@/components/DefaulModal'
import type { Pager } from '../types/Types'
import { formatOptionalDate } from '@/helpers/func'
import Status from '@/components/Status'
import Button from '@/components/Button'
import { useTranslation } from 'react-i18next'
import { useUpdatePagerStatus } from '../hooks/usePagerData'
import { PagerStatus } from '../enum/Enum'

interface Props {
    open: boolean
    close: () => void
    pager: Pager | null
}

const PagerDetailModal: FC<Props> = ({ open, close, pager }) => {
    const { t } = useTranslation('global')
    const { mutate: updateStatus, isPending } = useUpdatePagerStatus()

    if (!pager) return null

    const getStatusVariant = (status: string) => {
        switch (status) {
            case PagerStatus.Pending:
                return 'warning'
            case PagerStatus.Acknowledged:
                return 'info'
            case PagerStatus.Rejected:
                return 'error'
            case PagerStatus.Completed:
                return 'success'
            default:
                return 'pending'
        }
    }

    const getStatusLabel = (status: string) => {
        switch (status) {
            case PagerStatus.Pending:
                return t('pager.status.pending')
            case PagerStatus.Acknowledged:
                return t('pager.status.acknowledged')
            case PagerStatus.Rejected:
                return t('pager.status.rejected')
            case PagerStatus.Completed:
                return t('pager.status.completed')
            default:
                return status
        }
    }

    const handleMarkAsCompleted = () => {
        updateStatus(
            { id: pager.id, status: PagerStatus.Completed },
            {
                onSuccess: () => {
                    close()
                },
            }
        )
    }

    const statusVariant = getStatusVariant(pager.status)
    const statusLabel = getStatusLabel(pager.status)

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader
            title_header="جزئیات پیجر"
            width={600}
        >
            <div className="mt-6 space-y-4">
                <div className="grid grid-cols-2 gap-4">
                    <div>
                        <label className="text-sm text-gray-500 mb-1 block">
                            شماره میز
                        </label>
                        <p className="text-sm font-medium">
                            {pager.tableNumber || '-'}
                        </p>
                    </div>

                    <div>
                        <label className="text-sm text-gray-500 mb-1 block">
                            وضعیت
                        </label>
                        <div className="mt-1">
                            <Status variant={statusVariant} label={statusLabel} />
                        </div>
                    </div>



                    <div>
                        <label className="text-sm text-gray-500 mb-1 block">
                            کاربر
                        </label>
                        <p className="text-sm font-medium">
                            {pager.user || '-'}
                        </p>
                    </div>

                    {pager.deletedAt && (
                        <div>
                            <label className="text-sm text-gray-500 mb-1 block">
                                تاریخ حذف
                            </label>
                            <p className="text-sm font-medium">
                                {formatOptionalDate(pager.deletedAt, {
                                    year: 'numeric',
                                    month: '2-digit',
                                    day: '2-digit',
                                    hour: '2-digit',
                                    minute: '2-digit',
                                })}
                            </p>
                        </div>
                    )}
                </div>

                <div>
                    <label className="text-sm text-gray-500 mb-1 block">
                        پیام
                    </label>
                    <p className="text-sm font-medium bg-gray-50 p-3 rounded-lg whitespace-pre-wrap break-words">
                        {pager.message || '-'}
                    </p>
                </div>

                {pager.status === PagerStatus.Pending && (
                    <div className="flex justify-end mt-6 border-t border-gray-200 pt-4">
                        <Button
                            label="متوجه شدم"
                            onClick={handleMarkAsCompleted}
                            isloading={isPending}
                            className="w-fit px-6"
                        />
                    </div>
                )}
            </div>
        </DefaulModal>
    )
}

export default PagerDetailModal
