import { type FC, useState, useMemo } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import Select, { type ItemsSelectType } from '@/components/Select'
import Button from '@/components/Button'
import MultiSelectSearchable, { type MultiSelectOption } from '@/components/MultiSelectSearchable'
import RadioGroup from '@/components/RadioGroup'
import { AnnouncementType, type CreateAnnouncementSeller, type CreateAnnouncementSpecificSeller } from '../types/Types'
import { useCreateAnnouncementSeller, useCreateAnnouncementSpecificSeller, useGetSellers } from '../hooks/useSellerData'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/helpers/utils'

interface Props {
    open: boolean
    close: () => void
    onSuccess?: () => void
}

const CreateAnnouncementModal: FC<Props> = ({ open, close, onSuccess }) => {
    const createMutation = useCreateAnnouncementSeller()
    const createSpecificMutation = useCreateAnnouncementSpecificSeller()
    const [selectedSellers, setSelectedSellers] = useState<string[]>([])
    const [sendToAll, setSendToAll] = useState(true)

    // Get sellers for selection when modal is open
    const { data: sellersData, isLoading: sellersLoading, error: sellersError } = useGetSellers(1)

    const announcementTypes: ItemsSelectType[] = [
        { value: AnnouncementType.Announcement, label: 'اطلاعیه عمومی' },
        { value: AnnouncementType.Order, label: 'سفارش' },
        { value: AnnouncementType.Product, label: 'محصول' },
        { value: AnnouncementType.Shipment, label: 'ارسال' },
        { value: AnnouncementType.Fine, label: 'جریمه' },
        { value: AnnouncementType.Wallet, label: 'کیف پول' },
        { value: AnnouncementType.Ticket, label: 'تیکت' },
        { value: AnnouncementType.Chat, label: 'چت' },
        { value: AnnouncementType.Contract, label: 'قرارداد' }
    ]

    // Convert sellers to MultiSelectOption format
    const sellerOptions: MultiSelectOption[] = useMemo(() => {
        const sellers = sellersData?.results?.sellers || []
        return sellers
            .filter(seller => seller.fullName && seller.phoneNumber) // Filter out sellers with missing data
            .map(seller => ({
                value: seller._id,
                label: `${seller.fullName} (${seller.phoneNumber})`
            }))
    }, [sellersData])

    const formik = useFormik<CreateAnnouncementSeller>({
        initialValues: {
            title: '',
            message: '',
            type: AnnouncementType.Announcement
        },
        validationSchema: Yup.object({
            title: Yup.string().required('عنوان اطلاعیه الزامی است'),
            message: Yup.string().required('متن اطلاعیه الزامی است'),
            type: Yup.string().required('نوع اطلاعیه الزامی است')
        }),
        onSubmit: (values) => {
            if (sendToAll) {
                // Send to all sellers
                createMutation.mutate(values, {
                    onSuccess: () => {
                        toast.success('اطلاعیه برای همه فروشندگان ارسال شد')
                        close()
                        onSuccess?.()
                        formik.resetForm()
                        setSelectedSellers([])
                        setSendToAll(true)
                    },
                    onError: (error) => {
                        toast.error(extractErrorMessage(error))
                    }
                })
            } else {
                // Send to specific sellers
                if (selectedSellers.length === 0) {
                    toast.error('لطفا حداقل یک فروشنده انتخاب کنید')
                    return
                }

                const specificValues: CreateAnnouncementSpecificSeller = {
                    ...values,
                    sellerIds: selectedSellers
                }

                createSpecificMutation.mutate(specificValues, {
                    onSuccess: () => {
                        toast.success(`اطلاعیه برای ${selectedSellers.length} فروشنده ارسال شد`)
                        close()
                        onSuccess?.()
                        formik.resetForm()
                        setSelectedSellers([])
                        setSendToAll(true)
                    },
                    onError: (error) => {
                        toast.error(extractErrorMessage(error))
                    }
                })
            }
        }
    })

    return (
        <DefaulModal
            open={open}
            close={close}
            isHeader={true}
            title_header="ایجاد اطلاعیه جدید"
            width={600}
        >
            <div className="space-y-6 w-[450px] mt-4">
                <Input
                    label="عنوان اطلاعیه"
                    placeholder="عنوان اطلاعیه را وارد کنید"
                    {...formik.getFieldProps('title')}
                    error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                />

                <Textarea
                    label="متن اطلاعیه"
                    placeholder="متن اطلاعیه را وارد کنید"
                    rows={4}
                    {...formik.getFieldProps('message')}
                    error_text={formik.touched.message && formik.errors.message ? formik.errors.message : ''}
                />

                <Select
                    label="نوع اطلاعیه"
                    items={announcementTypes}
                    placeholder="نوع اطلاعیه را انتخاب کنید"
                    {...formik.getFieldProps('type')}
                    error_text={formik.touched.type && formik.errors.type ? formik.errors.type : ''}
                />

                <div className="space-y-2">
                    <label className="block text-sm font-medium text-gray-700">گیرندگان اطلاعیه</label>
                    <RadioGroup
                        items={[
                            { label: 'ارسال به همه فروشندگان', value: true },
                            { label: 'ارسال به فروشندگان خاص', value: false }
                        ]}
                        selected={sendToAll}
                        onChange={(value) => {
                            setSendToAll(value as boolean)
                            setSelectedSellers([])
                        }}
                    />
                </div>

                {!sendToAll && (
                    <MultiSelectSearchable
                        label="انتخاب فروشندگان"
                        placeholder={sellersLoading ? "در حال بارگذاری فروشندگان..." : sellersError ? "خطا در بارگذاری فروشندگان" : sellerOptions.length === 0 ? "فروشنده‌ای یافت نشد" : "فروشندگان مورد نظر را انتخاب کنید"}
                        options={sellerOptions.length > 0 ? sellerOptions : []}
                        value={selectedSellers}
                        onChange={setSelectedSellers}
                        error_text={sellersError ? 'خطا در بارگذاری فروشندگان' : selectedSellers.length === 0 && !sendToAll ? 'انتخاب حداقل یک فروشنده الزامی است' : ''}
                        loading={sellersLoading && sellerOptions.length === 0}
                        disabled={!!sellersError}
                    />
                )}

                <div className="flex gap-3 pt-4">
                    <Button
                        label="لغو"
                        variant="outline"
                        onClick={close}
                        className="flex-1"
                    />
                    <Button
                        label="ایجاد اطلاعیه"
                        onClick={() => formik.handleSubmit()}
                        isLoading={createMutation.isPending || createSpecificMutation.isPending}
                        disabled={!formik.isValid || createMutation.isPending || createSpecificMutation.isPending || (!sendToAll && selectedSellers.length === 0)}
                        className="flex-1"
                    />
                </div>
            </div>
        </DefaulModal>
    )
}

export default CreateAnnouncementModal
