import { useState } from 'react'
import { Button, Flex, Modal, Radio, Input, Form, Row, Col, Checkbox } from 'antd'
import { useDataFieldQuery } from '@/hooks/useQuery'
import AppProgressSteps from '@/components/AppProgressSteps'
import { useProcessData } from '../query'
import { MinusCircleOutlined } from '@ant-design/icons'
import { useAI } from '@/ai/useAI'
import MarkdownRender from '@/components/MarkdownRender'

export default function ButtonModal() {
  const { fieldOptions, getFieldName } = useDataFieldQuery()
  // 数字类型字段
  const currentFieldOptions = fieldOptions.filter(
    (item) => item.type.includes('DECIMAL') || item.type.includes('SMALLINT')
  )

  const [open, setOpen] = useState(false)
  const [current, setCurrent] = useState(0)
  const [form] = Form.useForm()

  const field = Form.useWatch('field', form)
  const action = Form.useWatch('action', form)
  const rules = Form.useWatch('rules', form) || []
  const min = Form.useWatch('min', form)
  const max = Form.useWatch('max', form)
  const step = Form.useWatch('step', form)

  const [result, setResult] = useState('')
  const { isLoading, post } = useAI()

  const handleAI = async () => {
    const message = await post({
      messages: [
        {
          role: 'user',
          content: `任务目标

分析指定字段的分箱规则是否合理，包括 最大值、最小值、步长值 的设置，特别关注 小于最小值 和 大于最大值 的边界情况，并提供改进建议。

输入要求

字段信息 ：[${getFieldName(field)}]  

数据样本：[在此粘贴数据片段或上传文件（CSV/XLSX）]  

分箱参数 ：
${action === '固定步长分箱' ? `最小值 ${min}、最大值 ${max}、步长 ${step}。` : `刻度值：${rules.join(',')}`}

输出格式：  

   | 序号 | 分箱范围              |  当前分箱合理性  |  合理性判断依据                       |   改进建议（格式：建议名称：描述，执行方式：自动/人工）

   | 1    | <5（小于最小值）   |  不合理              |    存在10%数据低于最小值阈值    |    建议类型：调整最小值为3，执行方式：人工

   | 2   | 5-100（含100）      |  合理                 |    数据分布均匀                         |   无需调整  

   | 3    | 100-200（不含100  |  不合理              |    数据集中在150-200，分箱过宽 |    建议类型：调整步长为50，执行方式：自动     

执行要求

分箱规则 ：

○
区间闭合 ：
■
最小值：包含下界（如 >=5）。
■
最大值：包含上界（如 <=200）。
○
分箱逻辑 ：
■
标准分箱 ：
■
第一个分箱：[最小值, 最小值+步长]（含上界）。
■
后续分箱：(前一个分箱上限, 前一个上限+步长]（如 100-200 为 (100, 200]）。
■
边界分箱 ：
■
<最小值：包含所有小于最小值的值。
■
>最大值：包含所有大于最大值的值。
○
合理性评估标准 ：
■
数据覆盖 ：是否覆盖所有数据（包括边界值）。
■
业务逻辑 ：是否符合业务需求（如年龄分箱需避免跨年龄段）。
■
数据分布均衡性 ：分箱内数据量是否合理（如避免空箱或数据堆积）。`,
        },
      ],
    })
    if (message.content) setResult(message.content)
  }
  // 处理下一步按钮逻辑
  const handleNext = async () => {
    if (current === 0) {
      // 第一步验证表单
      await form.validateFields(['name', 'english_name', 'field'])
    } else if (current === 1) {
      await form.validateFields()
    }
    setCurrent(current + 1)
  }

  const { mutate, isPending, progress, message, remove } = useProcessData()

  // 开始处理
  const handleStart = () => {
    const values = form.getFieldsValue()
    const params = { ...values, rules: JSON.stringify(values.rules) }
    mutate(params)
  }

  // 关闭并重置
  const handleClose = () => {
    setOpen(false)
    setCurrent(0)
    remove()
    setResult('')
  }
  const [groupName, setGroupName] = useState('')

  // 步骤定义
  const steps = [
    {
      title: '请选择数据分箱字段',
      content: (
        <>
          <Form.Item label="数据分箱字段名称" name="name" rules={[{ required: true, message: '请输入字段名称' }]}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="数据分箱字段英文名称"
            name="english_name"
            rules={[{ required: true, message: '请输入英文名称' }]}>
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="请选择数据分箱字段"
            name="field"
            rules={[{ required: true, message: '请选择数据分箱字段' }]}>
            <Radio.Group>
              <Row gutter={[10, 10]}>
                {currentFieldOptions.map((item) => (
                  <Col span={8} key={item.value}>
                    <Radio value={item.value}>{item.label}</Radio>
                  </Col>
                ))}
              </Row>
            </Radio.Group>
          </Form.Item>
        </>
      ),
    },
    {
      title: '配置数据分箱规则',
      content: (
        <>
          <Form.Item label="数据分箱操作字段">{getFieldName(field)}</Form.Item>
          <Form.Item name="action">
            <Flex align="center" justify="center" style={{ marginBottom: 20 }}>
              <Form.Item name="action" noStyle>
                <Radio.Group options={['固定步长分箱', '自定义刻度值分箱']} optionType="button" buttonStyle="solid" />
              </Form.Item>
            </Flex>
          </Form.Item>
          {action === '固定步长分箱' && (
            <>
              <Form.Item
                label="最小值"
                name="min"
                labelCol={{ span: 2 }}
                rules={[{ required: true, message: '请输入最小值' }]}
                extra="分箱的取值规则为：大于等于最小值。例如最小值为5，则为&gt;=5">
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item
                label="最大值"
                name="max"
                labelCol={{ span: 2 }}
                rules={[{ required: true, message: '请输入最大值' }]}
                extra="分箱的取值规则为：小于等于最大值。例如最大值为200，则为&lt;=200">
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item
                label="步长值"
                name="step"
                labelCol={{ span: 2 }}
                rules={[{ required: true, message: '请输入步长值' }]}
                extra="以步长为分箱。例如步长值为100，则分箱结果为：5-100（含100），100-200（不含100）">
                <Input placeholder="请输入" />
              </Form.Item>
              <Form.Item label="边界" labelCol={{ span: 2 }}>
                <Form.Item
                  name="include_min"
                  valuePropName="checked"
                  extra="勾选示例：分箱结果为：小于5（不含5），5-100（含100），100-200（不含100）">
                  <Checkbox>包含小于最小值</Checkbox>
                </Form.Item>
                <Form.Item
                  name="include_max"
                  valuePropName="checked"
                  extra="勾选示例：分箱结果为：5-100（含100），100-200（不含100），大于200（不含200）">
                  <Checkbox>包含大于最大值</Checkbox>
                </Form.Item>
              </Form.Item>
            </>
          )}
          {action === '自定义刻度值分箱' && (
            <>
              <Form.List name="rules">
                {(fields, { add, remove }) => (
                  <>
                    <Form.Item label={null}>
                      <Flex gap={10} align="center">
                        <Input
                          placeholder="请输入"
                          value={groupName}
                          onChange={(e) => setGroupName(e.target.value)}
                          style={{ width: '60%' }}
                        />
                        <Button
                          type="primary"
                          disabled={!groupName}
                          onClick={() => {
                            if (!groupName) return
                            add(groupName) // 添加新分组
                            setGroupName('')
                          }}>
                          添加刻度
                        </Button>
                      </Flex>
                    </Form.Item>

                    {fields.map(({ key, name, ...restField }) => (
                      <Form.Item {...restField} label="刻度值" style={{ flex: 1 }} key={key}>
                        <Flex gap={10}>
                          <p style={{ width: '60%' }}>{rules[name]}</p>
                          <MinusCircleOutlined onClick={() => remove(name)} />
                        </Flex>
                      </Form.Item>
                    ))}
                  </>
                )}
              </Form.List>
              <Form.Item label="边界">
                <Form.Item name="include_min" noStyle valuePropName="checked">
                  <Checkbox>包含小于最小值</Checkbox>
                </Form.Item>
                <Form.Item name="include_max" noStyle valuePropName="checked">
                  <Checkbox>包含大于最大值</Checkbox>
                </Form.Item>
              </Form.Item>
            </>
          )}
          {result && (
            <div
              style={{
                marginTop: 20,
                background: '#f5f5f5',
                padding: 20,
                maxHeight: 300,
                overflow: 'auto',
                borderRadius: 10,
              }}>
              <MarkdownRender>{result}</MarkdownRender>
            </div>
          )}
        </>
      ),
    },
    {
      title: '处理执行',
      content: (
        <>
          <Flex vertical align="center" style={{ marginTop: '20px' }}>
            <Button type="primary" onClick={handleStart} loading={isPending}>
              开始处理
            </Button>
            <AppProgressSteps
              current={progress}
              items={[
                { title: '新建字段', description: message[1] },
                { title: '复制数据', description: message[2] },
                { title: '数据分箱处理', description: message[3] },
                { title: '处理结果', description: message[4] },
              ]}
            />
          </Flex>
        </>
      ),
    },
  ]

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        数据分箱
      </Button>
      <Modal
        title={steps[current]?.title}
        open={open}
        footer={
          <Flex justify="center" gap={20}>
            {current === 1 && (
              <Button type="primary" onClick={handleAI} loading={isLoading}>
                AI智能建议
              </Button>
            )}
            {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
            {current < steps.length - 1 && (
              <Button type="primary" onClick={handleNext}>
                下一步
              </Button>
            )}
            {current === steps.length - 1 && (
              <Button type="primary" onClick={handleClose} disabled={isPending}>
                关闭
              </Button>
            )}
          </Flex>
        }
        destroyOnClose
        width={800}
        onCancel={handleClose}>
        <div style={{ minHeight: 300, padding: '20px 0' }}>
          <Form
            form={form}
            labelCol={{ span: 6 }}
            preserve={false}
            initialValues={{ action: '固定步长分箱', include_max: false, include_min: false }}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
        </div>
      </Modal>
    </>
  )
}
