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

export default function ButtonModal() {
  const { fieldOptions, getFieldName } = useDataFieldQuery()

  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 formFunction = Form.useWatch('function', form)
  const formSmFun = Form.useWatch('sm_fun', form)

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

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

分析指定字段的脱敏方法是否合理，包括 脱敏类型、遮蔽符号、遮蔽范围 的设置，并提供改进建议。

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

脱敏参数 ：

脱敏方法：${action}。

遮蔽符号：${form.getFieldValue('char')}。

遮蔽范围：${form.getFieldValue('sm_fun')}。

其他规则 ：${form.getFieldValue('char')}。

输出格式：  

   | 序号 | 字段名称  |  当前脱敏方法  |  遮蔽符号 |  合理性判断 |   合理性判断依据                   |   改进建议（格式：建议类型：描述，执行方式：自动/人工）

   | 1      | 手机号     |  固定遮蔽        |    *         |      不合理   |  保留位数不足（仅最后2位可见）  建议类型：调整结束位数为-4，执行方式：自动

   | 2      | 姓名       |  内容替换         |    [敏感]  |        合理    |   符合隐私保护要求                 |    无需调整  

执行要求

1.
合理性评估标准 ：
○
隐私合规性 ：是否符合数据保护法规（如GDPR、CCPA）。
○
信息可用性 ：脱敏后是否仍能用于业务需求（如保留关键标识符）。
○
遮蔽范围合理性 ：
■
部分遮蔽 ：开始和结束位数是否有效（如不超出字段长度）。
■
全部遮蔽 ：是否适用于无需保留任何信息的场景。
○
符号一致性 ：遮蔽符号是否统一（如避免混用*和X）。`,
        },
      ],
    })
  }

  // 处理下一步按钮逻辑
  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 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]}>
                {fieldOptions.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="function" rules={[{ required: true, message: '请选择' }]}>
                <Radio.Group options={['固定遮蔽', '动态遮蔽', '内容替换', '内容模糊']} />
              </Form.Item>
              {formFunction === '固定遮蔽' && (
                <>
                  <Form.Item label="请输入遮蔽符号" name="char" rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入用于替换的固定符号，如：*、X等" />
                  </Form.Item>
                  <Form.Item label="请选择遮蔽范围" name="sm_fun" rules={[{ required: true, message: '请选择' }]}>
                    <Radio.Group options={['部分遮蔽', '全部遮蔽']} />
                  </Form.Item>
                  {formSmFun === '部分遮蔽' && (
                    <>
                      <Form.Item label="请输入开始位数" name="start" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                      </Form.Item>
                      <Form.Item label="请输入结束位数" name="end" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                      </Form.Item>
                    </>
                  )}
                </>
              )}

              {formFunction === '动态遮蔽' && (
                <>
                  <Form.Item label="请输入遮蔽符号" name="char" rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入用于替换的固定符号，如：*、X等" />
                  </Form.Item>
                  <Form.Item label="请输入开始动态位数" name="start" rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Form.Item label="请输入结束动态位数" name="end" rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                </>
              )}

              {formFunction === '内容替换' && (
                <>
                  <Form.Item label="请输入替换内容" name="sm_fun" rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                </>
              )}
              {formFunction === '内容模糊' && (
                <>
                  <Form.Item label="请输入模糊内容" name="sm_fun" rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                </>
              )}
            </>
          )}
          {action === '高级脱敏方法' && (
            <>
              <Form.Item label="请选择脱敏方法" name="function" rules={[{ required: true, message: '请选择' }]}>
                <Radio.Group options={['伪名化', '数据扰动', '空值化', '数据组合']} />
              </Form.Item>
              {formFunction === '伪名化' && (
                <>
                  <Form.Item label="请选择伪名化方法" name="sm_fun" rules={[{ required: true, message: '请选择' }]}>
                    <Radio.Group options={['AI智能']} />
                  </Form.Item>
                </>
              )}
              {formFunction === '数据扰动' && (
                <>
                  <Form.Item label="请选择伪名化方法" name="sm_fun" rules={[{ required: true, message: '请选择' }]}>
                    <Radio.Group options={['AI智能']} />
                  </Form.Item>
                </>
              )}
              {formFunction === '数据组合' && (
                <>
                  <Form.Item label="请选择数据组合方法" name="sm_fun" rules={[{ required: true, message: '请选择' }]}>
                    <Radio.Group options={['添加前缀', '添加后缀']} />
                  </Form.Item>
                  <Form.Item name="char" rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                </>
              )}
            </>
          )}
          {action === '特殊脱敏方法' && (
            <>
              <Form.Item label="请选择脱敏方法" name="function" rules={[{ required: true, message: '请选择' }]}>
                <Radio.Group options={['数据加密']} />
              </Form.Item>
              <Form.Item label="请选择数据加密方法" name="sm_fun" rules={[{ required: true, message: '请选择' }]}>
                <Radio.Group options={['AES', 'RSA']} />
              </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>
        </>
      ),
    },
  ]

  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: 5 }} preserve={false} initialValues={{ action: '基础脱敏方法' }}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
        </div>
      </Modal>
    </>
  )
}
