<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MahiCenter API — AI Gateway</title>
  <meta name="description" content="Gateway AI multi-model. Pantau pemakaian token, katalog model, dan status API key.">
  <link rel="icon" type="image/svg+xml" href="icon.svg">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css?v=20261023e">
</head>
<body>

  <div class="bg-canvas" aria-hidden="true">
    <div class="bg-orb orb-a"></div>
    <div class="bg-orb orb-b"></div>
    <div class="bg-mesh"></div>
  </div>

  <header class="top-nav">
    <div class="nav-shell">
      <div class="nav-left">
        <a href="/" class="brand-link">
          <img src="icon.svg" alt="" class="brand-logo" width="26" height="26">
          <span class="brand-name">MahiCenter API</span>
        </a>
        <span class="status-indicator" title="Gateway beroperasi normal">
          <span class="status-dot"></span>
          <span class="status-text">Online</span>
        </span>
      </div>

      <div class="nav-right">
        <button class="endpoint-chip" onclick="copyBaseUrl()" title="Salin base URL">
          <span class="chip-lbl">Endpoint</span>
          <code class="chip-val">api2.mahicenter.cloud/v1</code>
          <span class="chip-copy-btn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          </span>
        </button>

        <a href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener" class="bot-btn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.52 2.77-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/></svg>
          <span>Bot</span>
        </a>
      </div>
    </div>
  </header>

  <main class="page-shell">

    <section class="metrics-grid">
      <div class="metric-card">
        <div class="metric-header">
          <span class="metric-title">Token diproses</span>
          <span class="metric-icon icon-token" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>
          </span>
        </div>
        <div class="metric-number" id="statTotalTokens"><span class="skeleton sk-lg"></span></div>
        <div class="metric-meta">Akumulasi seluruh pengguna</div>
      </div>

      <div class="metric-card">
        <div class="metric-header">
          <span class="metric-title">Permintaan</span>
          <span class="metric-icon icon-req" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
          </span>
        </div>
        <div class="metric-number" id="statTotalRequests"><span class="skeleton sk-md"></span></div>
        <div class="metric-meta">Inferensi berhasil</div>
      </div>

      <div class="metric-card">
        <div class="metric-header">
          <span class="metric-title">Pengguna</span>
          <span class="metric-icon icon-user" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </span>
        </div>
        <div class="metric-number" id="statActiveUsers"><span class="skeleton sk-md"></span></div>
        <div class="metric-meta" id="statActiveDesc">Memuat…</div>
      </div>

      <div class="metric-card">
        <div class="metric-header">
          <span class="metric-title">Latensi rata-rata</span>
          <span class="metric-icon icon-lat" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
          </span>
        </div>
        <div class="metric-number text-accent" id="statAvgLatency"><span class="skeleton sk-sm"></span></div>
        <div class="metric-meta">Failover multi-key</div>
      </div>
    </section>

    <nav class="segment-nav" id="segmentNav">
      <button class="nav-btn active" data-tab="leaderboard" onclick="switchTab('leaderboard')">
        <span class="btn-index">01</span><span class="btn-label">Peringkat</span>
      </button>
      <button class="nav-btn" data-tab="models" onclick="switchTab('models')">
        <span class="btn-index">02</span><span class="btn-label">Model</span>
      </button>
      <button class="nav-btn" data-tab="account" onclick="switchTab('account')">
        <span class="btn-index">03</span><span class="btn-label">Cek Kunci</span>
      </button>
      <button class="nav-btn" data-tab="keys" onclick="switchTab('keys')">
        <span class="btn-index">04</span><span class="btn-label">Pengguna</span>
      </button>
    </nav>

    <section class="tab-panel active" id="pane-leaderboard">
      <div class="panel-header">
        <div>
          <h2 class="section-title">Peringkat pemakaian token</h2>
          <p class="section-desc">Diurutkan dari total token terpakai. Hanya akun dengan pemakaian tercatat.</p>
        </div>
        <div class="panel-actions">
          <input type="search" id="leaderboardSearchInput" class="search-input" placeholder="Cari pengguna…" oninput="filterLeaderboard()">
        </div>
      </div>

      <div class="podium-grid" id="podiumCards"></div>

      <div class="card-table-wrap">
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th style="width:70px">RANK</th>
                <th>PENGGUNA</th>
                <th>TELEGRAM</th>
                <th>PAKET</th>
                <th>TOTAL TOKEN</th>
                <th>REQUEST</th>
                <th>STATUS</th>
              </tr>
            </thead>
            <tbody id="leaderboardTbody">
              <tr><td colspan="7" class="loading-cell">Memuat peringkat…</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <section class="tab-panel" id="pane-models">
      <div class="panel-header">
        <div>
          <h2 class="section-title">Katalog model</h2>
          <p class="section-desc">Model aktif di gateway. Latensi diukur langsung saat halaman dibuka.</p>
        </div>
        <div class="panel-actions">
          <button class="btn-secondary" onclick="probeAllModels()">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
            Ukur ulang
          </button>
        </div>
      </div>

      <div class="filter-strip">
        <input type="search" id="modelSearchInput" class="search-input" placeholder="Cari model…" oninput="filterModels()">
      </div>

      <div class="models-grid" id="modelsGrid">
        <div class="loading-cell">Memuat katalog…</div>
      </div>

      <div class="panel-header panel-header-spaced">
        <div>
          <h2 class="section-title">Peringkat model</h2>
          <p class="section-desc">Berdasarkan jumlah request. Alias sudah digabung ke ID katalog.</p>
        </div>
      </div>

      <div class="card-table-wrap">
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th style="width:60px">NO</th>
                <th>MODEL</th>
                <th>REQUEST</th>
                <th>PORSI</th>
                <th>TOTAL TOKEN</th>
                <th>LATENSI</th>
              </tr>
            </thead>
            <tbody id="modelUsageTbody">
              <tr><td colspan="6" class="loading-cell">Memuat statistik model…</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <section class="tab-panel" id="pane-account">
      <div class="panel-header">
        <div>
          <h2 class="section-title">Cek kunci API</h2>
          <p class="section-desc">Lihat sisa masa aktif, kuota token, dan posisi peringkat kunci kamu.</p>
        </div>
      </div>

      <div class="checker-container">
        <div class="checker-form">
          <input type="text" id="keyCheckInput" class="search-input" placeholder="mahi-rtr-…" autocomplete="off" spellcheck="false">
          <button class="btn-primary" onclick="checkKeyDetails()">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            Periksa
          </button>
        </div>
        <p class="input-note">Kunci disimpan di browser ini saja.</p>
        <div class="key-inspect-box" id="keyResultBox" style="display:none;"></div>
      </div>
    </section>

    <section class="tab-panel" id="pane-keys">
      <div class="panel-header">
        <div>
          <h2 class="section-title">Semua pengguna</h2>
          <p class="section-desc">Setiap akun yang pernah menghubungi bot, dengan atau tanpa kunci API.</p>
        </div>
        <div class="panel-actions">
          <input type="search" id="keySearchInput" class="search-input" placeholder="Cari nama atau ID…" oninput="filterKeys()">
        </div>
      </div>

      <div class="card-table-wrap">
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th style="width:60px">NO</th>
                <th>NAMA PENGGUNA</th>
                <th>TELEGRAM</th>
                <th>USER ID</th>
                <th>PAKET</th>
                <th>TOTAL TOKEN</th>
                <th>REQUEST</th>
                <th>STATUS</th>
              </tr>
            </thead>
            <tbody id="keysTbody">
              <tr><td colspan="8" class="loading-cell">Memuat direktori…</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

  </main>

  <div class="toast-chip" id="toast"></div>

  <footer class="app-footer">
    <div class="footer-wrap">
      <div class="footer-left">
        <span class="footer-brand">MahiCenter</span>
        <span class="footer-sub">AI Gateway</span>
      </div>
      <div class="footer-right">
        <a href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">@mahicenterrouterbot</a>
      </div>
    </div>
  </footer>

  <script src="app.js?v=20261023e"></script>
</body>
</html>
