<!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 — Portal AI Gateway</title>
  <link rel="icon" type="image/svg+xml" href="favicon.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&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Top Navbar -->
  <header class="navbar">
    <div class="nav-container">
      <div class="brand">
        <div class="brand-logo">⚡</div>
        <div class="brand-info">
          <span class="brand-title">MahiCenter Router</span>
          <span class="brand-status"><span class="dot-live"></span> Gateway Aktif</span>
        </div>
      </div>

      <div class="nav-actions">
        <div class="url-badge" onclick="copyBaseUrl()" title="Klik untuk salin Base URL">
          <span class="url-label">Base URL:</span>
          <span class="url-text">https://api2.mahicenter.cloud/v1</span>
          <span class="copy-icon">📋</span>
        </div>

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

  <!-- Main Content Wrapper -->
  <main class="main-wrapper">

    <!-- Quick Stats Bar -->
    <section class="stats-grid">
      <div class="stat-card">
        <div class="stat-title">TOTAL TOKEN TERPROSES</div>
        <div class="stat-value" id="statTotalTokens">Memuat...</div>
        <div class="stat-desc">Akumulasi penggunaan seluruh user</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">TOTAL PERMINTAAN</div>
        <div class="stat-value" id="statTotalRequests">Memuat...</div>
        <div class="stat-desc">Permintaan AI sukses terlayani</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">PENGGUNA AKTIF</div>
        <div class="stat-value" id="statActiveUsers">Memuat...</div>
        <div class="stat-desc">Kunci API aktif beroperasi</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">STATUS GATEWAY</div>
        <div class="stat-value text-emerald">100% ONLINE</div>
        <div class="stat-desc">Multi-Key Failover Siap Pakai</div>
      </div>
    </section>

    <!-- Mobile-Friendly Segmented Tabs -->
    <nav class="nav-tabs" id="navTabs">
      <button class="tab-item active" data-tab="leaderboard" onclick="switchTab('leaderboard')">
        <span class="tab-icon">🏆</span>
        <span class="tab-text">Papan Peringkat</span>
      </button>
      <button class="tab-item" data-tab="models" onclick="switchTab('models')">
        <span class="tab-icon">🌐</span>
        <span class="tab-text">Katalog Model</span>
      </button>
      <button class="tab-item" data-tab="account" onclick="switchTab('account')">
        <span class="tab-icon">🔑</span>
        <span class="tab-text">Cek Kunci API</span>
      </button>
      <button class="tab-item" data-tab="keys" onclick="switchTab('keys')">
        <span class="tab-icon">👥</span>
        <span class="tab-text">Semua Pengguna</span>
      </button>
    </nav>

    <!-- TAB 1: PAPAN PERINGKAT (LEADERBOARD) -->
    <section class="tab-pane active" id="pane-leaderboard">
      <div class="section-header">
        <h2>🏆 Papan Peringkat Penggunaan Token</h2>
        <p>Urutan pengguna berdasarkan jumlah konsumsi token AI terbanyak secara real-time.</p>
      </div>

      <!-- Top 3 Podium Cards -->
      <div class="podium-grid" id="podiumCards">
        <!-- Rendered by JS -->
      </div>

      <!-- Full Rank List (Mobile Card / Table Hybrid) -->
      <div class="data-card">
        <div class="table-container">
          <table class="custom-table" id="leaderboardTable">
            <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-td">Memuat data peringkat...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <!-- TAB 2: KATALOG MODEL (MODELS) -->
    <section class="tab-pane" id="pane-models">
      <div class="section-header">
        <h2>🌐 Katalog Model AI Siap Pakai</h2>
        <p>Daftar model resmi yang aktif di gateway MahiCenter. Klik <b>Salin ID</b> untuk langsung digunakan di aplikasi kamu (Cursor, Cline, OpenCode, Claude Code, dll).</p>
      </div>

      <div class="search-bar-box">
        <input type="text" id="modelSearchInput" placeholder="Cari nama model (misal: deepseek, claude, gemini)..." oninput="filterModels()">
      </div>

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

    <!-- TAB 3: CEK KUNCI API (ACCOUNT) -->
    <section class="tab-pane" id="pane-account">
      <div class="section-header">
        <h2>🔑 Cek Kunci & Penggunaan Token Kamu</h2>
        <p>Periksa detail lisensi, sisa hari aktif, token yang terpakai, dan peringkat akun kamu.</p>
      </div>

      <div class="data-card key-checker-card">
        <div class="form-row">
          <input type="text" id="keyCheckInput" class="key-input" placeholder="Masukkan Kunci API kamu (contoh: mahi-rtr-...)">
          <button class="btn-primary" onclick="checkKeyDetails()">Periksa Kunci</button>
        </div>
        <div class="hint-text">💡 Kunci kamu otomatis tersimpan di browser ini agar tidak perlu mengetik ulang.</div>

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

    <!-- TAB 4: SEMUA PENGGUNA (KEYS DIRECTORY) -->
    <section class="tab-pane" id="pane-keys">
      <div class="section-header">
        <h2>👥 Direktori Semua Kunci Pengguna</h2>
        <p>Daftar lengkap seluruh kunci API yang terdaftar di database server.</p>
      </div>

      <div class="search-bar-box">
        <input type="text" id="keySearchInput" placeholder="Cari akun, username, atau akhiran key..." oninput="filterKeys()">
      </div>

      <div class="data-card">
        <div class="table-container">
          <table class="custom-table" id="keysTable">
            <thead>
              <tr>
                <th>No</th>
                <th>Nama Akun</th>
                <th>Telegram</th>
                <th>Kunci (Sensor)</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-td">Memuat direktori pengguna...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

  </main>

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

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-inner">
      <p>⚡ <b>MahiCenter Router</b> — Multi-Key Failover AI Gateway</p>
      <p>Dikelola langsung via Telegram Bot: <a href="https://t.me/mahicenterrouterbot" target="_blank" rel="noopener">@mahicenterrouterbot</a></p>
    </div>
  </footer>

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