const AuthScreen = ({ onLoginSuccess }) => {
  const [isLogin, setIsLogin] = React.useState(true);
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

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

    try {
      let result;
      if (isLogin) {
        result = await loginUser(email, password);
      } else {
        result = await registerUser(email, password);
      }

      if (result.error) {
        setError(result.error);
      } else {
        // 成功
        onLoginSuccess(result.user);
      }
    } catch (err) {
      setError('予期せぬエラーが発生しました。');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[9999] bg-black/90 backdrop-blur-xl flex items-center justify-center font-mono overflow-hidden">
      <div className="scanlines"></div>
      
      {/* 背景装飾 */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-cyan-500/10 rounded-full blur-[120px] animate-pulse"></div>
      
      <div className="relative w-full max-w-md p-8 bg-gray-900/50 border border-cyan-500/30 rounded-3xl shadow-2xl animate-fade-in-up">
        {/* ヘッダー */}
        <div className="text-center mb-10">
          <div className="text-[10px] tracking-[0.5em] text-cyan-500 mb-2 font-black uppercase">Authentication Protocol</div>
          <h2 className="text-4xl font-black text-white tracking-widest title-text-glow">
            {isLogin ? 'LOGIN' : 'SIGN UP'}
          </h2>
          <div className="h-1 w-12 bg-cyan-500 mx-auto mt-4 rounded-full"></div>
        </div>

        {/* フォーム */}
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label className="block text-[10px] text-gray-500 mb-2 font-black uppercase tracking-widest ml-1">Terminal Address (Email)</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              placeholder="user@junkcode.net"
              className="w-full bg-black/50 border border-gray-800 focus:border-cyan-500 p-4 rounded-xl text-white focus:outline-none transition-all placeholder:text-gray-700"
            />
          </div>

          <div>
            <label className="block text-[10px] text-gray-500 mb-2 font-black uppercase tracking-widest ml-1">Access Key (Password)</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              placeholder="••••••••"
              className="w-full bg-black/50 border border-gray-800 focus:border-cyan-500 p-4 rounded-xl text-white focus:outline-none transition-all placeholder:text-gray-700"
            />
          </div>

          {error && (
            <div className="bg-red-900/20 border border-red-900/50 p-4 rounded-xl text-red-500 text-xs font-bold animate-shake">
              <div className="flex items-center gap-2">
                <span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                ERROR: {error}
              </div>
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            className="group relative w-full py-4 bg-cyan-600 hover:bg-cyan-500 text-white font-black rounded-xl transition-all shadow-lg shadow-cyan-900/40 overflow-hidden disabled:opacity-50"
          >
            <div className="absolute inset-0 bg-white/20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
            <span className="relative z-10 tracking-[0.2em]">
              {loading ? 'PROCESSING...' : (isLogin ? 'AUTHORIZE' : 'INITIALIZE ACCOUNT')}
            </span>
          </button>
        </form>

        {/* 切り替え */}
        <div className="mt-8 text-center">
          <button
            onClick={() => { setIsLogin(!isLogin); setError(''); }}
            className="text-[10px] text-gray-500 hover:text-cyan-400 font-black uppercase tracking-widest transition-colors"
          >
            {isLogin ? "Don't have an account? Register" : "Already have an account? Login"}
          </button>
        </div>

        {/* 警告 */}
        <div className="mt-12 pt-6 border-t border-gray-800/50">
          <p className="text-[9px] text-gray-600 leading-relaxed text-center font-bold">
            Unauthorized access is prohibited. All terminal sessions are encrypted and monitored.
            Contact system administrator for bypass protocols.
          </p>
        </div>
      </div>
    </div>
  );
};