import { useState } from 'react'
import { Button, Radio, Flex, Modal, Empty } from 'antd'
import type { RadioChangeEvent } from 'antd'
import { useNavigate } from 'react-router'
import AppSteps from '@/components/AppSteps'
import { useAI } from '@/hooks/useAI'
import prompt from '@/utils/prompt'
import { useDataFieldQuery } from '@/hooks/useQuery'

interface ResultItem {
  name: string
  desc: string
}

export default function ButtonModal() {
  const { fieldOptions } = useDataFieldQuery()
  const [results, setResults] = useState<ResultItem[]>([])
  const resultsOptions = results.map((result) => ({
    label: result.name,
    value: fieldOptions.find((option) => option.label === result.name)?.value || '',
  }))

  const { isLoading, post } = useAI({
    onComplete: (message) => {
      if (!message.content) return
      const parse = JSON.parse(message.content)
      console.log(parse)
      setResults(parse.results || [])
    },
  })
  const handleAI = () => {
    post({
      response_format: { type: 'json_object' },
      messages: [{ role: 'user', content: prompt.max }],
    })
  }

  const navigate = useNavigate()
  const [open, setOpen] = useState(false)
  const [current, setCurrent] = useState(0)

  const [value, setValue] = useState('')

  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value)
  }
  const next = () => {
    setCurrent(current + 1)
  }

  const prev = () => {
    setCurrent(current - 1)
  }

  const steps = [
    {
      title: '探索过大值字段',
    },
    {
      title: '处理过大值',
    },
  ]

  const style: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  }
  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        过大值
      </Button>
      <Modal
        title="过大值探索"
        open={open}
        footer={
          <Flex justify="center" gap={20}>
            {current === 0 && (
              <Button type="primary" loading={isLoading} onClick={handleAI}>
                智能探索过大值字段
              </Button>
            )}

            {current > 0 && <Button onClick={() => prev()}>上一步</Button>}
            {current < steps.length - 1 && (
              <Button type="primary" onClick={() => next()} disabled={!value}>
                下一步
              </Button>
            )}
            {current === steps.length - 1 && (
              <Button
                type="primary"
                onClick={() => navigate({ pathname: '/data/preprocess/max', search: `?results=${value}` })}>
                跳转数据预处理
              </Button>
            )}
          </Flex>
        }
        destroyOnClose
        width={800}
        onCancel={() => setOpen(false)}>
        <div style={{ minHeight: 300, padding: '40px 0' }}>
          <AppSteps current={current} items={steps} style={{ marginBottom: 40 }} />
          <Flex justify="space-between" style={{ marginBottom: 20 }}>
            探索结果：
          </Flex>
          <Radio.Group options={resultsOptions} value={value} onChange={onChange} style={style} />
          {!results.length && <Empty></Empty>}
        </div>
      </Modal>
    </>
  )
}
