import React, { useState } from 'react';
import { User, Lock, Loader2 } from 'lucide-react';
import { login } from '../services/authService';

interface AuthModalProps {
  isOpen: boolean;
  onLogin: (employeeId: string) => void;
}

const AuthModal: React.FC<AuthModalProps> = ({ isOpen, onLogin }) => {
  const [inputId, setInputId] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  if (!isOpen) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputId.trim()) {
        setError('请输入工号');
        return;
    }
    
    setIsLoading(true);
    setError('');
    
    try {
        const success = await login(inputId.trim());
        if (success) {
            onLogin(inputId.trim());
        } else {
            setError('验证失败：工号未在白名单中');
        }
    } catch (e) {
        setError('服务器连接失败，请稍后重试');
    } finally {
        setIsLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
      {/* Non-dismissible backdrop */}
      <div className="absolute inset-0 bg-black/90 backdrop-blur-md" />
      
      <div className="relative bg-white dark:bg-gray-900 w-full max-w-md rounded-2xl shadow-2xl p-8 animate-fade-in text-center">
        <div className="w-16 h-16 bg-black dark:bg-white rounded-full flex items-center justify-center mx-auto mb-6">
          <Lock className="text-white dark:text-black" size={32} />
        </div>
        
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          欢迎来到 艺云-DESIGN
        </h2>
        <p className="text-gray-500 mb-8">
          请输入您的工号以访问平台功能
        </p>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="relative">
            <User className="absolute left-3 top-3 text-gray-400" size={20} />
            <input
              type="text"
              value={inputId}
              onChange={(e) => {
                setInputId(e.target.value);
                setError('');
              }}
              placeholder="请输入工号"
              className="w-full pl-10 pr-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-black dark:focus:ring-white outline-none transition-all font-mono"
              disabled={isLoading}
            />
          </div>
          
          {error && (
            <p className="text-red-500 text-sm text-left pl-2">{error}</p>
          )}

          <button
            type="submit"
            disabled={isLoading}
            className="w-full py-3 bg-black dark:bg-white text-white dark:text-black rounded-xl font-bold hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
          >
            {isLoading && <Loader2 className="animate-spin" size={20} />}
            {isLoading ? '验证中...' : '进入系统'}
          </button>
        </form>
      </div>
    </div>
  );
};

export default AuthModal;