<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WaySender - Backup</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" />
<style>
  /* ── Reset & Base ──────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg:        #0a0c0f;
    --bg2:       #0f1217;
    --bg3:       #151920;
    --border:    #1e2530;
    --border2:   #252d3a;
    --green:     #00e676;
    --green-dim: #00e67622;
    --green-mid: #00e67644;
    --yellow:    #ffd740;
    --red:       #ff5252;
    --blue:      #40c4ff;
    --text:      #c8d6e5;
    --text-dim:  #5a6a7e;
    --text-mid:  #8899aa;
    --white:     #eef2f7;
    --radius:    6px;
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Syne', sans-serif;
  }

  html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
  }

  /* ── Layout ─────────────────────────────────────────────── */
  #app {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 48px 1fr;
    height: 100vh;
    grid-template-areas:
      "topbar topbar"
      "sidebar main";
  }

  /* ── Topbar ─────────────────────────────────────────────── */
  #topbar {
    grid-area: topbar;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 16px;
  }
  .topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.3px;
    white-space: nowrap;
  }
  .topbar-brand .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.8); }
  }
  .topbar-user {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--text-mid);
  }
  #user-badge {
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 20px; padding: 3px 12px;
    color: var(--text); font-size: 12px;
  }
  .btn-sm {
    background: transparent; border: 1px solid var(--border2);
    color: var(--text-dim); padding: 4px 12px; border-radius: var(--radius);
    cursor: pointer; font-family: var(--font-mono); font-size: 11px;
    transition: all .15s;
  }
  .btn-sm:hover { border-color: var(--red); color: var(--red); }

  /* ── Mobile Menu Toggle ─────────────────────────────────── */
  .menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
  }

  /* ── Sidebar ─────────────────────────────────────────────── */
  #sidebar {
    grid-area: sidebar;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    padding: 12px 0;
    overflow-y: auto;
    z-index: 50; /* For mobile overlay */
    transition: left 0.3s ease;
  }
  .nav-section {
    padding: 8px 16px 4px;
    font-size: 9px; letter-spacing: 2px;
    color: var(--text-dim); text-transform: uppercase;
  }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; cursor: pointer;
    color: var(--text-dim); font-size: 12px;
    border-left: 2px solid transparent;
    transition: all .15s; user-select: none;
  }
  .nav-item:hover { color: var(--text); background: var(--bg3); }
  .nav-item.active {
    color: var(--green); border-left-color: var(--green);
    background: var(--green-dim);
  }
  .nav-item .icon { font-size: 14px; width: 18px; text-align:center; }

  /* ── Main ────────────────────────────────────────────────── */
  #main {
    grid-area: main;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg);
  }

  /* ── Panels ─────────────────────────────────────────────── */
  .panel { display: none; animation: fadeIn .2s ease; }
  .panel.active { display: block; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

  .page-title {
    font-family: var(--font-sans); font-size: 20px; font-weight: 700;
    color: var(--white); margin-bottom: 6px;
  }
  .page-sub { color: var(--text-dim); font-size: 12px; margin-bottom: 24px; }

  /* ── Cards ───────────────────────────────────────────────── */
  .card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
  }
  .card-title {
    font-family: var(--font-sans); font-weight: 600; font-size: 13px;
    color: var(--text); margin-bottom: 16px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

  /* ── Stats ───────────────────────────────────────────────── */
  .stat-card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px;
  }
  .stat-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
  .stat-value { font-family: var(--font-sans); font-size: 28px; font-weight: 800; color: var(--white); margin: 4px 0 2px; }
  .stat-sub { font-size: 11px; color: var(--text-dim); }
  .stat-card.green { border-color: var(--green-mid); }
  .stat-card.green .stat-value { color: var(--green); }

  /* ── Forms ───────────────────────────────────────────────── */
  .form-group { margin-bottom: 14px; }
  label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 5px; letter-spacing: .5px; }
  input, textarea, select {
    width: 100%; background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--radius); padding: 8px 12px;
    color: var(--text); font-family: var(--font-mono); font-size: 13px;
    outline: none; transition: border-color .15s;
  }
  input:focus, textarea:focus, select:focus { border-color: var(--green); }
  input::placeholder, textarea::placeholder { color: var(--text-dim); }
  textarea { resize: vertical; min-height: 80px; }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: var(--radius); border: none;
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s; letter-spacing: .3px;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--green); color: #000;
  }
  .btn-primary:hover { background: #33ffaa; }
  .btn-primary:disabled { opacity:.4; cursor:not-allowed; }
  .btn-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
  .btn-danger:hover { background: #ff525218; }
  .btn-ghost { background: transparent; border: 1px solid var(--border2); color: var(--text-mid); }
  .btn-ghost:hover { border-color: var(--text-mid); color: var(--text); }
  .btn-yellow { background: var(--yellow); color: #000; }
  .btn-yellow:hover { background: #ffe57a; }

  /* ── Table ───────────────────────────────────────────────── */
  .table-responsive {
    width: 100%;
    overflow-x: auto;
  }
  .tbl { width: 100%; border-collapse: collapse; white-space: nowrap; }
  .tbl th {
    text-align: left; font-size: 10px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--text-dim);
    padding: 8px 12px; border-bottom: 1px solid var(--border);
    font-weight: 500;
  }
  .tbl td {
    padding: 10px 12px; border-bottom: 1px solid var(--border);
    vertical-align: middle; font-size: 12px;
  }
  .tbl tr:last-child td { border-bottom: none; }
  .tbl tr:hover td { background: var(--bg3); }

  /* ── Badges ─────────────────────────────────────────────── */
  .badge {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  }
  .badge-green  { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green-mid); }
  .badge-yellow { background: #ffd74018; color: var(--yellow); border: 1px solid #ffd74044; }
  .badge-red    { background: #ff525218; color: var(--red);    border: 1px solid #ff525244; }
  .badge-gray   { background: var(--bg3);  color: var(--text-dim); border: 1px solid var(--border2); }
  .badge-blue   { background: #40c4ff18; color: var(--blue);   border: 1px solid #40c4ff44; }

  /* ── QR ──────────────────────────────────────────────────── */
  #qr-container {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 24px;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--radius);
  }
  #qr-container img { width: 200px; height: 200px; border-radius: 4px; }
  .qr-label { font-size: 11px; color: var(--text-dim); text-align: center; }

  /* ── Log ─────────────────────────────────────────────────── */
  #log-box {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
    height: 140px; overflow-y: auto; font-size: 11px;
    color: var(--text-dim); line-height: 1.8;
  }
  .log-ok   { color: var(--green); }
  .log-err  { color: var(--red); }
  .log-warn { color: var(--yellow); }
  .log-info { color: var(--blue); }

  /* ── Auth screens ────────────────────────────────────────── */
  #auth-screen {
    position: fixed; inset: 0; background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
  }
  .auth-box {
    width: 90%; max-width: 380px; /* Diubah agar pas di mobile */
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: 10px; padding: 36px 32px;
  }
  .auth-logo {
    font-family: var(--font-sans); font-size: 22px; font-weight: 800;
    color: var(--white); margin-bottom: 4px;
    display: flex; align-items: center; gap: 10px;
  }
  .auth-logo .dot { width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green); }
  .auth-subtitle { color: var(--text-dim); font-size: 12px; margin-bottom: 28px; }
  .auth-tabs { display:flex; gap:0; margin-bottom:24px; border-bottom:1px solid var(--border); }
  .auth-tab {
    padding:8px 20px; cursor:pointer; font-size:12px; font-weight:600;
    color:var(--text-dim); border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:all .15s;
  }
  .auth-tab.active { color:var(--green); border-bottom-color:var(--green); }
  .auth-error { color:var(--red); font-size:11px; margin-top:8px; min-height:16px; }

  /* ── Toast ───────────────────────────────────────────────── */
  #toast-container {
    position: fixed; bottom: 20px; right: 20px; left: 20px;
    display: flex; flex-direction: column; gap: 8px; z-index: 999;
    align-items: flex-end; pointer-events: none;
  }
  .toast {
    padding: 10px 16px; border-radius: var(--radius);
    font-size: 12px; font-weight: 500;
    animation: slideIn .2s ease;
    max-width: 100%; pointer-events: auto;
  }
  .toast-ok  { background: var(--green); color: #000; }
  .toast-err { background: var(--red);   color: #fff; }
  .toast-info{ background: var(--blue);  color: #000; }
  @keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }

  /* ── API Key reveal ──────────────────────────────────────── */
  .key-reveal {
    background: var(--bg3); border: 1px solid var(--green-mid);
    border-radius: var(--radius); padding: 12px 16px;
    font-size: 12px; color: var(--green); word-break: break-all;
    margin-top: 12px;
  }
  .key-reveal small { display:block; color:var(--text-dim); font-size:10px; margin-bottom:4px; }

  /* ── Divider ─────────────────────────────────────────────── */
  .divider { height: 1px; background: var(--border); margin: 20px 0; }

  /* ── Empty state ─────────────────────────────────────────── */
  .empty { text-align:center; padding:40px; color:var(--text-dim); font-size:12px; }
  .empty .icon { font-size:32px; margin-bottom:8px; }

  /* ── Spinner ─────────────────────────────────────────────── */
  .spin {
    display:inline-block; width:12px; height:12px;
    border:2px solid transparent; border-top-color:currentColor;
    border-radius:50%; animation:rotate .6s linear infinite;
  }
  @keyframes rotate { to{transform:rotate(360deg)} }

  /* ── Responsive ──────────────────────────────────────────── */
  @media (max-width: 768px) {
    #app { grid-template-columns: 1fr; grid-template-areas:"topbar""main"; }
    .menu-toggle { display: block; }
    
    /* Sidebar becomes off-canvas on mobile */
    #sidebar { 
      position: fixed; top: 48px; bottom: 0; left: -250px; 
      width: 240px; background: var(--bg2); 
    }
    #sidebar.show { left: 0; box-shadow: 10px 0 20px rgba(0,0,0,0.5); }
    
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    #main { padding: 16px; }
    .topbar-user span:first-child { display: none; } /* Hide "Halo," text on small screen */
  }

  /* ── Scrollbar ───────────────────────────────────────────── */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: var(--bg2); }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

  /* ── Modal Info Backup ────────────────────────────────────── */
  #info-modal-overlay {
    position: fixed; inset: 0; background: rgba(10, 12, 15, 0.85);
    display: none; align-items: center; justify-content: center;
    z-index: 9999; backdrop-filter: blur(4px);
    animation: fadeIn .2s ease;
  }
  .info-modal {
    width: 90%; max-width: 420px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 10px; padding: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  }
  .info-modal-title {
    font-family: var(--font-sans); font-size: 16px; font-weight: 700;
    color: var(--white); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
  }
  .info-modal-body {
    color: var(--text-dim); font-size: 13px; line-height: 1.6;
    margin-bottom: 24px;
  }
  .info-modal-body p { margin-bottom: 10px; }
  .info-modal-body p:last-child { margin-bottom: 0; }
  .info-modal-highlight {
    background: var(--bg3); padding: 10px; border-radius: 6px;
    border: 1px solid var(--border2); margin-top: 12px;
  }
