const { useState } = React;

const LoginPage = ({ onLogin }) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!username || !password) { setError("Ingresa usuario y contrasena"); return; }
    setError("");
    setLoading(true);

    try {
      const res = await fetch(`${API_BASE}/auth/login`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.message || "Credenciales incorrectas");
        setLoading(false);
        return;
      }
      setAuth(data.token, data.user);
      onLogin(data.user);
    } catch (err) {
      setError("Error de conexion con el servidor");
    }
    setLoading(false);
  };

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-logo">
          <img src="assets/logo-mym.png" alt="MyM's Pizza" />
        </div>
        <h1 className="login-title">Concentrador de Pedidos</h1>
        <p className="login-sub">Inicia sesion para continuar</p>

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

          <div className="form-field">
            <label>Usuario</label>
            <div className="input-wrap">
              <Icon name="user" size={16} />
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="tu.usuario"
                autoComplete="username"
                autoFocus
              />
            </div>
          </div>

          <div className="form-field">
            <label>Contrasena</label>
            <div className="input-wrap">
              <Icon name="lock" size={16} />
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                autoComplete="current-password"
              />
            </div>
          </div>

          <button type="submit" className="login-btn" disabled={loading}>
            {loading ? "Ingresando..." : "Ingresar"}
          </button>
        </form>
      </div>
    </div>
  );
};

window.LoginPage = LoginPage;