// Small pieces the phase 9 Admin tabs share.
import { useEffect, useState } from "react";
import { admin9Api, type ProfileUser } from "../../api/admin";
import { errorText } from "../../lib/format";
import type { Load } from "../../lib/useLoad";

export function Problem({ load }: { load: Load<unknown> }) {
  if (load.state === "loading") return <div className="empty slim">Loading</div>;
  if (load.state === "error") return <div className="callout warn">{load.message}</div>;
  return null;
}

export type Msg = { ok: boolean; text: string } | null;

export function Notice({ msg }: { msg: Msg }) {
  if (!msg) return null;
  return (
    <div className={msg.ok ? "callout flush" : "callout warn flush"} role={msg.ok ? "status" : "alert"}>
      {msg.text}
    </div>
  );
}

/** Search the users Packet Station knows and pick one. `label` names the search box. */
export function UserPicker({ label, onPick, exclude = [] }: { label: string; onPick: (u: ProfileUser) => void; exclude?: readonly string[] }) {
  const [q, setQ] = useState("");
  const [rows, setRows] = useState<ProfileUser[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const term = q.trim();
    if (term.length < 2) {
      setRows([]);
      return;
    }
    const ctl = new AbortController();
    const t = window.setTimeout(() => {
      admin9Api
        .users(term, ctl.signal)
        .then((r) => {
          setRows(r.slice(0, 10));
          setError(null);
        })
        .catch((err: unknown) => {
          if (!ctl.signal.aborted) setError(errorText(err));
        });
    }, 250);
    return () => {
      window.clearTimeout(t);
      ctl.abort();
    };
  }, [q]);

  const shown = rows.filter((u) => !exclude.includes(u.id));
  return (
    <div className="stack tight">
      <label className="f">
        {label}
        <input className="in" type="search" placeholder="Name or account, 2 letters or more" value={q} onChange={(e) => setQ(e.target.value)} />
      </label>
      {error ? <div className="callout warn flush">{error}</div> : null}
      {shown.length ? (
        <ul className="chips plain">
          {shown.map((u) => (
            <li key={u.id}>
              <button
                type="button"
                className="chip sm"
                aria-label={`Pick ${u.display_name}`}
                onClick={() => {
                  onPick(u);
                  setQ("");
                }}
              >
                {u.display_name} <span className="mono small muted">{u.sam_account}</span>
              </button>
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}