'use client'
import { useState } from 'react'
import usePost from '@/Utils/Hooks/usePost'
import { NotificationPreferencesAPI } from '@/Utils/APIRequest/Endpoints'
import { useTranslation } from '@/Utils/Hooks/useTranslate'
import { CustomToast } from '@/Utils/CustomToast'

const ALL_TYPES = [
    'closed',
    'completion_request',
    'draft_available',
    'drafting_deliverables',
    'posting_deliverables',
    'quotation_available',
    'uncontacted',
    'waiting_for_quotations',
    'archived',
]

const formatLabel = (type: string) => type.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())

const ToggleSwitch = ({ checked, onChange, disabled = false }) => (
    <label className='relative inline-flex items-center cursor-pointer'>
        <input
            type='checkbox'
            checked={checked}
            onChange={onChange}
            disabled={disabled}
            className='sr-only peer'
        />
        <div className="w-10 h-6 bg-gray/30 border border-gray/40 rounded-full peer-checked:bg-gradient-to-br peer-checked:from-secondary peer-checked:to-primary peer-checked:border-transparent after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:bg-white after:rounded-full after:h-[18px] after:w-[18px] after:transition-all after:shadow-sm peer-checked:after:translate-x-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none"></div>
    </label>
)

const NotificationToggleItem = ({ preference, refetch }) => {
    const { translations } = useTranslation()
    const [isEnabled, setIsEnabled] = useState(preference?.is_enabled ?? false)
    const [enabledTypes, setEnabledTypes] = useState<string[]>(preference?.enabled_types ?? [])

    const getLabel = (value: string) => translations?.[value] ?? formatLabel(value)

    const { isPending, mutate } = usePost(`${NotificationPreferencesAPI}/${preference.id}`, null, (response) => {
        if (response?.status === 200 || response?.status === 201) {
            CustomToast("success", response?.data?.message || "Preference updated successfully")
            refetch()
        }
    }, 'patch')

    const handleMainToggle = () => {
        const newEnabled = !isEnabled
        setIsEnabled(newEnabled)
        const newTypes = newEnabled ? [...ALL_TYPES] : []
        setEnabledTypes(newTypes)
        mutate({ is_enabled: newEnabled, enabled_types: [] } as any)
    }

    const handleTypeToggle = (type: string) => {
        const newTypes = enabledTypes.includes(type)
            ? enabledTypes.filter((t) => t !== type)
            : [...enabledTypes, type]
        setEnabledTypes(newTypes)
        mutate({ is_enabled: isEnabled, enabled_types: newTypes } as any)
    }

    return (
        <div className="py-2">
            <div className="flex items-center justify-between">
                <span className="text-base font-bold text-black">{getLabel(preference?.channel)} {translations?.notification}</span>
                <ToggleSwitch checked={isEnabled} onChange={handleMainToggle} disabled={isPending} />
            </div>

            {/* {isEnabled && (
                <div className="mt-3 ml-4 flex flex-col gap-1 border-l-2 border-lightGray pl-4">
                    {ALL_TYPES.map((type) => (
                        <div key={type} className="flex items-center justify-between py-2.5">
                            <span className="text-sm font-medium text-black/70">{getLabel(type)}</span>
                            <ToggleSwitch
                                checked={enabledTypes.includes(type)}
                                onChange={() => handleTypeToggle(type)}
                                disabled={isPending}
                            />
                        </div>
                    ))}
                </div>
            )} */}
        </div>
    )
}

export default NotificationToggleItem