{% comment %}
  Ranking tab: composite leaderboard with weighted formula.
  Requires Alpine parent scope with: getRankings(), formatCost(),
  formatLatency(), scoreRingColor(), configColor().
{% endcomment %}

<div class="exp-ranking-header">
  <div class="exp-ranking-title">Composite Ranking</div>
  <div class="exp-ranking-formula"
       x-text="scoringEnabled && enableLlmJudge
         ? '40% pass · 30% judge · 15% cost efficiency · 15% speed'
         : (scoringEnabled
           ? '60% pass · 20% cost efficiency · 20% speed'
           : '60% judge · 20% cost efficiency · 20% speed')"></div>
</div>

<div x-show="getRankings().length === 0" class="text-sm text-muted-foreground text-center py-8">
  Select at least one config to see rankings.
</div>

<div class="exp-ranking-list">
  <template x-for="(entry, idx) in getRankings()" :key="entry.config_run_id">
    <div class="exp-ranking-card">

      <div class="exp-rank-number" :class="idx === 0 && 'exp-rank-number--gold'" x-text="idx + 1"></div>

      <div class="exp-ranking-info">
        <div class="exp-ranking-config-name"
             :style="'color:' + configColor(entry.config_run_id)"
             x-text="entry.config_name"></div>
        <div class="exp-ranking-stats">
          <template x-if="scoringEnabled">
            <span>
              <span class="exp-ranking-stat__label">Pass</span>
              <span class="exp-ranking-stat__value" style="color: var(--eval-score-5);" x-text="entry.pass_rate.toFixed(1) + '%'"></span>
            </span>
          </template>
          <template x-if="enableLlmJudge">
            <span>
              <span class="exp-ranking-stat__label">Judge</span>
              <span class="exp-ranking-stat__value" style="color: var(--eval-score-5);" x-text="entry.judge_pass_rate != null ? entry.judge_pass_rate.toFixed(1) + '%' : '—'"></span>
            </span>
          </template>
          <span>
            <span class="exp-ranking-stat__label">Cost</span>
            <span class="exp-ranking-stat__value" x-text="formatCost(entry.avg_cost)"></span>
          </span>
          <span>
            <span class="exp-ranking-stat__label">Latency</span>
            <span class="exp-ranking-stat__value" x-text="formatLatency(entry.avg_total_latency_seconds)"></span>
          </span>
          <span>
            <span class="exp-ranking-stat__label">Errors</span>
            <span class="exp-ranking-stat__value" x-text="entry.error_count"></span>
          </span>
        </div>
        <template x-if="enableLlmJudge && entry.criterion_averages && entry.criterion_averages.length > 0">
          <div class="exp-ranking-criteria">
            <template x-for="ca in entry.criterion_averages" :key="ca.criterion_key">
              <span class="exp-criterion-pill" :title="ca.criterion_key">
                <span class="exp-criterion-pill__name" x-text="ca.criterion_key.replace(/_/g, ' ')"></span>
                <span class="exp-criterion-pill__score"
                      :class="'exp-criterion-pill__score--' + Math.round(ca.avg_score)"
                      x-text="ca.avg_score.toFixed(1) + '/5'"></span>
              </span>
            </template>
          </div>
        </template>
      </div>

      <div class="exp-score-ring" :style="'border-color:' + scoreRingColor(entry.composite) + '; color:' + scoreRingColor(entry.composite)">
        <span x-text="entry.composite"></span>
      </div>

    </div>
  </template>
</div>