import React, { useMemo, useState } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import { useSharedStore } from '@/shared/store/sharedStore'
import { useSendFeedback } from './hooks/useFeedbackData'
import { toast } from '@/components/Toast'
import { ErrorType } from '@/helpers/types'


// Import images
import sad1 from '@/assets/images/sad1.svg'
import sad2 from '@/assets/images/sad2.svg'
import sad3 from '@/assets/images/sad3.svg'
import smile from '@/assets/images/smile.svg'
import smile2 from '@/assets/images/smile2.svg'
import smile3 from '@/assets/images/smile3.svg'
import { useGetProfile } from '../profile/hooks/useProfileData'

const ReportBug: React.FC = () => {
    const { openReportBug, setOpenReportBug } = useSharedStore()
    const [description, setDescription] = useState('')
    const [feeling, setFeeling] = useState<string | null>(null)
    const { data } = useGetProfile()
    const { mutate: sendReportBug, isPending } = useSendFeedback()

    const isValid = useMemo(() => description.trim().length > 0, [description])

    const getRatingFromFeeling = (feeling: string | null): number => {
        if (!feeling) return 0

        const feelingMap: Record<string, number> = {
            'angry': 1,   // sad1
            'crying': 2,  // sad2
            'sad': 3,     // sad3
            'neutral': 4, // smile
            'smile': 6,   // smile2
            'love': 5,    // smile3
        }

        return feelingMap[feeling] || 0
    }

    const handleSubmit = async () => {
        if (!isValid) return

        sendReportBug({
            content: description,
            rating: getRatingFromFeeling(feeling),
            serviceId: import.meta.env.VITE_SERVICE_ID,
            email: data?.data?.user?.email,
            phone: data?.data?.user?.phone,
        }, {
            onSuccess: () => {
                toast('گزارش با موفقیت ارسال شد', 'success')
                setDescription('')
                setFeeling(null)
                setOpenReportBug(false)
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error?.message[0], 'error')
            }
        })
    }

    const feelings = [
        { id: 'neutral', image: smile, alt: 'خنثی' },
        { id: 'smile', image: smile2, alt: 'راضی' },
        { id: 'love', image: smile3, alt: 'راضی' },
        { id: 'angry', image: sad1, alt: 'ناراضی' },
        { id: 'crying', image: sad2, alt: 'ناراضی' },
        { id: 'sad', image: sad3, alt: 'ناراضی' },
    ]

    return (
        <DefaulModal open={openReportBug} close={() => setOpenReportBug(false)} isHeader title_header='گزارش اشکالات' width={500}>
            <div className='space-y-6 mt-4'>
                <div className='text-xs text-muted-foreground leading-5'>
                    لطفاً در صورت مشاهده هرگونه اشکال یا باگ در سایت، از طریق این فرم گزارش دهید. همچنین می‌توانید بازخورد، نظر یا پیشنهادات خود را درباره سایت با ما به اشتراک بگذارید. اطلاعات دقیق شما به ما کمک می‌کند مشکلات را سریع‌تر برطرف کنیم و کیفیت سایت را بهبود بخشیم.
                </div>

                <Textarea
                    label='متن گزارش'
                    placeholder='اینجا بنویسید...'
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                />

                <div className='flex  justify-start'>
                    <div className='flex w-full justify-between gap-4'>
                        {feelings.map((f, idx) => (
                            <div key={f.id} className='flex flex-col items-center gap-1'>
                                <button
                                    type='button'
                                    onClick={() => setFeeling(f.id)}
                                    className={`p-1 rounded-lg transition-all`}
                                >
                                    <img
                                        src={f.image}
                                        alt={f.alt}
                                        className={`w-8 object-contain ${feeling === f.id ? 'filterBlue' : ''}`}
                                    />
                                </button>
                                {idx === 0 && (
                                    <div className='text-xs mt-2 text-muted-foreground'>راضی</div>
                                )}
                                {idx === feelings.length - 1 && (
                                    <div className='text-xs mt-2 text-muted-foreground'>ناراضی</div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>

                <div className='text-[11px] text-muted-foreground leading-6'>
                    با ادامه و ارسال، شما تأیید می‌کنید که «دی‌میل» می‌تواند پاسخ‌ها و اطلاعات حساب شما را به‌منظور بهبود خدمات جمع‌آوری و استفاده کند. برای جزئیات بیشتر لطفاً به <a target='_blank' href='https://danakcorp.com/conditions' className='text-blue-500'>قوانین و شرایط و سیاست حریم خصوصی</a> مراجعه کنید.
                </div>

                <div className='w-full flex justify-end'>
                    <Button onClick={handleSubmit} disabled={!isValid} loading={isPending} className='px-10 w-fit'>ارسال</Button>
                </div>
            </div>
        </DefaulModal>
    )
}

export default ReportBug