import { App, Button, Card, Form, Input, Modal, Radio } from "antd";
import React, { useEffect, useRef, useState } from "react";
import '../../../../../businessPlan/create/global.less'
import SendTimeSet from "@/pages/weComTask/components/sendTimeSet";
import { MinusCircleOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import FilterUser from "@/pages/weComTask/components/filterUser";
import NewSteps from "@/pages/weComTask/components/newSteps";
import dayjs from 'dayjs';

/**
 * 官方 群聊群发策略配置
 * @param param0 
 * @returns 
 */
const SettingsStrategy: React.FC<GROUP_CHAT_CREATE.FoundationProps<any>> = ({ visible, onClose, value, onChange }) => {

    /************************************/
    const { message } = App.useApp()
    const [form] = Form.useForm();
    const ref1 = useRef<HTMLDivElement>(null)
    const strategyList = Form.useWatch('strategyList', form)

    const [stepsList, setStepsList] = useState<any>([
        { title: '群聊创建配置', description: '任务名称', id: 'basicInfo' },
        {
            title: '策略配置',
            children: [
                {
                    title: `策略${1}`, id: 'strategy_1',
                    description: `名称、执行时间...`,
                    children: [{
                        title: `发送群对象${1}`, id: 'strategy_1_sendData_1',
                        description: `名称、公众号、主体...`,
                    }]
                },
                { title: '完成' }
            ]
        },
        { title: '完成' }
    ])
    /************************************/

    useEffect(() => {
        if (value?.strategyList?.length) {
            const data = {
                ...value, strategyList: value?.strategyList?.map(item => {
                    const { sendTime, startTime, endTime, sendDay, timeRepeatType } = item
                    if (timeRepeatType === 'TIME_TYPE_SINGLE_PLACE') {
                        const data = {
                            ...item,
                            timeRepeatType,
                            sendDay: sendDay ? dayjs(sendDay + ' ' + sendTime) : undefined
                        }
                        delete data?.sendTime
                        return data
                    }
                    return {
                        ...item,
                        timeRepeatType,
                        sendTime: sendTime ? dayjs('2025-04-25 ' + sendTime) : undefined,
                        startTime: startTime ? dayjs(startTime) : undefined,
                        endTime: endTime ? dayjs(endTime) : undefined,
                        sendDay: sendDay ? dayjs(sendDay) : undefined
                    }
                })
            }
            filedUpdateChange(data)
            form.setFieldsValue(data)
        }
    }, [value])

    const handleOk = () => {
        form.validateFields().then((values) => {
            const data = {
                ...values,
                strategyList: values?.strategyList?.map(item => {
                    const { startTime, endTime, sendDay, sendTime, timeRepeatType, repeatArray, ...rest } = item
                    const data = { ...rest, timeRepeatType }
                    if (timeRepeatType === 'TIME_TYPE_SINGLE_PLACE') {
                        // 定时发送
                        data.sendDay = dayjs(sendDay).format('YYYY-MM-DD')
                        data.sendTime = dayjs(sendDay).format('HH:mm:ss')
                    } else if (timeRepeatType === 'TIME_TYPE_REPEAT_DAY') {
                        // 每日循环
                        data.startTime = dayjs(startTime).format('YYYY-MM-DD')
                        if (endTime) {
                            data.endTime = dayjs(endTime).format('YYYY-MM-DD')
                        }
                        data.sendTime = dayjs(sendTime).format('HH:mm:ss')
                    } else if (timeRepeatType === 'TIME_TYPE_REPEAT_WEEK' || timeRepeatType === 'TIME_TYPE_REPEAT_MONTH') {
                        // 每周循环、每月循环
                        data.startTime = dayjs(startTime).format('YYYY-MM-DD')
                        data.sendTime = dayjs(sendTime).format('HH:mm:ss')
                        if (endTime) {
                            data.endTime = dayjs(endTime).format('YYYY-MM-DD')
                        }
                        data.repeatArray = timeRepeatType === 'TIME_TYPE_REPEAT_MONTH' ? repeatArray : repeatArray.filter(item => Number(item) < 8)
                    }
                    return data
                })
            }
            onChange(data)
        }).catch(() => {
            form.submit()
        });
    };


    const filedUpdateChange = ({ groupSendName, strategyList }: any) => {
        const strategyChildren = strategyList?.map((item, index) => {
            const { strategyName, timeRepeatType, sendDay, startTime, sendTime, repeatArray, sendData } = item
            const sendTimeChecked =
                timeRepeatType === "TIME_TYPE_SINGLE_TIMELY" ||
                (timeRepeatType === "TIME_TYPE_SINGLE_PLACE" && sendDay) ||
                (timeRepeatType === "TIME_TYPE_REPEAT_DAY" && startTime && sendTime) ||
                ((timeRepeatType === "TIME_TYPE_REPEAT_WEEK" || timeRepeatType === "TIME_TYPE_REPEAT_MONTH") && startTime && sendTime && repeatArray)

            const children = sendData?.map((sd, sdIndex) => {
                const { sendGroupName, externalUserType, externalUserFilter } = sd
                return {
                    title: `发送群对象${sdIndex + 1}`, id: `strategy_${index + 1}_sendData_${sdIndex + 1}`,
                    description: `名称、公众号、主体...`,
                    checked: sendGroupName && (externalUserType === 'all' ? true : externalUserFilter && Object.keys(externalUserFilter)?.length > 0)
                }
            })
            return {
                title: `策略${index + 1}`,
                description: `名称、执行时间`,
                id: `strategy_${index + 1}`,
                children,
                checked: sendTimeChecked && strategyName && children.some(item => item.checked)
            }
        })
        const stepsData = [
            { title: '群聊创建配置', description: '任务名称', id: 'basicInfo', checked: groupSendName },
            {
                title: '策略配置',
                children: [
                    ...strategyChildren,
                    {
                        title: '完成', checked: strategyChildren.some(item => item.checked)
                    }
                ],
                checked: strategyChildren.some(item => item.checked),
            },
            {
                title: '完成', checked: strategyChildren.some(item => item.checked)
            }
        ]
        setStepsList(stepsData)
    }

    return <Modal
        title={<strong>群聊群发策略配置  &nbsp;&nbsp;&nbsp;<span style={{ color: 'red' }}>对于执行时间冲突的策略，按照策略的排序执行</span></strong>}
        open={visible}
        onCancel={onClose}
        width={850}
        onOk={handleOk}
        className={`settingsModal`}
    >
        <div className={`body_steps`}>
            <NewSteps
                items={stepsList}
                onChange={(e) => {
                    if (e?.id)
                        ref1.current?.querySelector('#' + e?.id)?.scrollIntoView({ behavior: 'smooth' })
                }}
            />
        </div>
        <div className={`body_content`} ref={ref1}>
            <Form
                form={form}
                name="newGroupChatSendStrategy"
                labelAlign='left'
                labelCol={{ span: 5 }}
                colon={false}
                scrollToFirstError={{
                    behavior: 'smooth',
                    block: 'center'
                }}
                onFinishFailed={({ errorFields }) => {
                    message.error(errorFields?.[0]?.errors?.[0])
                }}
                onFinish={handleOk}
                initialValues={{
                    strategyList: [{ id: Date.now(), sendData: [{ externalUserType: 'specify', id: Date.now() }] }]
                }}
                onFieldsChange={() => {
                    filedUpdateChange(form.getFieldsValue())
                }}
                preserve={true}
            >
                <Card title={<strong>基础信息配置</strong>} style={{ background: '#fff', marginBottom: 10 }} id='basicInfo'>
                    <Form.Item label={<strong>任务名称</strong>} name="groupSendName" rules={[{ required: true, message: '请输入任务名称!' }]}>
                        <Input placeholder="请输入任务名称" style={{ width: 358 }} allowClear />
                    </Form.Item>
                </Card>

                <Form.List name="strategyList">
                    {(fields, { add, remove }) => (
                        <>
                            {fields.map(({ key, name, ...restField }, index) => {
                                const timeRepeatType = strategyList?.[index]?.timeRepeatType
                                const sendData = strategyList?.[index]?.sendData

                                return <Card
                                    key={key}
                                    title={<strong>策略{index + 1} 配置</strong>}
                                    style={{ background: '#fff', marginBottom: 10 }}
                                    extra={strategyList?.length > 1 && <div style={{ color: 'red', cursor: 'pointer' }} onClick={() => remove(name)}>
                                        <MinusCircleOutlined />
                                    </div>}
                                    id={`strategy_${index + 1}`}
                                >
                                    <Form.Item
                                        {...restField}
                                        name={[name, 'strategyName']}
                                        label={<strong>策略名称</strong>}
                                        rules={[{ required: true, message: '请输入策略名称!' }]}
                                    >
                                        <Input placeholder='请输入策略名称' allowClear style={{ width: 358 }} />
                                    </Form.Item>
                                    <SendTimeSet
                                        active='all'
                                        form={form}
                                        restField={restField}
                                        name={name}
                                        timeRepeatType={timeRepeatType}
                                        restFieldChange={(value) => {
                                            form.setFieldsValue({
                                                strategyList: strategyList?.map((item, i) => {
                                                    if (i === index) {
                                                        return {
                                                            ...item,
                                                            timeRepeatType: value,
                                                            repeatArray: undefined
                                                        }
                                                    }
                                                    return item
                                                })
                                            });
                                        }}
                                    />
                                    <Form.List name={[name, 'sendData']}>
                                        {(fields, { add, remove }) => (
                                            <>
                                                {fields.map(({ key, name, ...restField }, i) => {
                                                    return <Card
                                                        key={i}
                                                        title={<strong>策略{index + 1} 发送群对象{i + 1} 配置</strong>}
                                                        style={{ background: '#fff', marginBottom: 10 }}
                                                        extra={sendData?.length > 1 ? <Button icon={<DeleteOutlined />} type='link' style={{ color: 'red' }} onClick={() => remove(name)}></Button> : null}
                                                        id={`strategy_${index + 1}_sendData_${i + 1}`}
                                                    >
                                                        <Form.Item {...restField} label={<strong>发送群对象名称</strong>} name={[name, 'sendGroupName']} rules={[{ required: true, message: '请输入发送群对象名称!' }]}>
                                                            <Input placeholder="请输入发送群对象名称" style={{ width: 358 }} allowClear />
                                                        </Form.Item>
                                                        <Form.Item
                                                            label={<strong>发送群对象配置</strong>}
                                                            required
                                                        >
                                                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name={[name, 'externalUserType']}
                                                                    rules={[{ required: true, message: '请选择转移对象!' }]}
                                                                    noStyle
                                                                >
                                                                    <Radio.Group options={[{ label: '全部', value: 'all' }, { label: '指定', value: 'specify' }]} />
                                                                </Form.Item>
                                                                {sendData?.[i]?.externalUserType === 'specify' && <div style={{ marginTop: 8, width: '100%' }}>
                                                                    <Form.Item
                                                                        {...restField}
                                                                        name={[name, 'externalUserFilter']}
                                                                        rules={[{ required: true, message: '请选择人群包!' }]}
                                                                        noStyle
                                                                    >
                                                                        <FilterUser configType={'GROUP_GROUP'} />
                                                                    </Form.Item>
                                                                </div>}
                                                            </div>
                                                        </Form.Item>
                                                    </Card>
                                                })}
                                                <Form.Item>
                                                    <Button type="dashed" onClick={() => add({ externalUserType: 'specify', id: Date.now() })} block icon={<PlusOutlined />}>
                                                        新增发送群对象
                                                    </Button>
                                                </Form.Item>
                                            </>
                                        )}
                                    </Form.List>
                                </Card>
                            })}
                            <Form.Item>
                                <Button type="primary" onClick={() => add({ id: Date.now(), sendData: [{ externalUserType: 'specify', id: Date.now() }] })} block icon={<PlusOutlined />}>
                                    新增策略
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form>
        </div>
    </Modal>
}

export default React.memo(SettingsStrategy);