import React, { useState } from 'react'
import { type FC } from 'react'
import Button from '@/components/Button'
import Input from '@/components/Input'
import DefaulModal from '@/components/DefaulModal'
import UploadBox from '@/components/UploadBox'
import Switch from '@/components/Switch'
import Select, { type ItemsSelectType } from '@/components/Select'
import { useCreateBanner } from '@/pages/setting/hooks/useSettingData'
import { useUploadSingle } from '@/pages/uploader/hooks/useUploaderData'
import { type CreateBannerType } from '@/pages/setting/types/Types'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'

interface CreateBannerModalProps {
    isOpen: boolean
    onClose: () => void
    onSuccess: () => void
}

type CreateBannerFormState = Omit<CreateBannerType, 'displayLocation'> & {
    displayLocation: '' | 'desktop' | 'mobile'
}

const displayLocationOptions: ItemsSelectType[] = [
    { value: 'desktop', label: 'دسکتاپ' },
    { value: 'mobile', label: 'موبایل' }
]

const CreateBannerModal: FC<CreateBannerModalProps> = ({ isOpen, onClose }) => {
    const [formData, setFormData] = useState<CreateBannerFormState>({
        imageUrl: '',
        altText: '',
        title: '',
        linkUrl: '',
        isActive: true,
        order: 1,
        displayLocation: '',
    })

    const [imageFile, setImageFile] = useState<File[]>([])

    const createBannerMutation = useCreateBanner()
    const uploadSingle = useUploadSingle()

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()

        if (!formData.title || !formData.altText || !formData.linkUrl) {
            toast.error('لطفا تمام فیلدهای الزامی را پر کنید')
            return
        }

        if (!formData.displayLocation) {
            toast.error('لطفا محل نمایش بنر را مشخص کنید')
            return
        }

        if (imageFile.length === 0) {
            toast.error('لطفا تصویر بنر را انتخاب کنید')
            return
        }

        if (!formData.order || formData.order < 1) {
            toast.error('ترتیب نمایش باید یک عدد مثبت باشد')
            return
        }

        try {
            // Upload image first
            const uploadResponse = await uploadSingle.mutateAsync(imageFile[0])
            const imageUrl = uploadResponse.results?.url?.url

            if (!imageUrl) {
                toast.error('خطا در آپلود تصویر')
                return
            }

            // Create banner with uploaded image URL
            await createBannerMutation.mutateAsync({
                imageUrl,
                altText: formData.altText,
                title: formData.title,
                linkUrl: formData.linkUrl,
                isActive: formData.isActive,
                order: formData.order,
                displayLocation: formData.displayLocation,
            }, {
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }
            })

            toast.success('بنر با موفقیت اضافه شد')
            handleClose()
        } catch (error) {
            toast.error('خطا در آپلود تصویر')
        }
    }

    const handleClose = () => {
        setFormData({
            imageUrl: '',
            altText: '',
            title: '',
            linkUrl: '',
            isActive: true,
            order: 1,
            displayLocation: '',
        })
        setImageFile([])
        onClose()
    }

    return (
        <DefaulModal open={isOpen} close={handleClose} isHeader={true} title_header="افزودن بنر جدید">
            <form onSubmit={handleSubmit} className="w-[500px] mt-4 space-y-6">
                {/* محل نمایش */}
                <div>
                    <Select
                        label='محل نمایش'
                        placeholder='انتخاب محل نمایش'
                        items={displayLocationOptions}
                        value={formData.displayLocation}
                        onChange={(e) => setFormData(prev => ({ ...prev, displayLocation: e.target.value as CreateBannerFormState['displayLocation'] }))}
                        required
                    />
                </div>

                {/* تصویر بنر */}
                <div>
                    <UploadBox
                        label='تصویر بنر'
                        isMultiple={false}
                        onChange={(files) => setImageFile(files)}
                        disabled={!formData.displayLocation}
                    />
                </div>

                {/* عنوان */}
                <div>
                    <Input
                        label='عنوان بنر'
                        value={formData.title}
                        onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
                        placeholder="عنوان بنر را وارد کنید"
                        required
                    />
                </div>

                {/* متن جایگزین */}
                <div>
                    <Input
                        label='متن جایگزین (Alt Text)'
                        value={formData.altText}
                        onChange={(e) => setFormData(prev => ({ ...prev, altText: e.target.value }))}
                        placeholder="توضیح تصویر برای دسترسی"
                        required
                    />
                </div>

                {/* لینک */}
                <div>
                    <Input
                        label='لینک مقصد'
                        value={formData.linkUrl}
                        onChange={(e) => setFormData(prev => ({ ...prev, linkUrl: e.target.value }))}
                        placeholder="https://example.com"
                        required
                    />
                </div>

                {/* ترتیب نمایش */}
                <div>
                    <Input
                        label='ترتیب نمایش'
                        type='number'
                        value={formData.order}
                        onChange={(e) => setFormData(prev => ({ ...prev, order: parseInt(e.target.value) || 1 }))}
                        placeholder="1"
                        min={1}
                        required
                    />
                </div>

                {/* وضعیت */}
                <div>
                    <Switch
                        active={formData.isActive}
                        onChange={(value) => setFormData(prev => ({ ...prev, isActive: value }))}
                        label="فعال"
                    />
                </div>

                <div className="flex gap-3 pt-4">
                    <Button
                        type="submit"
                        variant="primary"
                        className="flex-1"
                        disabled={createBannerMutation.isPending || uploadSingle.isPending}
                        isLoading={createBannerMutation.isPending || uploadSingle.isPending}
                    >
                        {(createBannerMutation.isPending || uploadSingle.isPending) ? 'در حال ذخیره...' : 'ذخیره'}
                    </Button>
                    <Button
                        type="button"
                        variant="outline"
                        className="flex-1"
                        onClick={handleClose}
                        disabled={createBannerMutation.isPending || uploadSingle.isPending}
                    >
                        لغو
                    </Button>
                </div>
            </form>
        </DefaulModal>
    )
}

export default CreateBannerModal