</style>
</head>
<body>

<div id="info-modal-overlay">
  <div class="info-modal">
    <div class="info-modal-title">
      <span style="color:var(--yellow); font-size:18px;">⚠️</span> Informasi Sistem Backup
    </div>
    <div class="info-modal-body">
      <p>Selamat datang di panel <strong>WaySender - Backup</strong>.</p>
      <p>Sistem ini merupakan server cadangan yang dirancang khusus untuk memastikan layanan pengiriman pesan Anda tetap berjalan lancar apabila server utama sedang dalam perbaikan atau mengalami gangguan.</p>
      <div class="info-modal-highlight">
        <span style="color:var(--white); font-weight:600;">Penting:</span> Seluruh fungsionalitas dan parameter yang digunakan di sini sama persis dengan WaySender utama. Pastikan Anda <strong>menyesuaikan Base URL</strong> pada script/aplikasi Anda jika menggunakan layanan ini.
      </div>
      <div class="info-modal-highlight">
        Fitur pengiriman pesan hanya (text), ini akan mati jika WaySender utama telah normal kembali.
      </div>
    </div>
    <button class="btn btn-primary" onclick="closeInfoModal()" style="width:100%; justify-content:center;">Saya Mengerti</button>
  </div>
</div>

<div id="auth-screen">
  <div class="auth-box">
    <div class="auth-logo"><span class="dot"></span>WaySender</div>
    <div class="auth-subtitle">Back up mode</div>

    <div class="auth-tabs">
      <div class="auth-tab active" onclick="switchAuthTab('login')">Login</div>
      <div class="auth-tab" onclick="switchAuthTab('register')">Register</div>
    </div>

    <div id="auth-login">
      <div class="form-group">
        <label>Email</label>
        <input type="email" id="l-email" placeholder="email@kamu.com" />
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" id="l-pass" placeholder="••••••••" onkeydown="if(event.key==='Enter')doLogin()" />
      </div>
      <div class="auth-error" id="l-err"></div>
      <button class="btn btn-primary" style="width:100%;margin-top:12px;justify-content:center" onclick="doLogin()">
        Login
      </button>
    </div>

    <div id="auth-register" style="display:none">
      <div class="form-group">
        <label>Nama Lengkap</label>
        <input type="text" id="r-name" placeholder="Nama kamu" />
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="email" id="r-email" placeholder="email@kamu.com" />
      </div>
      <div class="form-group">
        <label>Password <span style="color:var(--text-dim)">(min 8 karakter)</span></label>
        <input type="password" id="r-pass" placeholder="••••••••" onkeydown="if(event.key==='Enter')doRegister()" />
      </div>
      <div class="auth-error" id="r-err"></div>
      <button class="btn btn-primary" style="width:100%;margin-top:12px;justify-content:center" onclick="doRegister()">
        Buat Akun
      </button>
    </div>
  </div>
