{% extends "base.html" %}
{% block content %}
{% if not race %}
<div class="card">
  <div class="card-title">Race odds</div>
  <p>Not enough chain history yet, check back after a few blocks.</p>
</div>
{% else %}
{% if not mining_enabled %}
<div class="card" style="border-color:var(--rule);color:var(--muted)">
  Not building right now: mining is off. Still fully validating and
  syncing every block. Turn on in <a href="/settings">Settings</a>.
</div>
{% endif %}
<div class="stats">
  <div class="stat">
    <div class="stat-label">Odds</div>
    {% if waiting_zero_odds %}
    <div class="stat-value" id="odds-pct-val">Not mining</div>
    <div class="stat-sub" id="odds-pct-sub">odds are 0%, watching before building</div>
    {% else %}
    <div class="stat-value" id="odds-pct-val">{{ ("%.1f"|format(race.odds_pct) ~ "%") if race.odds_pct is not none else "--" }}</div>
    <div class="stat-sub" id="odds-pct-sub">{% set w = "%g"|format(race.draw_window) %}{% if race.odds_pct is none %}no blocks to judge from yet{% elif race.odds_pct == 0 %}never inside the {{ w }}s draw window{% elif race.in_draw_pct < 95 %}in the {{ w }}s draw window on {{ "%.0f"|format(race.in_draw_pct) }}% of heights{% elif race.entrants < 1.05 %}only builder inside the {{ w }}s draw window{% else %}{{ "%.1f"|format(race.entrants) }} builders inside the {{ w }}s draw window{% endif %}</div>
    {% endif %}
  </div>
  <div class="stat">
    <div class="stat-label">Blocks won</div>
    <div class="stat-value" id="win-share-val">{{ ("%.1f"|format(race.win_share_pct) ~ "%") if race.win_share_pct is not none else "--" }}</div>
    <div class="stat-sub" id="win-share-sub">{{ "%d of the last %d"|format(race.own_blocks, race.window|length) }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Self pace</div>
    <div class="stat-value" id="own-median-val">{{ ("%.1f"|format(race.own_pace) ~ "s") if race.own_pace is not none else "--" }}</div>
    <div class="stat-sub" id="own-median-sub">{{ "median interval of blocks we built" if race.own_pace_measured else ("estimated from calibration, no build finished yet" if own_is_estimate else "VDF clock: no block of ours in this window") }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Window median</div>
    <div class="stat-value" id="window-median-val">{{ "%.1f"|format(race.median) }}s</div>
    <div class="stat-sub" id="window-count">{{ race.window|length }} blocks</div>
  </div>
  <div class="stat">
    <div class="stat-label">Deepest reorg</div>
    <div class="stat-value" id="reorg-deepest">{{ reorgs.deepest if reorgs.deepest else "none" }}</div>
    <div class="stat-sub" id="reorg-count">
      {% if reorgs.count %}{{ reorgs.count }} seen, one-block ties not counted
      {% else %}nothing deeper than a tie so far{% endif %}
    </div>
  </div>
  {% if hardware %}
  <div class="stat" style="flex-basis:100%">
    <div class="stat-label">Hardware</div>
    <div class="stat-value" style="font-size:.9rem">{{ hardware.cpu }} &middot; {{ hardware.os }}</div>
  </div>
  {% endif %}
</div>

<div class="card">
  <div class="card-title">Block-to-block time, last {{ race.window|length }} blocks</div>
  <div class="table-wrap">
  <svg id="odds-svg" viewBox="0 0 {{ chart.width }} {{ chart.height }}" width="100%" height="{{ chart.height }}"
       role="img" aria-label="Block interval over recent blocks, with self's median build time">
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.plot_top }}"
          x2="{{ chart.points[0].x if chart.points else 0 }}" y2="{{ chart.plot_bottom }}"
          stroke="var(--rule)" stroke-width="1"/>
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.plot_bottom }}"
          x2="{{ chart.width }}" y2="{{ chart.plot_bottom }}" stroke="var(--rule)" stroke-width="1"/>

    {% for t in chart.ticks %}
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ t.y }}"
          x2="{{ chart.width }}" y2="{{ t.y }}" stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>
    <text x="4" y="{{ t.y + 3 }}" font-size="10" fill="var(--ink-dim)">{{ "%.0f"|format(t.value) }}s{{ t.suffix }}</text>
    {% endfor %}

    {# Height axis. The server draws it plain: gridlines and labels, no
       grips, since without JS there is nothing to drag them with. #}
    {% for t in chart.x_ticks %}
    {% set tx = chart.pad_l + t.frac * chart.plot_w %}
    {% if not loop.first and not loop.last %}
    <line x1="{{ tx }}" y1="{{ chart.plot_top }}" x2="{{ tx }}" y2="{{ chart.plot_bottom }}"
          stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>
    {% endif %}
    <text x="{{ tx }}" y="{{ chart.plot_bottom + 17 }}" font-size="10" fill="var(--ink-dim)"
          text-anchor="{{ 'start' if loop.first else ('end' if loop.last else 'middle') }}">{{ t.height }}</text>
    {% endfor %}

    {% for p in chart.points %}
    {% if not loop.first %}
    {% set prev = chart.points[loop.index0 - 1] %}
    <line x1="{{ prev.x }}" y1="{{ prev.y }}" x2="{{ p.x }}" y2="{{ p.y }}"
          stroke="{{ p.color }}" stroke-width="1.75">
      <title>Block {{ p.height }}: {{ "%.1f"|format(p.seconds) }}s{{ ", " ~ p.builder if p.builder }}{{ " (off scale, clipped to the edge)" if p.clipped }}</title>
    </line>
    {% endif %}
    {% endfor %}

    <!-- Reference lines render last (on top of the data) so their labels
         stay legible over whatever color the data line happens to be
         passing through at that height. -->
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.median_y }}"
          x2="{{ chart.width }}" y2="{{ chart.median_y }}"
          stroke="var(--ink-dim)" stroke-width="1.25" stroke-dasharray="4,3"/>
    <text x="{{ chart.width - 4 }}" y="{{ chart.median_y - 4 }}" font-size="10" font-weight="600"
          fill="var(--ink-dim)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">window median {{ "%.0f"|format(race.median) }}s</text>

    {% if chart.own_y is not none %}
    <line x1="{{ chart.points[0].x if chart.points else 0 }}" y1="{{ chart.own_y }}"
          x2="{{ chart.width }}" y2="{{ chart.own_y }}"
          stroke="var(--accent)" stroke-width="1.5" stroke-dasharray="5,4"/>
    <text x="{{ chart.width - 4 }}" y="{{ chart.own_y - 4 }}" font-size="10" font-weight="600"
          fill="var(--accent)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">self pace{{ " (off scale)" if chart.own_clipped }}</text>
    {% endif %}
  </svg>
  </div>
  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:.6rem">
  <div id="odds-legend" style="display:flex;flex-wrap:wrap;gap:.4rem 1rem">
    {% for entry in chart.legend or [] %}
    <span style="display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink-dim)">
      <span style="width:9px;height:9px;border-radius:50%;background:{{ entry.color }};display:inline-block"></span>
      {% if entry.label %}<span class="hash-short" style="display:inline;max-width:11ch" title="{{ entry.label }}">{{ entry.label[:10] }}&hellip;</span>{% else %}<span>Other</span>{% endif %}
      <span style="color:var(--muted)">({{ entry.count }})</span>
    </span>
    {% endfor %}
  </div>
  <button type="button" id="odds-zoom-reset" class="btn-sm" style="display:none">Reset spacing</button>
  </div>
  <p class="stat-sub" style="margin-top:.4rem">
    <span id="odds-axis-hint" style="display:none">Drag a marker along the bottom axis to
    give the blocks beside it more room; every block stays on the chart, so spreading one
    stretch out squeezes its neighbour. </span>
    Block interval is a proxy for the winning builder's real build time.
  </p>
