(function () {
  const $ = (sel) => document.querySelector(sel);

  function shorten(addr) {
    if (!addr) return '—';
    return addr.length > 14 ? addr.slice(0, 8) + '…' + addr.slice(-6) : addr;
  }

  function fmtUptime(seconds) {
    if (!seconds && seconds !== 0) return '—';
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = Math.floor(seconds % 60);
    if (h > 0) return `${h}h ${m}m`;
    if (m > 0) return `${m}m ${s}s`;
    return `${s}s`;
  }

  function renderPhases(phases) {
    const root = $('#phases');
    root.innerHTML = '';
    phases.forEach((p) => {
      const row = document.createElement('div');
      row.className = 'phase';
      row.innerHTML = `
        <div class="num">${String(p.id).padStart(2,'0')}</div>
        <div>
          <div class="lbl">${p.name}<small class="mono">PHASE-${p.id}</small></div>
          <div class="bar"><span style="width:${p.pct}%"></span></div>
        </div>
        <div class="pct">${p.pct}%</div>`;
      root.appendChild(row);
    });
  }

  function renderTests(tests) {
    $('#testsPassed').textContent = tests.passed;
    $('#testsTotal').textContent = tests.total;
    const root = $('#tests');
    root.innerHTML = '';
    tests.results.forEach((t) => {
      const row = document.createElement('div');
      row.className = 'test';
      row.innerHTML = `
        <span class="dot"></span>
        <span class="mono">${t.name}</span>
        <span class="gas">${t.gas.toLocaleString()} gas</span>`;
      root.appendChild(row);
    });
  }

  function renderArchitecture(architecture) {
    if (!architecture) return;

    const layerRoot = $('#archLayers');
    layerRoot.innerHTML = '';
    architecture.layers.forEach((layer) => {
      const div = document.createElement('div');
      div.className = 'arch-layer';
      const statusClass = layer.status === 'proven' ? 'ok'
        : layer.status === 'deployed-pending' ? 'warn' : 'muted';
      const theoremHtml = layer.theorems
        ? `<div class="theorems">${layer.theorems.map(t =>
            `<span class="theorem">${t}</span>`).join('')}</div>`
        : '';
      div.innerHTML = `
        <div class="arch-layer-header">
          <span class="arch-layer-name">${layer.name}</span>
          <span class="tag ${statusClass}">${layer.status}</span>
        </div>
        <p class="hint" style="margin:4px 0 6px">${layer.description}</p>
        <span class="mono dim" style="font-size:0.72rem">${layer.artifact}</span>
        ${theoremHtml}`;
      layerRoot.appendChild(div);
    });

    const verRoot = $('#verificationArtifacts');
    verRoot.innerHTML = '';
    architecture.verification.forEach((v) => {
      const div = document.createElement('div');
      div.className = 'ver-item';
      const statusClass = v.status === 'complete' ? 'ok' : 'muted';
      div.innerHTML = `
        <div class="ver-header">
          <span class="ver-name">${v.name}</span>
          <span class="tag ${statusClass}">${v.status}</span>
        </div>
        <p class="hint" style="margin:3px 0 0">${v.note}</p>`;
      verRoot.appendChild(div);
    });
  }

  function renderAssets(assets, proverState) {
    const map = new Map();
    if (proverState && Array.isArray(proverState.results)) {
      for (const r of proverState.results) map.set(r.assetId, r);
    }
    const tbody = $('#assets');
    tbody.innerHTML = '';
    if (!assets.length) {
      tbody.innerHTML = '<tr><td colspan="4" class="hint mono" style="padding:16px 10px">No assets configured.</td></tr>';
      return;
    }
    assets.forEach((a) => {
      const r = map.get(a.assetId);
      const status = r ? r.status : 'unknown';
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${a.label || '—'}<br><span class="mono dim" style="font-size:0.7rem">${shorten(a.assetId)}</span></td>
        <td class="mono">${shorten(a.ipfsCid)}</td>
        <td class="mono">${shorten(a.expectedHash)}</td>
        <td><span class="tag ${status}">${status}</span></td>`;
      tbody.appendChild(tr);
    });
  }

  function renderSigners(nodes) {
    const root = $('#signers');
    root.innerHTML = '';
    if (!nodes.length) {
      root.innerHTML = '<li class="hint mono" style="list-style:none;padding:4px 0">No signer nodes configured.</li>';
      return;
    }
    nodes.forEach((n) => {
      const li = document.createElement('li');
      li.innerHTML = `
        <span><strong>${n.id}</strong> · <span class="mono dim">${shorten(n.pubkey)}</span></span>
        <span class="endpoint">${n.endpoint}</span>`;
      root.appendChild(li);
    });
  }

  function renderProver(state) {
    const root = $('#proverState');
    if (!state) {
      root.innerHTML = '<p class="hint mono">Run <code>node prover/fetcher.js</code> to populate.</p>';
      return;
    }
    root.innerHTML = `
      <div class="kpi">
        <div><span class="kpi-num gold">${state.summary.fresh}</span><span class="kpi-lbl">FRESH</span></div>
        <div><span class="kpi-num" style="color:var(--red)">${state.summary.mismatch}</span><span class="kpi-lbl">MISMATCH</span></div>
        <div><span class="kpi-num" style="color:var(--gold)">${state.summary.unreachable}</span><span class="kpi-lbl">UNREACH</span></div>
      </div>
      <pre>${JSON.stringify(state, null, 2)}</pre>`;
  }

  async function loadHealth() {
    try {
      const res = await fetch('/api/health');
      const data = await res.json();
      const uptimeEl = $('#uptime');
      if (uptimeEl) uptimeEl.textContent = fmtUptime(data.uptime);
    } catch (_) {}
  }

  async function load() {
    const res = await fetch('/api/status');
    const data = await res.json();

    $('#network').textContent   = data.network || '—';
    $('#serverTime').textContent = new Date(data.serverTime).toLocaleTimeString();

    $('#cbAddress').textContent     = data.circuitBreakerAddress || '— not deployed —';
    $('#oracleAddress').textContent = data.oracleAddress || '—';
    $('#arAddress').textContent     = data.assetRegistryAddress || '— not deployed —';
    $('#teeAddress').textContent    = data.teeVerifierAddress || '— not deployed —';
    $('#enclaveAddress').textContent = data.enclaveAddress || '—';

    renderPhases(data.phases);
    renderTests(data.tests);
    renderArchitecture(data.architecture);
    renderAssets(data.assets, data.proverState);
    renderSigners(data.signerNodes);
    renderProver(data.proverState);

    loadHealth();
  }

  load().catch((err) => {
    document.body.innerHTML += `<pre style="color:var(--red,#ED1C24);padding:20px;font-family:monospace">${err.message}</pre>`;
  });
  setInterval(load, 15000);
})();