import { useState } from 'react'
import { Button, Flex, Modal, Select, Form, Input, Popover } from 'antd'
import { useDataFieldQuery } from '@/hooks/useQuery'
import AppProgressSteps from '@/components/AppProgressSteps'
import { QuestionCircleOutlined } from '@ant-design/icons'

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

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

  const fieldOptions = data?.map((item) => ({ label: item.name, value: item.name }))

  const [step, setStep] = useState<number>(-1)

  const options = [
    {
      label: 'True',
      value: true,
    },
    {
      label: 'False',
      value: false,
    },
  ]

  const steps = [
    {
      title: '设置算法',
      content: (
        <>
          <Form.Item label="请选择自变量" name="processingMethod">
            <Select options={fieldOptions} placeholder="请选择" mode="multiple" />
          </Form.Item>
          <Form.Item label="请选择因变量" name="rule">
            <Select options={fieldOptions} placeholder="请选择" />
          </Form.Item>
          <Flex gap={20}>
            <div style={{ flex: 1 }}>
              <Form.Item label="请输入是否拟合截距项（fit_intercept）" name="fit_intercept">
                <Flex gap={10}>
                  <Select options={options} placeholder="请选择" />
                  <Popover
                    title="是否拟合截距项（fit_intercept）"
                    content={
                      <>
                        控制模型是否包含截距项（即偏置项，用于调整模型基线）
                        <br />
                        取值范围：
                        <br />
                        True（模型更灵活，适合大多数场景）
                        <br />
                        False（模型强制通过原点，可能欠拟合）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入是否复制数据（copy_X）" name="is_copy">
                <Flex gap={10}>
                  <Select options={options} placeholder="请选择" />
                  <Popover
                    title="是否复制数据（copy_X）"
                    content={
                      <>
                        决定是否复制输入数据（避免修改原始数据）
                        <br />
                        取值范围：
                        <br />
                        True（安全但内存占用高）
                        <br />
                        False（节省内存，但可能覆盖原始数据）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入并行计算核心数（n_jobs）" name="is_jobs">
                <Flex gap={10}>
                  <Input placeholder="请输入" />
                  <Popover
                    title="并行计算核心数（n_jobs）"
                    content={
                      <>
                        选择优化算法（不同算法支持不同正则化类型和计算效率）
                        <br />
                        取值范围：
                        <br />
                        None（单线程）或 ≥1 的整数（如 -1 表示使用所有核心）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入强制正系数（positive）" name="is_positive">
                <Flex gap={10}>
                  <Select options={options} placeholder="请选择" />
                  <Popover
                    title="强制正系数（positive）"
                    content={
                      <>
                        是否强制回归系数为非负值（适用于需正向解释的场景，如经济学或物理模型）
                        <br />
                        取值范围：
                        <br />
                        True（系数非负，可能牺牲模型拟合能力）
                        <br />
                        False（系数可正可负，灵活性高）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
            </div>
            <Button type="primary" style={{ height: '200px' }}>
              AI设置
            </Button>
          </Flex>
        </>
      ),
    },
    {
      title: '线性回归处理',
      content: (
        <>
          <Flex vertical align="center" style={{ marginTop: '20px' }}>
            <Button type="primary" onClick={() => setStep(1)}>
              开始处理
            </Button>
            <AppProgressSteps
              style={{ margin: '80px' }}
              current={step}
              items={[
                {
                  title: (
                    <>
                      第一步
                      <br />
                      启动
                    </>
                  ),
                },
                {
                  title: (
                    <>
                      第二步
                      <br />
                      计算
                    </>
                  ),
                },
                {
                  title: (
                    <>
                      第三步
                      <br />
                      计算结束
                    </>
                  ),
                },
              ]}
            />
          </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">AI检查试算</Button>}
            {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
            {current < steps.length - 1 && (
              <Button type="primary" onClick={() => setCurrent(current + 1)}>
                下一步
              </Button>
            )}
            {current === steps.length - 1 && (
              <Button type="primary" onClick={() => setOpen(false)}>
                关闭
              </Button>
            )}
          </Flex>
        }
        destroyOnClose
        width={800}
        onCancel={() => setOpen(false)}>
        <div style={{ minHeight: 300, padding: '20px 0' }}>
          <Form form={form} preserve={false}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
        </div>
      </Modal>
    </>
  )
}
