<%- include('../partials/head') %>

<div class="topbar">
  <div>
    <h2>Dashboard</h2>
    <small>Kelola device, QR, auto reply, dan report</small>
  </div>

  <a class="btn secondary" href="/api-docs">API Docs</a>
</div>

<div class="content">
  <div class="api-key-card card">
    <div>
      <h2>API Key</h2>
      <p class="note">Gunakan API key ini untuk endpoint <code>/send-message</code>.</p>
    </div>

    <div class="copy-row">
      <input id="api-key-input" value="<%= currentUser.api_key %>" readonly>
      <button type="button" onclick="copyApiKey()">Copy</button>
    </div>
  </div>

  <div class="grid">
    <div class="card">
      <h2>Tambah Device QR</h2>
      <p class="note">
        Masukkan nomor sender, klik Koneksikan, lalu scan QR di panel kanan.
        Tidak ada pairing code di versi ini.
      </p>

      <form method="post" action="/devices">
        <label>Nomor sender dengan kode negara
          <input name="sender" placeholder="62888xxxx" required>
        </label>

        <label>Label
          <input name="label" placeholder="CS 1">
        </label>

        <button class="full-mobile">Koneksikan QR</button>
      </form>
    </div>

    <div class="card">
      <h2>Auto Reply</h2>

      <form method="post" action="/auto-replies">
        <label>Keyword
          <input name="keyword" placeholder="contoh: halo" required>
        </label>

        <label>Balasan
          <textarea name="reply" placeholder="Halo kak, ada yang bisa kami bantu?" required></textarea>
        </label>

        <label>Scope
          <select name="scope" required>
            <option value="private">Private message saja</option>
            <option value="group">Grup saja</option>
            <option value="all">Private & grup</option>
          </select>
        </label>

        <label class="check-label">
          <input type="checkbox" name="exact_match">
          Harus sama persis
        </label>

        <button class="full-mobile">Simpan Auto Reply</button>
      </form>
    </div>
  </div>

  <div class="chat-layout">
    <div class="device-list">
      <div class="device-head">Device WhatsApp</div>

      <% devices.forEach(d=>{ %>
        <div class="device-row">
          <div class="device-title">
            <b><%= d.label || d.sender %></b>
            <span class="device-status <%= d.status === 'connected' ? 'online' : '' %>">
              <%= d.status %>
            </span>
          </div>

          <span><%= d.sender %></span>

          <div class="status">
            Status: <%= d.status %>
          </div>

          <div class="device-actions">
            <form class="inline" method="post" action="/devices/<%=d.sender%>/reconnect">
              <button>Scan QR Ulang</button>
            </form>

            <form class="inline" method="post" action="/devices/<%=d.sender%>/logout">
              <button class="secondary">Logout</button>
            </form>

            <form class="inline" method="post" action="/devices/<%=d.sender%>/delete" onsubmit="return confirm('Hapus device ini?')">
              <button class="danger">Hapus</button>
            </form>
          </div>
        </div>
      <% }) %>

      <% if(!devices.length){ %>
        <div class="device-row empty-device">
          <b>Belum ada device</b>
          <div class="status">Tambahkan nomor sender dulu.</div>
        </div>
      <% } %>
    </div>

    <div class="chat-pane">
      <div class="chat-head">
        <div class="avatar">QR</div>
        <div>
          <b>Scan QR Login</b>
          <small style="display:block;color:#667781">
            WhatsApp HP → Perangkat tertaut → Tautkan perangkat
          </small>
        </div>
      </div>

      <% const qdev = devices.find(d=>d.last_qr) || devices[0]; %>

      <div
        class="qr-box"
        id="qr-box"
        data-has-qr="<%= qdev && qdev.last_qr ? '1' : '0' %>"
      >
        <% if(qdev && qdev.last_qr){ %>
          <h2>Scan QR untuk <%= qdev.sender %></h2>

          <img class="qr" src="<%= qdev.last_qr %>" alt="QR WhatsApp">

          <div class="bubble">
            Buka WhatsApp di HP, pilih Perangkat tertaut, lalu scan QR ini.
          </div>

          <p class="note qr-refresh-note">
            Klik Refresh dalam
            <b><span id="qr-countdown">20</span> detik</b>
            agar QR tetap baru.
          </p>

          <button type="button" class="btn secondary full-mobile" onclick="refreshDashboard()">
            Refresh Sekarang
          </button>
        <% } else { %>
          <h2>QR belum tersedia</h2>

          <p>
            Klik <b>Koneksikan QR</b> atau <b>Scan QR Ulang</b>,
            tunggu beberapa detik, lalu refresh.
          </p>

          <p class="note qr-refresh-note">
          Klik refresh dalam
            <b><span id="qr-countdown">6</span> detik</b>.
          </p>

          <button type="button" class="btn full-mobile" onclick="refreshDashboard()">
            Refresh Sekarang
          </button>

          <% if(qdev && qdev.last_error){ %>
            <p class="error"><%= qdev.last_error %></p>
          <% } %>
        <% } %>
      </div>
    </div>
  </div>

  <div class="card">
    <h2>Auto Reply Tersimpan</h2>

    <div class="table-wrap">
      <table>
        <tr>
          <th>Keyword</th>
          <th>Scope</th>
          <th>Reply</th>
          <th>Aksi</th>
        </tr>

        <% replies.forEach(r=>{ %>
          <tr>
            <td><%=r.keyword%></td>
            <td><%=r.scope%></td>
            <td><%=r.reply%></td>
            <td>
              <form method="post" action="/auto-replies/<%=r.id%>/delete" onsubmit="return confirm('Hapus auto reply ini?')">
                <button class="danger">Hapus</button>
              </form>
            </td>
          </tr>
        <% }) %>

        <% if(!replies.length){ %>
          <tr>
            <td colspan="4">Belum ada auto reply.</td>
          </tr>
        <% } %>
      </table>
    </div>
  </div>

  <div class="card">
    <h2>Report Pengiriman</h2>

    <div class="table-wrap">
      <table>
        <tr>
          <th>Waktu</th>
          <th>Sender</th>
          <th>Tujuan</th>
          <th>Status</th>
          <th>Error</th>
          <th>Aksi</th>
        </tr>

        <% reports.forEach(r=>{ %>
          <tr>
            <td><%=r.created_at%></td>
            <td><%=r.sender%></td>
            <td><%=r.recipient%></td>
            <td>
              <span class="report-status <%= r.status === 'sent' ? 'sent' : 'failed' %>">
                <%=r.status%>
              </span>
            </td>
            <td><%=r.error || '-'%></td>
            <td>
              <form
                method="post"
                action="/reports/<%= r.id %>/resend"
                onsubmit="return confirm('Kirim ulang pesan ini?')"
              >
                <button type="submit" class="btn secondary btn-sm">
                  Kirim Ulang
                </button>
              </form>
            </td>
          </tr>
        <% }) %>

        <% if(!reports.length){ %>
          <tr>
            <td colspan="6">Belum ada report pengiriman.</td>
          </tr>
        <% } %>
      </table>
    </div>
  </div>
</div>

<script>
  function copyApiKey() {
    const input = document.getElementById('api-key-input')
    input.select()
    input.setSelectionRange(0, 99999)
    document.execCommand('copy')
    alert('API key berhasil disalin.')
  }

  function refreshDashboard() {
    window.location.reload()
  }

  ;(function qrAutoRefresh() {
    const qrBox = document.getElementById('qr-box')
    const countdownEl = document.getElementById('qr-countdown')

    if (!qrBox || !countdownEl) return

    const hasQr = qrBox.dataset.hasQr === '1'

    let seconds = hasQr ? 20 : 6

    countdownEl.textContent = seconds

    const timer = setInterval(function() {
      seconds--
      countdownEl.textContent = seconds

    
    }, 1000)
  })()
</script>

<%- include('../partials/foot') %>