PacketStation/frontend/src/screens/admin/ChecklistsTab.tsx

// Admin: the department checklists, one list for weld departments and one for the rest (phase 9).
import { useEffect, useState } from "react";
import { admin9Api, type ChecklistItem, type ChecklistLists, type ChecklistsAnswer } from "../../api/admin";
import { ApiError } from "../../api/client";
import { errorText } from "../../lib/format";
import { useLoad } from "../../lib/useLoad";
import { Notice, Problem, type Msg } from "./common";

type ListId = "weld" | "plain";
const LISTS: ReadonlyArray<{ id: ListId; title: string; one: string }> = [
  { id: "weld", title: "Weld departments", one: "weld" },
  { id: "plain", title: "Other departments", one: "plain" },
];

const RX_KEY = /^[a-z][a-z0-9_]{0,29}$/;
const MAX_ITEMS = 40;
const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
const PLACEHOLDERS = new Set(["drawing", "rev", "wps"]);

interface Row extends ChecklistItem {
  /** True for a key the saved list already has. Its key cannot change, because answers on open stages use it. */
  saved: boolean;
}

type Draft = Record<ListId, Row[]>;

function toDraft(v: ChecklistLists): Draft {
  return {
    weld: v.weld.map((it) => ({ ...it, saved: true })),
    plain: v.plain.map((it) => ({ ...it, saved: true })),
  };
}

/** The first problem with one list, or null. Mirrors the server's rules. */
function listProblem(rows: readonly ChecklistItem[], title: string): string | null {
  if (rows.length === 0) return `${title}: the list needs at least one item.`;
  if (rows.length > MAX_ITEMS) return `${title}: at most ${MAX_ITEMS} items.`;
  const seen = new Set<string>();
  for (const [i, r] of rows.entries()) {
    const n = i + 1;
    if (!r.group.trim()) return `${title}, item ${n}: give it a group.`;
    if (!r.text.trim()) return `${title}, item ${n}: give it a text.`;
    if (!RX_KEY.test(r.key)) return `${title}, item ${n}: the key is lower case letters, digits and _, starting with a letter.`;
    if (seen.has(r.key)) return `${title}, item ${n}: the key ${r.key} is used twice.`;
    seen.add(r.key);
    for (const m of r.text.matchAll(/\{([^}]*)\}/g)) {
      if (!PLACEHOLDERS.has(m[1] ?? "")) return `${title}, item ${n}: only {drawing}, {rev} and {wps} can be filled in.`;
    }
  }
  return null;
}

function ListEditor({
  id,
  title,
  one,
  rows,
  onChange,
  onDefaults,
}: {
  id: ListId;
  title: string;
  one: string;
  rows: Row[];
  onChange: (rows: Row[]) => void;
  onDefaults: () => void;
}) {
  const set = (i: number, patch: Partial<Row>) => onChange(rows.map((r, j) => (j === i ? { ...r, ...patch } : r)));
  const move = (i: number, d: number) => {
    const j = i + d;
    if (j < 0 || j >= rows.length) return;
    const out = [...rows];
    const a = out[i];
    const b = out[j];
    if (!a || !b) return;
    out[i] = b;
    out[j] = a;
    onChange(out);
  };
  const add = () => {
    const last = rows[rows.length - 1];
    onChange([...rows, { group: last?.group ?? "", key: "", text: "", saved: false }]);
  };

  return (
    <section className="panel stack" aria-labelledby={`ckl-${id}-h`}>
      <div className="sec-h flush">
        <h3 id={`ckl-${id}-h`}>{title}</h3>
        <span className="ct">{rows.length} items</span>
        <span className="grow" />
        <button className="btn sm ghost" type="button" onClick={onDefaults}>
          {`Use the default ${one} list`}
        </button>
      </div>
      {rows.map((r, i) => {
        const n = i + 1;
        return (
          <div className="frow" key={`${i}-${r.saved ? r.key : "new"}`}>
            <label className="f">
              {`${cap(one)} item ${n} group`}
              <input className="in" value={r.group} maxLength={200} onChange={(e) => set(i, { group: e.target.value })} />
            </label>
            <label className="f">
              {`${cap(one)} item ${n} key`}
              <input
                className="in mono"
                value={r.key}
                maxLength={30}
                readOnly={r.saved}
                title={r.saved ? "A saved key cannot change. Answers on open stages use it." : undefined}
                onChange={(e) => set(i, { key: e.target.value })}
              />
            </label>
            <label className="f" style={{ gridColumn: "span 2" }}>
              {`${cap(one)} item ${n} text`}
              <input className="in" value={r.text} maxLength={200} onChange={(e) => set(i, { text: e.target.value })} />
            </label>
            <div className="end nowrap">
              <button className="btn sm ghost" type="button" aria-label={`Move ${one} item ${n} up`} disabled={i === 0} onClick={() => move(i, -1)}>
                Up
              </button>{" "}
              <button
                className="btn sm ghost"
                type="button"
                aria-label={`Move ${one} item ${n} down`}
                disabled={i === rows.length - 1}
                onClick={() => move(i, 1)}
              >
                Down
              </button>{" "}
              <button className="btn sm rejb" type="button" aria-label={`Remove ${one} item ${n}`} onClick={() => onChange(rows.filter((_, j) => j !== i))}>
                Remove
              </button>
            </div>
          </div>
        );
      })}
      <div>
        <button className="btn sm" type="button" disabled={rows.length >= MAX_ITEMS} onClick={add}>
          {`Add ${one} item`}
        </button>
      </div>
    </section>
  );
}

