{% comment %}
  Heatmap tab: domain filter + case × config grid with pass/fail and latency modes.
  Cases on rows, configs on columns. Clickable rows drill into case detail.
  Requires Alpine parent scope with: activeDomain, domains, getFilteredCases(),
  getSelectedConfigRuns(), heatmapCellStatus(), heatmapMode, selectedHeatmapCase,
  getLatencyRange(), latencyColor(), getCellData(), formatLatency(), casePassRatio().
{% endcomment %}

<!-- ── Case detail drill-down ── -->
<div x-show="selectedHeatmapCase" x-cloak>
  <button type="button" class="hm-back-btn" @click="selectedHeatmapCase = null">
    &larr; Back to heatmap
  </button>

  <template x-if="selectedHeatmapCase">
    <div x-data="{ sc: selectedHeatmapCase }">
      <div class="hm-case-detail-header">
        <span class="exp-domain-badge" x-show="sc.domain" x-text="sc.domain"></span>
        <span class="hm-case-detail-id" x-text="sc.case_id"></span>
        <span class="hm-case-detail-ratio" x-text="casePassRatio(sc.case_id)"></span>
      </div>
      <div class="hm-case-detail-input" x-text="sc.input"></div>

      <div class="hm-responses-grid"
           :style="'grid-template-columns: repeat(' + Math.min(getSelectedConfigRuns().length, 2) + ', minmax(0, 1fr))'">
        <template x-for="cfg in getSelectedConfigRuns()" :key="'hm-resp-' + cfg.config_run_id">
          <div class="exp-response-card" x-data="{ cell: getCellData(sc.case_id, cfg.config_run_id) }">

            <div class="exp-response-header">
              <div class="exp-response-config-name">
                <span class="exp-config-dot" :style="'background:' + cfg.color"></span>
                <span x-text="cfg.config_name"></span>
              </div>
              <template x-if="cell && cell.status !== 'error'">
                <span class="exp-pass-badge"
                      :class="(cell.passed === true || (cell.passed == null && cell.judge_passed === true))
                              ? 'exp-pass-badge--pass'
                              : (cell.passed === false || cell.judge_passed === false)
                                ? 'exp-pass-badge--fail' : ''"
                      x-text="(cell.passed === true || (cell.passed == null && cell.judge_passed === true))
                              ? 'PASS'
                              : (cell.passed === false || cell.judge_passed === false)
                                ? 'FAIL' : ''"></span>
              </template>
              <template x-if="cell && cell.status === 'error'">
                <span class="exp-pass-badge exp-pass-badge--error">ERROR</span>
              </template>
            </div>

            <template x-if="!cell">
              <div class="text-xs text-muted-foreground py-4 text-center">No data</div>
            </template>

            <template x-if="cell && cell.status === 'error'">
              <div class="rounded-md px-3 py-2 text-xs" style="background: color-mix(in oklch, var(--eval-score-1) 10%, transparent); color: var(--eval-score-1);">
                <span class="font-semibold">Error:</span> <span x-text="cell.error_message || 'Unknown error'"></span>
              </div>
            </template>

            <template x-if="cell && cell.status !== 'error'">
              <div>
                <div class="ct-collapsible" x-data="{ okey: 'hm-' + cfg.config_run_id + '-' + sc.case_id }">
                  <pre class="ct-text"
                       :style="!isOutputExpanded(okey) ? 'max-height: 12rem; overflow: hidden;' : ''"
                       x-text="isOutputExpanded(okey) ? (cell.output || '').trim() : truncatePrompt((cell.output || '').trim(), 300)"></pre>
                  <button type="button"
                          x-show="(cell.output || '').length > 300"
                          @click.stop="toggleOutput(okey)"
                          class="ct-toggle">
                    <span x-text="isOutputExpanded(okey) ? 'Collapse ↑' : 'Expand ↓'"></span>
                  </button>
                </div>

                <div class="exp-metric-pills">
                  <template x-if="enableLlmJudge && cell.judge_passed != null">
                    <span class="exp-metric-pill">
                      <span class="exp-metric-pill__label">Judge</span>
                      <span class="exp-metric-pill__value" x-text="cell.judge_passed ? 'Pass' : 'Fail'"></span>
                    </span>
                  </template>
                  <span class="exp-metric-pill">
                    <span class="exp-metric-pill__label">Latency</span>
                    <span class="exp-metric-pill__value" x-text="formatLatency(cell.total_latency_seconds)"></span>
                  </span>
                  <template x-if="cell.agent_latency_seconds != null">
                    <span class="exp-metric-pill">
                      <span class="exp-metric-pill__label">Agent</span>
                      <span class="exp-metric-pill__value" x-text="formatLatency(cell.agent_latency_seconds)"></span>
                    </span>
                  </template>
                  <template x-if="cell.tool_latency_seconds != null">
                    <span class="exp-metric-pill">
                      <span class="exp-metric-pill__label">Tool</span>
                      <span class="exp-metric-pill__value" x-text="formatLatency(cell.tool_latency_seconds)"></span>
                    </span>
                  </template>
                  <span class="exp-metric-pill">
                    <span class="exp-metric-pill__label">In</span>
                    <span class="exp-metric-pill__value" x-text="(cell.input_tokens ?? '—') + ' tok'"></span>
                  </span>
                  <span class="exp-metric-pill">
                    <span class="exp-metric-pill__label">Out</span>
                    <span class="exp-metric-pill__value" x-text="(cell.output_tokens ?? '—') + ' tok'"></span>
                  </span>
                  <span class="exp-metric-pill">
                    <span class="exp-metric-pill__label">Cost</span>
                    <span class="exp-metric-pill__value" x-text="formatCost((cell.input_tokens_cost || 0) + (cell.output_tokens_cost || 0))"></span>
                  </span>
                </div>

                <template x-if="enableLlmJudge && cell.criterion_scores && cell.criterion_scores.length > 0">
                  <div class="exp-criterion-scores">
                    <div class="exp-criterion-scores__title">Judge Breakdown</div>
                    <div class="exp-criterion-scores__list">
                      <template x-for="cs in cell.criterion_scores" :key="cs.criterion_key">
                        <div x-data="{ open: false }">
                          <div class="exp-criterion-pill" @click="open = !open">
                            <span class="exp-criterion-pill__name" x-text="cs.criterion_key.replace(/_/g, ' ')"></span>
                            <span class="exp-criterion-pill__score"
                                  :class="'exp-criterion-pill__score--' + cs.score"
                                  x-text="cs.score + '/5'"></span>
                          </div>
                          <div x-show="open" x-cloak class="exp-criterion-detail">
                            <div class="exp-criterion-detail__justification" x-text="cs.justification"></div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>

                <template x-if="scoringEnabled && (cell.assertion_results && cell.assertion_results.length > 0 || cell.actual_tool_calls && cell.actual_tool_calls.length > 0)">
                  <div class="exp-criterion-scores">
                    <div class="exp-criterion-scores__title">Tool Assertions</div>
                    <div x-data="assertionCard(cell.assertion_results, cell.actual_tool_calls, cell.actual_subagents_used)">
                      {% include "eval/components/_assertion_card_alpine.html" %}
                    </div>
                  </div>
                </template>

                <template x-if="cell.threshold_results && cell.threshold_results.length > 0">
                  <div class="exp-thresholds">
                    <div class="exp-thresholds__title">Thresholds</div>
                    <template x-for="t in cell.threshold_results" :key="(t.name || t.metric || '') + '-' + cfg.config_run_id">
                      <div class="exp-threshold-row">
                        <span class="exp-threshold-row__name" x-text="t.name || t.metric || '—'"></span>
                        <span class="exp-threshold-row__values">
                          <span x-text="(t.actual != null ? t.actual : '—') + ' / ' + (t.threshold != null ? t.threshold : '—')"></span>
                          <span :class="t.passed ? 'text-eval-score-5' : 'text-eval-score-1'"
                                x-text="t.passed ? '✓' : '✗'"></span>
                        </span>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </template>

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

