{% extends "base.html" %}
{% from "_macros.html" import best_badge, best_badge_dual, score_view_toggle, agent_chip, model_chip, run_status %}
{% block title %}Compare · {{ task }} · SForge{% endblock %}
{% block content %}

<div class="mb-4 flex items-center gap-2 text-sm">
  <a href="/" class="text-slate-400 hover:text-indigo-600">&larr; runs</a>
  <span class="text-slate-300">/</span>
  <a href="/task/{{ task }}" class="text-slate-400 hover:text-indigo-600">{{ task }}</a>
  <span class="text-slate-300">/</span>
  <span class="font-semibold">compare</span>
</div>

{% if runs|length < 2 %}
<div class="bg-white border border-slate-200 rounded-lg p-10 text-center text-slate-400">
  Pick at least 2 runs to compare.
  <div class="mt-3"><a href="/task/{{ task }}" class="text-indigo-500 hover:underline text-sm">&larr; back to task page</a></div>
</div>
{% else %}

{# ── Header card with runs being compared ── #}
<header class="card p-5 mb-5">
  <div class="flex items-start justify-between gap-3 mb-4">
    <div>
      <h1 class="text-lg font-bold tracking-tight font-mono">{{ task }}</h1>
      <p class="text-xs text-slate-500 mt-0.5">Comparing {{ runs|length }} runs</p>
    </div>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-sm">
    {% for r in runs %}
    <div class="border border-slate-200 rounded-lg p-3 bg-slate-50/30">
      <div class="flex items-center gap-2 mb-2">
        <span class="inline-block w-3 h-3 rounded-full shrink-0" style="background:{{ colors[loop.index0] }}"></span>
        <a href="/run/{{ r.run_id }}/{{ task }}" class="font-mono text-xs font-medium hover:text-indigo-600 truncate">{{ r.run_id }}</a>
      </div>
      <div class="flex items-center gap-2 flex-wrap text-[11px]">
        {{ agent_chip(r.agent) }}
        {{ model_chip(r.model) }}
        {{ run_status(r) }}
      </div>
      <div class="mt-2 grid grid-cols-3 gap-2 text-[11px] text-slate-500">
        <div><span class="text-slate-400">best</span> <span class="font-mono font-semibold text-slate-700">{{ best_badge_dual(r) }}</span></div>
        <div><span class="text-slate-400">rounds</span> <span class="font-mono">{{ r.total_rounds }}</span></div>
        <div><span class="text-slate-400">runtime</span> <span class="font-mono">{{ format_duration(r.runtime_seconds) }}</span></div>
      </div>
    </div>
    {% endfor %}
  </div>
</header>

{# ── Comparison chart ── #}
<section class="card overflow-hidden mb-6" style="width:90vw;max-width:90vw;margin-left:calc(50% - 45vw);border-radius:0.5rem;">
  <div class="px-6 py-3 border-b border-slate-100 flex items-center justify-between flex-wrap gap-3">
    <h2 class="text-sm font-semibold text-slate-700">Evolution Timeline (overlaid)</h2>
    <div class="flex items-center gap-4 text-xs flex-wrap">
      {% if has_rescaled %}{{ score_view_toggle() }}{% endif %}
      <label class="flex items-center gap-1.5 text-slate-500 cursor-pointer select-none">
        <input type="checkbox" id="toggle-auto" checked class="rounded border-slate-300">
        <span>Auto-eval</span>
      </label>
      <label class="flex items-center gap-1.5 text-slate-500 cursor-pointer select-none">
        <input type="checkbox" id="toggle-dots" class="rounded border-slate-300">
        <span>Show raw dots</span>
      </label>
      <div class="relative" id="smooth-wrap">
        <button type="button" id="smooth-btn"
                class="flex items-center gap-1.5 px-2 py-0.5 rounded border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 transition-colors">
          <span>Smooth:</span>
          <span id="smooth-label" class="font-mono text-slate-700">off</span>
          <svg class="w-3 h-3 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div id="smooth-pop" class="hidden absolute left-0 top-full mt-1 z-20 bg-white border border-slate-200 rounded-lg shadow-lg p-3 w-64 text-xs space-y-2">
          <div class="flex items-center gap-2">
            <span class="text-slate-500 w-12">Mode</span>
            <select id="smooth-mode" class="flex-1 border border-slate-200 rounded px-1.5 py-0.5 bg-white">
              <option value="off" selected>Off</option>
              <option value="ema">EMA</option>
              <option value="sma">SMA</option>
            </select>
          </div>
          <div id="smooth-ema-row" class="flex items-center gap-2">
            <span class="text-slate-500 w-12">α</span>
            <input type="range" id="smooth-alpha" min="0" max="0.98" step="0.02" value="0.6" class="flex-1">
            <span id="smooth-alpha-val" class="font-mono text-[10px] text-slate-500 w-8 text-right">0.60</span>
          </div>
          <div id="smooth-sma-row" class="hidden flex items-center gap-2">
            <span class="text-slate-500 w-12">Window</span>
            <input type="range" id="smooth-window" min="2" max="200" step="1" value="30" class="flex-1">
            <span id="smooth-window-val" class="font-mono text-[10px] text-slate-500 w-8 text-right">30</span>
          </div>
        </div>
      </div>
      <span class="text-[11px] text-slate-400">scroll to zoom &middot; drag to pan</span>
    </div>
  </div>
  <div class="px-4" style="overflow:visible;">
    <div id="compare-chart" style="width:100%;height:70vh;min-height:500px;overflow:visible;"></div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script>
(function () {
  const task = {{ task|tojson }};
  const scoreDirection = {{ score_direction|tojson }};
  const hasScore = {{ has_score|tojson }};
  const hasMaxScore = {{ has_max_score|tojson }};
  const hasRescaled = {{ has_rescaled|tojson }};
  const colors = {{ colors|tojson }};

  let scoreView = (window.SForgeScoreView ? window.SForgeScoreView.get() : "rescaled");
  function rescaledMode() { return hasRescaled && scoreView === "rescaled"; }
  function effDirection() { return rescaledMode() ? "maximize" : scoreDirection; }

  // Each entry: { run_id, agent, model, color, submissions: [...] }
  const runs = [
    {% for r in runs %}
    {
      run_id: {{ r.run_id|tojson }},
      agent: {{ r.agent|tojson }},
      model: {{ r.model|tojson }},
      color: {{ colors[loop.index0]|tojson }},
      created_at: {{ r.created_at }},
      submissions: [
        {% for s in r.submissions %}
        { label: {{ s.round_label|tojson }}, kind: {{ s.kind|tojson }},
          pass_rate: {{ "%.6f"|format(s.pass_rate) }},
          score: {{ s.score|safe_num }},
          score_0_100: {{ s.score_0_100|safe_num }},
          max_score: {{ s.max_score|safe_num }},
          submitted_at: {{ s.submitted_at }},
          passed: {{ s.passed }}, total: {{ s.total_tests }} },
        {% endfor %}
      ]
    },
    {% endfor %}
  ];

  // Metric detection (mirrors run_detail logic but pooled across runs)
  const allSubs = runs.flatMap(r => r.submissions);
  const anyScore = allSubs.some(s => s.score != null);
  const passRates = allSubs.map(s => s.pass_rate);
  const allSamePass = passRates.length > 0 && passRates.every(r => r === passRates[0]);
  const useScore = anyScore && (hasScore || allSamePass);
  const maxScores = allSubs.map(s => s.max_score).filter(v => v != null && v > 0);
  const stableMaxScore = hasMaxScore && maxScores.length >= 2 && maxScores.every(v => v === maxScores[0]);
  function isPct() { return rescaledMode() ? true : (stableMaxScore || !useScore); }

  function mv(s) {
    if (rescaledMode()) {
      const v = s.score_0_100;
      return (v == null || !isFinite(v)) ? null : v;
    }
    let v;
    if (useScore) {
      if (s.score == null) return null;
      v = (stableMaxScore && s.max_score > 0) ? (s.score / s.max_score) * 100 : s.score;
    } else {
      v = s.pass_rate * 100;
    }
    if (!isFinite(v) || Math.abs(v) >= 1e100) return null;
    return v;
  }
  function fmtNum(v) {
    const a = Math.abs(v);
    if (a >= 1e15) return v.toExponential(1);
    if (a >= 1e12) return (v/1e12).toFixed(1) + "T";
    if (a >= 1e9) return (v/1e9).toFixed(1) + "B";
    if (a >= 1e6) return (v/1e6).toFixed(1) + "M";
    if (a >= 1e3) return (v/1e3).toFixed(1) + "K";
    return Number.isInteger(v) ? v.toString() : v.toFixed(2);
  }
  function yFmt(v) { return rescaledMode() ? v.toFixed(0) : (isPct() ? v.toFixed(0) + "%" : fmtNum(v)); }
  function displayValue(s) { const v = mv(s); if (v == null) return "—"; return rescaledMode() ? v.toFixed(1) : (isPct() ? v.toFixed(1) + "%" : fmtNum(v)); }

  function runningBest(values) {
    const out = new Array(values.length).fill(null);
    let best = null;
    const better = effDirection() === "minimize" ? ((a,b) => a < b) : ((a,b) => a > b);
    for (let i = 0; i < values.length; i++) {
      const v = values[i];
      if (v == null) { out[i] = best; continue; }
      if (best == null || better(v, best)) best = v;
      out[i] = best;
    }
    return out;
  }
  function smoothEMA(values, alpha) {
    if (!alpha || alpha <= 0) return values.slice();
    const out = new Array(values.length).fill(null);
    let last = 0, n = 0;
    for (let i = 0; i < values.length; i++) {
      const v = values[i];
      if (v == null || !isFinite(v)) { out[i] = null; continue; }
      last = last * alpha + (1 - alpha) * v; n += 1;
      const debias = 1 - Math.pow(alpha, n);
      out[i] = debias > 0 ? last / debias : last;
    }
    return out;
  }
  function smoothSMA(values, w) {
    if (w < 2) return values.slice();
    const out = new Array(values.length).fill(null);
    const buf = [];
    for (let i = 0; i < values.length; i++) {
      const v = values[i];
      if (v == null || !isFinite(v)) { out[i] = null; continue; }
      buf.push(v); if (buf.length > w) buf.shift();
      let s = 0; for (let j = 0; j < buf.length; j++) s += buf[j];
      out[i] = s / buf.length;
    }
    return out;
  }

  const smoothBtn = document.getElementById("smooth-btn");
  const smoothPop = document.getElementById("smooth-pop");
  const smoothMode = document.getElementById("smooth-mode");
  const smoothAlpha = document.getElementById("smooth-alpha");
  const smoothAlphaVal = document.getElementById("smooth-alpha-val");
  const smoothWindow = document.getElementById("smooth-window");
  const smoothWindowVal = document.getElementById("smooth-window-val");
  const smoothLabel = document.getElementById("smooth-label");
  const smoothEmaRow = document.getElementById("smooth-ema-row");
  const smoothSmaRow = document.getElementById("smooth-sma-row");
  let smoothCfg = { mode: smoothMode ? smoothMode.value : "off",
                    alpha: smoothAlpha ? parseFloat(smoothAlpha.value) : 0.6,
                    window: smoothWindow ? parseInt(smoothWindow.value, 10) : 30 };
  function smoothingActive() { return smoothCfg.mode && smoothCfg.mode !== "off"; }
  function applySmoothCfg(values) {
    if (smoothCfg.mode === "ema") return smoothEMA(values, smoothCfg.alpha);
    if (smoothCfg.mode === "sma") return smoothSMA(values, smoothCfg.window);
    return values.slice();
  }

  const toggleAuto = document.getElementById("toggle-auto");
  const toggleDots = document.getElementById("toggle-dots");
  const chart = echarts.init(document.getElementById("compare-chart"));

  function buildOpt() {
    const showAuto = toggleAuto.checked;
    const showDots = toggleDots.checked;
    const isSmooth = smoothingActive();
    const xMode = "time";  // x-axis fixed to elapsed submission time

    const series = [];
    let xMax = 0;
    const allRunBests = [];  // collect running-best values for Y-axis bounds

    runs.forEach((run, idx) => {
      const subs = run.submissions.filter(s => showAuto || s.kind !== "auto");
      if (!subs.length) return;
      const t0 = run.created_at || (subs[0].submitted_at || 0);
      const xs = subs.map((s, i) => xMode === "time"
        ? Math.max(0, (s.submitted_at - t0) / 60)  // minutes since run start
        : i + 1);
      const ys = subs.map(mv);
      const bestYs = runningBest(ys);
      bestYs.forEach(v => { if (v != null && isFinite(v)) allRunBests.push(v); });
      xMax = Math.max(xMax, xs[xs.length - 1]);

      // Step-line "running best" — primary when no smoothing, faded when smoothing is on
      const bestPts = xs.map((x, i) => [x, bestYs[i]]).filter(p => p[1] != null);
      series.push({
        name: run.run_id + " (best)",
        type: "line", step: "end",
        data: bestPts, _runIdx: idx,
        showSymbol: false,
        lineStyle: { color: run.color, width: isSmooth ? 1.2 : 2.4, opacity: isSmooth ? 0.35 : 1 },
        itemStyle: { color: run.color },
        z: isSmooth ? 2 + idx : 3 + idx,
        tooltip: { show: false },
        emphasis: { focus: "series" },
      });

      // Smoothed trend — EMA only over milestones (kept best points), so
      // failed experiments don't drag the curve down.
      if (isSmooth) {
        const mYs = [];
        const mXs = [];
        let prev = null;
        bestYs.forEach((b, i) => {
          if (b == null || !isFinite(b)) return;
          if (b !== prev) {
            mYs.push(b);
            mXs.push(xs[i]);
            prev = b;
          }
        });
        if (mYs.length >= 2) {
          const sm = applySmoothCfg(mYs);
          const smPts = mXs.map((x, i) => sm[i] == null ? null : [x, sm[i]]).filter(p => p);
          series.push({
            name: run.run_id + " (smooth)",
            type: "line", data: smPts, _runIdx: idx,
            showSymbol: false, smooth: true,
            lineStyle: { color: run.color, width: 2.8, type: "solid", opacity: 1 },
            z: 5 + idx,
            tooltip: { show: false },
          });
        }
      }

      // Raw dots
      if (showDots) {
        const dots = subs.map((s, i) => ({
          value: [xs[i], ys[i]],
          symbol: s.kind === "auto" ? "triangle" : "circle",
          _m: s, _run: run,
        }));
        series.push({
          name: run.run_id + " (raw)",
          type: "scatter", data: dots, _runIdx: idx,
          symbolSize: 5,
          itemStyle: { color: run.color, opacity: 0.45 },
          emphasis: { itemStyle: { opacity: 1 }, scale: 1.6 },
          z: 1,
        });
      }
    });

    // Y bounds: focus on the "interesting" range of running-bests.
    // Discarded outliers (raw values much larger than every run's best) get clipped.
    let yMin, yMax;
    if (isPct()) {
      yMin = 0; yMax = 100;
    } else if (allRunBests.length) {
      const lo = Math.min(...allRunBests);
      const hi = Math.max(...allRunBests);
      const pad = Math.max((hi - lo) * 0.2, Math.abs(hi) * 0.02, 1);
      yMin = scoreDirection === "minimize" ? Math.max(0, lo - pad) : Math.max(0, lo - pad);
      yMax = hi + pad;
    }

    return {
      tooltip: {
        trigger: "item", confine: false, appendToBody: true,
        backgroundColor: "rgba(15,23,42,0.95)", borderColor: "rgba(51,65,85,0.5)",
        textStyle: { color: "#e2e8f0", fontSize: 12 },
        extraCssText: "max-width:380px; white-space:normal; line-height:1.5;",
        formatter: p => {
          const d = (Array.isArray(p) ? p[0] : p);
          const s = d.data && d.data._m;
          if (!s) return d.seriesName + "<br>" + (xMode === "time" ? "t=" + d.value[0].toFixed(1) + "m" : "#" + d.value[0]) + " &rarr; " + yFmt(d.value[1]);
          const r = d.data._run;
          const esc = t => String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
          let l = ["<b>" + esc(r.run_id) + "</b> <span style='color:#94a3b8'>" + esc(r.model || r.agent) + "</span>"];
          l.push(esc(s.label) + " <span style='color:#94a3b8'>(" + esc(s.kind) + ")</span>");
          if (s.score != null) l.push("score: " + fmtNum(s.score));
          if (s.score_0_100 != null && isFinite(s.score_0_100)) l.push("rescaled: " + s.score_0_100.toFixed(1));
          l.push("pass rate: " + (s.pass_rate * 100).toFixed(1) + "%");
          return l.join("<br>");
        },
      },
      legend: {
        type: "scroll", bottom: 6, textStyle: { fontSize: 10, color: "#475569" },
        // Only show one entry per run (the "best" series).
        selector: false,
        data: runs.map(r => ({ name: r.run_id + " (best)", icon: "rect", itemStyle: { color: r.color } })),
      },
      grid: { top: 30, right: 80, bottom: 60, left: 80, containLabel: true },
      dataZoom: [
        { type: "inside", xAxisIndex: 0, filterMode: "none" },
        { type: "inside", yAxisIndex: 0, filterMode: "none" },
      ],
      xAxis: {
        type: "value",
        name: xMode === "time" ? "elapsed (min)" : "submission #",
        nameTextStyle: { fontSize: 11, color: "#94a3b8" },
        min: 0, max: xMax * 1.02,
        axisLabel: { formatter: v => xMode === "time" ? v.toFixed(0) : (v === Math.round(v) ? v : "") },
        splitLine: { lineStyle: { color: "#f1f5f9" } },
      },
      yAxis: {
        type: "value",
        name: rescaledMode() ? "rescaled (0-100)" :
          (isPct() ? (hasMaxScore ? "% of max" : "pass rate (%)") :
          (scoreDirection === "minimize" ? "score (lower is better)" : "score")),
        nameTextStyle: { fontSize: 11, color: "#94a3b8" },
        min: yMin, max: yMax,
        axisLabel: { formatter: yFmt },
        splitLine: { lineStyle: { color: "#f1f5f9" } },
      },
      series,
    };
  }

  function refresh() { chart.setOption(buildOpt(), true); }
  refresh();
  window.addEventListener("resize", () => chart.resize());

  [toggleAuto, toggleDots].forEach(el => el && el.addEventListener("change", refresh));
  if (window.SForgeScoreView) window.SForgeScoreView.onChange((v) => { scoreView = v; refresh(); });

  function updateSmoothUI() {
    const m = smoothCfg.mode;
    if (smoothLabel) {
      if (m === "off") smoothLabel.textContent = "off";
      else if (m === "ema") smoothLabel.textContent = "EMA α=" + smoothCfg.alpha.toFixed(2);
      else if (m === "sma") smoothLabel.textContent = "SMA w=" + smoothCfg.window;
    }
    if (smoothEmaRow) smoothEmaRow.style.display = m === "ema" ? "flex" : "none";
    if (smoothSmaRow) smoothSmaRow.style.display = m === "sma" ? "flex" : "none";
    refresh();
  }
  if (smoothBtn && smoothPop) {
    smoothBtn.addEventListener("click", (e) => { e.stopPropagation(); smoothPop.classList.toggle("hidden"); });
    document.addEventListener("click", (e) => { if (!smoothPop.contains(e.target) && e.target !== smoothBtn) smoothPop.classList.add("hidden"); });
  }
  if (smoothMode) smoothMode.addEventListener("change", () => { smoothCfg.mode = smoothMode.value; updateSmoothUI(); });
  if (smoothAlpha) smoothAlpha.addEventListener("input", () => { smoothCfg.alpha = parseFloat(smoothAlpha.value); if (smoothAlphaVal) smoothAlphaVal.textContent = smoothCfg.alpha.toFixed(2); updateSmoothUI(); });
  if (smoothWindow) smoothWindow.addEventListener("input", () => { smoothCfg.window = parseInt(smoothWindow.value, 10); if (smoothWindowVal) smoothWindowVal.textContent = smoothCfg.window; updateSmoothUI(); });
  updateSmoothUI();
})();
</script>
{% endif %}

{% endblock %}