healer-man/src/ui/BossTestingScreen.tsx

import { useEffect, useMemo, useRef, useState } from "react";
import { selectedCharacter, useShellStore } from "../app/shellStore";
import { enterBossTesting, prepareBossTesting } from "../app/bossTestingRuntime";
import { BOSS_TESTING_STATUS_LABELS, useBossTestingReviews } from "../app/bossTestingReviews";
import { BOSS_TESTING_CATALOG, randomTestingBoss, type TestableBoss } from "../game/bossTesting";
import { defaultPartyRoleForClass, partyRolesForClass, PARTY_ROLE_LABELS, type PartyRole } from "../game/partyRoles";
import { specializationById } from "../game/specializationCatalog";
import { useContentManagerSnapshot } from "../content/useContentManager";
import { DualDisplayFrame } from "../components/DualDisplayFrame";
import { useMenuController, type MenuAction } from "../input/useMenuController";
import { FrontSurface, BrandMark, ControllerLegend } from "./FrontSurface";
import { ControllerButton } from "./ControllerButton";
import { LazyLocalCompanionPanel } from "./LazyLocalCompanionPanel";
import "./bossTesting.css";

export function BossTestingScreen({ onClose }: { readonly onClose: () => void }) {
  const character = useShellStore(selectedCharacter);
  const session = useShellStore((state) => state.session);
  const reviews = useBossTestingReviews((state) => state.reviews);
  const refresh = useBossTestingReviews((state) => state.refresh);
  const content = useContentManagerSnapshot();
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState("all");
  const [status, setStatus] = useState("all");
  const [selectedKey, setSelectedKey] = useState("");
  const [preparing, setPreparing] = useState(false);
  const [prepared, setPrepared] = useState(false);
  const [error, setError] = useState("");
  const [role, setRole] = useState<PartyRole>(character ? defaultPartyRoleForClass(character.classId) : "damage");
  const busy = useRef(false);
  const alive = useRef(true);
  const bosses = useMemo(() => BOSS_TESTING_CATALOG.filter((boss) =>
    (category === "all" || boss.category === category)
    && (status === "all" || (reviews[boss.key]?.status ?? "needs-testing") === status)
    && `${boss.name} ${boss.dungeonTitle}`.toLowerCase().includes(query.trim().toLowerCase())
  ), [category, query, reviews, status]);
  const selected = BOSS_TESTING_CATALOG.find((boss) => boss.key === selectedKey);
  const specialization = specializationById(character?.specializationId);
  const roles = character ? specialization ? [specialization.role] : partyRolesForClass(character.classId) : [];
  const effectiveRole = specialization?.role ?? role;
  useEffect(() => {
    alive.current = true;
    void refresh(session);
    const reconnect = () => void refresh(session);
    window.addEventListener("online", reconnect);
    return () => { alive.current = false; window.removeEventListener("online", reconnect); };
  }, [refresh, session]);

  const choose = async (boss: TestableBoss, start = false) => {
    if (busy.current || !character) return;
    busy.current = true;
    setSelectedKey(boss.key); setPreparing(true); setPrepared(false); setError("");
    try {
      await prepareBossTesting(boss);
      if (!alive.current) return;
      setPrepared(true);
      if (start) enterBossTesting(boss, effectiveRole);
    } catch (failure) {
      if (alive.current) setError(failure instanceof Error ? failure.message : "The boss could not be prepared. Please retry.");
    } finally {
      busy.current = false;
      if (alive.current) setPreparing(false);
    }
  };
  const testSelected = () => {
    if (!selected || preparing) return;
    if (!prepared) { void choose(selected, true); return; }
    try { enterBossTesting(selected, effectiveRole); } catch (failure) {
      setError(failure instanceof Error ? failure.message : "The test could not be started.");
    }
  };
  const random = () => {
    const boss = randomTestingBoss(bosses);
    if (boss) void choose(boss, true);
  };
  const actions: MenuAction[] = [
    { id: "boss-testing-back", run: onClose },
    { id: "boss-testing-category", run: () => setCategory(category === "all" ? "wow" : category === "wow" ? "rom" : "all"), enabled: !preparing },
    { id: "boss-testing-status", run: () => { const values = ["all", "ready", "needs-testing", "not-ready"]; setStatus(values[(values.indexOf(status) + 1) % values.length]); }, enabled: !preparing },
    { id: "boss-testing-picker", run: () => { const next = bosses[(bosses.findIndex((boss) => boss.key === selectedKey) + 1) % bosses.length]; if (next) void choose(next); }, enabled: !preparing && bosses.length > 0 },
    ...roles.map((value) => ({ id: `boss-testing-role-${value}`, run: () => setRole(value), enabled: !preparing })),
    { id: "boss-testing-start", run: testSelected, enabled: Boolean(selected) && !preparing },
    { id: "boss-testing-random", run: random, enabled: bosses.length > 0 && !preparing },
  ];
  const controller = useMenuController(actions, { initialId: "boss-testing-picker", onBack: onClose });
  const selectProps = (controlId: string) => ({ className: controller.selectedId === controlId ? "is-controller-selected" : "",
    onPointerEnter: () => controller.select(controlId), disabled: preparing });
  const button = (controlId: string, label: string, run: () => void, disabled = false) =>
    <ControllerButton controlId={controlId} selectedId={controller.selectedId} select={controller.select}
      className="front-button" type="button" onClick={run} disabled={disabled}>{label}</ControllerButton>;
  return <DualDisplayFrame contextLabel="Boss Testing" top={
    <FrontSurface className="boss-testing-screen" ariaLabel="Boss Testing selection">
      <header className="boss-testing-header"><BrandMark compact /><div><span>Main menu / Mechanics laboratory</span><h1>Boss Testing</h1></div>
        {button("boss-testing-back", "Back to main menu", onClose)}</header>
      <main className="boss-testing-main">
        <p>Choose a boss to test with your party in an empty room. Missing content downloads automatically when you select a boss.</p>
        <div className="boss-testing-filters">
          <label>Search bosses<input type="search" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Boss or dungeon name" disabled={preparing} /></label>
          <label>Game<select {...selectProps("boss-testing-category")} value={category} onChange={(event) => setCategory(event.target.value)}>
            <option value="all">All games</option><option value="wow">WoW</option><option value="rom">RoM</option></select></label>
          <label>Readiness<select {...selectProps("boss-testing-status")} value={status} onChange={(event) => setStatus(event.target.value)}>
            <option value="all">All statuses</option>{Object.entries(BOSS_TESTING_STATUS_LABELS).map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></label>
        </div>
        <label className="boss-testing-picker">Choose a boss <small>{bosses.length} bosses</small>
          <select {...selectProps("boss-testing-picker")} value={bosses.some((boss) => boss.key === selectedKey) ? selectedKey : ""}
            onChange={(event) => { const boss = bosses.find((entry) => entry.key === event.target.value); if (boss) void choose(boss); }}>
            <option value="" disabled>Select a boss…</option>
            {bosses.map((boss) => <option key={boss.key} value={boss.key}>{boss.name} · {boss.dungeonTitle} · {BOSS_TESTING_STATUS_LABELS[reviews[boss.key]?.status ?? "needs-testing"]}</option>)}
          </select>
        </label>
        {selected && <article className="boss-testing-selected"><p className="front-kicker">Selected encounter</p><h2>{selected.name}</h2><p>{selected.dungeonTitle}</p>
          <strong className={`boss-testing-status boss-testing-status--${reviews[selected.key]?.status ?? "needs-testing"}`}>{BOSS_TESTING_STATUS_LABELS[reviews[selected.key]?.status ?? "needs-testing"]}</strong>
          {reviews[selected.key]?.pending && <small>Readiness saved on this device; waiting to sync.</small>}
        </article>}
        {roles.length > 1 && <div className="boss-testing-actions" aria-label="Your party role">{roles.map((value) =>
          <ControllerButton key={value} controlId={`boss-testing-role-${value}`} selectedId={controller.selectedId} select={controller.select}
            className="front-button" type="button" aria-pressed={effectiveRole === value} onClick={() => setRole(value)} disabled={preparing}>{PARTY_ROLE_LABELS[value]}</ControllerButton>
        )}</div>}
        {preparing && <div role="status" className="boss-testing-progress"><p>Preparing {selected?.name}… {content.installingPackId ? "Downloading content" : "Checking assets"}</p>
          {content.installingPackId && <><progress max={Math.max(1, content.totalBytes)} value={content.downloadedBytes} /><small>{Math.round(content.downloadedBytes / 1024 / 1024)} / {Math.round(content.totalBytes / 1024 / 1024)} MB</small></>}
        </div>}
        {error && <p role="alert" className="dungeon-report-error">{error}</p>}
        {!bosses.length && <p role="status">No bosses match these filters.</p>}
        <div className="boss-testing-actions">{button("boss-testing-start", error ? "Retry and test selected boss" : "Test selected boss", testSelected, !selected || preparing)}
          {button("boss-testing-random", "Fight a random boss", random, !bosses.length || preparing)}</div>
        <p className="boss-testing-help">Mark readiness and submit a boss report from pause or after victory. Test fights do not award loot, XP, or boss cards.</p>
      </main><ControllerLegend back />
    </FrontSurface>
  } bottom={<LazyLocalCompanionPanel />} />;
}