import { Button, Flex, Modal, Spin } from 'antd'
import { useEffect, useState } from 'react'
import { useAI } from '@/hooks/useAI'
import MarkdownRender from '@/components/MarkdownRender'

export default function DataReport() {
  const [open, setOpen] = useState(false)
  const { post, isLoading, message } = useAI()

  useEffect(() => {
    if (open) {
      post({
        messages: [
          {
            role: 'user',
            content:
              '作为数据分析师，请基于提供的数据集，生成一份结构化的数据质量分析报告。需包含字段解释、关系梳理、质量评估及改进建议。',
          },
        ],
      })
    }
  }, [open])
  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        数据分析报告
      </Button>
      <Modal title="数据分析报告" open={open} footer={null} width={1000} onCancel={() => setOpen(false)} destroyOnClose>
        <MarkdownRender>{message?.content}</MarkdownRender>
        <Flex justify="center">
          <Spin size="large" spinning={isLoading}></Spin>
        </Flex>
      </Modal>
    </>
  )
}
