import React, { useState } from 'react'
import styles from './index.module.scss'
import { Radio } from 'antd'
import { TextArea, Input, Button, Toast } from 'antd-mobile'
import http from '@/utils/axios'

const TYPE = ['回答不相关', '回答不完整', '答案错误', '无法回答问题', '其他']

interface HelpImproveProps {
  question: string
  answer: string
  onClose: () => void
}

function HelpImprove({ question, answer, onClose }: HelpImproveProps) {
  const [type, setType] = useState<string>('')
  const [suggest, setSuggest] = useState<string>('')
  const [userName, setUserName] = useState<string>('')
  const [phone, setPhone] = useState<string>('')
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async () => {
    if (!type) {
      Toast.show({
        icon: 'fail',
        content: '请选择反馈类型'
      })
      return
    }

    setIsSubmitting(true)
    try {
      const response = await http.post('/show/aiSave', {
        answer,
        phone,
        question,
        suggest,
        type,
        userName
      })

      if (response.code === 0) {
        Toast.show({
          icon: 'success',
          content: '提交成功'
        })
        onClose()
      }
    } catch (error) {
      console.error('提交失败:', error)
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleCancel = () => {
    onClose()
  }

  return (
    <div className={styles.helpImprove}>
      <div className={styles.helpImproveContent}>
        <h3>AI问答反馈</h3>

        <div className={styles.helpImproveDialog}>
          <div>
            <span>原问题：</span>
            <p>{question}</p>
          </div>
          <div>
            <span>原回答：</span>
            <p>{answer}</p>
          </div>
        </div>

        <div className={styles.helpImproveType}>
          <p>反馈类型</p>
          <Radio.Group buttonStyle='outline' value={type} onChange={e => setType(e.target.value)}>
            {TYPE.map(item => (
              <Radio key={item} value={item}>
                {item}
              </Radio>
            ))}
          </Radio.Group>
        </div>

        <TextArea
          className={styles.helpImproveTextarea}
          placeholder='请输入您的建议，不超过200个字'
          maxLength={200}
          value={suggest}
          onChange={val => setSuggest(val)}
        />

        <div className={styles.helpImproveLine}>
          <label>您的称呼</label>
          <Input
            className={styles.helpImproveInput}
            placeholder='请输入内容，不超过20个字'
            maxLength={20}
            value={userName}
            onChange={val => setUserName(val)}
          />
        </div>
        <div className={styles.helpImproveLine}>
          <label>联系方式</label>
          <Input
            type='tel'
            className={styles.helpImproveInput}
            placeholder='请输入内容，不超过20个字'
            maxLength={20}
            value={phone}
            onChange={val => setPhone(val)}
          />
        </div>

        <div className={styles.helpImproveFooter}>
          <Button
            className={styles.helpImproveSubmit}
            onClick={handleSubmit}
            loading={isSubmitting}
          >
            提交
          </Button>
          <Button className={styles.helpImproveCancel} onClick={handleCancel}>
            取消
          </Button>
        </div>
      </div>
    </div>
  )
}

const MemoHelpImprove = React.memo(HelpImprove)

export default MemoHelpImprove