export function updateScoreboard(
  containerLeft,
  containerRight,
  teams,
  fighters,
  { selectedFighterTeamId = null, onTeamClick = () => {} } = {},
) {
  if (!containerLeft || !containerRight) {
    return;
  }

  const currentTeamElements = [...containerLeft.children];
  const teamsChanged =
    currentTeamElements.length !== teams.length ||
    teams.some((team, index) => currentTeamElements[index]?.dataset.teamId !== String(team.id));

  if (teamsChanged) {
    containerLeft.replaceChildren(...teams.map((team) => createTeamElement(team.id)));
  }

  if (containerRight.childElementCount > 0) {
    containerRight.replaceChildren();
  }

  teams.forEach((team, index) => {
    const teamEl = containerLeft.children[index];
    const livingFighters = fighters.filter(
      (fighter) => fighter.team.id === team.id && !fighter.isDead,
    );
    const eliteCount = livingFighters.filter((fighter) => fighter.isElite).length;
    const normalCount = livingFighters.length - eliteCount;

    teamEl.disabled = livingFighters.length === 0;
    teamEl.setAttribute("aria-label", `${team.label} 생존 캐릭터 무작위 시점 고정`);
    teamEl.style.setProperty("--team-color", team.color);
    teamEl.style.removeProperty("background-color");
    teamEl.style.removeProperty("border-left");
    teamEl.classList.toggle("is-focused", selectedFighterTeamId === team.id);

    const labelEl = teamEl.querySelector(".team-score-name");
    labelEl.textContent = team.label;

    const countEl = teamEl.querySelector(".team-score-count");
    countEl.textContent = `E : ${eliteCount} | N : ${normalCount}`;

    teamEl.onclick = () => {
      onTeamClick(team.id);
    };
  });
}

function createTeamElement(teamId) {
  const teamEl = document.createElement("button");
  teamEl.className = "team-score";
  teamEl.type = "button";
  teamEl.dataset.teamId = String(teamId);

  const labelEl = document.createElement("span");
  labelEl.className = "team-score-name";

  const ruleEl = document.createElement("span");
  ruleEl.className = "team-score-rule";

  const countEl = document.createElement("span");
  countEl.className = "team-score-count";

  teamEl.append(labelEl, ruleEl, countEl);
  return teamEl;
}