import catalog from "../game/generated/dungeonLeaderboardCatalog.generated.json";
import type { DungeonRunMember } from "../game/dungeonRunTypes";
import { bossDifficultyLabel } from "../game/dungeonDifficulty";
import { leaderboardFinalBossIds } from "../game/dungeonLeaderboardRules";

const className = (id: string) => catalog.classes.find((entry) => entry.id === id)?.name ?? id;

export function DungeonRunDetails({ dungeonId, difficultyId, bossDifficulty, party, killedBossIds }: {
  readonly bossDifficulty?: number;
  readonly dungeonId: string;
  readonly difficultyId: string;
  readonly party: readonly DungeonRunMember[];
  readonly killedBossIds: readonly string[];
}) {
  const dungeon = catalog.dungeons.find((entry) => entry.id === dungeonId);
  const difficulty = dungeon?.difficulties.find((entry) => entry.id === difficultyId);
  const variant = difficulty && leaderboardFinalBossIds(difficulty).length > 1;
  const ids = variant ? killedBossIds : difficulty?.bossIds ?? [];
  const bosses = dungeon?.bosses.filter((boss) => ids.includes(boss.id)) ?? [];
  return <div className="dungeon-run-details">
    <p>{bossDifficultyLabel(bossDifficulty)} · {difficultyId === "heroic" ? "Heroic" : "Normal"}</p>
    <h4>Party</h4>
    <ul className="dungeon-run-party">
      {party.map((member, index) => <li key={`${member.name}-${index}`}>
        <strong>{member.name}{member.npc ? <small> NPC</small> : null}</strong>
        <span>Level {member.level} · {className(member.classId)}{member.secondaryClassId ? ` / ${className(member.secondaryClassId)}` : ""}</span>
        <small>{member.role === "damage" ? "Damage" : member.role === "healer" ? "Healer" : "Tank"}</small>
      </li>)}
    </ul>
    <h4>Bosses defeated · {Math.min(killedBossIds.length, bosses.length)}/{bosses.length}</h4>
    <ul className="dungeon-run-bosses">
      {bosses.map((boss) => <li key={boss.id} className={killedBossIds.includes(boss.id) ? "is-defeated" : ""}>
        <span aria-hidden="true">{killedBossIds.includes(boss.id) ? "✓" : "—"}</span>
        {boss.name}<small>{killedBossIds.includes(boss.id) ? "Defeated" : "Not defeated"}</small>
      </li>)}
    </ul>
  </div>;
}