import { useState } from 'react'
import { Button, Flex, Modal, Input, Form, Select } from 'antd'
import AppProgressSteps from '@/components/AppProgressSteps'
import FunctionInput from '@/components/data/FunctionInput'
import { useProcessData } from '../query'
import { useAI } from '@/hooks/useAI'
import MarkdownRender from '@/components/MarkdownRender'

const functionOptions = [
  { label: 'AND：所有条件均为 TRUE 时返回 TRUE，否则返回 FALSE', value: 'AND' },
  { label: 'FALSE：直接返回逻辑值 FALSE', value: 'FALSE' },
  { label: 'IF：根据条件返回不同结果', value: 'IF' },
  { label: 'IFERROR：捕获错误并替换为指定值', value: 'IFERROR' },
  { label: 'IFNA：专门处理 #N/A 错误', value: 'IFNA' },
  { label: 'IFS：多条件分支判断', value: 'IFS' },
  { label: 'NOT：对逻辑值取反', value: 'NOT' },
  { label: 'OR：任一条件为 TRUE 时返回 TRUE', value: 'OR' },
  { label: 'SWITCH：根据表达式匹配值返回对应结果', value: 'SWITCH' },
  { label: 'TRUE：直接返回逻辑值 TRUE', value: 'TRUE' },
  { label: 'XOR：异或逻辑，仅当奇数个条件为 TRUE 时返回 TRUE', value: 'XOR' },
]

export default function ButtonModal() {
  const [open, setOpen] = useState(false)
  const [current, setCurrent] = useState(0)
  const [form] = Form.useForm()

  const [result, setResult] = useState('')
  const { isLoading, post } = useAI({
    onComplete: (message) => {
      setResult(message?.content || '')
    },
  })

  const handleAI = async () => {
    const values = form.getFieldsValue()
    const selectedFunction = values.function
    const functionFormula = values.content || ''

    post({
      messages: [
        {
          role: 'user',
          content: `请检查以下逻辑计算函数公式是否正确，并提供改进建议：

1. 当前选择的函数：${selectedFunction}
2. 输入的公式：${functionFormula}

请按照以下格式回答：
1. 语法检查：检查函数语法是否正确，包括括号匹配、参数格式等
2. 参数检查：检查参数类型和数量是否符合函数要求
3. 逻辑检查：检查函数逻辑是否合理，是否符合预期用途
4. 改进建议：如果有问题，请提供具体的改进建议
5. 示例：提供一个正确的使用示例

注意：
- 请确保检查结果清晰易懂
- 如果公式完全正确，请明确指出
- 如果发现潜在问题，请详细说明原因
- 提供的示例应该与当前使用场景相关`,
        },
      ],
    })
  }

  // 处理下一步按钮逻辑
  const handleNext = async () => {
    if (current === 0) {
      // 第一步验证表单
      await form.validateFields(['name', 'english_name'])
    } else if (current === 1) {
      await form.validateFields()
    }
    setCurrent(current + 1)
  }

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

  // 开始处理
  const handleStart = () => {
    const values = form.getFieldsValue()
    const content = values.content || ''

    // 提取 content 中的参数
    const fieldsMatch = content.match(/\((.*?)\)/) // 匹配括号内的内容
    const fields = fieldsMatch ? fieldsMatch[1].split(',').map((field: string) => field.trim()) : []
    const params = { ...values, fields: JSON.stringify(fields) } // 将提取的参数赋值给 fields
    mutate(params)
  }

  // 关闭并重置
  const handleClose = () => {
    setOpen(false)
    setCurrent(0)
    remove()
    setResult('')
  }
  const handleFunctionChange = (value: string) => {
    form.setFieldsValue({ content: `${value}()` })
  }

  // 步骤定义
  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>
        </>
      ),
    },
    {
      title: '配置逻辑计算规则',
      content: (
        <>
          <Form.Item label="请选择函数" name="function" rules={[{ required: true, message: '请选择函数' }]}>
            <Select options={functionOptions} onChange={handleFunctionChange} />
          </Form.Item>
          <Form.Item label="请输入函数公式" name="content" rules={[{ required: true, message: '请输入函数公式' }]}>
            <FunctionInput fieldType="string" />
          </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: '新建字段' },
                { title: '复制数据' },
                { title: '逻辑计算处理' },
                { title: '处理结果', description: <>{message[3]}</> },
              ]}
            />
          </Flex>
        </>
      ),
    },
  ]

  const Footer = () => {
    return (
      <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>
    )
  }

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        逻辑计算
      </Button>
      <Modal
        title={steps[current]?.title}
        open={open}
        footer={<Footer />}
        destroyOnClose
        width={800}
        onCancel={handleClose}>
        <div style={{ minHeight: 300, padding: '20px 0' }}>
          <Form form={form} labelCol={{ span: 6 }} preserve={false}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
        </div>
      </Modal>
    </>
  )
}
