// Source: index.html script block (extracted). Loaded via <script type="text/babel"> in index.html.
function UsersPage({ user }) {
  const { t } = useLang();
  const [items, setItems] = React.useState(null); // null = loading
  const [error, setError] = React.useState(null);
  const [pending, setPending] = React.useState(null); // email currently mutating
  const [notice, setNotice] = React.useState(null);

  const loadUsers = React.useCallback(async () => {
    setError(null);
    try {
      if (!window.tasksApi || window.tasksApi.OFFLINE) {
        throw Object.assign(new Error("offline"), { offline: true });
      }
      if (window.tasksApi.invalidateUsers) window.tasksApi.invalidateUsers();
      const res = await window.tasksApi.listUsers();
      setItems(Array.isArray(res && res.items) ? res.items : []);
    } catch (err) {
      if (err && err.offline) setError("Backend offline — user management requires a live D1.");
      else setError((err && err.message) || "Failed to load users.");
      setItems([]);
    }
  }, []);

  React.useEffect(() => { loadUsers(); }, [loadUsers]);

  const showNotice = (msg) => {
    setNotice(msg);
    window.setTimeout(() => setNotice(n => (n === msg ? null : n)), 3500);
  };

  const toggleRole = async (row) => {
    if (!row || row.email === user.email) return; // self-change guarded
    const nextRole = row.role === "manager" ? "clinician" : "manager";
    setPending(row.email);
    // Optimistic update; roll back on failure.
    setItems(prev => prev.map(u => u.email === row.email ? { ...u, role: nextRole } : u));
    try {
      await window.tasksApi.updateUser(row.email, { role: nextRole });
    } catch (err) {
      setItems(prev => prev.map(u => u.email === row.email ? { ...u, role: row.role } : u));
      const msg = (err && err.body && err.body.error) || (err && err.message) || "Update failed.";
      showNotice(msg);
    } finally {
      setPending(null);
    }
  };

  const removeUser = async (row) => {
    if (!row || row.email === user.email) return;
    const ok = window.confirm(
      `Remove ${row.email}? Their tasks will become unassigned; trajectories are kept. This cannot be undone.`,
    );
    if (!ok) return;
    setPending(row.email);
    try {
      await window.tasksApi.deleteUser(row.email);
      setItems(prev => prev.filter(u => u.email !== row.email));
    } catch (err) {
      const msg = (err && err.body && err.body.error) || (err && err.message) || "Delete failed.";
      showNotice(msg);
    } finally {
      setPending(null);
    }
  };

  const gridCols = "1.6fr 1fr 0.8fr 0.7fr 1fr 0.6fr 0.6fr 0.9fr";

  return (
    <div className="cohorts">
      <div className="cohorts-head">
        <div>
          <div style={{fontSize:11.5, color:"var(--ink-mute)", fontFamily:"var(--font-mono)", textTransform:"uppercase", letterSpacing:"0.06em"}}>Admin · manager</div>
          <h1>{t("nav_users") || "Users"}</h1>
          <p>Manage annotator access and assignments.</p>
        </div>
        <div style={{marginLeft:"auto", display:"flex", gap:8, alignItems:"center"}}>
          <button className="btn" onClick={loadUsers} disabled={items === null}>
            {Ico.reset ? Ico.reset() : null} Refresh
          </button>
        </div>
      </div>

      {notice && (
        <div style={{margin:"0 0 14px", padding:"8px 12px", fontSize:12.5, border:"1px solid var(--line)", background:"var(--bg-sunken)", borderRadius:"var(--r-md)", color:"var(--ink-dim)"}}>
          {notice}
        </div>
      )}
      {error && (
        <div style={{margin:"0 0 14px", padding:"8px 12px", fontSize:12.5, border:"1px solid var(--line)", background:"var(--bg-sunken)", borderRadius:"var(--r-md)", color:"var(--red, #b94a48)"}}>
          {error}
        </div>
      )}

      <div>
        <div className="cohorts-table">
          <div className="cohorts-table-head">
            <h3>Users</h3>
            <div style={{marginLeft:"auto", fontSize:11, color:"var(--ink-mute)", fontFamily:"var(--font-mono)"}}>
              {items ? `${items.length} ${items.length === 1 ? "user" : "users"}` : "loading…"}
            </div>
          </div>
          <div className="cohorts-table-grid cohorts-thr" style={{gridTemplateColumns: gridCols}}>
            <span>Email</span>
            <span>Name</span>
            <span>Role</span>
            <span>Provider</span>
            <span>Signed up</span>
            <span>Assigned</span>
            <span>Approved</span>
            <span></span>
          </div>
          {(items === null) && (
            <div style={{padding:"16px 14px", color:"var(--ink-mute)", fontSize:12.5}}>Loading…</div>
          )}
          {(items && items.length === 0) && (
            <div style={{padding:"20px 14px", color:"var(--ink-mute)", fontSize:12.5}}>
              No users yet. Users appear here after their first OAuth sign-in.
            </div>
          )}
          {(items || []).map(u => {
            const isSelf = u.email === user.email;
            const isPending = pending === u.email;
            const signedUp = u.last_login_at || u.created_at || "—";
            return (
              <div key={u.email} className="cohorts-table-grid cohorts-row"
                style={{gridTemplateColumns: gridCols, cursor:"default"}}>
                <div>
                  <div style={{fontFamily:"var(--font-mono)", fontSize:12}}>{u.email}</div>
                  {isSelf && <code style={{fontSize:10.5, color:"var(--ink-mute)"}}>you</code>}
                </div>
                <div style={{fontSize:12.5}}>{u.name || <span style={{color:"var(--ink-mute)"}}>—</span>}</div>
                <div>
                  <button
                    className="filter-pill"
                    data-active={u.role === "manager"}
                    disabled={isSelf || isPending}
                    title={isSelf ? "You can't change your own role" : `Click to make ${u.role === "manager" ? "clinician" : "manager"}`}
                    onClick={() => toggleRole(u)}
                  >
                    {u.role}
                  </button>
                </div>
                <div style={{fontSize:11.5, color:"var(--ink-dim)", fontFamily:"var(--font-mono)"}}>{u.provider || "—"}</div>
                <div style={{fontSize:11.5, color:"var(--ink-dim)"}}>
                  {typeof signedUp === "string" && signedUp.length >= 10 ? signedUp.slice(0, 10) : signedUp}
                </div>
                <div style={{fontFamily:"var(--font-mono)", fontSize:12.5}}>{(u.assigned_count || 0).toLocaleString()}</div>
                <div style={{fontFamily:"var(--font-mono)", fontSize:12.5}}>{(u.approved_count || 0).toLocaleString()}</div>
                <div style={{textAlign:"right"}}>
                  <button
                    className="btn ghost"
                    style={{padding:"2px 10px", fontSize:11}}
                    disabled={isSelf || isPending}
                    onClick={() => removeUser(u)}
                    title={isSelf ? "You can't remove yourself" : "Remove user"}
                  >
                    {isPending ? "…" : "Remove"}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.UsersPage = UsersPage;