// Power Rankings — panel-voted top 10
const PowerRankings = ({ tweaks }) => {
  const panel = window.WZN.PANELISTS;
  const teams = window.WZN.POWER_TEAMS;
  return (
    <div className="power-rankings">
      <SectionHeader
        code="09"
        title="POWER RANKINGS · UKE 19"
        subtitle="Stemt frem av 5 paneliser · ikke rene tall"
        accent={tweaks.accent}
        right={
          <div className="pr-meta">
            <span>OPPDATERT</span><b>11.05.2026</b>
          </div>
        }
      />

      {/* Panel info */}
      <div className="panel pr-panel-strip">
        <div className="pps-label">PANELET DENNE UKEN</div>
        <div className="pps-list">
          {panel.map(p => (
            <div key={p.id} className="panelist">
              <div className="panelist-avatar" style={{borderColor: tweaks.accent}}>{p.avatar}</div>
              <div>
                <div className="panelist-name">{p.name}</div>
                <div className="panelist-role">{p.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Rankings list */}
      <div className="panel">
        <div className="pr-list">
          {teams.map((t, i) => {
            const rank = i + 1;
            const change = t.prev - rank;
            return (
              <div key={t.tag} className={`pr-row rank-${rank}`}>
                <div className="pr-rank">
                  <div className="pr-rank-n" style={{color: rank <= 3 ? tweaks.accent : null}}>{String(rank).padStart(2,"0")}</div>
                  {change !== 0 && (
                    <div className={`pr-change ${change > 0 ? "up" : "down"}`}>
                      {change > 0 ? "▲" : "▼"} {Math.abs(change)}
                    </div>
                  )}
                  {change === 0 && <div className="pr-change flat">—</div>}
                </div>
                <div className="pr-team">
                  <div className="team-tag big" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{t.tag}</div>
                  <div>
                    <div className="pr-team-name">{t.name}</div>
                    <div className="pr-team-meta">DIV.{t.div} · PREV. #{t.prev}</div>
                  </div>
                </div>
                <div className="pr-blurb">"{t.blurb}"</div>
                <div className="pr-votes">
                  <div className="pr-points" style={{color: tweaks.accent}}>{t.points}</div>
                  <div className="pr-points-l">PANEL-POENG</div>
                  <div className="pr-mini-panel">
                    {panel.map(p => {
                      const placed = p.picks.indexOf(i) + 1;
                      return (
                        <div key={p.id} className="mini-pick" title={`${p.name}: #${placed}`}>
                          <span className="mp-avatar">{p.avatar}</span>
                          <span className="mp-rank">{placed}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Methodology */}
      <div className="panel pr-method">
        <div className="pm-head">
          <div className="section-code" style={{borderColor: tweaks.accent, color: tweaks.accent}}>METODE</div>
          <h3>Hvordan blir rankingen til?</h3>
        </div>
        <div className="pm-grid">
          <div>
            <b>Stemmegivning</b>
            <p>Hver paneliste rangerer topp 10. Plass 1 gir 10 poeng, plass 10 gir 1 poeng.</p>
          </div>
          <div>
            <b>Tiebreaker</b>
            <p>Ved likt poeng vinner det laget som ble plassert høyest av flest panelister.</p>
          </div>
          <div>
            <b>Frekvens</b>
            <p>Oppdateres hver tirsdag etter matchday. Sesongsnittet vises i klubbprofilene.</p>
          </div>
          <div>
            <b>Uavhengighet</b>
            <p>Trenere stemmer ikke på eget lag. Casters får ikke vite andre panelisters stemmer før etter publisering.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PowerRankings });