import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";
import { createRpgRoguelikeRun, reduceRpgRoguelikeRun } from "../../game/rpgRoguelike";
import { PartyRoleBadge } from "./PartyRoleBadge";
import { RpgRunOverlay } from "./RpgRunOverlay";
import { RpgRunTacticalPanel } from "./RpgRunTacticalPanel";

describe("RPG roguelike party role UI", () => {
  it("renders clear visual and accessible Tank/DPS badges", () => {
    const tank = renderToStaticMarkup(createElement(PartyRoleBadge, { role: "Tank" }));
    const damage = renderToStaticMarkup(createElement(PartyRoleBadge, { role: "Damage" }));

    expect(tank).toContain('class="rpg-role-badge is-tank"');
    expect(tank).toContain('aria-label="Role: Tank"');
    expect(damage).toContain('class="rpg-role-badge is-damage"');
    expect(damage).toContain('aria-label="Role: DPS"');
  });

  it("shows role and composition in current-party lists on both displays", () => {
    let run = createRpgRoguelikeRun({ seed: 73 });
    const damage = run.partyDraft!.offers.find((candidate) => candidate.role === "Damage")!;
    run = reduceRpgRoguelikeRun(run, { type: "party-recruit", candidateId: damage.candidateId });
    run = reduceRpgRoguelikeRun(run, { type: "party-next-wave" });

    const props = { run, onAction: () => undefined };
    const main = renderToStaticMarkup(createElement(RpgRunOverlay, props));
    const tactical = renderToStaticMarkup(createElement(RpgRunTacticalPanel, props));

    expect(main).toContain('aria-label="Current party, 1 of 4: 0 Tanks · 1 DPS"');
    expect(main).toMatch(/class="rpg-picked-chip[^"]*"[^>]*aria-label="Remove [^"]+, DPS"/);
    expect(main).toContain('aria-label="Role: DPS"');

    expect(tactical).toContain('aria-label="Current party: 0 Tanks · 1 DPS"');
    expect(tactical).toMatch(/class="rpg-card-action[^"]*"[^>]*aria-label="Remove [^"]+, DPS"/);
    expect(tactical).toContain('aria-label="Role: DPS"');
  });
});
