{{#layout}}
<!-- stats.html (BCH) – usa layout globale + API sharesCurrentRound / roundMarkers -->

<style>
  :root{ --bd:#e6e8eb; --muted:#666; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .wrap{ padding:18px; box-sizing:border-box; max-width:1200px; margin:0 auto; }
  .hero{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
  .hero-logo{ width:56px; height:56px; border-radius:12px; object-fit:cover; border:1px solid var(--bd); }
  .hero-title h2{ margin:0 0 4px 0; font-size:22px; }
  .hero-title .tagline{ color:var(--muted); font-size:14px; }
  .bar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
  .pill{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid var(--bd); border-radius:999px; background:#f2f4f7; font-family:var(--mono); }
  .btn{ padding:6px 12px; border:1px solid var(--bd); border-radius:8px; background:#fff; cursor:pointer; }
  .btn:hover{ background:#f8f9fa; }
  .panel{ border:1px solid var(--bd); border-radius:12px; padding:14px; background:#fff; margin-bottom:16px; }
  .kpi-grid{ display:grid; grid-template-columns: repeat(5, minmax(160px,1fr)); gap:12px; }
  @media (max-width: 1100px){ .kpi-grid{ grid-template-columns: repeat(2, minmax(160px,1fr)); } }
  @media (max-width: 650px){ .kpi-grid{ grid-template-columns: 1fr; } }
  .k{ border:1px solid var(--bd); border-radius:10px; padding:10px 12px; background:#fff; }
  .k .lab{ font-size:12px; color:#666; }
  .k .val{ font-size:18px; font-weight:700; }
  .card{ border:1px solid var(--bd); border-radius:12px; padding:14px; background:#fff; }
  .muted{ color:#777; }
  table{ width:100%; border-collapse:collapse; }
  th, td{ padding:8px 10px; border-bottom:1px solid var(--bd); text-align:left; }
  th{ font-size:12px; color:#555; }
  td{ font-size:14px; }
  .mono{ font-family:var(--mono); }
  .help{ border:1px solid var(--bd); border-radius:12px; background:#fff; margin-top:16px; overflow:hidden; }
  .help summary{ list-style:none; cursor:pointer; padding:12px 14px; font-weight:700; display:flex; justify-content:space-between; }
  .help summary::marker{ display:none; }
  .help .chev{ transition:.12s; }
  .help[open] .chev{ transform: rotate(90deg); }
  .help-content{ padding:0 14px 14px; color:#333; }
  .help code{ background:#f6f8fa; border:1px solid var(--bd); border-radius:6px; padding:1px 6px; }
  .lang-floating{ position: fixed; top:10px; right:12px; z-index: 9999; background:#fff; border:1px solid var(--bd); border-radius:8px; padding:4px 8px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  .lang-floating label{ font-size:12px; color:#666; margin-right:6px; }
  .lang-floating select{ border:0; background:transparent; outline:none; font-weight:600; cursor:pointer; }
  .coh-row{ margin:8px 0 -2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .badge{ font-family:var(--mono); border:1px solid var(--bd); border-radius:999px; padding:2px 8px; background:#f7f8fa; font-size:12px; }
  .ok{ color:#166534; background:#ecfdf5; border-color:#bbf7d0; }
  .warn{ color:#92400e; background:#fffbeb; border-color:#fde68a; }
  .err{ color:#991b1b; background:#fef2f2; border-color:#fecaca; }
</style>

<div class="wrap">
  <div class="hero">
    <img class="hero-logo" src="/static/logo_lmwpool.jpeg" alt="Let me Win!">
    <div class="hero-title">
      <h2 data-i18n="brand.title.stats">Let me Win! — Pool Stats</h2>
      <div class="tagline" data-i18n="brand.tagline">A new crypto mining pool experience</div>
    </div>
  </div>

  <div class="bar">
    <span class="pill">
      <span data-i18n="round.current">Current round:</span>
      <span id="roundBadge" class="mono">—</span>
    </span>
    <button id="refreshBtn" class="btn" data-i18n="btn.refresh">Refresh</button>
  </div>

  <div class="panel">
    <div class="kpi-grid">
      <div class="k">
        <div class="lab" data-i18n="stats.kpi.workers">Active workers</div>
        <div class="val" id="kWorkers">0</div>
      </div>
      <div class="k">
        <div class="lab" data-i18n="stats.kpi.valid">Valid shares</div>
        <div class="val" id="kValid">0</div>
      </div>
      <div class="k">
        <div class="lab" data-i18n="stats.kpi.invalid">Invalid shares</div>
        <div class="val" id="kInvalid">0</div>
      </div>
      <div class="k">
        <div class="lab" data-i18n="stats.kpi.eff">Round average efficiency</div>
        <div class="val" id="kEff">—</div>
      </div>
      <div class="k">
        <div class="lab" data-i18n="stats.kpi.hash">Pool hashrate (API)</div>
        <div class="val" id="kHash">0.00 H/s</div>
      </div>
    </div>
    <div class="coh-row">
      <span class="muted" style="font-size:12px">Σ workers vs pool:</span>
      <span id="cohBadge" class="badge">—</span>
      <span id="cohDetail" class="muted" style="font-size:12px"></span>
    </div>
  </div>

  <div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px">
      <div style="font-weight:700" data-i18n="stats.top5.title">Top 5 workers by hashrate (current round)</div>
      <a href="/workers" class="muted" style="font-size:12px" data-i18n="stats.link.workers">go to Workers</a>
    </div>
    <div id="topWrap">
      <table>
        <thead>
          <tr>
            <th data-i18n="workers.th.worker">Worker</th>
            <th data-i18n="workers.th.hash">Hashrate (API)</th>
            <th data-i18n="workers.th.valid">Valid</th>
            <th data-i18n="workers.th.invalid">Invalid</th>
            <th data-i18n="workers.th.eff">Efficiency</th>
          </tr>
        </thead>
        <tbody id="topBody">
          <tr><td colspan="5" class="muted" data-i18n="common.noData">No data</td></tr>
        </tbody>
      </table>
    </div>
    <div class="muted" id="lastUpd" style="margin-top:8px;font-size:12px" data-i18n="stats.kpi.updated">Last update</div>
  </div>

  <details class="help">
    <summary>
      <span data-i18n="home.metrics.title">Metrics glossary</span>
      <span class="chev">▶</span>
    </summary>
    <div class="help-content">
      <p class="muted" data-i18n="home.metrics.desc">How numbers are computed across the app.</p>
      <h4 data-i18n="home.metrics.current.title">Current round</h4>
      <p>
        <strong>Pool hashrate (API)</strong> viene preso direttamente dall'endpoint
        <code>/api/sharesCurrentRound</code>, che usa Σ diff_valid e le difficoltà VarDiff correnti.
        Il payout resta comunque basato su Σ diff_valid per round.
      </p>
      <p data-i18n="home.metrics.current.hashrate">
        Per-worker hashrate in questa pagina corrisponde a <code>hashrate_display</code> esposto dall'API,
        per mantenere coerenza con il backend senza ricalcoli lato browser.
      </p>
    </div>
  </details>
</div>

<div class="lang-floating">
  <label for="langSel">🌐</label>
  <select id="langSel"><option value="en">EN</option><option value="it">IT</option></select>
</div>

<script>
  const I18N = {
    lang:'en', dict:{},
    async set(lang){
      this.lang=lang; localStorage.setItem('lang',lang);
      try{
        const r=await fetch('/static/i18n/'+lang+'.json',{cache:'no-store'});
        this.dict=r.ok? await r.json():{};
        document.querySelectorAll('[data-i18n]').forEach(el=>{
          const k=el.getAttribute('data-i18n'); if(k&&this.dict[k]) el.textContent=this.dict[k];
        });
      }catch(_){}
    },
    t(k,fb){ return (this.dict && this.dict[k]) || fb || k; }
  };
  function toNum(x){ const n=Number(x); return Number.isFinite(n)?n:0; }
  function fmtPct(v){ const x=Number(v); return Number.isFinite(x)? (x*100).toFixed(1)+'%':'—'; }
  function fmtHash(hs){
    const x = Number(hs)||0;
    if (x >= 1e12) return (x/1e12).toFixed(2)+' TH/s';
    if (x >= 1e9 ) return (x/1e9 ).toFixed(2)+' GH/s';
    if (x >= 1e6 ) return (x/1e6 ).toFixed(2)+' MH/s';
    if (x >= 1e3 ) return (x/1e3 ).toFixed(2)+' kH/s';
    return x.toFixed(2)+' H/s';
  }
</script>

<script>
(async function(){
  const sel=document.getElementById('langSel');
  const urlLang=new URLSearchParams(location.search).get('lang');
  const stored=localStorage.getItem('lang');
  const nav=(navigator.language||'en').slice(0,2).toLowerCase();
  const allowed=['en','it'];
  const init=allowed.includes(urlLang||'')?urlLang:(allowed.includes(stored||'')?stored:(allowed.includes(nav)?nav:'en'));
  sel.value=init; sel.addEventListener('change',()=>I18N.set(sel.value)); await I18N.set(init);

  const badge=document.getElementById('roundBadge');
  const refreshBtn=document.getElementById('refreshBtn');
  const topBody=document.getElementById('topBody');
  const lastUpd=document.getElementById('lastUpd');
  const kWorkers=document.getElementById('kWorkers');
  const kValid=document.getElementById('kValid');
  const kInvalid=document.getElementById('kInvalid');
  const kEff=document.getElementById('kEff');
  const kHash=document.getElementById('kHash');
  const cohBadge=document.getElementById('cohBadge');
  const cohDetail=document.getElementById('cohDetail');

  async function getJSON(u){ try{ const r=await fetch(u,{cache:'no-store'}); return r.ok? await r.json() : {}; }catch(_){ return {}; } }

  function setCohBadge(poolHs, sumWorkersHs){
    const p = toNum(poolHs);
    const r = toNum(sumWorkersHs);
    if (p <= 0 || r <= 0){
      cohBadge.className = 'badge warn';
      cohBadge.textContent = 'N/A';
      cohDetail.textContent = 'pool=0 · Σworkers=0';
      return;
    }
    const delta = p - r;
    const rel = p ? (delta/p) : 0;
    const absRel = Math.abs(rel);
    cohBadge.className='badge';
    let cls='ok', label='OK';
    if (absRel <= 0.05){ cls='ok'; label='OK'; }
    else if (absRel <= 0.15){ cls='warn'; label='~'; }
    else { cls='err'; label='!'; }
    cohBadge.classList.add(cls);
    cohBadge.textContent = `${label} ${(rel*100).toFixed(2)}%`;
    cohDetail.textContent = `pool=${fmtHash(p)} · Σworkers=${fmtHash(r)}`;
  }

  async function load(){
    try{
      const mk = await getJSON('/api/roundMarkers');
      badge.textContent = (mk && mk.current!=null) ? ('#'+mk.current) : '—';
    }catch(_){ badge.textContent='—'; }

    try{
      const cur = await getJSON('/api/sharesCurrentRound');
      const workersMap = cur.workers || {};
      const workersArr = Object.keys(workersMap).map(k=>({wid:k, ...workersMap[k]}));

      // KPI
      kWorkers.textContent = String(workersArr.length);
      const totV = toNum(cur?.totals?.valid);
      const totI = toNum(cur?.totals?.invalid);
      kValid.textContent   = String(totV || 0);
      kInvalid.textContent = String(totI || 0);
      const effRound = (typeof cur?.totals?.efficiency === 'number')
        ? cur.totals.efficiency
        : ((totV+totI)>0 ? (totV/(totV+totI)) : null);
      kEff.textContent = (effRound!=null) ? fmtPct(effRound) : '—';
      kHash.textContent = cur.pool_hashrate_display || '0.00 H/s';

      // Σ per-worker (coerenza)
      let sumWorkersHs = 0;
      workersArr.forEach(w => {
        const hs = toNum(w.hashrate_hs);
        if (hs > 0) sumWorkersHs += hs;
      });
      const poolHs = toNum(cur.pool_hashrate_hs);
      setCohBadge(poolHs, sumWorkersHs);

      // Top 5 per hashrate_hs
      workersArr.forEach(w => { w.__hs = toNum(w.hashrate_hs); });
      workersArr.sort((a,b)=> b.__hs - a.__hs);
      const rows = workersArr.slice(0,5).map(x=>{
        const eff = (typeof x.efficiency==='number')
          ? x.efficiency
          : ((toNum(x.valid)+toNum(x.invalid))>0 ? (toNum(x.valid)/(toNum(x.valid)+toNum(x.invalid))) : null);
        return `
          <tr>
            <td class="mono">${x.wid}</td>
            <td class="mono">${x.hashrate_display || fmtHash(x.__hs)}</td>
            <td>${toNum(x.valid)}</td>
            <td>${toNum(x.invalid)}</td>
            <td>${eff!=null? fmtPct(eff) : '—'}</td>
          </tr>`;
      }).join('');
      topBody.innerHTML = rows || `<tr><td colspan="5" class="muted" data-i18n="common.noData">${I18N.t('common.noData','No data')}</td></tr>`;
      lastUpd.textContent = new Date().toLocaleString() + ' — ' + I18N.t('stats.kpi.updated','Last update');
    }catch(_){
      topBody.innerHTML = `<tr><td colspan="5" class="muted" data-i18n="common.noData">${I18N.t('common.noData','No data')}</td></tr>`;
      cohBadge.textContent='—'; cohBadge.className='badge'; cohDetail.textContent='';
    }
  }

  refreshBtn.addEventListener('click', load);
  await load();
})();
</script>

{{/layout}}