import DefaulModal from '@/components/DefaulModal'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { InfoCircle } from 'iconsax-react'
import { useState, type FC } from 'react'
import { useGetProductQuestion, useSaveReport } from '../hooks/useProductData'
import { ProductQuestion } from '../types/Types'
import { toast } from '@/components/Toast'

type Props = {
    productId: number
    productName?: string
}

const ModalReport: FC<Props> = (props) => {
    const { productId, productName } = props
    const [isOpen, setIsOpen] = useState<boolean>(false)
    const [selectedOptions, setSelectedOptions] = useState<string[]>([])
    const [description, setDescription] = useState<string>('')

    const { data: questionsData, isLoading } = useGetProductQuestion(productId.toString())
    const saveReportMutation = useSaveReport()

    const reportOptions = questionsData?.results?.questions || []

    const handleSubmit = async () => {
        if (selectedOptions.length === 0) return

        await saveReportMutation.mutateAsync({
            productId: productId.toString(),
            answers: selectedOptions.map(id => ({ questionId: parseInt(id) })),
            description: description.trim() || ''
        })

        setIsOpen(false)
        setSelectedOptions([])
        setDescription('')
        toast('گزارش شما با موفقیت ارسال شد', 'success')

    }

    return (
        <div>
            <div onClick={() => setIsOpen(true)} className='mt-6 flex gap-2 cursor-pointer'>
                <InfoCircle size={18} color='#878787' />
                <span className='text-sm text-gray-500 font-light'>گزارش نادرستی کالا</span>
            </div>

            <DefaulModal
                open={isOpen}
                close={() => setIsOpen(false)}
                title_header='گزارش نادرستی مشخصات'
                isHeader
            >
                <div>
                    {/* Product Name */}
                    {productName && (
                        <div className='mb-6'>
                            <p className='text-sm text-gray-600'>{productName}</p>
                        </div>
                    )}

                    {/* Report Options */}
                    <div className='space-y-4 mb-6'>
                        {isLoading ? (
                            <div className='flex justify-center py-4'>
                                <div className='animate-spin rounded-full h-6 w-6 border-b-2 border-orange-500'></div>
                            </div>
                        ) : (
                            reportOptions.map((option: ProductQuestion) => (
                                <div key={option._id} className='flex items-center gap-3'>
                                    <Checkbox
                                        id={`option-${option._id}`}
                                        checked={selectedOptions.includes(option._id.toString())}
                                        onCheckedChange={(checked) => {
                                            if (checked) {
                                                setSelectedOptions(prev => [...prev, option._id.toString()])
                                            } else {
                                                setSelectedOptions(prev => prev.filter(id => id !== option._id.toString()))
                                            }
                                        }}
                                    />
                                    <label
                                        htmlFor={`option-${option._id}`}
                                        className='text-sm text-gray-700 cursor-pointer'
                                    >
                                        {option.title}
                                    </label>
                                </div>
                            ))
                        )}
                    </div>

                    {/* Description */}
                    <div className='mb-6'>
                        <h3 className='text-sm font-medium text-gray-700 mb-2'>توضیحات</h3>
                        <textarea
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            placeholder='متن توضیحات خود را بنویسید'
                            className='w-full h-24 text-sm p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent'
                        />
                    </div>

                    {/* Submit Button */}
                    <Button
                        onClick={handleSubmit}
                        disabled={selectedOptions.length === 0 || saveReportMutation.isPending}
                        isLoading={saveReportMutation.isPending}
                        className='w-full'
                        size="lg"
                    >
                        ارسال
                    </Button>
                </div>
            </DefaulModal>
        </div>
    )
}

export default ModalReport