const { useState, useEffect } = React;

window.Login = function Login({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (username === 'brinston18' && password === 'Zirkzee11') {
      window.DataManager.setAdminToken(password);
      onLogin();
    } else {
      setError('Invalid username or password');
    }
  };

  return (
    <div className="flex items-center justify-center py-20 px-4">
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 w-full max-w-md">
        <div className="text-center mb-8">
          <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <i data-lucide="lock" className="w-8 h-8 text-blue-600"></i>
          </div>
          <h2 className="text-2xl font-bold text-gray-900">Admin Access</h2>
          <p className="text-sm text-gray-500 mt-2">Please log in to manage events.</p>
        </div>

        {error && (
          <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm mb-6 flex items-center">
            <i data-lucide="alert-circle" className="w-5 h-5 mr-2"></i>
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-5">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
            <input 
              type="text" 
              required
              value={username} 
              onChange={e => setUsername(e.target.value)} 
              className="w-full bg-white border-2 border-gray-200 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 px-3 hover:border-gray-300 transition-colors outline-none" 
              placeholder="Enter username" 
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <input 
              type="password" 
              required
              value={password} 
              onChange={e => setPassword(e.target.value)} 
              className="w-full bg-white border-2 border-gray-200 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm py-2.5 px-3 hover:border-gray-300 transition-colors outline-none" 
              placeholder="Enter password" 
            />
          </div>

          <button 
            type="submit" 
            className="w-full py-2.5 px-4 bg-blue-600 text-white hover:bg-blue-700 rounded-lg text-sm font-bold transition-colors shadow-sm mt-4 flex justify-center items-center"
          >
            Log In
            <i data-lucide="log-in" className="w-4 h-4 ml-2"></i>
          </button>
        </form>
      </div>
    </div>
  );
};