import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSignatureData, useCreateSignature, useUpdateSignature } from './hooks/useSignatureData'
import { SignatureData } from './types/Types'

const Signture: FC = () => {
    const { t } = useTranslation()
    const { data: signatureData, isLoading } = useSignatureData()
    const createSignatureMutation = useCreateSignature()
    const updateSignatureMutation = useUpdateSignature()

    const [formData, setFormData] = useState<SignatureData>({
        name: '',
        textContent: ''
    })

    const [isSubmitting, setIsSubmitting] = useState(false)

    useEffect(() => {
        if (signatureData?.data?.signature) {
            setFormData({
                name: signatureData.data.signature.name || '',
                textContent: signatureData.data.signature.textContent || ''
            })
        }
    }, [signatureData])

    const handleSubmit = async () => {
        if (!formData.name.trim() || !formData.textContent.trim()) {
            return
        }

        setIsSubmitting(true)

        try {
            if (signatureData?.data?.signature?.id) {
                await updateSignatureMutation.mutateAsync(formData)
            } else {
                await createSignatureMutation.mutateAsync(formData)
            }
        } catch (error) {
            console.error('Error saving signature:', error)
        } finally {
            setIsSubmitting(false)
        }
    }

    const handleInputChange = (field: keyof SignatureData, value: string) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }))
    }

    if (isLoading) {
        return (
            <div className='bg-white rounded-4xl p-8 mt-9'>
                <div className='text-center py-8'>
                    در حال بارگذاری...
                </div>
            </div>
        )
    }

    return (
        <div className='bg-white rounded-4xl p-8 mt-9'>
            <div className='mt-9'>
                <div className='flex xl:flex-row gap-4 flex-col justify-between pb-10'>
                    <div className='flex-1'>
                        <div className='xl:text-lg'>
                            {t('setting.signature')}
                        </div>
                        <div className='xl:text-sm text-xs text-description mt-1.5'>
                            {t('setting.signature_description')}
                        </div>
                    </div>

                    <div className='flex-1 mt-4 xl:mt-0'>
                        <Input
                            label={t('setting.name_sign')}
                            value={formData.name}
                            onChange={(e) => handleInputChange('name', e.target.value)}
                            placeholder="نام امضا را وارد کنید"
                        />
                        <div className='xl:mt-8 mt-5'>
                            <Textarea
                                label={t('setting.description_sign')}
                                value={formData.textContent}
                                onChange={(e) => handleInputChange('textContent', e.target.value)}
                                placeholder="محتوای امضا را وارد کنید"
                            />
                        </div>

                        <div className='mt-6 flex justify-end'>
                            <Button
                                onClick={handleSubmit}
                                disabled={isSubmitting || !formData.name.trim() || !formData.textContent.trim()}
                                loading={isSubmitting}
                                className='px-8 w-auto'
                            >
                                {signatureData?.data?.signature?.id ? 'به‌روزرسانی امضا' : 'ایجاد امضا'}
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Signture