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: 'CHAR：返回 ASCII 码对应的字符', value: 'CHAR' },
  { label: 'CLEAN：删除文本中所有不可打印字符（如换行符、制表符）', value: 'CLEAN' },
  { label: 'CODE：返回文本中首个字符的 ASCII 码', value: 'CODE' },
  { label: 'CONCAT：合并多个文本', value: 'CONCAT' },
  { label: 'EXACT：严格比较两个文本是否完全相同（区分大小写）', value: 'EXACT' },
  { label: 'FIND：查找子文本在字符串中的位置（区分大小写）', value: 'FIND' },
  { label: 'LEFT：从文本左侧提取指定数量的字符', value: 'LEFT' },
  { label: 'LEN：返回文本的字符数（包括空格）', value: 'LEN' },
  { label: 'LOWER：将文本转换为全小写', value: 'LOWER' },
  { label: 'MID：从指定位置提取文本中的子字符串', value: 'MID' },
  { label: 'PROPER：将文本中每个单词的首字母大写', value: 'PROPER' },
  { label: 'REPLACE：替换文本中指定位置的字符', value: 'REPLACE' },
  { label: 'REPT：重复文本指定次数', value: 'REPT' },
  { label: 'RIGHT：从文本右侧提取指定数量的字符', value: 'RIGHT' },
  { label: 'SEARCH：查找子文本在字符串中的位置（不区分大小写）', value: 'SEARCH' },
  { label: 'SUBSTITUTE：替换文本中的特定子字符串', value: 'SUBSTITUTE' },
  { label: 'TEXT：将数值/日期按指定格式转换为文本', value: 'TEXT' },
  { label: 'TEXTJOIN：用分隔符合并多个文本，可忽略空值', value: 'TEXTJOIN' },
  { label: 'TRIM：删除文本中多余的空格（保留单词间单个空格）', value: 'TRIM' },
  { label: 'UPPER：将文本转换为全大写', value: 'UPPER' },
  { label: 'VALUE：将文本格式的数字转换为数值', value: 'VALUE' },
]

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

  // 处理下一步按钮逻辑
  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 [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 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: '新建字段', description: message[1] },
                { title: '复制数据', description: message[2] },
                { title: '文本计算处理', description: message[3] },
                { title: '处理结果', description: message[4] },
              ]}
            />
          </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>
    </>
  )
}
