import { type FC, useState, useEffect } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Button from '@/components/Button'
import { Checkbox } from '@/components/ui/checkbox'
import { useUpdateNotification } from '../hooks/useNotificationData'
import type { Notification } from '../types/Types'

interface Props {
    open: boolean
    close: () => void
    notification: Notification | null
}

type ChannelType = "sms" | "push" | "in-app"

const channelOptions: { value: ChannelType; label: string }[] = [
    { value: "sms", label: 'پیامک' },
    { value: "push", label: 'پوش' },
    { value: "in-app", label: 'درون برنامه' },
]

const getTitleLabel = (title: string): string => {
    const titleMap: Record<string, string> = {
        'order.created': 'سفارش ایجاد شد',
        'order.status.changed': 'تغییر وضعیت سفارش',
        'pager.created': 'پیجر ایجاد شد',
        'payment.success': 'پرداخت موفق',
        'review.created': 'نظر ایجاد شد',
    }
    return titleMap[title] || title
}

const EditNotificationTypeModal: FC<Props> = ({ open, close, notification }) => {
    const [selectedChannels, setSelectedChannels] = useState<ChannelType[]>([])
    const { mutate: updateNotification, isPending } = useUpdateNotification()

    useEffect(() => {
        if (notification) {
            setSelectedChannels([...notification.channels])
        }
    }, [notification])

    if (!notification) return null

    const handleToggleChannel = (channel: ChannelType, checked: boolean) => {
        if (checked) {
            setSelectedChannels((prev) => [...prev, channel])
        } else {
            setSelectedChannels((prev) => prev.filter((c) => c !== channel))
        }
    }

    const handleSubmit = () => {
        updateNotification(
            {
                id: notification.id,
                channels: selectedChannels,
            },
            {
                onSuccess: () => {
                    close()
                },
            }
        )
    }

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader
            title_header="ویرایش نوع اعلان"
            width={500}
        >
            <div className="mt-6 space-y-4">
                <div>
                    <label className="text-sm text-gray-500 mb-1 block">
                        عنوان
                    </label>
                    <p className="text-sm font-medium">
                        {notification.title ? getTitleLabel(notification.title) : '-'}
                    </p>
                </div>

                <div>
                    <label className="text-sm mb-3 block">
                        کانال‌های اعلان
                    </label>
                    <div className="space-y-3">
                        {channelOptions.map((option) => (
                            <div key={option.value} className="flex items-center gap-2">
                                <Checkbox
                                    checked={selectedChannels.includes(option.value)}
                                    onCheckedChange={(checked) =>
                                        handleToggleChannel(option.value, checked as boolean)
                                    }
                                />
                                <label className="text-sm cursor-pointer">
                                    {option.label}
                                </label>
                            </div>
                        ))}
                    </div>
                </div>

                <div className="flex justify-end gap-3 mt-6 border-t border-gray-200 pt-4">
                    <Button
                        label="انصراف"
                        onClick={close}
                        className="w-fit px-6 bg-gray-200 text-gray-700 hover:bg-gray-300"
                    />
                    <Button
                        label="ذخیره"
                        onClick={handleSubmit}
                        isloading={isPending}
                        className="w-fit px-6"
                    />
                </div>
            </div>
        </DefaulModal>
    )
}

export default EditNotificationTypeModal
