<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Block - <%= service.name %></title>
    <link rel="stylesheet" href="/css/admin.css">
  </head>
  <body>
    <main class="shell explorer-shell explorer-wide">
      <header class="topbar explorer-topbar">
        <div><p class="eyebrow"><%= service.mode %></p><h1>Block Detail</h1></div>
        <div class="top-actions"><a class="nav-button subtle" href="https://aisfor.kr/chain-wallet?next=/wallet">Wallet</a><a class="nav-button subtle" href="/explorer">Explorer</a><a class="nav-button subtle" href="/admin">Admin</a></div>
      </header>
      <% if (!block) { %>
        <section class="panel"><h2>Block not found</h2><p class="empty">요청한 block을 찾을 수 없습니다.</p></section>
      <% } else { %>
        <section class="panel explorer-detail-hero">
          <div>
            <p class="eyebrow">block height</p>
            <h2>Block #<%= block.height %></h2>
            <code class="hash-block"><%= block.blockHash || '-' %></code>
          </div>
          <div class="detail-status-stack"><span class="badge <%= block.status === 'FINALIZED_MOCK' ? 'badge-ok' : 'badge-warn' %>"><%= block.status %></span></div>
        </section>
        <section class="grid metrics explorer-metrics">
          <article><strong><%= (block.proofIds || []).length %></strong><span>Proofs</span></article>
          <article><strong><%= (block.transactionIds || []).length %></strong><span>Transactions</span></article>
          <article><strong><%= (block.rewardIds || []).length %></strong><span>Rewards</span></article>
          <article><strong><%= block.validation?.approveVotes || 0 %>/<%= block.validation?.requiredVotes || 0 %></strong><span>Votes</span></article>
        </section>
        <section class="panel">
          <div class="panel-title"><h2>Block Hashes</h2><span>chain link</span></div>
          <div class="stat-list compact">
            <div class="stat-row"><span>Hash</span><code><%= block.blockHash || '-' %></code></div>
            <div class="stat-row"><span>Previous Hash</span><code><%= block.previousHash || '-' %></code></div>
            <div class="stat-row"><span>Merkle Root</span><code><%= block.merkleRoot || '-' %></code></div>
            <div class="stat-row"><span>Created</span><strong><%= block.createdAt || '-' %></strong></div>
            <div class="stat-row"><span>Finalized</span><strong><%= block.finalizedAt || '-' %></strong></div>
          </div>
        </section>
        <section class="grid explorer-grid">
          <article class="panel">
            <div class="panel-title"><h2>Chain Transactions</h2><span><%= chainTransactions.length %></span></div>
            <% if (chainTransactions.length === 0) { %><p class="empty">No chain transactions in this block.</p><% } %>
            <% chainTransactions.forEach(function(tx) { %>
              <% const trace = (chainTransactionTraces || []).find(function(row) { return row.txId === tx.id; }) || {}; %>
              <div class="item explorer-item">
                <div>
                  <strong><%= tx.actionType || '-' %></strong>
                  <span><%= tx.sourceService || '-' %> · <%= tx.status || '-' %></span>
                  <% if (trace.reviewDecision) { %>
                    <span>review <%= trace.reviewDecision.decision %> · reward <%= shortHash(trace.reviewDecision.rewardId || '-') %></span>
                    <a href="/explorer/reward-review/<%= encodeURIComponent(trace.reviewDecision.id) %>">Review Decision</a>
                    <% if (trace.reward) { %><a href="/explorer/reward/<%= encodeURIComponent(trace.reward.id) %>">Reward</a><% } %>
                    <% if (trace.audit) { %><a href="/explorer/reward-audit/<%= encodeURIComponent(trace.audit.id) %>">Audit</a><% } %>
                  <% } %>
                </div>
                <a href="/explorer/tx/<%= encodeURIComponent(tx.txHash || tx.id) %>"><code><%= shortHash(tx.txHash || tx.id) %></code></a>
              </div>
            <% }) %>
          </article>
          <article class="panel">
            <div class="panel-title"><h2>Proofs</h2><span><%= proofs.length %></span></div>
            <% if (proofs.length === 0) { %><p class="empty">No proofs in this block.</p><% } %>
            <% proofs.forEach(function(proof) { %>
              <div class="item explorer-item"><div><strong><%= proof.proofType || '-' %></strong><span><%= proof.sourceService || '-' %> · <%= proof.status || '-' %></span></div><a href="/explorer/proof/<%= encodeURIComponent(proof.id || proof.proofHash) %>"><code><%= shortHash(proof.id || proof.proofHash) %></code></a></div>
            <% }) %>
          </article>
        </section>
        <section class="panel">
          <div class="panel-title"><h2>Reward Ledger</h2><span><%= rewards.length %></span></div>
          <% if (rewards.length === 0) { %><p class="empty">No rewards in this block.</p><% } %>
          <% rewards.forEach(function(reward) { %>
            <div class="item explorer-item">
              <div>
                <strong><%= reward.category %> / <%= reward.rewardAmount %> <%= reward.symbol %></strong>
                <span><%= reward.sourceService %> · <%= reward.actionType %> · <%= (reward.flags || []).length ? ('flags ' + reward.flags.length) : 'validation ok' %></span>
              </div>
              <a href="/explorer/reward/<%= encodeURIComponent(reward.id) %>"><code><%= shortHash(reward.id) %></code></a>
            </div>
          <% }) %>
        </section>
      <% } %>
    </main>
  </body>
</html>
