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

const functionShortcutOptions = [
  {
    label: '获取“年份”信息',
    value: 'YEAR',
    demo: '如：“2025年”',
  },
  // {
  //   label: '获取“季度”信息',
  //   value: 'YEAR',
  //   demo: '如：“一季度”',
  // },
  // {
  //   label: '获取“年季度”信息',
  //   value: 'YEAR',
  //   demo: '如：“2025年一季度”',
  // },
  {
    label: '获取“月份”信息',
    value: 'MONTH',
    demo: '如：“3月”',
  },
  {
    label: '获取“年月份”信息',
    value: 'DATE',
    demo: '如：“2025年3月”',
  },
  {
    label: '获取“周”信息',
    value: 'NETWORKDAYS',
    demo: '如：“12周”',
  },
  // {
  //   label: '获取“年周”信息',
  //   value: 'YEAR',
  //   demo: '如：“2025年12周”',
  // },
  {
    label: '获取“日”信息',
    value: 'DAY',
    demo: '如：“21日”',
  },
  {
    label: '获取“小时”信息',
    value: 'HOUR',
    demo: '如：“12时”',
  },
  {
    label: '获取“分钟”信息',
    value: 'MINUTE',
    demo: '如：“21分”',
  },
  {
    label: '获取“秒”信息',
    value: 'SECOND',
    demo: '如：“18秒”',
  },
]

const functionOptions = [
  { label: 'DATE：组合年、月、日为标准日期', value: 'DATE' },
  { label: 'DATEDIF：计算两个日期间的年/月/日差值', value: 'DATEDIF' },
  { label: 'DATEVALUE：将文本日期转换为 Excel 可识别的序列号', value: 'DATEVALUE' },
  { label: 'DAY：提取日期中的“日”部分', value: 'DAY' },
  { label: 'EDATE：返回指定日期之前/之后几个月的日期', value: 'EDATE' },
  { label: 'EMONTH：返回指定日期之前/之后几个月的最后一天', value: 'EMONTH' },
  { label: 'HOUR：提取时间中的“小时”部分', value: 'HOUR' },
  { label: 'MINUTE：提取时间中的“分钟”部分', value: 'MINUTE' },
  { label: 'MONTH：提取日期中的“月”部分', value: 'MONTH' },
  { label: 'NETWORKDAYS：计算两个日期之间的工作日天数（排除周末和节假日）', value: 'NETWORKDAYS' },
  { label: 'NOW：返回当前日期和时间（精确到秒）', value: 'NOW' },
  { label: 'SECOND：提取时间中的“秒”部分', value: 'SECOND' },
  { label: 'TIME：组合时、分、秒为标准时间', value: 'TIME' },
  { label: 'TIMEVALUE：将文本时间转换为小数', value: 'TIMEVALUE' },
  { label: 'TODAY：返回当前系统日期（无参数）', value: 'TODAY' },
  { label: 'WEEKDAY：返回日期对应的星期几（数字形式）', value: 'WEEKDAY' },
  { label: 'WORKDAY：计算指定工作日天数后的日期（跳过周末和节假日）', value: 'WORKDAY' },
  { label: 'YEAR：提取日期中的“年”部分', value: 'YEAR' },
]

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

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

  // 处理下一步按钮逻辑
  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()) : []
    if (action === '快速日期计算') {
      fields.push(values.field)
    }
    const params = { ...values, fields: JSON.stringify(fields) } // 将提取的参数赋值给 fields
    mutate(params, {
      onSuccess: handleClose,
    })
  }

  // 关闭并重置
  const handleClose = () => {
    setOpen(false)
    setCurrent(0)
    remove()
  }
  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="action" rules={[{ required: true, message: '请选择方法' }]}>
            <Radio.Group options={['快速日期计算', '日期函数计算']} />
          </Form.Item>
          {action === '快速日期计算' && (
            <>
              <Form.Item
                label="请选择快速日期计算方法"
                name="function"
                rules={[{ required: true, message: '请选择方法' }]}>
                <Radio.Group style={{ width: '100%' }}>
                  {functionShortcutOptions.map((item) => (
                    <Row gutter={[10, 10]} key={item.value} style={{ marginBottom: 10 }}>
                      <Col span={12}>
                        <Radio value={item.value}>{item.label}</Radio>
                      </Col>
                      <Col span={12}>
                        <p style={{ color: '#999' }}>{item.demo}</p>
                      </Col>
                    </Row>
                  ))}
                </Radio.Group>
              </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>
            </>
          )}
          {action === '日期函数计算' && (
            <>
              <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 />
              </Form.Item>
            </>
          )}
        </>
      ),
    },
    {
      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 && action === '日期函数计算' && <Button type="primary">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} initialValues={{ action: '快速日期计算' }}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
        </div>
      </Modal>
    </>
  )
}
