// admin-login.jsx - Admin login interface
const { useState: loginUseState } = React;

function AdminLogin({ onLoginSuccess }) {
  const { Icon } = window;
  const [formData, setFormData] = loginUseState({ username: '', password: '' });
  const [loading, setLoading] = loginUseState(false);
  const [error, setError] = loginUseState('');

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

    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
        credentials: 'include' // Include cookies
      });

      const data = await response.json();

      if (response.ok) {
        onLoginSuccess(data.user);
      } else {
        setError(data.error || 'Login failed');
      }
    } catch (error) {
      console.error('Login error:', error);
      setError('Network error. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  return (
    <div className="admin-login">
      <div className="admin-login-container">
        <div className="admin-login-header">
          <img src="assets/logo-robot.png" className="pixel" alt="" />
          <h1>BotBuilders Admin</h1>
          <p>Sign in to access the dashboard</p>
        </div>

        <form onSubmit={handleSubmit} className="admin-login-form">
          {error && (
            <div className="admin-error">
              <Icon name="alert-circle" size={16} />
              {error}
            </div>
          )}

          <div className="form-group">
            <label htmlFor="username">Username</label>
            <input
              type="text"
              id="username"
              name="username"
              value={formData.username}
              onChange={handleChange}
              required
              autoComplete="username"
              autoFocus
            />
          </div>

          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              required
              autoComplete="current-password"
            />
          </div>

          <button type="submit" disabled={loading} className="admin-login-btn">
            {loading ? (
              <>
                <Icon name="loader" size={16} />
                Signing in...
              </>
            ) : (
              <>
                <Icon name="log-in" size={16} />
                Sign In
              </>
            )}
          </button>
        </form>

        <div className="admin-login-footer">
          <p>
            <Icon name="shield" size={14} />
            Secure admin access
          </p>
        </div>
      </div>
    </div>
  );
}

window.AdminLogin = AdminLogin;