/* ============================================================
   Login — pantalla de inicio de sesión (MVP, toggle por .env).
   Se muestra ANTES de la app cuando el backend reporta authEnabled.
   onLogin(usuario, clave) → async; lanza si las credenciales fallan.
   Autocontenido: no depende de otros componentes (solo React + estilos).
   ============================================================ */
const LoginScreen = ({ onLogin }) => {
  const [usuario, setUsuario] = React.useState("");
  const [clave, setClave] = React.useState("");
  const [error, setError] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [showPass, setShowPass] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setError("");
    setBusy(true);
    try {
      await onLogin(usuario.trim(), clave);
      // En éxito, el padre cambia de pantalla; no hace falta tocar busy.
    } catch (err) {
      setError("Usuario o contraseña incorrectos.");
      setBusy(false);
    }
  };

  const labelStyle = { fontSize: 11.5, letterSpacing: 0.3, fontWeight: 600, color: "var(--g-text-cream)" };

  return (
    <div className="sonar-app login-screen" data-theme="oscuro">
      {/* Colaboración (arriba): Gobierno del Quindío + Interior │ Deep Modular.
          La línea separadora queda centrada al ancho de la ventana (grid 1fr · línea · 1fr).
          deep-modular-light.png = tu deep-modular.png procesado a transparente + tono claro. */}
      <div className="login__collab">
        <div className="login__gov">
          <img src="assets/gobierno-quindio.png" alt="Gobierno del Quindío"/>
          <img className="login__gov-interior" src="assets/interior.jpg" alt="Ministerio del Interior"/>
        </div>
        <span className="login__sep" aria-hidden="true"></span>
        <img className="login__dm-img" src="assets/deep-modular-light.png" alt="Deep Modular"/>
      </div>

      <form className="surface" onSubmit={submit}
            style={{ width: 360, maxWidth: "90vw", padding: 28, display: "flex",
                     flexDirection: "column", gap: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 4 }}>
          <div className="sonar-logo__mark" style={{ color: "var(--accent, var(--g-celadon))" }}>
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
              <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
              <path d="m9 12 2 2 4-4"/>
            </svg>
          </div>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15 }}>
            <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: 1.5, color: "var(--g-text-cream)" }}>GUARDIAN</span>
            <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: 3, color: "var(--g-text-mute-dark)" }}>SONAR</span>
          </div>
        </div>

        <span style={{ fontSize: 13, color: "var(--g-text-mute-dark)" }}>
          Ingresa con tu usuario de operador para continuar.
        </span>

        <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
          <span style={labelStyle}>Usuario</span>
          <input className="input" type="text" autoFocus autoComplete="username"
                 value={usuario} onChange={e => setUsuario(e.target.value)} placeholder="usuario" />
        </label>

        <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
          <span style={labelStyle}>Contraseña</span>
          <div style={{ position: "relative", display: "flex" }}>
            <input className="input" type={showPass ? "text" : "password"} autoComplete="current-password"
                   value={clave} onChange={e => setClave(e.target.value)} placeholder="••••••••"
                   style={{ paddingRight: 42 }} />
            <button type="button" className="login__eye"
                    onClick={() => setShowPass(s => !s)}
                    title={showPass ? "Ocultar contraseña" : "Mostrar contraseña"}
                    aria-label={showPass ? "Ocultar contraseña" : "Mostrar contraseña"}>
              <window.Icon name={showPass ? "eye-off" : "eye"} size={16}/>
            </button>
          </div>
        </label>

        {error && (
          <span style={{ fontSize: 12, color: "var(--g-signal-red-soft)", display: "flex",
                         alignItems: "center", gap: 6 }}>
            <window.Icon name="alert-circle" size={13}/>{error}
          </span>
        )}

        <button className="btn btn--primary" type="submit" disabled={busy}
                style={{ marginTop: 4, justifyContent: "center" }}>
          {busy ? "Entrando…" : "Iniciar sesión"}
        </button>
      </form>
    </div>
  );
};

window.LoginScreen = LoginScreen;