(() => {
  const { useState } = window.DC;

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

    const submit = async () => {
      if (!username || !password) {
        setError("Completa todos los campos");
        return;
      }

      setLoading(true);
      setError("");

      try {
        const response = await fetch("/api/auth/login", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ username, password }),
        });
        const data = await response.json();

        if (data.error) {
          setError(data.error);
          setLoading(false);
          return;
        }

        localStorage.setItem("dc_token", data.token);
        onLogin(data.user);
      } catch {
        setError("Error de conexión");
        setLoading(false);
      }
    };

    const handleSubmit = (event) => {
      event.preventDefault();
      submit();
    };

    return (
      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }}>
        <div className="card" style={{ maxWidth: 360, width: "100%" }}>
          <form className="card-body" onSubmit={handleSubmit} data-allow-autocomplete="true">
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
              <div className="nav-logo-icon" style={{ width: 42, height: 42, fontSize: 20, flexShrink: 0 }}>
                ⚡
              </div>
              <div>
                <div className="nav-logo-text" style={{ fontSize: 18 }}>
                  DataCole
                </div>
                <div className="nav-logo-sub">DEPLOY MANAGER</div>
              </div>
            </div>
            <div className="field">
              <label>Usuario</label>
              <input
                name="username"
                value={username}
                onChange={(event) => setUsername(event.target.value)}
                onKeyDown={(event) => event.key === "Enter" && submit()}
                autoComplete="username"
                autoFocus
                className="input"
                placeholder="superadmin"
              />
            </div>
            <div className="field">
              <label>Contraseña</label>
              <input
                type="password"
                name="current-password"
                value={password}
                onChange={(event) => setPassword(event.target.value)}
                onKeyDown={(event) => event.key === "Enter" && submit()}
                autoComplete="current-password"
                className="input"
                placeholder="••••••••"
              />
            </div>
            {error && <div className="alert alert-danger">{error}</div>}
            <button type="submit" disabled={loading} className="btn btn-primary">
              {loading ? "Iniciando..." : "Iniciar sesión"}
            </button>
          </form>
        </div>
      </div>
    );
  }

  window.DCViews.LoginPage = LoginPage;
})();