import React, { useState } from 'react';
import '../../pages/AuthPage/AuthPage.css';
import image from './logo.svg'; // 引入图片

const Register = ({ onLoginClick }) => {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    email: ''
  });
  const [verificationCode, setVerificationCode] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 注册逻辑
  };

  const verifyEmailCode = async () => {
    try {
      const response = await fetch('http://localhost:8080/user/verify-code', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: formData.email,
          code: verificationCode,
        }),
      });

      const result = await response.json();
      if (response.ok && result.code === "0") {
        console.log('邮箱验证成功:', result.msg);
        // 处理成功逻辑
      } else {
        console.error('邮箱验证失败:', result.msg);
        // 处理失败逻辑
      }
    } catch (error) {
      console.error('请求错误:', error);
      // 处理请求错误
    }
  };


  return (
    <div className="auth-container">
      <img 
        src={image} 
        alt="描述" 
        style={{ width: '30%', height: 'auto'}} 
      />
      <div className="auth-form-section">
        <h3>用户注册</h3>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>用户名</label>
            <input
              type="text"
              className="form-input"
              placeholder="请输入用户名"
              value={formData.username}
              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
              required
            />
          </div>
          <div className="form-group">
            <label>密码</label>
            <input
              type="password"
              className="form-input"
              placeholder="请输入密码"
              value={formData.password}
              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              required
            />
          </div>
          <div className="form-group">
            <label>邮箱</label>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <input
                type="email"
                className="form-input"
                placeholder="请输入邮箱"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                required
                style={{ flex: 1, marginRight: '10px' }}
              />
              <button type="button" onClick={verifyEmailCode} className="verify-button">
                验证邮箱
              </button>
            </div>
          </div>
          <div className="form-group">
            <label>验证码</label>
            <input
              type="text"
              className="form-input"
              placeholder="请输入邮箱验证码"
              value={verificationCode}
              onChange={(e) => setVerificationCode(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="auth-button">
            注册
          </button>
          <p className="login-link">
            已有账号? 
            <button onClick={onLoginClick} className="link-button">
              点击登录
            </button>
          </p>
        </form>
      </div>
    </div>
  );
};

export default Register;