/* ==================================================================
   Admin login — username + password → {apiBase}/teacher/login.
   ------------------------------------------------------------------
   Rendered by app.jsx when window.APP.NEEDS_LOGIN is true. On success
   we store the bearer token via AppApi.setToken and re-bootstrap.
   Non-admin accounts are rejected here (the cockpit is the admin
   panel; teachers belong on the Teacher app). Name, mark and the
   help line come from window.BRAND (brand.js).
   ================================================================== */

const CockpitLogin = ({ onLoggedIn }) => {
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const B = window.BRAND || {};

  const submit = async (e) => {
    e?.preventDefault();
    if (!username.trim() || !password) return;
    setBusy(true); setErr(null);
    try {
      const r = await fetch(window.AppApi.base + "/teacher/login", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ username: username.trim(), password }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data?.error || `login failed (${r.status})`);
      if (data?.teacher?.role !== "admin") {
        throw new Error("This panel is admin-only. Teachers should use the Teacher app.");
      }
      window.AppApi.setToken(data.token);
      onLoggedIn();
    } catch (e) {
      setErr(String(e.message || e));
      setBusy(false);
    }
  };

  return (
    <div style={{
      position: "fixed", inset: 0, display: "grid", placeItems: "center",
      background: "var(--bg-0)", padding: 16,
    }}>
      {/* 380px + the wrapper's padding overflowed a 390px viewport, so the
          login screen itself scrolled sideways. Cap against the padding. */}
      <form onSubmit={submit} style={{
        width: "min(380px, 100%)",
        background: "var(--surface)",
        border: "1px solid var(--line-strong)",
        borderRadius: 24, padding: 28,
        boxShadow: "var(--shadow-pop)",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
          <window.AppUI.BrandMark size={40}/>
          <div>
            <div style={{ color: "var(--ink-0)", fontSize: 17, fontWeight: 700, letterSpacing: "-0.3px" }}>{B.orgName}</div>
            <div className="muted" style={{ fontSize: 10, fontWeight: 600, letterSpacing: "1.4px", textTransform: "uppercase" }}>
              {B.appName}
            </div>
          </div>
        </div>

        <label style={{ display: "block", color: "var(--ink-2)", fontSize: 11, marginBottom: 4 }}>Username</label>
        <input className="input" autoFocus value={username} onChange={e => setUsername(e.target.value)}
          autoComplete="username" style={{ width: "100%", marginBottom: 12 }}/>

        <label style={{ display: "block", color: "var(--ink-2)", fontSize: 11, marginBottom: 4 }}>Password</label>
        <input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)}
          autoComplete="current-password" style={{ width: "100%" }}/>

        {err && (
          <div style={{
            marginTop: 12, padding: "8px 10px",
            background: "var(--red-bg)", border: "1px solid color-mix(in srgb, var(--red-solid) 30%, transparent)",
            borderRadius: 10, color: "var(--red)", fontSize: 12,
          }}>{err}</div>
        )}

        <button type="submit" className="btn primary" disabled={busy || !username.trim() || !password}
          style={{ width: "100%", justifyContent: "center", marginTop: 16, padding: "8px 12px" }}>
          {busy ? "Signing in…" : "Sign in"}
        </button>

        <p className="muted" style={{ fontSize: 11, marginTop: 14, textAlign: "center" }}>
          Teachers: use the Teacher app. This panel only accepts admin accounts.
        </p>
        {(B.supportEmail || B.supportPhone) && (
          <p className="muted" style={{ fontSize: 11, marginTop: 6, textAlign: "center" }}>
            Need help? {[B.supportEmail, B.supportPhone].filter(Boolean).join(" · ")}
          </p>
        )}
        {B.poweredBy && (
          <p className="muted" style={{ fontSize: 10, marginTop: 10, textAlign: "center", color: "var(--ink-4)" }}>
            Powered by {B.poweredBy}
          </p>
        )}
      </form>
    </div>
  );
};

window.CockpitLogin = CockpitLogin;