/* global React */

// ---- one squad card --------------------------------------------------------
function SquadCard({ teamId, onTeam }) {
  const T = window.TOURNAMENT;
  const team = T.TEAMS[teamId];
  const roster = window.ROSTERS[teamId];
  if (!roster) return null;
  const showGoals = roster.players.some((p) => typeof p.goals === "number");

  return (
    <div className="squad" style={window.teamVars(team)}>
      <button className="squad__head" onClick={() => onTeam(teamId)}>
        <window.Badge team={team} size={40} />
        <span className="squad__id">
          <span className="squad__name">{team.short}</span>
          <span className="squad__kit">{roster.kit} kit</span>
        </span>
        <span className="squad__grp">Grp {team.group}</span>
      </button>
      <ul className="squad__list">
        {roster.players.map((p) => (
          <li className="squad__player" key={p.name}>
            <span className={"squad__pname" + (p.name === "TBD" ? " squad__pname--tbd" : "")}>{p.name}</span>
            {p.award && <span className="squad__award">{p.award}</span>}
            {showGoals && typeof p.goals === "number" && (p.goals > 0 || p.pens > 0) && (
              <span className="squad__goals">{p.goals > 0 ? p.goals : ""}{p.pens > 0 ? (p.goals > 0 ? "+" : "") + p.pens + "P" : ""}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ---- golden boot leaderboard (renders only when goal data exists) ---------
function GoldenBoot({ onTeam }) {
  const T = window.TOURNAMENT;
  const scorers = window.goldenBoot();
  if (!scorers.length) return null;
  return (
    <div className="boot">
      <div className="boot__label">Golden Boot — top scorers · goals + decisive penalties</div>
      <div className="boot__rows">
        {scorers.slice(0, 8).map((p, i) => (
          <button className={"boot__row" + (i === 0 ? " boot__row--top" : "")} key={p.name} onClick={() => onTeam(p.team)}>
            <span className="boot__rank">{i + 1}</span>
            <span className="boot__name">{p.name}{p.award === "Golden Boot" && <span className="boot__tag">Golden Boot</span>}</span>
            <window.Badge team={T.TEAMS[p.team]} size={22} />
            <span className="boot__breakdown">{p.goals > 0 ? p.goals + " G" : ""}{p.pens > 0 ? (p.goals > 0 ? " + " : "") + p.pens + " PEN" : ""}</span>
            <span className="boot__goals">{p.total}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// ---- players section -------------------------------------------------------
function PlayersSection({ onTeam }) {
  const T = window.TOURNAMENT;
  const order = ["pppk", "vik", "btwf", "fcpc", "tefc", "uufc", "unar", "dboy"];
  return (
    <section className="block">
      <div className="block__head">
        <h2 className="block__title">Players</h2>
        <span className="block__sub">8 squads · 6 a side roster</span>
      </div>
      <GoldenBoot onTeam={onTeam} />
      <div className="squads">
        {order.map((id) => <SquadCard key={id} teamId={id} onTeam={onTeam} />)}
      </div>
    </section>
  );
}

Object.assign(window, { PlayersSection, SquadCard, GoldenBoot });