// Login screen for live mode.

const Login = ({ onLogin }) => {
  const [handle, setHandle] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [err, setErr] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e?.preventDefault();
    if (busy) return;
    setBusy(true); setErr(null);
    try {
      const { user } = await API.login(handle.trim(), password);
      onLogin(user);
    } catch (e) {
      setErr(e.message || "login failed");
      setBusy(false);
    }
  };

  return (
    <div style={{
      position: "fixed", inset: 0,
      display: "grid", placeItems: "center",
      background: "var(--bg)"
    }}>
      <form onSubmit={submit} style={{
        width: 340,
        background: "var(--panel)",
        border: "1px solid var(--border)",
        borderRadius: 12,
        padding: 24,
        boxShadow: "0 18px 60px rgba(0,0,0,0.55)"
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 8,
          background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
          color: "#0b0c0e", fontWeight: 700, fontSize: 14, letterSpacing: "-0.5px",
          display: "grid", placeItems: "center",
          marginBottom: 16
        }}>LR</div>
        <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.2px" }}>lightweight rcon</div>
        <div className="muted" style={{ fontSize: 12, marginTop: 4, marginBottom: 18 }}>Sign in to your staff account.</div>

        <div className="field" style={{ marginBottom: 10 }}>
          <label>Handle</label>
          <input value={handle} onChange={e => setHandle(e.target.value)} autoFocus autoCapitalize="off" autoCorrect="off" />
        </div>
        <div className="field">
          <label>Password</label>
          <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
        </div>

        {err && (
          <div style={{
            marginTop: 12, padding: "8px 10px",
            background: "rgba(229,123,123,0.10)",
            border: "1px solid rgba(229,123,123,0.25)",
            borderRadius: 6, fontSize: 12, color: "#f0c5c5"
          }}>{err}</div>
        )}

        <button className="btn primary" type="submit" disabled={busy}
          style={{ width: "100%", marginTop: 16, justifyContent: "center" }}>
          {busy ? "Signing in…" : "Sign in"}
        </button>

        <div className="muted" style={{ fontSize: 11, marginTop: 14, textAlign: "center" }}>
          Trouble? Ask an owner to reset your password via the CLI.
        </div>
      </form>
    </div>
  );
};

Object.assign(window, { Login });