</div>

<div id="app" style="display:none">

  <div id="topbar">
    <div class="topbar-brand">
      <button class="menu-toggle" onclick="toggleSidebar()">☰</button>
      <span class="dot"></span>
      WaySender
    </div>
    <div class="topbar-user">
      <span>Halo,</span>
      <span id="user-badge">—</span>
      <button class="btn-sm" onclick="doLogout()">Logout</button>
    </div>
  </div>

  <div id="sidebar">
    <div class="nav-section">Menu</div>
    <div class="nav-item active" onclick="nav('dashboard')">
      <span class="icon">◈</span> Dashboard
    </div>
    <div class="nav-item" onclick="nav('devices')">
      <span class="icon">⊡</span> Perangkat
    </div>
    <div class="nav-item" onclick="nav('send')">
      <span class="icon">▶</span> Kirim Pesan
    </div>
    <div class="nav-section" style="margin-top:8px">Akun & Integrasi</div>
    <div class="nav-item" onclick="nav('apikeys')">
      <span class="icon">🔑</span> API Keys
    </div>
    <div class="nav-item" onclick="nav('docs')">
      <span class="icon">📖</span> Dokumentasi API
    </div>
    <div class="nav-item" onclick="nav('profile')">
      <span class="icon">◎</span> Profil
    </div>
  </div>

  <div id="main">

    <div id="panel-dashboard" class="panel active">
      <div class="page-title">Dashboard</div>
      <div class="page-sub">Ringkasan status semua perangkat aktif</div>

      <div class="grid-3" style="margin-bottom:20px">
        <div class="stat-card green">
          <div class="stat-label">Connected</div>
          <div class="stat-value" id="stat-connected">—</div>
          <div class="stat-sub">perangkat aktif</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Total Perangkat</div>
          <div class="stat-value" id="stat-total">—</div>
          <div class="stat-sub">terdaftar di akun</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Offline</div>
          <div class="stat-value" id="stat-offline">—</div>
          <div class="stat-sub">perlu perhatian</div>
        </div>
      </div>

      <div class="card">
        <div class="card-title">⊡ Status Perangkat
          <button class="btn btn-ghost" style="margin-left:auto;padding:4px 10px;font-size:11px" onclick="loadDashboard()">↻ Refresh</button>
        </div>
        <div id="dashboard-devices">
          <div class="empty"><div class="icon">⊡</div>Memuat data...</div>
        </div>
      </div>
    </div>

    <div id="panel-devices" class="panel">
      <div class="page-title">Perangkat</div>
      <div class="page-sub">Kelola perangkat WhatsApp yang terhubung ke akun kamu</div>

      <div class="card">
        <div class="card-title">⊕ Tambah Perangkat Baru</div>
        <div class="grid-2">
          <div class="form-group" style="margin:0">
            <label>Device ID <span style="color:var(--text-dim)">(unik, huruf/angka/strip)</span></label>
            <input id="new-device-id" placeholder="contoh: hp-utama" />
          </div>
          <div class="form-group" style="margin:0">
            <label>Label / Nama Perangkat</label>
            <input id="new-device-label" placeholder="contoh: HP Kantor" />
          </div>
        </div>
        <div style="margin-top:14px;display:flex;gap:10px;align-items:center">
          <button class="btn btn-primary" onclick="addDevice()">
            ⊕ Daftarkan Perangkat
          </button>
          <span id="add-device-msg" style="font-size:11px;color:var(--text-dim)"></span>
        </div>
      </div>

      <div id="qr-panel" class="card" style="display:none">
        <div class="card-title">📷 Scan QR Code</div>
        <div style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap">
          <div id="qr-container">
            <div class="spin" style="width:40px;height:40px;border-color:var(--border2);border-top-color:var(--green)"></div>
            <div class="qr-label">Mengambil QR...</div>
          </div>
          <div style="flex:1;min-width:200px">
            <div style="color:var(--text);margin-bottom:12px;font-size:13px;font-weight:600">
              Cara scan QR:
            </div>
            <div style="color:var(--text-dim);font-size:12px;line-height:2">
              1. Buka WhatsApp di HP kamu<br>
              2. Tap ⋮ → Perangkat Tertaut<br>
              3. Tap "Tautkan Perangkat"<br>
              4. Scan QR di sebelah kiri<br>
              5. Tunggu status berubah jadi <span style="color:var(--green)">connected</span>
            </div>
            <div style="margin-top:16px;display:flex;gap:8px;flex-wrap:wrap">
              <button class="btn btn-ghost" onclick="refreshQR()">↻ Refresh QR</button>
              <button class="btn btn-danger" onclick="closeQR()">✕ Tutup</button>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-title">⊡ Daftar Perangkat
          <button class="btn btn-ghost" style="margin-left:auto;padding:4px 10px;font-size:11px" onclick="loadDevices()">↻ Refresh</button>
        </div>
        <div id="device-list">
          <div class="empty"><div class="icon">⊡</div>Belum ada perangkat</div>
        </div>
      </div>
    </div>

    <div id="panel-send" class="panel">
      <div class="page-title">Kirim Pesan</div>
      <div class="page-sub">Kirim pesan WhatsApp melalui perangkat yang sudah terhubung</div>

      <div class="grid-2">
        <div class="card" style="margin:0">
          <div class="card-title">▶ Form Kirim</div>
          <div class="form-group">
            <label>Perangkat</label>
            <select id="send-device">
              <option value="">— Pilih perangkat —</option>
            </select>
          </div>
          <div class="form-group">
            <label>Nomor Tujuan</label>
            <input id="send-number" placeholder="628123456789" />
          </div>
          <div class="form-group">
            <label>Pesan</label>
            <textarea id="send-message" placeholder="Ketik pesan di sini..." rows="5"></textarea>
          </div>
          <button class="btn btn-primary" id="btn-send" onclick="sendMessage()" style="width:100%;justify-content:center">
            ▶ Kirim Sekarang
          </button>
        </div>

        <div style="display:flex;flex-direction:column;gap:16px">
          <div class="card" style="margin:0">
            <div class="card-title">📋 Log Pengiriman</div>
            <div id="log-box">
              <span style="color:var(--text-dim)">Log akan muncul di sini...</span>
            </div>
            <button class="btn btn-ghost" style="margin-top:10px;font-size:11px;padding:4px 12px" onclick="clearLog()">Bersihkan Log</button>
          </div>
          <div class="card" style="margin:0">
            <div class="card-title">💡 Format Nomor</div>
            <div style="font-size:12px;color:var(--text-dim);line-height:2.2">
              <span style="color:var(--green)">✓</span> 628123456789<br>
              <span style="color:var(--green)">✓</span> +628123456789<br>
              <span style="color:var(--green)">✓</span> 08123456789<br>
              <span style="color:var(--red)">✗</span> 8123456789 (terlalu pendek)
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="panel-apikeys" class="panel">
      <div class="page-title">API Keys</div>
      <div class="page-sub">Buat dan kelola API Key untuk akses programatik</div>

      <div class="card">
        <div class="card-title">⊕ Generate API Key Baru</div>
        <div style="display:flex;gap:12px;align-items:flex-end; flex-wrap:wrap">
          <div class="form-group" style="margin:0;flex:1; min-width: 200px;">
            <label>Label / Nama Key</label>
            <input id="key-name" placeholder="contoh: Production App" />
          </div>
          <button class="btn btn-primary" onclick="generateKey()">Generate Key</button>
        </div>
        <div id="new-key-reveal" style="display:none" class="key-reveal">
          <small>⚠ Simpan key ini sekarang — tidak akan ditampilkan lagi!</small>
          <span id="new-key-value"></span>
          <button class="btn btn-ghost" style="margin-top:8px;font-size:11px;padding:4px 10px" onclick="copyKey()">📋 Copy</button>
        </div>
      </div>

      <div class="card">
        <div class="card-title">🔑 API Keys Kamu
          <button class="btn btn-ghost" style="margin-left:auto;padding:4px 10px;font-size:11px" onclick="loadKeys()">↻ Refresh</button>
        </div>
        <div id="key-list">
          <div class="empty"><div class="icon">🔑</div>Belum ada API key</div>
        </div>
      </div>
    </div>
    
    <div id="panel-docs" class="panel">
      <div class="page-title">Dokumentasi API WaySender - Backup</div>
      <div class="page-sub">Panduan integrasi pengiriman pesan (text) only, sama persis dengan WaySender utama.</div>

      <div class="card">
        <div class="card-title">🔒 Autentikasi</div>
        <div style="font-size:12px; color:var(--text-dim); margin-bottom:12px; line-height: 1.8;">
          Setiap request ke API memerlukan validasi menggunakan API Key. Kamu dapat membuat API Key di menu <a href="#" onclick="nav('apikeys')" style="color:var(--green);text-decoration:none;">API Keys</a>. <br>
          Kirimkan key tersebut melalui header HTTP menggunakan salah satu cara berikut:
        </div>
        <div class="key-reveal" style="margin-top:0; color:var(--text); font-family:var(--font-mono); font-size:11px;">
          <span style="color:var(--blue)">Authorization:</span> ApiKey &lt;API_KEY_KAMU&gt;<br>
          <span style="color:var(--text-dim)">// ATAU</span><br>
          <span style="color:var(--blue)">X-API-Key:</span> &lt;API_KEY_KAMU&gt;
        </div>
      </div>

      <div class="card">
        <div class="card-title">▶ Endpoint: Kirim Pesan Teks</div>
        <div style="margin-bottom:14px; display:flex; align-items:center; gap:10px;">
          <span class="badge badge-green" style="font-size:12px; padding:4px 8px;">POST/GET</span>
          <code style="color:var(--white); font-size: 14px;">/api/v1/message/text</code>
        </div>
        
        <label style="margin-top: 10px; font-weight: 600; color:var(--white);">Body/Parameter:</label>
        <div class="table-responsive" style="margin-bottom: 16px;">
          <table class="tbl">
            <thead>
              <tr><th>Parameter</th><th>Tipe</th><th>Keterangan</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><code style="color:var(--yellow)">device_id</code></td>
                <td><span class="badge badge-gray">String</span></td>
                <td>ID Perangkat yang sedang berstatus <span style="color:var(--green)">Connected</span></td>
              </tr>
              <tr>
                <td><code style="color:var(--yellow)">to</code></td>
                <td><span class="badge badge-gray">String</span></td>
                <td>Nomor tujuan WhatsApp (gunakan kode negara, contoh: 62812...)</td>
              </tr>
              <tr>
                <td><code style="color:var(--yellow)">message</code></td>
                <td><span class="badge badge-gray">String</span></td>
                <td>Teks pesan yang ingin dikirimkan</td>
              </tr>
              <tr>
                <td><code style="color:var(--yellow)">api_key</code></td>
                <td><span class="badge badge-gray">String</span></td>
                <td>dibutuhkan jika melalui GET, pastikan di URL memiliki param api_key=</td>
              </tr>
            </tbody>
          </table>
        </div>

        <label style="font-weight: 600; color:var(--white);">Contoh Penggunaan (cURL):</label>
        <div class="key-reveal" style="margin-top:6px; color:var(--text); white-space:pre-wrap; font-family:var(--font-mono); font-size: 11px; line-height: 1.6;">curl -X POST https://waysender-backup.ridped.com/api/v1/message/send/text \
  -H "Content-Type: application/json" \
  -H "X-API-Key: pn3kn_1234567890abcdef" \
  -d '{
    "device_id": "hp-utama",
    "to": "628123456789",
    "message": "Halo, ini adalah pesan otomatis dari sistem WaySender!"
  }'</div>
        
        <label style="font-weight: 600; color:var(--white); margin-top:20px;">Contoh Response (Sukses):</label>
        <div class="key-reveal" style="margin-top:6px; color:var(--green); white-space:pre-wrap; font-family:var(--font-mono); font-size: 11px; line-height: 1.6;">{
  "success": true,
  "message": "Message queued and sent successfully",
  "data": {
    "deviceId": "hp-utama",
    "to": "628123456789@s.whatsapp.net",
    "message": "Halo, ini adalah pesan otomatis..."
  }
}</div>
      </div>
    </div>

    <div id="panel-profile" class="panel">
      <div class="page-title">Profil Saya</div>
      <div class="page-sub">Kelola informasi akun kamu</div>

      <div class="grid-2">
        <div class="card" style="margin:0">
          <div class="card-title">◎ Informasi Akun</div>
          <div class="form-group">
            <label>Nama</label>
            <input id="p-name" placeholder="Nama kamu" />
          </div>
          <div class="form-group">
            <label>Email <span style="color:var(--text-dim)">(tidak bisa diubah)</span></label>
            <input id="p-email" readonly style="opacity:.5;cursor:not-allowed" />
          </div>
          <div class="form-group">
            <label>Role</label>
            <input id="p-role" readonly style="opacity:.5;cursor:not-allowed" />
          </div>
          <button class="btn btn-primary" onclick="updateProfile()">Simpan Perubahan</button>
        </div>

        <div class="card" style="margin:0">
          <div class="card-title">🔒 Ganti Password</div>
          <div class="form-group">
            <label>Password Saat Ini</label>
            <input type="password" id="p-cur" placeholder="••••••••" />
          </div>
          <div class="form-group">
            <label>Password Baru <span style="color:var(--text-dim)">(min 8 karakter)</span></label>
            <input type="password" id="p-new" placeholder="••••••••" />
          </div>
          <div class="form-group">
            <label>Konfirmasi Password Baru</label>
            <input type="password" id="p-confirm" placeholder="••••••••" />
          </div>
          <button class="btn btn-yellow" onclick="changePass()">🔒 Ganti Password</button>
        </div>
      </div>
    </div>

  </div></div><div id="toast-container"></div>

