let allData = [];
    let allRI = [];
    let filteredData = [];
    let sortField = 'nama';
    let sortDir = 'asc';
    const PAGE_SIZE = 20;
    let currentPage = 1;

    document.addEventListener('auth-ready', function (e) {
      const user = e.detail;
      document.body.classList.add('auth-loaded', 'role-' + user.role);

      document.getElementById('user-display-name').textContent = user.username;
      const roleMap = { 'admin': 'Admin', 'petugas_lapangan': 'Rumah Ibadah', 'guest': 'Guest' };
      document.getElementById('user-display-role').textContent = roleMap[user.role] || user.role;

      // Hide admin-nav for non-admin
      document.querySelectorAll('.admin-nav').forEach(el => {
        if (user.role !== 'admin') el.style.display = 'none';
      });

      loadData(user);
    });

    async function loadData(user) {
      try {
        const [pmRes, riRes] = await Promise.all([
          fetch('api/penduduk_miskin.php'),
          fetch('api/rumah_ibadah.php')
        ]);
        const [pmData, riData] = await Promise.all([pmRes.json(), riRes.json()]);

        allData = pmData.data || [];
        allRI = riData.data || [];

        // For petugas_lapangan: filter to only show residents in their radius
        if (user && user.role === 'petugas_lapangan') {
          const myRiId = String(user.rumah_ibadah_id);
          allData = allData.filter(p => p.status_proximity === 'dalam_radius' && String(p.rumah_ibadah_id) === myRiId);
        }

        // Populate RI filter
        const riFilter = document.getElementById('filter-ri');
        allRI.forEach(r => {
          const opt = document.createElement('option');
          opt.value = r.id;
          opt.textContent = r.nama;
          riFilter.appendChild(opt);
        });

        updateSummary();
        applyFilters();
      } catch (err) {
        document.getElementById('pm-tbody').innerHTML = `<tr><td colspan="7" style="text-align:center;padding:40px;color:#ef4444">Gagal memuat data: ${esc(err.message)}</td></tr>`;
      }
    }

    function updateSummary() {
      const total = allData.length;
      const jiwa = allData.reduce((s, p) => s + (parseInt(p.jumlah_anggota, 10) || 0), 0);
      const dalam = allData.filter(p => p.status_proximity === 'dalam_radius').length;
      const luar = allData.filter(p => p.status_proximity !== 'dalam_radius').length;
      const withBantuan = allData.filter(p => p.total_bantuan > 0).length;
      document.getElementById('sum-total').textContent = total;
      document.getElementById('sum-jiwa').textContent = jiwa;
      document.getElementById('sum-dalam').textContent = dalam;
      document.getElementById('sum-luar').textContent = luar;
      document.getElementById('sum-bantuan').textContent = withBantuan;
    }

    function applyFilters() {
      const query = document.getElementById('search-input').value.toLowerCase().trim();
      const proximity = document.getElementById('filter-proximity').value;
      const riId = document.getElementById('filter-ri').value;
      const bantuan = document.getElementById('filter-bantuan').value;

      filteredData = allData.filter(p => {
        const matchQ = !query || p.nama.toLowerCase().includes(query) || (p.nik && p.nik.includes(query)) || (p.alamat && p.alamat.toLowerCase().includes(query)) || (p.nama_rumah_ibadah && p.nama_rumah_ibadah.toLowerCase().includes(query));
        const matchProx = !proximity || p.status_proximity === proximity;
        const matchRI = !riId || String(p.rumah_ibadah_id) === riId;
        const matchBantuan = !bantuan || (bantuan === 'pernah' ? p.total_bantuan > 0 : p.total_bantuan === 0);
        return matchQ && matchProx && matchRI && matchBantuan;
      });

      // Sort
      filteredData.sort((a, b) => {
        let va = a[sortField], vb = b[sortField];
        if (typeof va === 'string') va = va.toLowerCase();
        if (typeof vb === 'string') vb = vb.toLowerCase();
        if (va < vb) return sortDir === 'asc' ? -1 : 1;
        if (va > vb) return sortDir === 'asc' ? 1 : -1;
        return 0;
      });

      currentPage = 1;
      document.getElementById('filter-count').textContent = `${filteredData.length} data`;
      renderTable();
    }

    function sortBy(field) {
      if (sortField === field) {
        sortDir = sortDir === 'asc' ? 'desc' : 'asc';
      } else {
        sortField = field;
        sortDir = 'asc';
      }
      // Update sort icons
      document.querySelectorAll('.pm-table thead th').forEach(th => {
        th.classList.remove('sort-asc', 'sort-desc');
      });
      const ths = document.querySelectorAll('.pm-table thead th');
      const fieldIdx = { 'nama': 0, 'nik': 1, 'jumlah_anggota': 2, 'total_bantuan': 5 };
      if (fieldIdx[field] !== undefined) {
        ths[fieldIdx[field]].classList.add(sortDir === 'asc' ? 'sort-asc' : 'sort-desc');
      }
      applyFilters();
    }

    function renderTable() {
      const tbody = document.getElementById('pm-tbody');
      const total = filteredData.length;

      if (total === 0) {
        tbody.innerHTML = `
          <tr><td colspan="7">
            <div class="empty-state">
              <div class="empty-state-icon">🔍</div>
              <h3>Tidak ada data</h3>
              <p>Coba ubah kriteria pencarian atau filter.</p>
            </div>
          </td></tr>`;
        document.getElementById('pagination').style.display = 'none';
        return;
      }

      const totalPages = Math.ceil(total / PAGE_SIZE);
      if (currentPage > totalPages) currentPage = totalPages;
      const start = (currentPage - 1) * PAGE_SIZE;
      const slice = filteredData.slice(start, start + PAGE_SIZE);

      tbody.innerHTML = slice.map((p, idx) => {
        const inR = p.status_proximity === 'dalam_radius';
        const hasPemb = p.bantuan_pemberdayaan > 0;
        const hasKons = p.bantuan_konsumtif > 0;
        return `
          <tr onclick="openDrawer(${p.id})">
            <td>
              <div class="cell-name">${esc(p.nama)}</div>
              ${p.alamat ? `<div class="cell-sub">📍 ${esc(p.alamat.substring(0, 50))}${p.alamat.length > 50 ? '…' : ''}</div>` : ''}
            </td>
            <td><span style="font-family:monospace;font-size:11px">${p.nik ? esc(p.nik) : '<span style="color:#c4c4c4">—</span>'}</span></td>
            <td><strong>${p.jumlah_anggota}</strong> jiwa</td>
            <td><span class="badge ${inR ? 'badge-dalam' : 'badge-luar'}">${inR ? '✅ Dalam' : '❌ Luar'}</span></td>
            <td>
              ${p.nama_rumah_ibadah ? `<span style="font-size:12px">⛪ ${esc(p.nama_rumah_ibadah)}</span>` : '<span style="color:#c4c4c4;font-size:11px">—</span>'}
            </td>
            <td>
              <div class="aid-pills">
                ${p.total_bantuan === 0 ? '<span style="color:#c4c4c4;font-size:11px">Belum ada</span>' : ''}
                ${hasPemb ? `<span class="badge badge-pemberdayaan">📚 ${p.bantuan_pemberdayaan}</span>` : ''}
                ${hasKons ? `<span class="badge badge-konsumtif">🛍️ ${p.bantuan_konsumtif}</span>` : ''}
              </div>
            </td>
            <td onclick="event.stopPropagation()">
              <div style="display:flex;gap:4px">
                <button class="btn btn-ghost btn-sm" style="padding:5px 8px;font-size:11px" onclick="openDrawer(${p.id})">👁 Detail</button>
              </div>
            </td>
          </tr>`;
      }).join('');

      // Pagination
      const pag = document.getElementById('pagination');
      const pagInfo = document.getElementById('pagination-info');
      const pagBtns = document.getElementById('pagination-btns');
      pag.style.display = 'flex';
      pagInfo.textContent = `Menampilkan ${start + 1}–${Math.min(start + PAGE_SIZE, total)} dari ${total} data`;

      // Build page buttons
      let btns = '';
      btns += `<button class="pg-btn" onclick="goPage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>‹</button>`;
      const rangeStart = Math.max(1, currentPage - 2);
      const rangeEnd = Math.min(totalPages, currentPage + 2);
      if (rangeStart > 1) btns += `<button class="pg-btn" onclick="goPage(1)">1</button>${rangeStart > 2 ? '<span style="padding:0 4px;color:#94a3b8">…</span>' : ''}`;
      for (let i = rangeStart; i <= rangeEnd; i++) {
        btns += `<button class="pg-btn ${i === currentPage ? 'active' : ''}" onclick="goPage(${i})">${i}</button>`;
      }
      if (rangeEnd < totalPages) btns += `${rangeEnd < totalPages - 1 ? '<span style="padding:0 4px;color:#94a3b8">…</span>' : ''}<button class="pg-btn" onclick="goPage(${totalPages})">${totalPages}</button>`;
      btns += `<button class="pg-btn" onclick="goPage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>›</button>`;
      pagBtns.innerHTML = btns;
    }

    function goPage(page) {
      const totalPages = Math.ceil(filteredData.length / PAGE_SIZE);
      if (page < 1 || page > totalPages) return;
      currentPage = page;
      renderTable();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    async function openDrawer(id) {
      document.getElementById('detail-overlay').classList.add('open');
      document.getElementById('drawer-body').innerHTML = `
        <div class="loading-spinner-wrap">
          <span class="spinner" style="width:20px;height:20px;border-width:3px;"></span>
          <p style="margin-top:12px">Memuat detail…</p>
        </div>`;

      try {
        const [pmRes, logRes] = await Promise.all([
          fetch(`api/penduduk_miskin.php?id=${id}`),
          fetch(`api/log_bantuan.php?penduduk_miskin_id=${id}`)
        ]);
        const [pmData, logData] = await Promise.all([pmRes.json(), logRes.json()]);
        if (pmData.status !== 'success') throw new Error(pmData.message);
        renderDrawer(pmData.data, logData.data || []);
      } catch (err) {
        document.getElementById('drawer-body').innerHTML = `<p style="color:#ef4444">Gagal memuat: ${esc(err.message)}</p>`;
      }
    }

    function renderDrawer(p, logs) {
      document.getElementById('drawer-title').textContent = p.nama;
      const inR = p.status_proximity === 'dalam_radius';

      const isAdmin = window.currentUser && window.currentUser.role === 'admin';
      const isPetugas = window.currentUser && window.currentUser.role === 'petugas_lapangan';
      const isResidentInMyRadius = isPetugas && inR && String(p.rumah_ibadah_id) === String(window.currentUser.rumah_ibadah_id);
      const canEdit = isAdmin || isResidentInMyRadius;

      document.getElementById('drawer-body').innerHTML = `
        <!-- Proximity status -->
        <div class="proximity-card ${inR ? 'dalam' : 'luar'}">
          ${inR ? `✅ Dalam radius jangkauan <strong>${esc(p.nama_rumah_ibadah || 'rumah ibadah')}</strong>` : '❌ Di luar radius semua rumah ibadah'}
        </div>

        <!-- Basic info -->
        <div class="section-heading">Informasi Pribadi</div>
        <div>
          <div class="info-row"><span class="info-label">Nama Lengkap</span><span class="info-val">${esc(p.nama)}</span></div>
          <div class="info-row"><span class="info-label">NIK</span><span class="info-val" style="font-family:monospace">${p.nik ? esc(p.nik) : '—'}</span></div>
          <div class="info-row"><span class="info-label">No. WhatsApp</span><span class="info-val">${p.no_wa ? esc(p.no_wa) : '—'}</span></div>
          <div class="info-row"><span class="info-label">Jumlah Anggota</span><span class="info-val">${p.jumlah_anggota} jiwa</span></div>
          <div class="info-row"><span class="info-label">Alamat</span><span class="info-val">${p.alamat ? esc(p.alamat) : '—'}</span></div>
          <div class="info-row"><span class="info-label">Koordinat</span><span class="info-val" style="font-family:monospace;font-size:11px">${p.latitude.toFixed(6)}, ${p.longitude.toFixed(6)}</span></div>
          <div class="info-row"><span class="info-label">Terdata Sejak</span><span class="info-val">${new Date(p.created_at).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}</span></div>
        </div>

        <!-- Bantuan summary -->
        <div class="section-heading">Ringkasan Bantuan</div>
        <div>
          ${p.ringkasan_bantuan && p.ringkasan_bantuan.length ? p.ringkasan_bantuan.map(rb => `
            <div class="info-row">
              <span class="info-label">${rb.tipe_bantuan === 'Pemberdayaan' ? '📚 Pemberdayaan' : '🛍️ Konsumtif'}</span>
              <span class="info-val">${rb.jumlah} kali</span>
            </div>
          `).join('') : '<div style="color:#94a3b8;font-size:13px;padding:8px 0">Belum pernah menerima bantuan.</div>'}
        </div>

        <!-- Action buttons -->
        ${canEdit ? `
          <div style="margin-top:16px;display:flex;gap:8px">
            <button class="btn btn-primary btn-sm" onclick="openLogBantuanFromDrawer(${p.id}, '${esc(p.nama)}')">📋 Catat Bantuan</button>
            <button class="btn btn-ghost btn-sm" onclick="window.location.href='?page=map'">✏️ Edit di Peta</button>
          </div>
        ` : ''}

        <!-- Log history -->
        ${logs.length ? `
          <div class="section-heading">Riwayat Bantuan (${logs.length})</div>
          <div class="log-list">
            ${logs.map(l => `
              <div class="log-entry">
                <div class="log-type-dot ${l.tipe_bantuan === 'Pemberdayaan' ? 'pem' : 'kon'}"></div>
                <div class="log-entry-info">
                  <div class="log-entry-name">${l.tipe_bantuan === 'Pemberdayaan' ? '📚' : '🛍️'} ${esc(l.tipe_bantuan)}${l.sub_kategori ? ' — ' + esc(l.sub_kategori) : ''}</div>
                  <div class="log-entry-detail">Dari: ${esc(l.nama_rumah_ibadah)}${l.nilai_bantuan ? ' · Rp' + new Intl.NumberFormat('id-ID').format(l.nilai_bantuan) : ''}${l.keterangan ? ' · ' + esc(l.keterangan) : ''}</div>
                </div>
                <div class="log-entry-date">${l.tanggal_bantuan}</div>
              </div>
            `).join('')}
          </div>
        ` : ''}
      `;
    }

    function closeDrawer(e) {
      if (e && e.target !== document.getElementById('detail-overlay')) return;
      document.getElementById('detail-overlay').classList.remove('open');
    }

    function openLogBantuanFromDrawer(pmId, pmNama) {
      // Redirect to peta with log bantuan opened
      window.location.href = '?page=map';
    }

    function exportCSV() {
      if (!filteredData.length) return toast('Tidak ada data untuk diekspor', 'error');
      const headers = ['Nama', 'NIK', 'No WA', 'Alamat', 'Jumlah Anggota', 'Status Proximity', 'Rumah Ibadah', 'Total Bantuan', 'Bantuan Pemberdayaan', 'Bantuan Konsumtif', 'Latitude', 'Longitude'];
      const rows = filteredData.map(p => [
        p.nama, p.nik || '', p.no_wa || '', p.alamat || '',
        p.jumlah_anggota, p.status_proximity, p.nama_rumah_ibadah || '',
        p.total_bantuan, p.bantuan_pemberdayaan, p.bantuan_konsumtif,
        p.latitude, p.longitude
      ]);
      const csv = [headers, ...rows].map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(',')).join('\n');
      const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `penduduk_miskin_${new Date().toISOString().slice(0, 10)}.csv`;
      a.click();
      URL.revokeObjectURL(url);
      toast(`${filteredData.length} data berhasil diekspor`, 'success');
    }

    function esc(s) {
      if (s == null) return '';
      return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    function toast(msg, type = 'info') {
      const t = document.createElement('div');
      t.className = `toast ${type}`;
      t.textContent = msg;
      document.getElementById('toast-container').appendChild(t);
      setTimeout(() => t.remove(), 3500);
    }

    async function handleLogout() {
      if (!confirm('Apakah Anda yakin ingin keluar?')) return;
      try {
        const response = await fetch('api/logout.php');
        const data = await response.json();
        if (data.status === 'success') window.location.href = '?page=login';
      } catch { alert('Gagal logout.'); }
    }