// src/components/AuthForm.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { login, register } from '../api/auth';
import './AuthForm.css';

const AuthForm = ({ onLoginSuccess }) => {
  const [isLogin, setIsLogin] = useState(true);
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    code: ''
  });
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      if (isLogin) {
            const response = await login(formData.username, formData.password);
            if (response.data.code === 200) {
              localStorage.setItem('token', response.data.data.token);
              localStorage.setItem('username', formData.username);
              onLoginSuccess?.();
              navigate('/dashboard');
            } else {
              setError(response.data.message || '登录失败');
            }
          } else {
            const response = await register(
              formData.username,
              formData.password,
              formData.code
            );
            if (response.data.code === 200) {
              setError('');
              setIsLogin(true);
              setFormData({ username: '', password: '', code: '' });
            } else {
              setError(response.data.message || '注册失败');
            }
          }
        } catch (err) {
          setError(err.message || (isLogin ? '登录失败' : '注册失败'));
        } finally {
          setIsLoading(false);
        }
      

      
  };

  return (
    <div className="auth-container">
      <h1 className="auth-title">PT影视资源站</h1>
      
      <div className="auth-form-wrapper">
        {isLogin ? (
          <form className="auth-form" onSubmit={handleSubmit}>
            <h2>用户登录</h2>
            {error && <div className="error-message">{error}</div>}
            
            <div className="form-group">
              <input
                type="text"
                name="username"
                placeholder="账号"
                value={formData.username}
                onChange={handleChange}
                required
              />
            </div>
            
            <div className="form-group">
              <input
                type="password"
                name="password"
                placeholder="密码"
                value={formData.password}
                onChange={handleChange}
                required
              />
            </div>
            
            <button type="submit" className="auth-button" disabled={isLoading}>
              {isLoading ? '登录中...' : '登录'}
            </button>
            
            <div className="auth-switch">
              <span>未有账户？</span>
              <button type="button" onClick={() => setIsLogin(false)} className="switch-button">
                去注册
              </button>
            </div>
          </form>
        ) : (
          <form className="auth-form" onSubmit={handleSubmit}>
            <h2>用户注册</h2>
            {error && <div className="error-message">{error}</div>}
            
            <div className="form-group">
              <input
                type="text"
                name="username"
                placeholder="账号"
                value={formData.username}
                onChange={handleChange}
                required
              />
            </div>
            
            <div className="form-group">
              <input
                type="password"
                name="password"
                placeholder="密码"
                value={formData.password}
                onChange={handleChange}
                required
              />
            </div>
            
            <div className="form-group">
              <input
                type="text"
                name="code"
                placeholder="邀请码"
                value={formData.code}
                onChange={handleChange}
                required
              />
            </div>
            
            <button type="submit" className="auth-button" disabled={isLoading}>
              {isLoading ? '注册中...' : '注册'}
            </button>
            
            <div className="auth-switch">
              <span>已有账户？</span>
              <button type="button" onClick={() => setIsLogin(true)} className="switch-button">
                去登录
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};

export default AuthForm;