import { useState } from 'react'
import { Button, Card, Form, Input, message, Space, Switch } from 'antd'
import { checkAndCorrectSpelling } from '@/api/spellCheck'

interface CorrectionResult {
  original: string
  corrected: string
  position: number
  suggestions?: string[]
}

const SpellCheck = () => {
  const [form] = Form.useForm()
  const [isGenerating, setIsGenerating] = useState(false)
  const [correctionResults, setCorrectionResults] = useState<CorrectionResult[]>([])
  const [correctedText, setCorrectedText] = useState('')
  const maxChars = 5000

  const validateCustomVocab = (_: any, value: string) => {
    if (!value) {
      return Promise.resolve()
    }
    try {
      const parsed = JSON.parse(value)
      if (!Array.isArray(parsed)) {
        return Promise.reject(new Error('必须是JSON数组格式'))
      }
      if (!parsed.every(item => typeof item === 'string')) {
        return Promise.reject(new Error('数组元素必须为字符串'))
      }
      return Promise.resolve()
    } catch (error) {
      return Promise.reject(new Error('JSON格式无效'))
    }
  }

  const handleGenerate = async () => {
    try {
      const formValues = await form.validateFields()

      // 验证用户输入文本
      if (!formValues.user_input_text?.trim()) {
        message.warning('请输入需要检测错别字的文本')
        return
      }

      // 验证文本长度
      if (formValues.user_input_text.length > maxChars) {
        message.warning(`输入文本不能超过${maxChars}个字符`)
        return
      }

      setIsGenerating(true)
      setCorrectionResults([])
      setCorrectedText('')

      let customVocabArray: string[] = []
      if (formValues.custom_vocab) {
        try {
          customVocabArray = JSON.parse(formValues.custom_vocab)
        } catch (error) {
          message.error('自定义词汇库格式错误')
          setIsGenerating(false)
          return
        }
      }

      const response = await checkAndCorrectSpelling(
        formValues.user_input_text,
        formValues.auto_correct || false,
        customVocabArray
      )

      if (!response.ok) {
        const errorText = await response.text()
        throw new Error(`检测请求失败: ${response.status} ${errorText}`)
      }

      if (!response.body) {
        throw new Error('响应体为空')
      }

      const reader = response.body.getReader()
      const decoder = new TextDecoder('utf-8')
      let buffer = ''
      let fullContent = ''
      let results: CorrectionResult[] = []

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

          buffer += decoder.decode(value, { stream: true })
          const lines = buffer.split('\n')
          buffer = lines.pop() || ''

          for (const line of lines) {
            const trimmedLine = line.trim()
            if (!trimmedLine || trimmedLine === 'data: [DONE]') {
              if (trimmedLine === 'data: [DONE]') {
                message.success('检测完成')
                break
              }
              continue
            }

            if (trimmedLine.startsWith('data: ')) {
              try {
                const data = trimmedLine.slice(6)
                const parsed = JSON.parse(data)

                if (parsed.event === 'message' && parsed.answer) {
                  fullContent += parsed.answer
                  // 尝试解析JSON结果
                  try {
                    results = JSON.parse(fullContent)
                    setCorrectionResults(results)
                    if (formValues.auto_correct) {
                      let corrected = formValues.user_input_text
                      results.forEach(item => {
                        if (item.corrected && item.original) {
                          corrected = corrected.replace(item.original, item.corrected)
                        }
                      })
                      setCorrectedText(corrected)
                    }
                  } catch (e) {
                    // 解析失败，继续等待
                  }
                } else if (parsed.event === 'error') {
                  throw new Error(parsed.message || 'Dify API 返回错误')
                }
              } catch (parseError) {
                console.warn('跳过无法解析的行:', trimmedLine)
              }
            }
          }
        }
      } finally {
        reader.releaseLock()
      }

      if (results.length === 0 && fullContent) {
        try {
          results = JSON.parse(fullContent)
          setCorrectionResults(results)
          if (formValues.auto_correct) {
            let corrected = formValues.user_input_text
            results.forEach(item => {
              if (item.corrected && item.original) {
                corrected = corrected.replace(item.original, item.corrected)
              }
            })
            setCorrectedText(corrected)
          }
        } catch (e) {
          message.warning('检测完成，但结果格式异常')
        }
      }
    } catch (error) {
      console.error('检测错误:', error)
      message.error(error instanceof Error ? error.message : '检测失败，请稍后重试')
    } finally {
      setIsGenerating(false)
    }
  }

  const handleReset = () => {
    form.resetFields()
    setCorrectionResults([])
    setCorrectedText('')
    message.info('已重置表单')
  }

  const renderCorrectionResults = () => {
    if (isGenerating) {
      return (
        <div style={{ textAlign: 'center', color: '#999', padding: '20px' }}>
          正在检测中，请稍候...
        </div>
      )
    }

    if (correctionResults.length === 0) {
      return (
        <div style={{ textAlign: 'center', color: '#999' }}>
          错别字检测结果将在这里显示
        </div>
      )
    }

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        {correctionResults.map((item, index) => (
          <div
            key={index}
            style={{
              padding: '12px',
              backgroundColor: '#f5f5f5',
              borderRadius: '6px',
              border: '1px solid #d9d9d9'
            }}
          >
            <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
              位置 {item.position}：
            </div>
            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
              <span style={{ color: '#ff4d4f' }}>原词：{item.original}</span>
              <span>→</span>
              <span style={{ color: '#52c41a' }}>建议：{item.corrected}</span>
            </div>
            {item.suggestions && item.suggestions.length > 0 && (
              <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
                其他建议：{item.suggestions.join('、')}
              </div>
            )}
          </div>
        ))}
      </div>
    )
  }

  return (
    <div style={{ maxWidth: '900px', margin: '0 auto', padding: '20px' }}>
      {/* 页面标题区 */}
      <div style={{ textAlign: 'center', marginBottom: '40px' }}>
        <h1 style={{ color: '#1890ff', fontSize: '32px', fontWeight: 'bold', margin: 0 }}>
          错别字检测与纠正系统
        </h1>
      </div>

      <Space direction="vertical" style={{ width: '100%' }} size="large">
        {/* 参数输入区 */}
        <Card title="参数输入区">
          <Form form={form} layout="vertical">
            <Form.Item
              name="user_input_text"
              label="用户输入文本"
              rules={[
                { required: true, message: '请输入需要检测错别字的文本' },
                { max: maxChars, message: `输入文本不能超过${maxChars}个字符` }
              ]}
            >
              <Input.TextArea
                rows={8}
                placeholder="请输入需要检测错别字的中文文本..."
                maxLength={maxChars}
                showCount
                style={{ fontSize: '14px' }}
              />
            </Form.Item>

            <Form.Item name="auto_correct" label="是否自动替换" valuePropName="checked">
              <Switch />
            </Form.Item>

            <Form.Item
              name="custom_vocab"
              label="自定义词汇库（可选）"
              rules={[{ validator: validateCustomVocab }]}
            >
              <Input.TextArea
                rows={4}
                placeholder='请输入JSON格式词汇库，如：["正确词1", "正确词2"]'
                style={{ fontSize: '14px' }}
              />
              <div className="form-helper-text" style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                格式要求：合法的JSON数组，元素为字符串
              </div>
            </Form.Item>
          </Form>
        </Card>

        {/* 操作按钮区 */}
        <div className="button-group" style={{ display: 'flex', justifyContent: 'center', gap: '16px' }}>
          <Button
            type="primary"
            size="large"
            onClick={handleGenerate}
            loading={isGenerating}
            style={{ minWidth: '120px', height: '40px', fontSize: '16px' }}
          >
            检测错别字
          </Button>
          <Button
            size="large"
            onClick={handleReset}
            disabled={isGenerating}
            style={{ minWidth: '120px', height: '40px', fontSize: '16px' }}
          >
            重置
          </Button>
        </div>

        {/* 内容展示区 */}
        <Card
          title="检测结果"
          style={{
            display: correctionResults.length > 0 || isGenerating ? 'block' : 'none'
          }}
        >
          <div
            style={{
              minHeight: '150px',
              maxHeight: '400px',
              overflowY: 'auto',
              padding: '15px',
              backgroundColor: '#fafafa',
              border: '1px solid #d9d9d9',
              borderRadius: '4px'
            }}
          >
            {renderCorrectionResults()}
          </div>
        </Card>

        {correctedText && (
          <Card title="纠正后的文本">
            <div
              style={{
                minHeight: '120px',
                padding: '15px',
                backgroundColor: '#f6ffed',
                border: '1px solid #b7eb8f',
                borderRadius: '4px',
                whiteSpace: 'pre-wrap',
                wordWrap: 'break-word',
                fontSize: '14px',
                lineHeight: '1.6'
              }}
            >
              {correctedText}
            </div>
          </Card>
        )}
      </Space>
    </div>
  )
}

export default SpellCheck