{{#layout}}
<!-- workers.html (BCH) – semplificato – usa solo i valori hashrate dell'API, integrato con layout.html -->

<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:#666; 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); }
  .card{ border:1px solid var(--bd); border-radius:12px; padding:14px; background:#fff; }
  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; vertical-align:top; }
  .mono{ font-family:var(--mono); }
  .muted{ color:#777; }
  .btn{ padding:6px 10px; border:1px solid var(--bd); border-radius:8px; background:#fff; cursor:pointer; }
  .btn:hover{ background:#f8f9fa; }
  .error{ margin:10px 0; padding:10px; border:1px solid #f2b; background:#fff5f8; border-radius:8px; color:#a00; }
  .expand-row td{ background:#fcfdff; }
  .drawer{ border:1px solid var(--bd); border-radius:10px; padding:10px; margin:6px 0; background:#fff; }
  .drawer-grid{ display:grid; grid-template-columns: repeat(4, minmax(140px,1fr)); gap:10px; }
  @media (max-width: 900px){ .drawer-grid{ grid-template-columns: repeat(2, minmax(140px,1fr)); } }
  @media (max-width: 520px){ .drawer-grid{ grid-template-columns: 1fr; } }
  .kv{ border:1px solid var(--bd); border-radius:8px; padding:8px; background:#fff; }
  .kv .lab{ font-size:12px; color:#555; }
  .kv .val{ font-weight:700; }
  .badge{ display:inline-block; font-size:11px; padding:2px 6px; border:1px solid var(--bd); border-radius:999px; background:#f6f8fa; margin-left:6px; }
  .spinner{ display:inline-block; width:14px; height:14px; border:2px solid #ccc; border-top-color:#2b6cb0; border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .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; }
  .raw-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .raw-table th,.raw-table td{ padding:6px 8px; border-bottom:1px solid var(--bd); text-align:left; }
</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>Workers</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="workers.currentRound">Current round:</span>
      <span id="roundBadge" class="mono">—</span>
    </span>
    <button id="refreshBtn" class="btn" type="button" data-i18n="common.refresh">Refresh</button>
  </div>

  <div id="err" class="error" style="display:none"></div>

  <div class="card" style="margin-bottom:14px; overflow:auto">
    <table>
      <thead>
        <tr>
          <th data-i18n="workers.table.worker">Worker</th>
          <th data-i18n="workers.table.valid">Valid</th>
          <th data-i18n="workers.table.invalid">Invalid</th>
          <th data-i18n="workers.table.efficiency">Efficiency</th>
          <th data-i18n="workers.table.hashrate">Hashrate (API)</th>
          <th data-i18n="workers.table.diffSetting">diff_setting</th>
          <th data-i18n="workers.table.windowSeconds">window (s)</th>
          <th data-i18n="workers.table.round">Round</th>
          <th data-i18n="workers.detail">Detail</th>
        </tr>
      </thead>
      <tbody id="wBody">
        <tr><td colspan="9" class="muted" data-i18n="workers.noWorkers">No workers</td></tr>
      </tbody>
    </table>
  </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 (Workers)</h4>
      <p>
        <strong>Hashrate (API)</strong> viene calcolato dal backend partendo dalle shares e dalle difficoltà VarDiff
        (diff_valid e diff_setting). Il payout è comunque basato su Σ diff_valid per round, non sull'hashrate mostrato.
      </p>
      <p data-i18n="home.metrics.current.eff">
        Worker efficiency = <code>valid / (valid + invalid)</code>. <code>diff_setting</code> è la difficoltà target VarDiff
        corrente del worker, aggiornata dal pool quando necessario.
      </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>
  // I18N minimale
  const I18N = {
    lang:'en',
    dict:{},
    async set(lang){
      try{
        this.lang = lang;
        localStorage.setItem('lang', lang);
        const r = await fetch('/static/i18n/'+lang+'.json', {cache:'no-store'});
        this.dict = r.ok ? await r.json() : {};
        this.apply();
      }catch(e){ console.warn('[i18n] load failed', e); }
    },
    t(k, fb){ return (this.dict && this.dict[k]) || fb || k; },
    apply(){
      document.querySelectorAll('[data-i18n]').forEach(el=>{
        const k = el.getAttribute('data-i18n');
        if (k && this.dict[k]) el.textContent = this.t(k, el.textContent);
      });
    }
  };
</script>

<script>
(function(){
  const $  = (sel) => document.querySelector(sel);
  const $$ = (sel) => Array.from(document.querySelectorAll(sel));

  const roundBadge = $('#roundBadge');
  const refreshBtn = $('#refreshBtn');
  const errBox     = $('#err');
  const tbody      = $('#wBody');

  function showErr(msg){
    errBox.textContent = msg;
    errBox.style.display = 'block';
  }
  function clearErr(){
    errBox.textContent = '';
    errBox.style.display = 'none';
  }
  function fmtPct(p){
    const x = Number(p);
    return Number.isFinite(x) ? (x*100).toFixed(2)+'%' : '—';
  }
  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(0)+' H/s';
  }
  async function getJSON(url){
    const r = await fetch(url, {cache:'no-store'});
    if (!r.ok) throw new Error('HTTP '+r.status+' '+url);
    return r.json();
  }
  function computeWindowSeconds(w){
    const first = Number(w.first_ts||0);
    const last  = Number(w.last_ts||0);
    if (last > 0 && first > 0 && last >= first){
      return Math.max(60, last - first);
    }
    const win = Number(w.window_seconds||0);
    return (Number.isFinite(win) && win > 0) ? Math.max(30, Math.min(win, 3600)) : 60;
  }

  function drawerTemplate(){
    const div = document.createElement('tr');
    div.className = 'expand-row';
    div.innerHTML = `
      <td colspan="9">
        <div class="drawer">
          <div class="drawer-grid" id="drawerGrid">
            <div class="kv"><div class="lab">Ultimi round (caricamento)</div><div class="val mono"><span class="spinner"></span></div></div>
          </div>
          <div id="drawerBody" style="margin-top:8px">
            <table class="raw-table">
              <thead>
                <tr>
                  <th>Height</th>
                  <th>Dur (s)</th>
                  <th>Hashrate</th>
                  <th>Valid</th>
                  <th>Invalid</th>
                  <th>Eff</th>
                  <th>Metodo</th>
                </tr>
              </thead>
              <tbody id="roundRows">
                <tr><td colspan="7" class="muted">Loading…</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </td>
    `;
    return div;
  }

  async function loadWorkerRoundsInto(drawerRow, wid){
    const rowsTbody = drawerRow.querySelector('#roundRows');
    const grid      = drawerRow.querySelector('#drawerGrid');
    try{
      const j = await getJSON('/api/workerRounds?wid='+encodeURIComponent(wid)+'&limit=50&strict=0');
      const arr = Array.isArray(j.rounds) ? j.rounds.slice() : [];
      if (!arr.length){
        rowsTbody.innerHTML = `<tr><td colspan="7" class="muted">Nessun round utile</td></tr>`;
      } else {
        arr.sort((a,b)=> b.height - a.height);
        rowsTbody.innerHTML = '';
        arr.forEach(r=>{
          const tr = document.createElement('tr');
          const eff = (Number(r.efficiency)||0);
          tr.innerHTML = `
            <td class="mono">${r.height || '—'}</td>
            <td class="mono">${r.duration_s || '—'}</td>
            <td class="mono">${fmtHash(r.hashrate_hs || 0)}</td>
            <td class="mono">${r.valid || 0}</td>
            <td class="mono">${r.invalid || 0}</td>
            <td class="mono">${Number.isFinite(eff)?(eff*100).toFixed(1)+'%':'—'}</td>
            <td class="mono">${r.method_used || '—'}</td>
          `;
          rowsTbody.appendChild(tr);
        });
      }
      grid.innerHTML = `
        <div class="kv"><div class="lab">Round contati</div><div class="val mono">${j.count || 0}</div></div>
        <div class="kv"><div class="lab">Avg (per round)</div><div class="val mono">${fmtHash(j.avg_round_hashrate_hs||0)}</div></div>
        <div class="kv"><div class="lab">Avg (pesata tempo)</div><div class="val mono">${fmtHash(j.avg_time_hashrate_hs||0)}</div></div>
        <div class="kv"><div class="lab">Efficienza media</div><div class="val mono">${fmtPct(j.avg_efficiency||0)}</div></div>
      `;
    }catch(e){
      rowsTbody.innerHTML = `<tr><td colspan="7" class="muted" style="color:#a00">Errore caricamento rounds</td></tr>`;
    }
  }

  function attachDetailHandlers(){
    $$('.btn-detail').forEach(btn=>{
      btn.addEventListener('click', async (ev)=>{
        const tr = ev.target.closest('tr');
        const already = tr.nextElementSibling;
        if (already && already.classList.contains('expand-row')){
          already.remove();
          return;
        }
        const wid = decodeURIComponent(ev.target.getAttribute('data-wid'));
        const drawer = drawerTemplate();
        tr.insertAdjacentElement('afterend', drawer);
        await loadWorkerRoundsInto(drawer, wid);
      });
    });
  }

  async function load(){
    clearErr();
    tbody.innerHTML = `<tr><td colspan="9" class="muted">Loading…</td></tr>`;
    try{
      const cur = await getJSON('/api/sharesCurrentRound');
      roundBadge.textContent = (cur.round != null) ? String(cur.round) : '—';

      const workers = cur.workers || {};
      const wids = Object.keys(workers).sort();
      if (!wids.length){
        tbody.innerHTML = `<tr><td colspan="9" class="muted">No workers</td></tr>`;
        return;
      }
      tbody.innerHTML = '';
      wids.forEach(wid=>{
        const w = workers[wid] || {};
        const eff = (typeof w.efficiency === 'number') ? w.efficiency :
                    ((Number(w.valid||0)+Number(w.invalid||0))>0
                      ? Number(w.valid||0)/(Number(w.valid||0)+Number(w.invalid||0)) : null);
        const win = computeWindowSeconds(w);
        const hs  = Number(w.hashrate_hs || 0);
        const tr  = document.createElement('tr');
        tr.innerHTML = `
          <td class="mono">${wid}</td>
          <td class="mono">${Number(w.valid||0)}</td>
          <td class="mono">${Number(w.invalid||0)}</td>
          <td class="mono">${eff!=null ? fmtPct(eff) : '—'}</td>
          <td class="mono" title="Valore calcolato dal backend (API)">${w.hashrate_display || fmtHash(hs)}</td>
          <td class="mono">${Number(w.diff_setting||0) || 0}</td>
          <td class="mono">${win}</td>
          <td class="mono">${cur.round != null ? cur.round : '—'}</td>
          <td><button class="btn btn-detail" data-wid="${encodeURIComponent(wid)}">RAW</button></td>
        `;
        tbody.appendChild(tr);
      });
      attachDetailHandlers();
    }catch(e){
      console.error(e);
      showErr('Errore caricamento dati (workers): '+(e.message||e));
      tbody.innerHTML = `<tr><td colspan="9" class="muted">Errore</td></tr>`;
    }
  }

  // init lingua
  (async function initI18N(){
    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);
  })();

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

{{/layout}}