export function ChecklistsTab() {
  const [load, reload] = useLoad((s) => admin9Api.checklists(s));
  const [base, setBase] = useState<ChecklistsAnswer | null>(null);
  const [draft, setDraft] = useState<Draft | null>(null);
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<Msg>(null);

  useEffect(() => {
    if (load.state === "ok") {
      setBase(load.data);
      setDraft(toDraft(load.data.value));
    }
  }, [load]);

  if (!base || !draft) return <Problem load={load} />;

  const strip = (rows: Row[]): ChecklistItem[] => rows.map((r) => ({ group: r.group.trim(), key: r.key.trim(), text: r.text.trim() }));
  const savedKeys = new Set([...base.value.weld, ...base.value.plain].map((r) => r.key));

  const save = async () => {
    const value: ChecklistLists = { weld: strip(draft.weld), plain: strip(draft.plain) };
    const problem = listProblem(value.weld, "Weld list") ?? listProblem(value.plain, "Other list");
    if (problem) {
      setMsg({ ok: false, text: problem });
      return;
    }
    setBusy(true);
    setMsg(null);
    try {
      const r = await admin9Api.saveChecklists(value, base.version);
      setBase(r);
      setDraft(toDraft(r.value));
      setMsg({ ok: true, text: "Checklists saved. New checklists use them. Open stages keep their answers." });
    } catch (err) {
      if (err instanceof ApiError && err.status === 409) {
        setMsg({ ok: false, text: "Someone else saved the checklists first. Their version is loaded now. Make your change again." });
        reload();
      } else {
        setMsg({ ok: false, text: errorText(err) });
      }
    } finally {
      setBusy(false);
    }
  };

  const defaults = (id: ListId) =>
    setDraft((cur) => (cur ? { ...cur, [id]: base.defaults[id].map((it) => ({ ...it, saved: savedKeys.has(it.key) })) } : cur));

  return (
    <div className="stack">
      <div className="small muted">
        Weld departments get the first list, the others the second. Text can use {"{drawing}"}, {"{rev}"} and {"{wps}"}. A removed item drops out of new
        checklists only.
      </div>
      {LISTS.map((l) => (
        <ListEditor
          key={l.id}
          id={l.id}
          title={l.title}
          one={l.one}
          rows={draft[l.id]}
          onChange={(rows) => setDraft((cur) => (cur ? { ...cur, [l.id]: rows } : cur))}
          onDefaults={() => defaults(l.id)}
        />
      ))}
      <Notice msg={msg} />
      <div className="chips">
        <button className="btn pri" type="button" disabled={busy} onClick={() => void save()}>
          Save checklists
        </button>
        <button
          className="btn ghost"
          type="button"
          disabled={busy}
          onClick={() => {
            setDraft(toDraft(base.value));
            setMsg(null);
          }}
        >
          Discard changes
        </button>
      </div>
    </div>
  );
}