</div>
<style>
  /* The mark is a slider thumb, so it takes the cursor and the emphasis
     of one. Held state is set while dragging, since the pointer is
     captured on the svg and can travel well away from the mark itself. */
  .x-grip { cursor: ew-resize; }
  .x-grip text { fill: var(--ink-dim); }
  .x-grip-thumb { fill: var(--ink-dim); }
  .x-grip-line { stroke: var(--rule-lt); stroke-width: 0.5; opacity: .6; }
  .x-grip rect, .x-grip text, .x-grip line { transition: fill .12s, stroke .12s, opacity .12s; }
  .x-grip:hover .x-grip-thumb, .x-grip.is-held .x-grip-thumb,
  .x-grip:hover text, .x-grip.is-held text { fill: var(--accent); }
  .x-grip:hover .x-grip-line, .x-grip.is-held .x-grip-line { stroke: var(--accent); opacity: .45; }
</style>
<script id="odds-initial" type="application/json">{{ {"chart": chart, "median": race.median}|tojson }}</script>
<script>
(function () {
  function fmt1(n) { return n.toFixed(1); }
  function fmt0(n) { return Math.round(n); }

  // ---- height-axis spacing -------------------------------------------
  // The axis ticks double as handles. Dragging one moves where that block
  // height sits on screen, never which block it names, so the blocks on
  // either side of it gain or lose width. Nothing is ever hidden: the
  // whole window stays drawn, the space it is drawn across is just
  // redistributed, which is why only x is recomputed here and y comes
  // straight from the server as before.
  //
  // Positions are fractions of the plot width, so they keep meaning as
  // the window slides and the labels come to name different blocks.
  const STORE_KEY = "lapsecoin.odds.x_grips";
  // Minimum gap between two handles, as a fraction of the plot width.
  // Set by the handle's own width (40 units of an 814-unit plot): below
  // that two of them overlap, so a squeezed segment would end up with
  // handles you cannot tell apart or grab to undo it.
  const MIN_GAP = 0.05;
  let grips = null;      // fractions, one per x tick, or null for "even"
  let dragging = -1;
  let lastChart = null, lastMedian = null;

  function defaultGrips(chart) {
    return (chart.x_ticks || []).map(function (t) { return t.frac; });
  }

  function draggable(chart) {
    // Two ticks are the pinned ends, so there is no interior lever and
    // nothing to drag. Short windows land here (see _X_TICK_MIN_BLOCKS).
    return (chart.x_ticks || []).length > 2;
  }

  function isDefault(chart) {
    if (!grips) return true;
    const d = defaultGrips(chart);
    return grips.length === d.length &&
           grips.every(function (g, i) { return Math.abs(g - d[i]) < 1e-6; });
  }

  function loadGrips(chart) {
    const d = defaultGrips(chart);
    try {
      const raw = window.localStorage.getItem(STORE_KEY);
      if (raw) {
        const saved = JSON.parse(raw);
        // A saved arrangement only applies to an axis of the same shape.
        // The tick count changes when the window is short or crosses a
        // vdf_iterations regime, and a stale one would map onto the wrong
        // segments, so it is dropped rather than stretched to fit.
        if (Array.isArray(saved) && saved.length === d.length &&
            saved.every(function (v) { return typeof v === "number" && v >= 0 && v <= 1; })) {
          return saved;
        }
      }
    } catch (e) { /* private window, blocked storage: even spacing is fine */ }
    return d;
  }

  function saveGrips(chart) {
    try {
      if (isDefault(chart)) window.localStorage.removeItem(STORE_KEY);
      else window.localStorage.setItem(STORE_KEY, JSON.stringify(grips));
    } catch (e) { /* not worth failing the render over */ }
  }

  function xOf(chart, idx) {
    const ticks = chart.x_ticks || [];
    if (!grips || ticks.length < 2) {
      const n = chart.points.length;
      return chart.pad_l + (idx / Math.max(n - 1, 1)) * chart.plot_w;
    }
    let i = ticks.length - 2;
    for (let k = 0; k < ticks.length - 1; k++) {
      if (idx <= ticks[k + 1].idx) { i = k; break; }
    }
    const span = ticks[i + 1].idx - ticks[i].idx;
    const t = span ? (idx - ticks[i].idx) / span : 0;
    return chart.pad_l + (grips[i] + t * (grips[i + 1] - grips[i])) * chart.plot_w;
  }

  function renderAxis(chart) {
    const ticks = chart.x_ticks || [];
    const canDrag = draggable(chart);
    let s = "";
    ticks.forEach(function (t, i) {
      const x = chart.pad_l + grips[i] * chart.plot_w;
      const last = i === ticks.length - 1;
      const end = i === 0 || last;
      if (!end && !canDrag) {
        s += `<line x1="${x}" y1="${chart.plot_top}" x2="${x}" y2="${chart.plot_bottom}" stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>`;
      }
      const anchor = i === 0 ? "start" : (last ? "end" : "middle");
      const b = chart.plot_bottom;
      if (end || !canDrag) {
        s += `<text x="${x}" y="${b + 17}" font-size="10" fill="var(--ink-dim)" text-anchor="${anchor}">${t.height}</text>`;
        return;
      }
      // One shape per handle: a rounded bar straddling the axis line,
      // which is what a slider thumb on a track looks like. Everything
      // else that was here (arrows, a pill, bolder labels) was signal
      // piled on signal, and four marks per handle across three handles
      // is a cluttered axis.
      //
      // Its own gridline is inside the group, so hovering the thumb lights
      // the line it moves and the connection needs no explaining. The
      // transparent rect is the hit area; the labels stay uniform.
      const top = chart.plot_top;
      s += `<g class="x-grip${i === dragging ? " is-held" : ""}" data-grip="${i}">` +
           `<line class="x-grip-line" x1="${x}" y1="${top}" x2="${x}" y2="${b}"/>` +
           // The whole line drags, but at 0.5 units of stroke it was a
           // hairline to aim at. These give it a real target: a narrow
           // band down the line itself, and a generous pad at each end
           // where the thumbs are and where the pointer goes first.
           //
           // The band is kept narrow on purpose. It sits over the data,
           // so every unit of width it takes is a block whose hover
           // tooltip it swallows; 13 units is about 1.5% of the plot.
           `<rect x="${x - 6.5}" y="${top}" width="13" height="${b - top}" fill="transparent"/>` +
           `<rect x="${x - 16}" y="${b - 6}" width="32" height="24" fill="transparent"/>` +
           `<rect x="${x - 16}" y="${top - 7}" width="32" height="14" fill="transparent"/>` +
           `<rect class="x-grip-thumb" x="${x - 1.75}" y="${top - 5}" width="3.5" height="10" rx="1.75"/>` +
           `<rect class="x-grip-thumb" x="${x - 1.75}" y="${b - 5}" width="3.5" height="10" rx="1.75"/>` +
           `<text x="${x}" y="${b + 17}" font-size="10" text-anchor="middle" pointer-events="none">${t.height}</text>` +
           `<title>Drag to give the blocks either side of ${t.height} more or less room</title></g>`;
    });
    return s;
  }

  function renderChart(chart, medianVal) {
    if (!chart.points.length) return "";
    const x0 = chart.pad_l;
    let s = "";
    s += `<line x1="${x0}" y1="${chart.plot_top}" x2="${x0}" y2="${chart.plot_bottom}" stroke="var(--rule)" stroke-width="1"/>`;
    s += `<line x1="${x0}" y1="${chart.plot_bottom}" x2="${chart.width}" y2="${chart.plot_bottom}" stroke="var(--rule)" stroke-width="1"/>`;
    chart.ticks.forEach(function (t) {
      s += `<line x1="${x0}" y1="${t.y}" x2="${chart.width}" y2="${t.y}" stroke="var(--rule-lt)" stroke-width="0.5" opacity="0.6"/>`;
      s += `<text x="4" y="${t.y + 3}" font-size="10" fill="var(--ink-dim)">${fmt0(t.value)}s${t.suffix || ""}</text>`;
    });
    s += renderAxis(chart);
    let prevX = xOf(chart, chart.points[0].idx);
    chart.points.forEach(function (p, i) {
      const x = xOf(chart, p.idx);
      if (i > 0) {
        const prev = chart.points[i - 1];
        const label = p.builder ? ", " + p.builder : "";
        const off = p.clipped ? " (off scale, clipped to the edge)" : "";
        s += `<line x1="${prevX}" y1="${prev.y}" x2="${x}" y2="${p.y}" stroke="${p.color}" stroke-width="1.75">` +
             `<title>Block ${p.height}: ${fmt1(p.seconds)}s${label}${off}</title></line>`;
      }
      prevX = x;
    });
    // Reference lines/labels last, on top of the data lines, see the
    // matching comment in the server-rendered SVG above.
    s += `<line x1="${x0}" y1="${chart.median_y}" x2="${chart.width}" y2="${chart.median_y}" stroke="var(--ink-dim)" stroke-width="1.25" stroke-dasharray="4,3"/>`;
    s += `<text x="${chart.width - 4}" y="${chart.median_y - 4}" font-size="10" font-weight="600" fill="var(--ink-dim)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">window median ${fmt0(medianVal)}s</text>`;
    if (chart.own_y !== null) {
      s += `<line x1="${x0}" y1="${chart.own_y}" x2="${chart.width}" y2="${chart.own_y}" stroke="var(--accent)" stroke-width="1.5" stroke-dasharray="5,4"/>`;
      s += `<text x="${chart.width - 4}" y="${chart.own_y - 4}" font-size="10" font-weight="600" fill="var(--accent)" text-anchor="end" paint-order="stroke" stroke="var(--paper)" stroke-width="3">self median${chart.own_clipped ? " (off scale)" : ""}</text>`;
    }
    return s;
  }

  function paint(chart, medianVal) {
    lastChart = chart; lastMedian = medianVal;
    if (!grips || grips.length !== (chart.x_ticks || []).length) {
      grips = loadGrips(chart);
    }
    const svg = document.getElementById("odds-svg");
    if (svg) svg.innerHTML = renderChart(chart, medianVal);
    const reset = document.getElementById("odds-zoom-reset");
    if (reset) reset.style.display = (draggable(chart) && !isDefault(chart)) ? "" : "none";
    const hint = document.getElementById("odds-axis-hint");
    if (hint) hint.style.display = draggable(chart) ? "inline" : "none";
  }

  const svgEl = document.getElementById("odds-svg");
  if (svgEl) {
    svgEl.addEventListener("pointerdown", function (ev) {
      const g = ev.target.closest ? ev.target.closest("[data-grip]") : null;
      if (!g || !lastChart) return;
      dragging = parseInt(g.getAttribute("data-grip"), 10);
      // Captured on the svg, not the grip: every pointermove repaints and
      // throws the grip element away, so capture has to sit on something
      // that survives the repaint.
      svgEl.setPointerCapture(ev.pointerId);
      ev.preventDefault();
      paint(lastChart, lastMedian);  // show the held state before any move
    });
    svgEl.addEventListener("pointermove", function (ev) {
      if (dragging < 0 || !lastChart) return;
      const rect = svgEl.getBoundingClientRect();
      const scale = rect.width / lastChart.width;  // viewBox units per CSS px
      const frac = ((ev.clientX - rect.left) / scale - lastChart.pad_l) / lastChart.plot_w;
      const lo = grips[dragging - 1] + MIN_GAP;
      const hi = grips[dragging + 1] - MIN_GAP;
      grips[dragging] = Math.min(Math.max(frac, lo), hi);
      paint(lastChart, lastMedian);
    });
    function endDrag() {
      if (dragging < 0) return;
      dragging = -1;
      if (lastChart) { saveGrips(lastChart); paint(lastChart, lastMedian); }
    }
    svgEl.addEventListener("pointerup", endDrag);
    svgEl.addEventListener("pointercancel", endDrag);
  }

  const resetEl = document.getElementById("odds-zoom-reset");
  if (resetEl) {
    resetEl.addEventListener("click", function () {
      if (!lastChart) return;
      grips = defaultGrips(lastChart);
      saveGrips(lastChart);
      paint(lastChart, lastMedian);
    });
  }

  function renderLegend(legend) {
    if (!legend || !legend.length) return "";
    return legend.map(function (entry) {
      const labelHtml = entry.label
        ? `<span class="hash-short" style="display:inline;max-width:11ch" title="${entry.label}">${entry.label.slice(0, 10)}&hellip;</span>`
        : "<span>Other</span>";
      return `<span style="display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink-dim)">` +
             `<span style="width:9px;height:9px;border-radius:50%;background:${entry.color};display:inline-block"></span>` +
             `${labelHtml}<span style="color:var(--muted)">(${entry.count})</span></span>`;
    }).join("");
  }

  async function refresh() {
    try {
      const res = await fetch("/api/odds", {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const data = await res.json();
      if (!data) return;

      if (data.waiting_zero_odds) {
        document.getElementById("odds-pct-val").textContent = "Not mining";
        document.getElementById("odds-pct-sub").textContent =
          "odds are 0%, watching before building";
      } else {
        document.getElementById("odds-pct-val").textContent =
          data.odds_pct !== null ? fmt1(data.odds_pct) + "%" : "--";
        const win = data.draw_window + "s draw window";
        document.getElementById("odds-pct-sub").textContent =
          data.odds_pct === null ? "no blocks to judge from yet"
            : data.odds_pct === 0 ? "never inside the " + win
            : data.in_draw_pct < 95
                ? "in the " + win + " on " + Math.round(data.in_draw_pct) + "% of heights"
            : data.entrants < 1.05 ? "only builder inside the " + win
            : fmt1(data.entrants) + " builders inside the " + win;
      }
      document.getElementById("win-share-val").textContent =
        data.win_share_pct !== null ? fmt1(data.win_share_pct) + "%" : "--";
      document.getElementById("win-share-sub").textContent =
        data.own_blocks + " of the last " + data.window_len;
      document.getElementById("own-median-val").textContent =
        data.own_pace !== null ? fmt1(data.own_pace) + "s" : "--";
      document.getElementById("own-median-sub").textContent =
        data.own_pace_measured ? "median interval of blocks we built"
          : (data.own_is_estimate ? "estimated from calibration, no build finished yet"
                                  : "VDF clock: no block of ours in this window");
      document.getElementById("window-median-val").textContent = fmt1(data.median) + "s";
      document.getElementById("window-count").textContent = data.window_len + " blocks";

      const r = data.reorgs || {deepest: 0, count: 0};
      document.getElementById("reorg-deepest").textContent = r.deepest || "none";
      document.getElementById("reorg-count").textContent = r.count
        ? r.count + " seen, one-block ties not counted"
        : "nothing deeper than a tie so far";

      // A drag in progress owns the chart until it is released, so a
      // refresh landing mid-drag doesn't yank the grip out from under it.
      if (dragging < 0) paint(data.chart, data.median);

      const legendEl = document.getElementById("odds-legend");
      if (legendEl) legendEl.innerHTML = renderLegend(data.chart.legend);
    } catch (e) { /* keep last good render on a transient failure */ }
  }

  // Paint once from what the server already embedded, so a saved spacing
  // is applied immediately rather than after the first fetch comes back.
  try {
    const seed = document.getElementById("odds-initial");
    if (seed) { const d = JSON.parse(seed.textContent); paint(d.chart, d.median); }
  } catch (e) { /* the fetch below covers it */ }
  refresh();
  setInterval(refresh, 6000);
})();
</script>
{% endif %}
{% endblock %}