KiloStar/frontend/src/components/Auth/AuthPage.tsx

import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import apiClient from '../../api/client';
import { ArrowRight } from 'lucide-react';

interface AuthPageProps {
  onLoginSuccess: () => void;
}

export function AuthPage({ onLoginSuccess }: AuthPageProps) {
  const { t } = useTranslation();
  const [isLogin, setIsLogin] = useState(true);
  const [userName, setUserName] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      if (isLogin) {
        const response = await apiClient.post('/api/v1/auth/login', {
          user_name: userName,
          password: password,
        });
        if (response.data.token) {
          localStorage.setItem('token', response.data.token);
          onLoginSuccess();
        }
      } else {
        const response = await apiClient.post('/api/v1/auth/register', {
          user_name: userName,
          password: password,
        });
        if (response.data.message === 'success') {
          setIsLogin(true);
          setError(t('auth.registerSuccess'));
        }
      }
    } catch (err: any) {
      console.error(err);
      setError(err.response?.data?.detail || err.response?.data?.message || t('auth.authFailed'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen w-full bg-bg-primary flex items-center justify-center">
      <div className="flex items-center gap-[70px] w-[900px]">
        {/* Left: Brand */}
        <div className="flex-1">
          <div className="w-10 h-[3px] rounded-sm bg-gradient-to-r from-accent to-clay mb-6" />
          <h1 className="text-[40px] font-bold tracking-tight leading-tight mb-3 text-text-primary">
            Kilo<span className="not-italic text-accent">Star</span>
          </h1>
          <p className="text-[15px] text-text-muted leading-relaxed mb-8">
            {t('app.tagline')}
          </p>
          <div className="flex flex-col gap-2.5">
            <div className="flex items-center gap-2.5 text-[13px] text-text-muted">
              <div className="w-[5px] h-[5px] rounded-full bg-clay" />
              <span>Multi-Agent Orchestration</span>
            </div>
            <div className="flex items-center gap-2.5 text-[13px] text-text-muted">
              <div className="w-[5px] h-[5px] rounded-full bg-clay" />
              <span>Visual Pipeline Builder</span>
            </div>
            <div className="flex items-center gap-2.5 text-[13px] text-text-muted">
              <div className="w-[5px] h-[5px] rounded-full bg-clay" />
              <span>Intelligent Monitoring</span>
            </div>
          </div>
        </div>

        {/* Right: Card */}
        <div className="w-[380px] bg-bg-card rounded-[20px] p-10 shadow-[0_1px_3px_rgba(0,0,0,0.04),0_8px_24px_rgba(0,0,0,0.03)] border border-border-primary">
          <h2 className="text-xl font-semibold text-text-primary mb-1">
            {isLogin ? t('auth.welcomeBack') : t('auth.createAccount')}
          </h2>
          <p className="text-[13px] text-text-muted mb-7">
            {isLogin ? t('auth.enterCredentials') : t('auth.signUpToStart')}
          </p>

          {error && (
            <div className={`mb-5 p-3 rounded-[10px] text-sm border ${error.includes('success') || error.includes('成功') ? 'bg-success-bg/50 text-success border-success/20' : 'bg-danger-bg/50 text-danger border-danger/20'}`}>
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-[18px]">
            <div>
              <label className="block text-xs font-medium text-text-muted mb-1.5">
                {t('auth.username')}
              </label>
              <input
                type="text"
                value={userName}
                onChange={(e) => setUserName(e.target.value)}
                className="w-full px-3.5 py-3 rounded-[10px] border border-border-primary bg-bg-primary text-sm text-text-primary placeholder:text-[#bbb5ae] outline-none transition-all focus:border-accent focus:shadow-[0_0_0_3px_rgba(156,175,136,0.1)]"
                placeholder={t('auth.usernamePlaceholder')}
                required
              />
            </div>

            <div>
              <label className="block text-xs font-medium text-text-muted mb-1.5">
                {t('auth.password')}
              </label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-3.5 py-3 rounded-[10px] border border-border-primary bg-bg-primary text-sm text-text-primary placeholder:text-[#bbb5ae] outline-none transition-all focus:border-accent focus:shadow-[0_0_0_3px_rgba(156,175,136,0.1)]"
                placeholder={t('auth.passwordPlaceholder')}
                required
              />
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full py-3 rounded-[10px] bg-accent text-white text-sm font-semibold hover:bg-accent-hover hover:-translate-y-px hover:shadow-[0_6px_20px_rgba(156,175,136,0.3)] transition-all disabled:opacity-50 cursor-pointer flex items-center justify-center gap-2"
            >
              {loading ? (
                <span className="flex items-center gap-2">
                  <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  {t('auth.processing')}
                </span>
              ) : (
                <>
                  {isLogin ? t('auth.signIn') : t('auth.signUp')}
                  <ArrowRight size={16} />
                </>
              )}
            </button>
          </form>

          <div className="flex items-center gap-3.5 my-5 text-[#bbb5ae] text-xs before:flex-1 before:h-px before:bg-border-primary after:flex-1 after:h-px after:bg-border-primary">
            or
          </div>

          <p className="text-center text-[13px] text-text-muted">
            {isLogin ? t('auth.noAccount') : t('auth.hasAccount')}{' '}
            <button
              onClick={() => { setIsLogin(!isLogin); setError(''); }}
              className="text-accent font-medium hover:text-accent-hover transition-colors"
            >
              {isLogin ? t('auth.signUp') : t('auth.signIn')}
            </button>
          </p>
        </div>
      </div>
    </div>
  );
}