<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><%= chainName %> Status</title>
  <link rel="icon" type="image/png" href="/images/plai-symbol-mark-v1.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/images/plai-icon-180.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#087b73" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="plais Chain" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <style>
    :root {
      --ink: #07111f;
      --muted: #52637a;
      --line: #d7e2ef;
      --panel: #ffffff;
      --surface: #eef5f8;
      --teal: #087b73;
      --green: #148a52;
      --amber: #b76b00;
      --danger: #bd2f35;
      --dark: #081421;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--surface);
      font-family: Arial, "Noto Sans KR", sans-serif;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    .wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
    .hero {
      background: #081421;
      color: #fff;
      padding: 34px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .brand strong { display: block; font-size: 28px; line-height: 1.15; }
    .brand span { display: block; margin-top: 6px; color: #aebdd1; font-size: 14px; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .button {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(255,255,255,.1);
      color: #fff;
      font-weight: 900;
    }
    .button.primary { background: #fff; color: var(--ink); border-color: #fff; }
    main { padding: 26px 0 56px; }
    .grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .card, .section {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
    }
    .card {
      min-height: 116px;
      padding: 18px;
    }
    .card span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 10px;
    }
    .card strong {
      display: block;
      font-size: 30px;
      line-height: 1.1;
      word-break: break-word;
    }
    .section {
      margin-top: 16px;
      padding: 22px;
    }
    h1, h2 { margin: 0; font-weight: 900; }
    h1 { font-size: 34px; line-height: 1.16; }
    h2 { font-size: 24px; line-height: 1.25; margin-bottom: 14px; }
    .sub { color: var(--muted); margin-top: 8px; line-height: 1.55; }
    .ok { color: var(--green); }
    .warn { color: var(--amber); }
    .negative { color: var(--danger); }
    .rows { display: grid; gap: 8px; }
    .row {
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr);
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #e5edf5;
    }
    .row:last-child { border-bottom: 0; }
    .badge {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 72px;
      height: 30px;
      border-radius: 999px;
      background: #e8fff3;
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
    }
    .badge.warn { background: #fff2cc; color: var(--amber); }
    .title { font-weight: 900; margin-bottom: 4px; }
    .detail { color: var(--muted); font-size: 14px; line-height: 1.5; word-break: break-word; }
    .mono { font-family: Consolas, "Courier New", monospace; font-size: 13px; }
    .api-note {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 8px;
      border: 1px solid #bdd2e8;
      background: #f5f9fd;
      color: var(--muted);
      line-height: 1.55;
    }
    .api-note a { color: var(--teal); font-weight: 900; }
    @media (max-width: 900px) {
      .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 620px) {
      .wrap { width: min(100% - 22px, 1180px); }
      .grid, .row { grid-template-columns: 1fr; }
      h1 { font-size: 29px; }
    }
  </style>
</head>
<body>
  <header class="hero">
    <div class="wrap nav">
      <div class="brand">
        <h1><%= chainName %> 운영 상태</h1>
        <span><%= networkId %> · <%= isMainnet ? 'Mainnet' : 'Testnet' %></span>
      </div>
      <nav class="actions">
        <a class="button primary" href="/">홈</a>
        <a class="button" href="https://aisfor.kr/home">PLAIFOR 홈</a>
        <a class="button" href="/explorer">Explorer</a>
        <a class="button" href="https://aisfor.kr/chain-wallet?next=/wallet/evm">EVM Wallet</a>
      </nav>
    </div>
  </header>

  <main>
    <div class="wrap">
      <section class="grid" aria-label="status summary">
        <article class="card"><span>체인 검증</span><strong class="<%= chainStatus === 'OK' ? 'ok' : 'warn' %>"><%= chainStatus %></strong></article>
        <article class="card"><span>공개 활성화 점검</span><strong><%= readinessScore %>%</strong></article>
        <article class="card"><span>최신 블록</span><strong>#<%= latestHeight %></strong></article>
        <article class="card"><span>확정 블록</span><strong><%= finalizedBlocks %></strong></article>
        <article class="card"><span>지갑</span><strong><%= walletCount %></strong></article>
        <article class="card"><span>QBFT 검증자 / 온라인 노드</span><strong><%= validatorCount %> / <%= onlineNodeCount %></strong></article>
        <article class="card"><span>순 보상</span><strong><%= formatNumber(rewardSummary.net, 2) %> <%= rewardUnit %></strong></article>
        <article class="card"><span>감점</span><strong class="negative"><%= formatNumber(rewardSummary.negative, 2) %> <%= rewardUnit %></strong></article>
      </section>

      <section class="section">
        <h2>메인넷 준비 체크</h2>
        <div class="rows">
          <% checks.forEach((check) => { %>
            <div class="row">
              <span class="badge <%= check.ok ? '' : 'warn' %>"><%= check.ok ? 'OK' : 'CHECK' %></span>
              <div>
                <div class="title"><%= check.label %></div>
                <div class="detail"><%= check.detail %></div>
              </div>
            </div>
          <% }) %>
        </div>
      </section>

      <section class="section">
        <h2>체인 앵커</h2>
        <div class="rows">
          <div class="row">
            <span class="badge">NET</span>
            <div><div class="title"><%= networkId %></div><div class="detail">주소 prefix <%= addressPrefix %></div></div>
          </div>
          <div class="row">
            <span class="badge">GEN</span>
            <div><div class="title">Genesis Hash</div><div class="detail mono"><%= genesisHash %></div></div>
          </div>
          <div class="row">
            <span class="badge">BLK</span>
            <div><div class="title">Latest Block Hash</div><div class="detail mono"><%= latestBlockHash || 'pending' %></div></div>
          </div>
        </div>
        <div class="api-note">
          개발자나 서버 연동용 원문 JSON은 <a href="/api/testnet/status">/api/testnet/status</a>에서 확인합니다.
          일반 사용자는 이 운영 상태 화면과 Explorer를 보면 됩니다.
        </div>
      </section>
    </div>
  </main>
</body>
</html>
