import React, { useState } from 'react'
import {
  Card,
  Form,
  Input,
  Button,
  Typography,
  Space,
  Upload,
  message,
  Spin
} from 'antd'
import {
  RocketOutlined,
  ReloadOutlined,
  UploadOutlined
} from '@ant-design/icons'
import type { UploadFile, UploadProps } from 'antd'

const { Title, Text } = Typography
const { TextArea } = Input

const AIContentGenerator: React.FC = () => {
  const [form] = Form.useForm()
  const [generatedResult, setGeneratedResult] = useState<string>('')
  const [isGenerating, setIsGenerating] = useState<boolean>(false)
  const [fileList, setFileList] = useState<UploadFile[]>([])

  // 处理文件上传
  const handleUpload: UploadProps['customRequest'] = async ({ file, onSuccess, onError }) => {
    try {
      const fileObj = file as File
      const response = await fetch('https://copilot.sino-bridge.com/v1/files/upload', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer app-YG1qx3qGCPsgqMIyBr8tCmJ7'
        },
        body: (() => {
          const formData = new FormData()
          formData.append('file', fileObj)
          return formData
        })()
      })

      if (response.ok) {
        const data = await response.json()
        message.success('文件上传成功')
        onSuccess && onSuccess(data, {} as any)
      } else {
        throw new Error('文件上传失败')
      }
    } catch (error) {
      console.error('文件上传错误:', error)
      message.error('文件上传失败')
      onError && onError(error as any)
    }
  }

  // 处理文件变化
  const handleFileChange: UploadProps['onChange'] = (info) => {
    let newFileList = [...info.fileList]

    // 限制上传文件数量为 3 个
    newFileList = newFileList.slice(-3)

    setFileList(newFileList)
  }

  // 生成内容
  const handleGenerate = async () => {
    try {
      const values = await form.validateFields()
      const userInput = values.user_input?.trim()

      if (!userInput) {
        message.warning('请输入需要生成内容的描述')
        return
      }

      setIsGenerating(true)
      setGeneratedResult('')

      // 准备文件数据
      const files = fileList.map(file => {
        if (file.response) {
          return file.response
        }
        return null
      }).filter(Boolean)

      const requestBody = {
        inputs: {
          user_input: userInput,
          files: files
        },
        query: '1',
        response_mode: 'streaming',
        ...(files.length > 0 && {
          preview_url: '1',
          transfer_method: 'local_file',
          user: 'admin'
        })
      }

      const response = await fetch('https://copilot.sino-bridge.com/v1/chat-messages', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer app-YG1qx3qGCPsgqMIyBr8tCmJ7'
        },
        body: JSON.stringify(requestBody)
      })

      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`)
      }

      const reader = response.body?.getReader()
      if (!reader) {
        throw new Error('无法读取响应流')
      }

      const decoder = new TextDecoder()
      let content = ''

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        const chunk = decoder.decode(value, { stream: true })
        const lines = chunk.split('\n')

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const dataStr = line.slice(6)
            if (dataStr === '[DONE]') {
              continue
            }
            try {
              const data = JSON.parse(dataStr)
              if (data.event === 'message' && data.answer) {
                content += data.answer
                setGeneratedResult(content)
              }
            } catch (e) {
              // 忽略解析错误的行
            }
          }
        }
      }

      message.success('内容生成完成')
    } catch (error) {
      console.error('生成内容错误:', error)
      message.error('生成内容失败，请稍后重试')
    } finally {
      setIsGenerating(false)
    }
  }

  // 清空重置
  const handleReset = () => {
    form.resetFields()
    setGeneratedResult('')
    setFileList([])
  }

  return (
    <div style={{
      minHeight: '100vh',
      backgroundColor: '#ffffff',
      padding: '24px',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    }}>
      {/* 页面标题区 */}
      <div style={{ marginBottom: 32, textAlign: 'center' }}>
        <Title level={2} style={{ color: '#1890ff', marginBottom: 8 }}>
          AI内容生成工具
        </Title>
        <Text type='secondary'>
          输入您的需求，AI将为您生成高质量内容
        </Text>
      </div>

      <div style={{
        width: '100%',
        maxWidth: '800px',
        display: 'flex',
        flexDirection: 'column',
        gap: 24
      }}>
        {/* 参数输入区 */}
        <Card title='内容描述' style={{ width: '100%' }}>
          <Form form={form} layout='vertical'>
            <Form.Item
              name='user_input'
              rules={[{ required: true, message: '请输入您需要生成内容的描述' }]}
            >
              <TextArea
                placeholder='请输入您需要生成内容的描述...'
                rows={4}
                style={{ fontSize: 14 }}
              />
            </Form.Item>

            {/* 文件上传区 */}
            <Form.Item label='附件（可选）'>
              <Upload
                multiple
                fileList={fileList}
                onChange={handleFileChange}
                customRequest={handleUpload}
                beforeUpload={() => false} // 阻止自动上传
                onRemove={() => {
                  setFileList([])
                }}
              >
                <Button icon={<UploadOutlined />}>选择文件</Button>
              </Upload>
              <Text type='secondary' style={{ fontSize: 12, display: 'block', marginTop: 4 }}>
                支持上传相关文件，AI将结合文件内容生成更精准的内容
              </Text>
            </Form.Item>

            {/* 操作按钮区 */}
            <Form.Item>
              <Space size='middle'>
                <Button
                  type='primary'
                  icon={<RocketOutlined />}
                  onClick={handleGenerate}
                  loading={isGenerating}
                  size='large'
                >
                  {isGenerating ? '生成中...' : '生成内容'}
                </Button>
                <Button
                  icon={<ReloadOutlined />}
                  onClick={handleReset}
                  disabled={isGenerating}
                  size='large'
                >
                  清空重置
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>

        {/* 内容展示区 */}
        <Card title='生成结果' style={{ width: '100%', minHeight: '200px' }}>
          {isGenerating ? (
            <div style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '150px',
              flexDirection: 'column',
              gap: 16
            }}>
              <Spin size='large' />
              <Text type='secondary'>AI正在生成内容，请稍候...</Text>
            </div>
          ) : generatedResult ? (
            <div style={{
              padding: '16px',
              backgroundColor: '#fafafa',
              borderRadius: '6px',
              whiteSpace: 'pre-wrap',
              wordBreak: 'break-word',
              minHeight: '100px'
            }}>
              {generatedResult}
            </div>
          ) : (
            <div style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '100px',
              color: '#999',
              fontStyle: 'italic'
            }}>
              {generatedResult === '' ? '生成的内容将在这里显示...' : ''}
            </div>
          )}
        </Card>
      </div>
    </div>
  )
}

export default AIContentGenerator