<script>
// ════════════════════════════════════════════════════════════
// STATE
// ════════════════════════════════════════════════════════════
const S = {
  token: localStorage.getItem('wag_token') || '',
  user:  JSON.parse(localStorage.getItem('wag_user') || 'null'),
  currentQrDevice: null,
  qrInterval: null,
};

// ════════════════════════════════════════════════════════════
// API HELPERS
// ════════════════════════════════════════════════════════════
async function api(method, path, body) {
  const opts = {
    method,
    headers: {
      'Content-Type': 'application/json',
      ...(S.token ? { Authorization: `Bearer ${S.token}` } : {}),
    },
  };
  if (body) opts.body = JSON.stringify(body);
  const res = await fetch(path, opts);
  const json = await res.json();
  return { ok: res.ok, status: res.status, data: json };
}

// ════════════════════════════════════════════════════════════
// UI / MOBILE TOGGLE
// ════════════════════════════════════════════════════════════
function toggleSidebar() {
  document.getElementById('sidebar').classList.toggle('show');
}

// ════════════════════════════════════════════════════════════
// MODAL INFORMASI BACKUP
// ════════════════════════════════════════════════════════════
function checkInfoModal() {
  /*if (!localStorage.getItem('wag_backup_info_shown')) {
    //document.getElementById('info-modal-overlay').style.display = 'flex';
  }*/
  document.getElementById('info-modal-overlay').style.display = 'flex';
}

