const React = require('react');
const { useState } = React;
const Layout = require('@theme/Layout').default;
const styles = require('./feedback.module.css');

function Feedback() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    type: '功能建议',
    content: '',
  });
  
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const validateEmail = (email) => {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({
      ...prevData,
      [name]: value
    }));
    setError('');
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!formData.name.trim()) {
      setError('请输入您的姓名');
      return;
    }
    
    if (!formData.email.trim()) {
      setError('请输入您的邮箱地址');
      return;
    }

    if (!validateEmail(formData.email)) {
      setError('请输入有效的邮箱地址');
      return;
    }
    
    if (!formData.content.trim()) {
      setError('请输入反馈内容');
      return;
    }

    setIsSubmitting(true);
    
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('表单提交:', formData);
      setSubmitted(true);
      setError('');
    } catch (err) {
      setError('提交失败，请稍后重试');
    } finally {
      setIsSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <Layout title="反馈已提交 - GitLink帮助中心">
        <div className={styles.feedbackContainer}>
          <div className={styles.successMessage}>
            <h1>感谢您的反馈！</h1>
            <p>我们已收到您的反馈意见，将认真处理每一条建议。<br />您的支持是我们不断进步的动力。</p>
            <div>
              <button 
                className={styles.button}
                onClick={() => {
                  setSubmitted(false);
                  setFormData({
                    name: '',
                    email: '',
                    type: '功能建议',
                    content: '',
                  });
                }}
              >
                继续提交反馈
              </button>
              <a href="/" className={styles.homeLink}>返回首页</a>
            </div>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout title="问题反馈 - GitLink帮助中心">
      <div className={styles.feedbackContainer}>
        <h1>问题反馈</h1>
        <p className={styles.subtitle}>
          欢迎提供您的宝贵意见，帮助我们做得更好
        </p>
        
        {error && <div className={styles.errorMessage}>{error}</div>}
        
        <form onSubmit={handleSubmit} className={styles.feedbackForm}>
          <div className={styles.formGroup}>
            <label htmlFor="name">姓名 <span className={styles.required}>*</span></label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name}
              onChange={handleChange}
              placeholder="请输入您的姓名"
              disabled={isSubmitting}
              required
            />
          </div>
          
          <div className={styles.formGroup}>
            <label htmlFor="email">邮箱 <span className={styles.required}>*</span></label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              placeholder="请输入您的邮箱地址"
              disabled={isSubmitting}
              required
            />
          </div>
          
          <div className={styles.formGroup}>
            <label htmlFor="type">反馈类型</label>
            <select
              id="type"
              name="type"
              value={formData.type}
              onChange={handleChange}
              disabled={isSubmitting}
            >
              <option value="功能建议">功能建议</option>
              <option value="问题报告">问题报告</option>
              <option value="使用咨询">使用咨询</option>
              <option value="其他">其他</option>
            </select>
          </div>
          
          <div className={styles.formGroup}>
            <label htmlFor="content">反馈内容 <span className={styles.required}>*</span></label>
            <textarea
              id="content"
              name="content"
              value={formData.content}
              onChange={handleChange}
              placeholder="请详细描述您遇到的问题或建议..."
              rows="6"
              disabled={isSubmitting}
              required
            />
          </div>
          
          <button 
            type="submit" 
            className={styles.button}
            disabled={isSubmitting}
          >
            {isSubmitting ? '提交中...' : '提交反馈'}
          </button>
        </form>
      </div>
    </Layout>
  );
}

module.exports = Feedback; 