{% extends "base.html" %}
{% from "_macros.html" import agent_chip, model_chip, score_view_toggle %}
{% block title %}{{ run_id }} · all tasks · SForge{% endblock %}
{% block content %}
{% set any_score = task_blocks|selectattr("has_score")|list|length > 0 %}

<div class="mb-4 flex items-center justify-between gap-2 text-sm">
  <div class="flex items-center gap-2 flex-wrap">
    <a href="/" class="text-slate-400 hover:text-indigo-600">&larr; runs</a>
    <span class="text-slate-300">/</span>
    <span class="font-mono font-semibold text-slate-900">{{ run_id }}</span>
    {{ agent_chip(agent) }}
    {{ model_chip(model) }}
    <span class="text-[10px] text-slate-400">{{ task_count }} task(s)</span>
  </div>
</div>

{# ── Global controls ── #}
<div class="card p-3 mb-5 flex items-center gap-5 flex-wrap text-xs">
  {% if any_score %}{{ 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>Include 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>
  <label class="flex items-center gap-1.5 text-slate-500 select-none">
    <span>X-axis</span>
    <select id="x-axis" class="text-xs border border-slate-200 rounded px-1 py-0.5 bg-white">
      <option value="time">elapsed time (min)</option>
      <option value="submission">submission #</option>
    </select>
  </label>
  <label class="flex items-center gap-1.5 text-slate-500 select-none">
    <span>Filter task</span>
    <input id="task-filter" type="text" placeholder="regex…" class="text-xs border border-slate-200 rounded px-2 py-0.5 bg-white w-40 font-mono">
  </label>
  <span class="ml-auto text-slate-400">{{ task_blocks|length }} chart(s)</span>
</div>

{# ── Mini chart grid ── #}
{% if task_blocks %}
<div id="chart-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
  {% for block in task_blocks %}
  <div class="card overflow-hidden chart-cell" data-task="{{ block.task }}">
    <div class="px-3 py-2 border-b border-slate-100 flex items-center justify-between gap-2">
      <a href="/run/{{ run_id }}/{{ block.task }}" class="text-xs font-mono font-semibold text-slate-700 hover:text-indigo-600 truncate" title="{{ block.task }}">{{ block.task }}</a>
      <a href="/run/{{ run_id }}/{{ block.task }}"
         class="text-[10px] text-slate-400 hover:text-indigo-600 shrink-0" title="open run/task detail">↗</a>
    </div>
    <div class="mini-chart" data-idx="{{ loop.index0 }}" data-task="{{ block.task }}" style="width:100%;height:200px;">
      <div class="h-full flex items-center justify-center text-xs text-slate-400">Loading chart...</div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card p-10 text-center text-slate-400">
  This run has no submissions to chart.
</div>
{% endif %}

<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script>
(function () {
  let scoreView = (window.SForgeScoreView ? window.SForgeScoreView.get() : "rescaled");
  // Each block has exactly one synthetic "run" (this run), so buildOpt() is
  // shared verbatim with the compare-runs dashboard.
  const blocks = [
    {% for block in task_blocks %}
    {
      task: {{ block.task|tojson }},
      score_direction: {{ block.score_direction|tojson }},
      has_score: {{ block.has_score|tojson }},
      has_max_score: {{ block.has_max_score|tojson }},
      runs: [
        {
          run_id: {{ run_id|tojson }},
          color: {{ block.color|tojson }},
          created_at: {{ block.created_at }},
          submissions: [
            {% for s in block.submissions %}
            { label: {{ s.label|tojson }}, kind: {{ s.kind|tojson }},
              pass_rate: {{ "%.6f"|format(s.pass_rate) }},
              score: {{ s.score|safe_num }},
              max_score: {{ s.max_score|safe_num }},
              submitted_at: {{ s.submitted_at }},
              passed: {{ s.passed }}, total: {{ s.total }} },
            {% endfor %}
          ]
        }
      ]
    },
    {% endfor %}
  ];

  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 makeMetricFns(block) {
    // Rescaled 0-100 view: fixed 0-100 axis, always higher-is-better.
    if (scoreView === "rescaled" && block.has_rescaled) {
      return {
        isPct: true, useScore: true, rescaled: true,
        mv: s => (s.score_0_100 == null || !isFinite(s.score_0_100)) ? null : s.score_0_100,
        yFmt: v => v.toFixed(0),
      };
    }
    const allSubs = block.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 && (block.has_score || allSamePass);
    const maxScores = allSubs.map(s => s.max_score).filter(v => v != null && v > 0);
    const stableMaxScore = block.has_max_score && maxScores.length >= 2 && maxScores.every(v => v === maxScores[0]);
    const isPct = stableMaxScore || !useScore;
    return {
      isPct, useScore, rescaled: false,
      mv: s => {
        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;
      },
      yFmt: v => isPct ? v.toFixed(0) + "%" : fmtNum(v),
    };
  }

  function runningBest(values, direction) {
    const out = new Array(values.length).fill(null);
    const better = direction === "minimize" ? ((a,b) => a < b) : ((a,b) => a > b);
    let best = null;
    for (let i = 0; i < values.length; i++) {
      const v = values[i];
      if (v == null || !isFinite(v)) { 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 xAxisSel = document.getElementById("x-axis");
  const taskFilter = document.getElementById("task-filter");

  const chartEls = document.querySelectorAll(".mini-chart");
  const charts = [];  // [{ el, chart, block }]
  chartEls.forEach(el => {
    const idx = parseInt(el.dataset.idx, 10);
    const block = blocks[idx];
    charts.push({ el, chart: null, block, loaded: false, loading: false });
  });

  function buildOpt(block) {
    const showAuto = toggleAuto.checked;
    const showDots = toggleDots.checked;
    const isSmooth = smoothingActive();
    const xMode = xAxisSel.value;

    const { isPct, mv, yFmt, rescaled } = makeMetricFns(block);
    const dir = rescaled ? "maximize" : block.score_direction;

    const series = [];
    let xMax = 0;
    const bestsForBounds = [];

    block.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)
        : i + 1);
      const ys = subs.map(mv);
      const bestYs = runningBest(ys, dir);
      bestYs.forEach(v => { if (v != null && isFinite(v)) bestsForBounds.push(v); });
      const lastX = xs[xs.length - 1];
      if (lastX != null) xMax = Math.max(xMax, lastX);

      const bestPts = xs.map((x, i) => [x, bestYs[i]]).filter(p => p[1] != null && isFinite(p[1]));
      series.push({
        name: run.run_id, type: "line", step: "end",
        data: bestPts,
        showSymbol: false,
        lineStyle: { color: run.color, width: isSmooth ? 1 : 2, opacity: isSmooth ? 0.35 : 1 },
        itemStyle: { color: run.color },
        z: isSmooth ? 2 + idx : 3 + idx,
        animation: false,
        emphasis: { focus: "series" },
        _run: run,
      });

      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, showSymbol: false, smooth: true,
            lineStyle: { color: run.color, width: 2.4, type: "solid", opacity: 1 },
            z: 5 + idx,
            animation: false,
            tooltip: { show: false },
          });
        }
      }
      if (showDots) {
        const dots = subs.map((s, i) => ({
          value: [xs[i], ys[i]],
          symbol: s.kind === "auto" ? "triangle" : "circle",
        })).filter(d => d.value[1] != null);
        series.push({
          name: run.run_id + " (raw)", type: "scatter",
          data: dots, symbolSize: 4,
          itemStyle: { color: run.color, opacity: 0.4 },
          large: true,
          largeThreshold: 100,
          progressive: 400,
          progressiveThreshold: 800,
          animation: false,
          silent: true,
          z: 1,
        });
      }
    });

    let yMin, yMax, useLog = false;
    if (isPct) {
      yMin = 0; yMax = 100;
    } else {
      const finiteBests = bestsForBounds.filter(v => isFinite(v));
      if (finiteBests.length) {
        const sorted = finiteBests.slice().sort((a, b) => a - b);
        const pick = (frac) => sorted[Math.max(0, Math.min(sorted.length - 1, Math.floor(frac * sorted.length)))];
        const lo = sorted.length >= 10 ? pick(0.05) : sorted[0];
        const hi = sorted.length >= 10 ? pick(0.95) : sorted[sorted.length - 1];
        useLog = lo > 0 && hi / lo > 1e4;
        if (useLog) {
          yMin = lo / 2;
          yMax = hi * 2;
        } else {
          const pad = Math.max((hi - lo) * 0.15, Math.abs(hi) * 0.02, 1);
          yMin = Math.max(0, lo - pad);
          yMax = hi + pad;
          if (yMin >= yMax) {
            yMin = Math.max(0, hi - 1);
            yMax = hi + 1;
          }
        }
      }
    }

    return {
      tooltip: {
        trigger: "axis", confine: false, appendToBody: true,
        backgroundColor: "rgba(15,23,42,0.95)", borderColor: "rgba(51,65,85,0.5)",
        textStyle: { color: "#e2e8f0", fontSize: 11 },
        extraCssText: "max-width:280px; line-height:1.5;",
        formatter: params => {
          if (!params.length) return "";
          const x = params[0].value[0];
          const xLabel = xMode === "time" ? (x.toFixed(1) + " min") : ("#" + x);
          const lines = ["<b>" + xLabel + "</b>"];
          params.forEach(p => {
            if (!p.seriesName.endsWith("(smooth)") && !p.seriesName.endsWith("(raw)")) {
              lines.push(`<span style="display:inline-block;width:8px;height:8px;background:${p.color};border-radius:2px;margin-right:4px"></span>${p.seriesName}: ${yFmt(p.value[1])}`);
            }
          });
          return lines.join("<br>");
        },
      },
      grid: { top: 8, right: 8, bottom: 22, left: 50, containLabel: false },
      legend: { show: false },
      xAxis: {
        type: "value",
        min: 0, max: xMax * 1.02 || 1,
        axisLabel: { fontSize: 9, color: "#94a3b8",
          formatter: v => xMode === "time" ? v.toFixed(0) : (v === Math.round(v) ? v : "") },
        splitLine: { lineStyle: { color: "#f1f5f9" } },
      },
      yAxis: {
        type: useLog ? "log" : "value",
        min: yMin, max: yMax,
        axisLabel: { fontSize: 9, color: "#94a3b8", formatter: yFmt },
        splitLine: { lineStyle: { color: "#f1f5f9" } },
      },
      series,
    };
  }

  function refreshAll() {
    charts.forEach(c => {
      if (!c.loaded) return;
      if (c.el.parentElement.style.display === "none") return;
      if (!c.chart) return;
      c.chart.setOption(buildOpt(c.block), true);
    });
  }
  window.addEventListener("resize", () => charts.forEach(c => { if (c.chart) c.chart.resize(); }));

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

  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";
    refreshAll();
  }
  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();
  if (taskFilter) {
    taskFilter.addEventListener("input", () => {
      const q = taskFilter.value.trim();
      let re = null;
      if (q) {
        try { re = new RegExp(q, "i"); } catch (_) { re = null; }
      }
      document.querySelectorAll(".chart-cell").forEach(cell => {
        const task = cell.dataset.task;
        const show = !re || re.test(task);
        cell.style.display = show ? "" : "none";
      });
      charts.forEach(c => { if (c.chart) c.chart.resize(); });
      refreshAll();
    });
  }

  async function loadChart(c) {
    if (c.loaded || c.loading) return;
    c.loading = true;
    const task = c.el.dataset.task;
    try {
      const resp = await fetch("/run/" + encodeURIComponent({{ run_id|tojson }}) + "/" + encodeURIComponent(task) + "/chart-data");
      if (!resp.ok) throw new Error("HTTP " + resp.status);
      const data = await resp.json();
      c.block.score_direction = data.score_direction;
      c.block.has_score = data.has_score;
      c.block.has_max_score = data.has_max_score;
      c.block.has_rescaled = data.has_rescaled;
      c.block.runs = [{
        run_id: {{ run_id|tojson }},
        color: data.color,
        created_at: data.created_at,
        submissions: data.submissions || [],
      }];
      c.loaded = true;
      if (!c.chart) {
        c.el.innerHTML = "";
        c.chart = echarts.init(c.el);
      }
      c.chart.setOption(buildOpt(c.block), true);
    } catch (err) {
      c.el.innerHTML = '<div class="h-full flex items-center justify-center text-xs text-rose-400">Failed to load chart</div>';
      console.error("chart load failed", task, err);
    } finally {
      c.loading = false;
    }
  }

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const chart = charts.find(c => c.el === entry.target);
        if (chart) loadChart(chart);
      });
    }, { rootMargin: "600px 0px" });
    charts.forEach(c => observer.observe(c.el));
  } else {
    charts.slice(0, 6).forEach(loadChart);
  }
})();
</script>

{% endblock %}