function closeInfoModal() {
  localStorage.setItem('wag_backup_info_shown', 'true');
  document.getElementById('info-modal-overlay').style.display = 'none';
}

// ════════════════════════════════════════════════════════════
// TOAST
// ════════════════════════════════════════════════════════════
function toast(msg, type = 'ok') {
  const el = document.createElement('div');
  el.className = `toast toast-${type}`;
  el.textContent = msg;
  document.getElementById('toast-container').appendChild(el);
  setTimeout(() => el.remove(), 3000);
}

// ════════════════════════════════════════════════════════════
// AUTH
// ════════════════════════════════════════════════════════════
function switchAuthTab(tab) {
  document.querySelectorAll('.auth-tab').forEach((t, i) => {
    t.classList.toggle('active', (i === 0 && tab === 'login') || (i === 1 && tab === 'register'));
  });
  document.getElementById('auth-login').style.display    = tab === 'login'    ? '' : 'none';
  document.getElementById('auth-register').style.display = tab === 'register' ? '' : 'none';
}

async function doLogin() {
  const email = document.getElementById('l-email').value.trim();
  const pass  = document.getElementById('l-pass').value;
  document.getElementById('l-err').textContent = '';

  if (!email || !pass) { document.getElementById('l-err').textContent = 'Email dan password wajib diisi'; return; }

  const { ok, data } = await api('POST', '/auth/login', { email, password: pass });
  if (!ok) { document.getElementById('l-err').textContent = data.message || 'Login gagal'; return; }

  setSession(data.data.token, data.data.user);
}

async function doRegister() {
  const name  = document.getElementById('r-name').value.trim();
  const email = document.getElementById('r-email').value.trim();
  const pass  = document.getElementById('r-pass').value;
  document.getElementById('r-err').textContent = '';

  if (!name || !email || !pass) { document.getElementById('r-err').textContent = 'Semua field wajib diisi'; return; }
  if (pass.length < 8) { document.getElementById('r-err').textContent = 'Password minimal 8 karakter'; return; }

  const { ok, data } = await api('POST', '/auth/register', { name, email, password: pass });
  if (!ok) { document.getElementById('r-err').textContent = data.message || 'Registrasi gagal'; return; }

  setSession(data.data.token, data.data.user);
}

