<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>MahiCenter Router — AI Gateway & Telemetry</title>
  <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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Top Terminal Header -->
  <header class="top-nav">
    <div class="nav-shell">
      <div class="nav-left">
        <div class="brand-pill">
          <span class="live-indicator"><span class="ping-dot"></span></span>
          <span class="brand-name">MAHICENTER ROUTER</span>
          <span class="brand-ver">v2.4-PRO</span>
        </div>
      </div>

      <div class="nav-right">
        <div class="endpoint-chip" onclick="copyBaseUrl()" title="Klik untuk salin Base URL">
          <span class="chip-lbl">BASE URL</span>
          <code class="chip-val">https://api2.mahicenter.cloud/v1</code>
          <span class="copy-glyph" id="copyGlyph">⎘</span>
        </div>

        <a href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener" class="bot-link">
          <span>@mahicenterrouterbot</span>
        </a>
      </div>
    </div>
  </header>

  <!-- Main Container -->
  <main class="page-shell">

    <!-- Telemetry Strip -->
    <section class="telemetry-grid">
      <div class="telemetry-card">
        <div class="meta-label">TOTAL TOKEN TERPROSES</div>
        <div class="meta-value text-glow" id="statTotalTokens">164.81 Juta</div>
        <div class="meta-sub">Akumulasi penggunaan riil seluruh pengguna</div>
      </div>

      <div class="telemetry-card">
        <div class="meta-label">TOTAL PERMINTAAN</div>
        <div class="meta-value" id="statTotalRequests">17.634</div>
        <div class="meta-sub">Permintaan AI sukses terlayani</div>
      </div>

      <div class="telemetry-card">
        <div class="meta-label">TOTAL PENGGUNA TERDAFTAR</div>
        <div class="meta-value" id="statActiveUsers">— Pengguna</div>
        <div class="meta-sub" id="statActiveDesc">94 Terdaftar • 37 Kunci Aktif</div>
      </div>

      <div class="telemetry-card">
        <div class="meta-label">STATUS GATEWAY</div>
        <div class="meta-value text-accent"><span class="status-tick">●</span> 100% ONLINE</div>
        <div class="meta-sub">Multi-Key Failover Siap Pakai</div>
      </div>
    </section>

    <!-- Navigation Tabs -->
    <nav class="segment-nav" id="segmentNav">
      <button class="nav-btn active" data-tab="leaderboard" onclick="switchTab('leaderboard')">
        <span class="btn-glyph">01</span>
        <span class="btn-title">Papan Peringkat</span>
      </button>
      <button class="nav-btn" data-tab="models" onclick="switchTab('models')">
        <span class="btn-glyph">02</span>
        <span class="btn-title">Katalog Model</span>
      </button>
      <button class="nav-btn" data-tab="account" onclick="switchTab('account')">
        <span class="btn-glyph">03</span>
        <span class="btn-title">Cek Kunci API</span>
      </button>
      <button class="nav-btn" data-tab="keys" onclick="switchTab('keys')">
        <span class="btn-glyph">04</span>
        <span class="btn-title">Semua Pengguna</span>
      </button>
    </nav>

    <!-- TAB 1: LEADERBOARD -->
    <section class="tab-panel active" id="pane-leaderboard">
      <div class="panel-head">
        <div>
          <h2 class="head-title">Papan Peringkat Penggunaan Token</h2>
          <p class="head-sub">Konsumsi token real-time pengguna resmi gateway MahiCenter Router.</p>
        </div>
        <div class="badge-terminal">REAL-TIME TELEMETRY</div>
      </div>

      <!-- Top 3 Podium (Obsidian Tier) -->
      <div class="podium-row" id="podiumCards">
        <!-- Rendered by JS -->
      </div>

      <!-- Full Rank Table -->
      <div class="terminal-table-card">
        <div class="table-scroll">
          <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 data peringkat...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <!-- TAB 2: MODEL CATALOG -->
    <section class="tab-panel" id="pane-models">
      <div class="panel-head">
        <div>
          <h2 class="head-title">Katalog Model AI & Live Latency</h2>
          <p class="head-sub">Model resmi yang aktif di routing gateway. Dilengkapi fitur probe latensi real-time.</p>
        </div>
        <button class="btn-secondary" onclick="probeAllModels()">⚡ Tes Latensi Semua Model</button>
      </div>

      <div class="filter-strip">
        <input type="text" id="modelSearchInput" class="terminal-input" placeholder="Cari nama atau id model (misal: deepseek, glm, gemini)..." oninput="filterModels()">
      </div>

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

    <!-- TAB 3: KEY CHECKER -->
    <section class="tab-panel" id="pane-account">
      <div class="panel-head">
        <div>
          <h2 class="head-title">Pemeriksaan Kunci & Penggunaan Akun</h2>
          <p class="head-sub">Validasi lisensi API Key kamu, cek sisa masa aktif, kuota, dan posisi ranking terkini.</p>
        </div>
      </div>

      <div class="checker-card">
        <div class="checker-row">
          <input type="text" id="keyCheckInput" class="terminal-input" placeholder="Masukkan Kunci API kamu (contoh: mahi-rtr-...)">
          <button class="btn-action" onclick="checkKeyDetails()">Periksa Kunci</button>
        </div>
        <div class="input-hint">Kunci API otomatis disimpan di browser lokal agar tidak perlu mengetik ulang saat membuka web.</div>

        <!-- Result Box -->
        <div class="key-inspect-box" id="keyResultBox" style="display: none;"></div>
      </div>
    </section>

    <!-- TAB 4: DIRECTORY -->
    <section class="tab-panel" id="pane-keys">
      <div class="panel-head">
        <div>
          <h2 class="head-title">Direktori Semua Pengguna</h2>
          <p class="head-sub">Seluruh kunci API terdaftar di database server dengan enkripsi sensor keamanan.</p>
        </div>
      </div>

      <div class="filter-strip">
        <input type="text" id="keySearchInput" class="terminal-input" placeholder="Filter berdasarkan nama akun, username, atau akhiran key..." oninput="filterKeys()">
      </div>

      <div class="terminal-table-card">
        <div class="table-scroll">
          <table class="data-table">
            <thead>
              <tr>
                <th style="width: 60px;">NO</th>
                <th>NAMA PENGGUNA</th>
                <th>TELEGRAM</th>
                <th>TELEGRAM 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 pengguna...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

  </main>

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

  <!-- Footer -->
  <footer class="app-footer">
    <div class="footer-wrap">
      <div class="footer-brand">
        <span class="accent-text">MAHICENTER ROUTER</span> — High-Density AI Gateway & Multi-Key Failover
      </div>
      <div class="footer-meta">
        Bot Manajemen Resmi: <a href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">@mahicenterrouterbot</a>
      </div>
    </div>
  </footer>

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