<!-- ── Heatmap grid view ── -->
<div x-show="!selectedHeatmapCase">

  <div class="hm-toolbar">
    <div class="hm-toolbar__left">
      <span class="hm-toolbar__label">Domain:</span>
      <div class="exp-domain-tabs" style="margin-bottom:0;">
        <button type="button" class="exp-domain-tab"
                :class="activeDomain === 'all' && 'exp-domain-tab--active'"
                @click="activeDomain = 'all'">All</button>
        <template x-for="d in domains" :key="'hm-d-' + d">
          <button type="button" class="exp-domain-tab"
                  :class="activeDomain === d && 'exp-domain-tab--active'"
                  @click="activeDomain = d"
                  x-text="d"></button>
        </template>
      </div>
    </div>
    <div class="hm-toolbar__right">
      <span class="hm-toolbar__summary"
            x-text="getFilteredCases().length + ' cases × ' + getSelectedConfigRuns().length + ' configs'"></span>
      <div class="hm-mode-toggle">
        <button type="button" class="hm-mode-toggle__btn"
                :class="heatmapMode === 'passfail' && 'hm-mode-toggle__btn--active'"
                @click="heatmapMode = 'passfail'">Pass / Fail</button>
        <button type="button" class="hm-mode-toggle__btn"
                :class="heatmapMode === 'latency' && 'hm-mode-toggle__btn--active'"
                @click="heatmapMode = 'latency'">Latency</button>
      </div>
    </div>
  </div>

  <div class="exp-radar-container" style="padding: 1rem 1.5rem;">
    <div class="hm-title">Case Results</div>
    <div class="hm-subtitle">Click a case row to see full responses from each config</div>

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

    <div x-show="getSelectedConfigRuns().length > 0" class="hm-table-wrap">
      <table class="hm-table">
        <thead>
          <tr>
            <th class="hm-table__case-th">Case</th>
            <template x-for="cfg in getSelectedConfigRuns()" :key="'th-' + cfg.config_run_id">
              <th class="hm-table__config-th">
                <span class="hm-table__config-name" :style="'color:' + cfg.color"
                      x-text="cfg.config_name"></span>
              </th>
            </template>
          </tr>
        </thead>
        <tbody>
          <template x-for="c in getFilteredCases()" :key="'row-' + c.case_id">
            <tr class="hm-table__row" @click="selectHeatmapCase(c)">
              <td class="hm-table__case-td" :title="c.case_id">
                <div class="hm-case-name" x-text="c.case_id"></div>
                <div class="hm-case-domain" x-text="c.domain"></div>
              </td>
              <template x-for="cfg in getSelectedConfigRuns()" :key="'cell-' + cfg.config_run_id + '-' + c.case_id">
                <td class="hm-table__cell"
                    x-data="{ st: heatmapCellStatus(c.case_id, cfg.config_run_id), cell: getCellData(c.case_id, cfg.config_run_id) }">

                  <!-- Pass / Fail mode -->
                  <template x-if="heatmapMode === 'passfail'">
                    <div class="hm-cell hm-cell--pf"
                         :class="'hm-cell--' + st"
                         :title="cfg.config_name + '\n' + (st === 'pass' ? 'Pass' : st === 'fail' ? 'Fail' : st === 'error' ? 'Error' : '—') + (cell && cell.total_latency_seconds != null ? ' · ' + Number(cell.total_latency_seconds).toFixed(1) + 's' : '')">
                    </div>
                  </template>

                  <!-- Latency mode -->
                  <template x-if="heatmapMode === 'latency'">
                    <div class="hm-cell hm-cell--lat"
                         :style="cell && cell.total_latency_seconds != null ? 'background:' + latencyColor(cell.total_latency_seconds) : 'background: var(--muted); opacity: 0.3;'"
                         :title="cfg.config_name + '\n' + (cell && cell.total_latency_seconds != null ? Number(cell.total_latency_seconds).toFixed(1) + 's' : '—') + ' · ' + (st === 'pass' ? 'Pass' : st === 'fail' ? 'Fail' : st === 'error' ? 'Error' : '—')">
                      <span class="hm-cell__latency-text"
                            x-text="cell && cell.total_latency_seconds != null ? Number(cell.total_latency_seconds).toFixed(1) + 's' : '—'"></span>
                    </div>
                  </template>

                </td>
              </template>
            </tr>
          </template>
        </tbody>
      </table>
    </div>

    <!-- Legend -->
    <div class="hm-legend" x-show="getSelectedConfigRuns().length > 0">
      <template x-if="heatmapMode === 'passfail'">
        <div class="hm-legend__inner">
          <span class="hm-legend__item"><span class="hm-legend__swatch hm-legend__swatch--pass"></span> Pass</span>
          <span class="hm-legend__item"><span class="hm-legend__swatch hm-legend__swatch--fail"></span> Fail</span>
          <span class="hm-legend__item"><span class="hm-legend__swatch hm-legend__swatch--error"></span> Error</span>
        </div>
      </template>
      <template x-if="heatmapMode === 'latency'">
        <div>
          <div class="hm-legend__inner">
            <span class="hm-legend__label">Latency:</span>
            <span class="hm-legend__label" x-text="getLatencyRange().min.toFixed(1) + 's'"></span>
            <span class="hm-legend__gradient" :style="'background:' + latencyGradientCSS()"></span>
            <span class="hm-legend__label" x-text="getLatencyRange().max.toFixed(1) + 's'"></span>
          </div>
          <div class="hm-legend__note" x-show="getLatencyThreshold()">Scale based on the latency threshold set in this run's criteria configuration.</div>
        </div>
      </template>
    </div>

  </div>
</div>