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

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

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

对数据集中指定字段进行 空格问题分析 ，包括：

1.
空格类型检测 （前后空格、中间多余空格、全空格字段）。
2.
影响评估 （如数据匹配失败、统计错误）。
3.
处理建议 （自动化修复或人工审核）。
输入要求

1.
字段列表 ：[字段1、字段2、字段3（用顿号分隔）]  
2.
数据样本：[在此粘贴数据片段或上传文件（CSV/XLSX）]  
输出格式：  

    | 序号 | 字段名称       |  空格问题描述  |  影响分析  |   处理建议（格式：建议名称：描述，执行方式：自动/人工）

   | 1    | 用户名     | 字段值前后存在空格     |  影响登录系统唯一性校验  |  建议名称：前后空格清理，执行方式：自动

   | 2    | 地址     | 字段值前后存在空格       |    导致地址解析失败          |   建议名称：中间空格标准化，执行方式：自动      

执行要求

1.
分析规则 ：
○
前后空格 ：检测字段值首尾是否存在空格。
○
中间多余空格 ：检测字段值中是否存在连续空格或不规范空格（如"张 三"）。
○
全空格字段 ：字段值仅为空格（如" "）。
○
空值与空格混淆 ：区分空值（NULL）和空字符串（""）。
1.
影响评估 ：
○
说明空格问题对业务的影响（如数据匹配、统计分析、系统处理）。`,
        },
      ],
    })
    if (message.content) setResult(message.content)
  }

  const { fieldOptions, getFieldName } = useDataFieldQuery()

  const [open, setOpen] = useState(false)

  const [current, setCurrent] = useState(0)
  const [form] = Form.useForm()
  const initialValues = {
    field: '',
    rule: '开头去空格',
  }

  const field = Form.useWatch('field', form)

  const ruleOptions = [
    { label: '开头去空格', value: '开头去空格' },
    { label: '结尾去空格', value: '结尾去空格' },
    { label: '中间去空格', value: '中间去空格' },
    { label: '全部去空格', value: '全部去空格' },
  ]

  const { mutate, isPending, progress, message, remove } = useProcessData()
  // 开始处理
  const handleStart = () => {
    form.validateFields().then((values) => {
      mutate(values)
    })
  }

  // 关闭并重置
  const handleClose = () => {
    setOpen(false)
    setCurrent(0)
    remove()
    setResult('')
  }

  const steps = [
    {
      title: '请选择数据去空格字段',
      content: (
        <>
          <Form.Item name="field" rules={[{ required: true, message: '请选择数据去空格字段' }]}>
            <Radio.Group>
              <Row gutter={[10, 10]}>
                {fieldOptions.map((item) => (
                  <Col span={6} key={item.value}>
                    <Radio value={item.value}>{item.label}</Radio>
                  </Col>
                ))}
              </Row>
            </Radio.Group>
          </Form.Item>
          {result && (
            <div
              style={{
                marginTop: 20,
                background: '#f5f5f5',
                padding: 20,
                maxHeight: 300,
                overflow: 'auto',
                borderRadius: 10,
              }}>
              <MarkdownRender>{result}</MarkdownRender>
            </div>
          )}
        </>
      ),
    },
    {
      title: '配置处理规则',
      content: (
        <>
          <Form.Item label="数据去空格处理字段">{getFieldName(field)}</Form.Item>
          <Form.Item label="处理规则" name="rule" rules={[{ required: true, message: '请选择处理规则' }]}>
            <Radio.Group options={ruleOptions} />
          </Form.Item>
        </>
      ),
    },
    {
      title: '处理执行',
      content: (
        <>
          <p>数据去空格处理字段：{getFieldName(field)}</p>
          <Flex vertical align="center" style={{ marginTop: '20px' }}>
            <Button type="primary" loading={isPending} onClick={handleStart}>
              开始处理
            </Button>
            <AppProgressSteps
              current={progress}
              items={[
                {
                  title: '检查字段处理规则',
                  description: message[1],
                },
                {
                  title: '数据去空格处理',
                  description: message[2],
                },
                {
                  title: '处理结果',
                  description: message[3],
                },
              ]}
            />
          </Flex>
        </>
      ),
    },
  ]

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        数据去空格
      </Button>
      <Modal
        title={steps[current].title}
        open={open}
        footer={
          <Flex justify="center" gap={20}>
            {current === 0 && (
              <Button type="primary" loading={isLoading} onClick={handleAI}>
                AI去空格字段分析与建议
              </Button>
            )}
            {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
            {current < steps.length - 1 && (
              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!field}>
                下一步
              </Button>
            )}
            {current === steps.length - 1 && (
              <Button type="primary" disabled={isPending} onClick={handleClose}>
                关闭
              </Button>
            )}
          </Flex>
        }
        destroyOnClose
        width={800}
        onCancel={handleClose}>
        <div style={{ minHeight: 300, padding: '20px 0' }}>
          <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
        </div>
      </Modal>
    </>
  )
}