function setSession(token, user) {
  S.token = token;
  S.user  = user;
  localStorage.setItem('wag_token', token);
  localStorage.setItem('wag_user', JSON.stringify(user));
  document.getElementById('auth-screen').style.display = 'none';
  document.getElementById('app').style.display = 'grid';
  document.getElementById('user-badge').textContent = user.name;
  nav('dashboard');
  checkInfoModal(); // Tampilkan modal info setelah login sukses
}

function doLogout() {
  S.token = '';
  S.user  = null;
  localStorage.removeItem('wag_token');
  localStorage.removeItem('wag_user');
  clearQRInterval();
  document.getElementById('auth-screen').style.display = 'flex';
  document.getElementById('app').style.display = 'none';
}

// ════════════════════════════════════════════════════════════
// NAVIGATION
// ════════════════════════════════════════════════════════════
function nav(page) {
  // Tutup sidebar di versi mobile ketika item di klik
  if (window.innerWidth <= 768) {
    document.getElementById('sidebar').classList.remove('show');
  }

  document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  document.getElementById(`panel-${page}`).classList.add('active');
  document.querySelectorAll('.nav-item').forEach(n => {
    if (n.getAttribute('onclick')?.includes(page)) n.classList.add('active');
  });
  
  if (page === 'dashboard') loadDashboard();
  if (page === 'devices')   loadDevices();
  if (page === 'send')      loadSendDevices();
  if (page === 'apikeys')   loadKeys();
  if (page === 'profile')   loadProfile();
  // Untuk page 'docs' tidak perlu load API apapun karena statis.
}

