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

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

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

  const { post, isLoading } = useAI()

  // AI设置
  const handleAISet = async () => {
    await form.validateFields(['independent_variables', 'dependent_variable'])

    const values = form.getFieldsValue()
    post(
      {
        response_format: { type: 'json_object' },
        messages: [
          {
            role: 'user',
            content: `根据提供的数据集，设计一个逻辑回归算法，返回JSON格式。
          自变量：${values.independent_variables?.join(', ')}
          因变量：${values.dependent_variable}
返回格式示例：
json
        {
          "results": { "c": "正则化强度（C）", "penalty": "正则化类型（penalty）", "solver": "优化算法（solver）", "max_iter": "最大迭代次数（max_iter）", "tol": "收敛阈值（tol）", "multi_class": "ovr或者multinomial"}
        }
          `,
          },
        ],
      },
      {
        onComplete: (message) => {
          console.log(message)
          try {
            const parse = JSON.parse(message.content)
            form.setFieldsValue(parse.results)
          } catch (error) {
            console.error(error)
          }
        },
      }
    )
  }

  // AI计算
  const [results, setResults] = useState<any>({})
  const code = `${results.code?.replace(/\\n/gi, '\n')}`
  const [openResults, setOpenResults] = useState(false)
  const handleAICompute = async () => {
    const values = await form.validateFields()
    post(
      {
        response_format: { type: 'json_object' },
        messages: [
          {
            role: 'user',
            content: `根据提供的数据集，设置的逻辑回归算法进行试算检查，返回JSON格式。
          自变量：${values.independent_variables?.join(', ')}
          因变量：${values.dependent_variable}
          正则化强度（C）：${values.c}
          正则化类型（penalty）：${values.penalty}
          优化算法（solver）：${values.solver}
          最大迭代次数（max_iter）：${values.max_iter}
          收敛阈值（tol）：${values.tol}
          多分类策略（multi_class）：${values.multi_class}
          返回格式示例：
          json
          {
           results: { pass: 'true或者false，代表通过不通过', code: "Python运行的代码，markdown能解析的代码", result: "计算结果" },
          }
           `,
          },
        ],
      },
      {
        onComplete: (message) => {
          console.log(message)
          try {
            const parse = JSON.parse(message.content)
            setResults(parse.results)
          } catch (error) {
            console.error(error)
          }
          if (current === 1) {
            setStep(3)
          }
        },
      }
    )
  }

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

  // 处理下一步按钮逻辑
  const handleNext = async () => {
    await form.validateFields()
    setCurrent(current + 1)
    setStep(-1)
  }

  // 开始处理
  const handleStart = () => {
    setStep(1)
    handleAICompute()
  }

  // 关闭并重置
  const handleClose = () => {
    setOpen(false)
    setCurrent(0)
    setStep(-1)
  }

  const steps = [
    {
      title: '设置算法',
      content: (
        <>
          <Form.Item
            label="请选择自变量"
            name="independent_variables"
            rules={[{ required: true, message: '请选择自变量' }]}>
            <Select options={fieldOptions} placeholder="请选择" mode="multiple" />
          </Form.Item>
          <Form.Item
            label="请选择因变量"
            name="dependent_variable"
            rules={[{ required: true, message: '请选择因变量' }]}>
            <Select options={fieldOptions} placeholder="请选择" />
          </Form.Item>
          <Flex gap={20}>
            <div style={{ flex: 1 }}>
              <Form.Item label="请输入正则化强度（C）">
                <Flex gap={10}>
                  <Form.Item name="c" noStyle rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Popover
                    title="正则化强度（C）"
                    content={
                      <>
                        控制正则化强度（C越小，正则化越强，防止过拟合）
                        <br />
                        取值范围：&gt;0 的浮点数
                        <br />
                        参数越低意味着正则化强（模型简单，可能欠拟合），参数越高意味着正则化弱（模型复杂，可能过拟合）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入正则化类型（penalty）">
                <Flex gap={10}>
                  <Form.Item name="penalty" noStyle rules={[{ required: true, message: '请选择' }]}>
                    <Select
                      options={[
                        { label: 'l1', value: 'l1' },
                        { label: 'l2', value: 'l2' },
                        { label: 'elasticnet', value: 'elasticnet' },
                      ]}
                      placeholder="请选择"
                    />
                  </Form.Item>
                  <Popover
                    title="正则化类型（penalty）"
                    content={
                      <>
                        选择正则化类型（L1/L2/弹性网络）
                        <br />
                        取值范围：
                        <br />
                        'l1'：L1正则化（稀疏化特征，自动特征选择），适合高维稀疏数据
                        <br />
                        'l2'：L2正则化（平滑权重，默认），适合低维稠密数据
                        <br />
                        'elasticnet'：L1+L2（需配合 solver='saga'）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入优化算法（solver）">
                <Flex gap={10}>
                  <Form.Item name="solver" noStyle rules={[{ required: true, message: '请输入' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Popover
                    title="优化算法（solver）"
                    content={
                      <>
                        选择优化算法（不同算法支持不同正则化类型和计算效率）
                        <br />
                        取值范围： 'liblinear'：小数据集高效（支持L1/L2），适合小数据，但功能受限
                        <br />
                        'newton-cg'/'lbfgs'：中大数据集（仅L2）
                        <br />
                        'sag'/'saga'：大数据集（随机梯度下降，'saga'支持L1/L2/弹性网络）。功能全面，适合大数据
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入最大迭代次数（max_iter）">
                <Flex gap={10}>
                  <Form.Item name="max_iter" noStyle rules={[{ required: true, message: '请选择' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Popover
                    title="最大迭代次数（max_iter）"
                    content={
                      <>
                        优化算法的最大迭代次数（影响模型是否收敛） <br />
                        取值范围：≥1 的整数 <br />
                        参数越低意味着迭代不足（模型未收敛，可能欠拟合），参数越高意味着迭代过多（计算成本高，可能过拟合风险）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入收敛阈值（tol）">
                <Flex gap={10}>
                  <Form.Item name="tol" noStyle rules={[{ required: true, message: '请选择' }]}>
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Popover
                    title="收敛阈值（tol）"
                    content={
                      <>
                        定义优化停止的阈值（两次迭代损失变化小于该值时停止）
                        <br />
                        取值范围：&gt;0 的浮点数
                        <br />
                        参数月底意味着阈值宽松（提前停止，可能欠拟合），参数越高意味着阈值严格（更精确收敛，计算时间增加）
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
              <Form.Item label="请输入多分类策略（multi_class）">
                <Flex gap={10}>
                  <Form.Item name="multi_class" noStyle rules={[{ required: true, message: '请选择' }]}>
                    <Select
                      options={[
                        { label: 'ovr', value: 'ovr' },
                        { label: 'multinomial', value: 'multinomial' },
                      ]}
                      placeholder="请选择"
                    />
                  </Form.Item>
                  <Popover
                    title="多分类策略（multi_class）"
                    content={
                      <>
                        定义多分类问题的解决策略
                        <br />
                        取值范围：
                        <br />
                        'ovr'（一对多）：独立训练每个类的二分类模型，计算简单，适合类别数较少
                        <br />
                        'multinomial'（多项式）：联合优化所有类（需配合
                        solver='newton-cg'/'lbfgs'/'sag'/'saga'）。更精确，适合类别数多或类别相关性强
                      </>
                    }>
                    <QuestionCircleOutlined />
                  </Popover>
                </Flex>
              </Form.Item>
            </div>
            <Button type="primary" style={{ height: '310px' }} onClick={handleAISet} loading={isLoading}>
              AI设置
            </Button>
          </Flex>
        </>
      ),
    },
    {
      title: '逻辑回归处理',
      content: (
        <>
          <Flex vertical align="center" style={{ marginTop: '20px' }}>
            <Button type="primary" onClick={handleStart} loading={isLoading}>
              开始处理
            </Button>
            <AppProgressSteps current={step} items={[{ title: '启动' }, { title: '计算' }, { title: '计算结束' }]} />
          </Flex>
        </>
      ),
    },
  ]

  const Footer = () => {
    return (
      <Flex justify="center" gap={20}>
        {current === 0 && (
          <Button
            type="primary"
            onClick={async () => {
              await handleAICompute()
              setOpenResults(true)
            }}
            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={isLoading}>
            关闭
          </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} preserve={false}>
            {steps.map((item, index) => (
              <div key={index} hidden={current !== index} style={{ marginTop: '20px' }}>
                {item.content}
              </div>
            ))}
          </Form>
          {current === 1 && step >= 3 && (
            <Card style={{ marginTop: '20px' }}>
              <p>计算结束！</p>
              <p>计算结果如下：</p>
              {results.result}
            </Card>
          )}
        </div>
      </Modal>
      <Modal
        title="算法试算检查"
        open={openResults}
        footer={null}
        width={800}
        loading={isLoading}
        onCancel={() => setOpenResults(false)}>
        <p style={{ fontSize: 20, textAlign: 'center' }}>试算检查结果：{results.pass ? '通过' : '不通过'}！</p>
        <MarkdownRender>{code}</MarkdownRender>
      </Modal>
    </>
  )
}
