import React, { useState } from 'react';
import { User, Lock } from 'lucide-react';

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

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

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Validate 8-digit requirement
    const regex = /^\d{8}$/;
    if (!regex.test(inputId)) {
      setError('工号必须是8位数字');
      return;
    }
    onLogin(inputId);
  };

  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">
          请输入您的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="请输入8位工号 (例如: 10023456)"
              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"
              maxLength={8}
            />
          </div>
          
          {error && (
            <p className="text-red-500 text-sm text-left pl-2">{error}</p>
          )}

          <button
            type="submit"
            className="w-full py-3 bg-black dark:bg-white text-white dark:text-black rounded-xl font-bold hover:opacity-90 transition-opacity"
          >
            进入系统
          </button>
        </form>
      </div>
    </div>
  );
};

export default AuthModal;