// ════════════════════════════════════════════════════════════
// DASHBOARD
// ════════════════════════════════════════════════════════════
async function loadDashboard() {
  const { ok, data } = await api('GET', '/device');
  if (!ok) { toast(data.message || 'Gagal load data', 'err'); return; }

  const devices  = data.data.devices || [];
  const total    = devices.length;
  const connected = devices.filter(d => d.live_status === 'connected').length;
  const offline  = total - connected;

  document.getElementById('stat-total').textContent     = total;
  document.getElementById('stat-connected').textContent = connected;
  document.getElementById('stat-offline').textContent   = offline;

  const el = document.getElementById('dashboard-devices');
  if (!devices.length) {
    el.innerHTML = `<div class="empty"><div class="icon">⊡</div>Belum ada perangkat. <a href="#" onclick="nav('devices')" style="color:var(--green)">Tambah sekarang →</a></div>`;
    return;
  }

  el.innerHTML = `
    <div class="table-responsive">
      <table class="tbl">
        <thead><tr>
          <th>Device ID</th><th>Label</th><th>Nomor WA</th><th>Status Live</th><th>Queue</th><th>Terakhir Terhubung</th>
        </tr></thead>
        <tbody>${devices.map(d => `
          <tr>
            <td><code style="color:var(--blue)">${d.device_id}</code></td>
            <td>${d.label}</td>
            <td>${d.phone || '<span style="color:var(--text-dim)">—</span>'}</td>
            <td>${statusBadge(d.live_status)}</td>
            <td>${d.queue_length || 0}</td>
            <td style="color:var(--text-dim);font-size:11px">${d.last_connected ? new Date(d.last_connected).toLocaleString('id') : '—'}</td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>`;
}

// ════════════════════════════════════════════════════════════
// DEVICES
// ════════════════════════════════════════════════════════════
async function addDevice() {
  const deviceId = document.getElementById('new-device-id').value.trim();
  const label    = document.getElementById('new-device-label').value.trim();
  const msg      = document.getElementById('add-device-msg');

  if (!deviceId || !label) { toast('Device ID dan Label wajib diisi', 'err'); return; }

  msg.textContent = 'Mendaftarkan...';
  const { ok, data } = await api('POST', '/device', { deviceId, label });
  msg.textContent = '';

  if (!ok) { toast(data.message || 'Gagal daftarkan device', 'err'); return; }

  toast(`Device "${deviceId}" berhasil didaftarkan!`);
  document.getElementById('new-device-id').value = '';
  document.getElementById('new-device-label').value = '';
  loadDevices();

  // If need QR, show QR panel
  if (data.data?.status === 'need_qr' || data.data?.action === 'new') {
    openQR(deviceId);
  }
}

async function loadDevices() {
  const { ok, data } = await api('GET', '/device');
  if (!ok) { toast(data.message || 'Gagal load device', 'err'); return; }

  const devices = data.data.devices || [];
  const el = document.getElementById('device-list');

  if (!devices.length) {
    el.innerHTML = `<div class="empty"><div class="icon">⊡</div>Belum ada perangkat. Tambah di atas.</div>`;
    return;
  }

  el.innerHTML = `
    <div class="table-responsive">
      <table class="tbl">
        <thead><tr>
          <th>Device ID</th><th>Label</th><th>Nomor WA</th><th>Status DB</th><th>Status Live</th><th>Aksi</th>
        </tr></thead>
        <tbody>${devices.map(d => `
          <tr>
            <td><code style="color:var(--blue)">${d.device_id}</code></td>
            <td>${d.label}</td>
            <td>${d.phone || '<span style="color:var(--text-dim)">—</span>'}</td>
            <td>${dbStatusBadge(d.status)}</td>
            <td>${statusBadge(d.live_status)}</td>
            <td>
              <div style="display:flex;gap:6px;flex-wrap:wrap">
                ${d.live_status !== 'connected' ? `<button class="btn btn-primary" style="padding:4px 10px;font-size:11px" onclick="startSession('${d.device_id}')">▶ Start</button>` : ''}
                ${d.live_status === 'need_qr'  ? `<button class="btn btn-yellow" style="padding:4px 10px;font-size:11px" onclick="openQR('${d.device_id}')">📷 QR</button>` : ''}
                ${d.live_status === 'connected' ? `<button class="btn btn-ghost" style="padding:4px 10px;font-size:11px" onclick="stopSession('${d.device_id}')">■ Stop</button>` : ''}
                <button class="btn btn-danger" style="padding:4px 10px;font-size:11px" onclick="deleteDevice('${d.device_id}')">✕</button>
              </div>
            </td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>`;
}

async function startSession(deviceId) {
  const { ok, data } = await api('POST', '/session/start', { deviceId });
  if (!ok) { toast(data.message || 'Gagal start session', 'err'); return; }
  toast(`Session "${deviceId}" dimulai`);
  if (data.data?.action === 'new' || data.data?.status === 'need_qr') {
    openQR(deviceId);
  }
  setTimeout(loadDevices, 2000);
}

async function stopSession(deviceId) {
  if (!confirm(`Stop session "${deviceId}"?`)) return;
  const { ok, data } = await api('DELETE', `/session/${deviceId}`);
  if (!ok) { toast(data.message || 'Gagal stop session', 'err'); return; }
  toast(`Session "${deviceId}" dihentikan`, 'info');
  loadDevices();
}

async function deleteDevice(deviceId) {
  if (!confirm(`Hapus perangkat "${deviceId}"? Ini akan menghapus session juga.`)) return;
  const { ok, data } = await api('DELETE', `/device/${deviceId}`);
  if (!ok) { toast(data.message || 'Gagal hapus device', 'err'); return; }
  toast(`Device "${deviceId}" dihapus`, 'info');
  closeQR();
  loadDevices();
}

// ── QR ──
function openQR(deviceId) {
  S.currentQrDevice = deviceId;
  document.getElementById('qr-panel').style.display = '';
  fetchQR(deviceId);
  // Auto refresh QR every 25s
  clearQRInterval();
  S.qrInterval = setInterval(() => fetchQR(deviceId), 25000);
}

function closeQR() {
  document.getElementById('qr-panel').style.display = 'none';
  clearQRInterval();
  S.currentQrDevice = null;
}

function clearQRInterval() {
  if (S.qrInterval) { clearInterval(S.qrInterval); S.qrInterval = null; }
}

function refreshQR() {
  if (S.currentQrDevice) fetchQR(S.currentQrDevice);
}

async function fetchQR(deviceId) {
  const { ok, data } = await api('GET', `/session/qr/${deviceId}`);
  const container = document.getElementById('qr-container');

  if (!ok) {
    container.innerHTML = `<div style="color:var(--red);font-size:12px;text-align:center">${data.message || 'QR tidak tersedia'}</div>`;
    return;
  }

  if (data.data?.status === 'connected') {
    container.innerHTML = `<div style="color:var(--green);font-size:24px">✓</div><div class="qr-label" style="color:var(--green)">Device terhubung!</div>`;
    clearQRInterval();
    setTimeout(() => { closeQR(); loadDevices(); }, 2000);
    return;
  }

  if (data.data?.qr) {
    container.innerHTML = `<img src="${data.data.qr}" alt="QR Code" /><div class="qr-label">Scan dengan WhatsApp kamu<br><span style="color:var(--text-dim)">Berlaku ~60 detik</span></div>`;
    // Poll status
    setTimeout(() => checkConnected(deviceId), 5000);
  }
}

async function checkConnected(deviceId) {
  if (S.currentQrDevice !== deviceId) return;
  const { ok, data } = await api('GET', `/session/status/${deviceId}`);
  if (ok && data.data?.status === 'connected') {
    toast(`Device "${deviceId}" berhasil terhubung! 🎉`);
    const container = document.getElementById('qr-container');
    container.innerHTML = `<div style="color:var(--green);font-size:32px">✓</div><div class="qr-label" style="color:var(--green)">Connected!</div>`;
    clearQRInterval();
    setTimeout(() => { closeQR(); loadDevices(); }, 2000);
  } else if (S.currentQrDevice === deviceId) {
    setTimeout(() => checkConnected(deviceId), 5000);
  }
}

// ════════════════════════════════════════════════════════════
// SEND MESSAGE
// ════════════════════════════════════════════════════════════
async function loadSendDevices() {
  const { ok, data } = await api('GET', '/device');
  const sel = document.getElementById('send-device');
  sel.innerHTML = '<option value="">— Pilih perangkat —</option>';
  if (!ok) return;
  const connected = (data.data?.devices || []).filter(d => d.live_status === 'connected');
  connected.forEach(d => {
    const opt = document.createElement('option');
    opt.value = d.device_id;
    opt.textContent = `${d.label} (${d.device_id})`;
    sel.appendChild(opt);
  });
}

async function sendMessage() {
  const deviceId = document.getElementById('send-device').value;
  const number   = document.getElementById('send-number').value.trim();
  const message  = document.getElementById('send-message').value.trim();
  const btn      = document.getElementById('btn-send');

  if (!deviceId) { toast('Pilih perangkat dulu', 'err'); return; }
  if (!number)   { toast('Nomor tujuan wajib diisi', 'err'); return; }
  if (!message)  { toast('Pesan tidak boleh kosong', 'err'); return; }

  btn.disabled = true;
  btn.innerHTML = '<span class="spin"></span> Mengirim...';

  const { ok, data } = await api('POST', 'api/v1/messages/text', { device_id: deviceId, to: number, message });

  btn.disabled = false;
  btn.innerHTML = '▶ Kirim Sekarang';

  if (ok) {
    addLog(`✓ Terkirim ke ${number} via ${deviceId}`, 'ok');
    toast(`Pesan terkirim ke ${number}!`);
    document.getElementById('send-message').value = '';
  } else {
    addLog(`✗ Gagal ke ${number}: ${data.message}`, 'err');
    toast(data.message || 'Gagal kirim pesan', 'err');
  }
}

function addLog(msg, type = 'info') {
  const box = document.getElementById('log-box');
  const line = document.createElement('div');
  line.className = `log-${type}`;
  line.textContent = `[${new Date().toLocaleTimeString('id')}] ${msg}`;
  box.appendChild(line);
  box.scrollTop = box.scrollHeight;
}

function clearLog() {
  document.getElementById('log-box').innerHTML = '<span style="color:var(--text-dim)">Log dibersihkan.</span>';
}

// ════════════════════════════════════════════════════════════
// API KEYS
// ════════════════════════════════════════════════════════════
async function generateKey() {
  const name = document.getElementById('key-name').value.trim();
  if (!name) { toast('Nama key wajib diisi', 'err'); return; }

  const { ok, data } = await api('POST', '/auth/api-keys', { name });
  if (!ok) { toast(data.message || 'Gagal generate key', 'err'); return; }

  const reveal = document.getElementById('new-key-reveal');
  document.getElementById('new-key-value').textContent = data.data.key;
  reveal.style.display = '';
  document.getElementById('key-name').value = '';
  toast('API Key berhasil dibuat! Simpan sekarang.');
  loadKeys();
}

function copyKey() {
  const val = document.getElementById('new-key-value').textContent;
  navigator.clipboard.writeText(val).then(() => toast('Key berhasil di-copy!'));
}

async function loadKeys() {
  const { ok, data } = await api('GET', '/auth/api-keys');
  const el = document.getElementById('key-list');
  if (!ok) { el.innerHTML = `<div class="empty">Gagal memuat data</div>`; return; }

  const keys = data.data?.keys || [];
  if (!keys.length) {
    el.innerHTML = `<div class="empty"><div class="icon">🔑</div>Belum ada API key</div>`;
    return;
  }

  el.innerHTML = `
    <div class="table-responsive">
      <table class="tbl">
        <thead><tr><th>Nama</th><th>Prefix</th><th>Status</th><th>Terakhir Dipakai</th><th>Dibuat</th><th>Aksi</th></tr></thead>
        <tbody>${keys.map(k => `
          <tr>
            <td>${k.name}</td>
            <td><code style="color:var(--blue)">${k.key_prefix}...</code></td>
            <td>${k.is_active ? '<span class="badge badge-green">Aktif</span>' : '<span class="badge badge-gray">Revoked</span>'}</td>
            <td style="color:var(--text-dim);font-size:11px">${k.last_used_at ? new Date(k.last_used_at).toLocaleString('id') : '—'}</td>
            <td style="color:var(--text-dim);font-size:11px">${new Date(k.created_at).toLocaleString('id')}</td>
            <td>
              <div style="display:flex;gap:6px">
                ${k.is_active ? `<button class="btn btn-ghost" style="padding:4px 10px;font-size:11px" onclick="revokeKey('${k.id}')">Revoke</button>` : ''}
                <button class="btn btn-danger" style="padding:4px 10px;font-size:11px" onclick="deleteKey('${k.id}')">✕</button>
              </div>
            </td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>`;
}

async function revokeKey(id) {
  if (!confirm('Revoke API key ini?')) return;
  const { ok, data } = await api('PATCH', `/auth/api-keys/${id}/revoke`);
  if (!ok) { toast(data.message || 'Gagal revoke', 'err'); return; }
  toast('API Key direvoke', 'info');
  loadKeys();
}

async function deleteKey(id) {
  if (!confirm('Hapus API key ini permanen?')) return;
  const { ok, data } = await api('DELETE', `/auth/api-keys/${id}`);
  if (!ok) { toast(data.message || 'Gagal hapus', 'err'); return; }
  toast('API Key dihapus', 'info');
  loadKeys();
}

// ════════════════════════════════════════════════════════════
// PROFILE
// ════════════════════════════════════════════════════════════
async function loadProfile() {
  const { ok, data } = await api('GET', '/auth/me');
  if (!ok) { toast(data.message || 'Gagal load profil', 'err'); return; }
  const u = data.data.user;
  document.getElementById('p-name').value  = u.name;
  document.getElementById('p-email').value = u.email;
  document.getElementById('p-role').value  = u.role;
}

async function updateProfile() {
  const name = document.getElementById('p-name').value.trim();
  if (!name) { toast('Nama wajib diisi', 'err'); return; }
  const { ok, data } = await api('PATCH', '/auth/me', { name });
  if (!ok) { toast(data.message || 'Gagal update profil', 'err'); return; }
  toast('Profil berhasil diperbarui!');
  document.getElementById('user-badge').textContent = name;
  S.user.name = name;
  localStorage.setItem('wag_user', JSON.stringify(S.user));
}

async function changePass() {
  const cur     = document.getElementById('p-cur').value;
  const newPass = document.getElementById('p-new').value;
  const confirm = document.getElementById('p-confirm').value;
  if (!cur || !newPass || !confirm) { toast('Semua field wajib diisi', 'err'); return; }
  if (newPass !== confirm) { toast('Konfirmasi password tidak cocok', 'err'); return; }
  if (newPass.length < 8)  { toast('Password baru minimal 8 karakter', 'err'); return; }

  const { ok, data } = await api('POST', '/auth/me/change-password', {
    current_password: cur, new_password: newPass,
  });
  if (!ok) { toast(data.message || 'Gagal ganti password', 'err'); return; }
  toast('Password berhasil diubah!');
  document.getElementById('p-cur').value = '';
  document.getElementById('p-new').value = '';
  document.getElementById('p-confirm').value = '';
}

// ════════════════════════════════════════════════════════════
// HELPERS
// ════════════════════════════════════════════════════════════
function statusBadge(s) {
  const map = {
    connected:    '<span class="badge badge-green">Connected</span>',
    connecting:   '<span class="badge badge-blue">Connecting</span>',
    reconnecting: '<span class="badge badge-yellow">Reconnecting</span>',
    need_qr:      '<span class="badge badge-yellow">Need QR</span>',
    disconnected: '<span class="badge badge-red">Disconnected</span>',
    offline:      '<span class="badge badge-gray">Offline</span>',
  };
  return map[s] || `<span class="badge badge-gray">${s}</span>`;
}

function dbStatusBadge(s) {
  const map = {
    active:   '<span class="badge badge-green">Active</span>',
    inactive: '<span class="badge badge-gray">Inactive</span>',
    banned:   '<span class="badge badge-red">Banned</span>',
  };
  return map[s] || `<span class="badge badge-gray">${s}</span>`;
}

// ════════════════════════════════════════════════════════════
// INIT
// ════════════════════════════════════════════════════════════
(function init() {
  if (S.token && S.user) {
    document.getElementById('auth-screen').style.display = 'none';
    document.getElementById('app').style.display = 'grid';
    document.getElementById('user-badge').textContent = S.user.name;
    nav('dashboard');
    checkInfoModal(); // Cek modal info jika user sudah dalam keadaan login saat refresh halaman
  }
})();
</script>
</body>
</html>