function renderSpbuPanel(pb) {
  return callAPI('spbu.php').then(res => {
    const data = res.data || [];
    const d24 = data.filter(s => s.buka_24jam);
    const dn24 = data.filter(s => !s.buka_24jam);

    pb.innerHTML = `
      <div class="layer-section">
        <div class="layer-section-title">Filter Layer</div>
        ${mkLayerItem('spbu24', '#16a34a', 'SPBU Buka 24 Jam', d24.length)}
        ${mkLayerItem('spbuNon24', '#94a3b8', 'SPBU Tidak 24 Jam', dn24.length)}
      </div>
      <div class="layer-section">
        <div class="layer-section-title">Tambah Data</div>
        <button class="btn-add" id="btn-add-spbu" onclick="startAddSPBU()">＋ Tambah SPBU</button>
      </div>
      <div class="layer-section">
        <div class="layer-section-title">Daftar SPBU (${data.length})</div>
        <div class="data-list">
          ${data.length ? data.map(s => `
            <div class="data-item" onclick="map.flyTo([${s.latitude},${s.longitude}],17)">
              <div class="item-icon">⛽</div>
              <div class="item-info">
                <div class="item-name">${esc(s.nama)}</div>
                <div class="item-sub">${s.no_wa || '—'}</div>
              </div>
              <div style="display:flex;align-items:center;gap:5px">
                <div class="item-badge ${s.buka_24jam ? 'badge-green' : 'badge-amber'}">${s.buka_24jam ? '24 JAM' : 'TERBATAS'}</div>
                <button class="btn btn-ghost btn-sm" onclick="event.stopPropagation();editSPBU(${s.id})">✏</button>
                <button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteSPBU(${s.id})">✕</button>
              </div>
            </div>`).join('') : '<div class="loading">Belum ada data</div>'}
        </div>
      </div>`;

    loadSPBULayer(data);
    registerSearchEntries('spbu', data.map(s => ({
      key: `spbu:${s.id}`,
      label: s.nama,
      subtitle: `SPBU · ${s.buka_24jam ? '24 Jam' : 'Tidak 24 Jam'}${s.alamat ? ` · ${s.alamat}` : ''}`,
      typeLabel: 'SPBU',
      icon: '⛽',
      searchText: normalizeSearchText(`${s.nama} ${s.no_wa || ''} spbu`),
      focus: () => focusMarkerById(s.buka_24jam ? 'spbu24' : 'spbuNon24', s.id)
    })));
    updateStatusCount();
  });
}

function loadSPBULayer(data) {
  layers.spbu24.clearLayers();
  layers.spbuNon24.clearLayers();
  data.forEach(s => {
    const is24 = s.buka_24jam;
    const color = is24 ? '#16a34a' : '#64748b';
    const icon = L.divIcon({
      className: '',
      html: `<div style="width:30px;height:30px;background:${color};border:3px solid #fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.2);cursor:grab;">⛽</div>`,
      iconSize: [30, 30], iconAnchor: [15, 15]
    });
    const marker = L.marker([s.latitude, s.longitude], { icon, draggable: true }).bindPopup(`<h4>⛽ ${esc(s.nama)}</h4>
      <p><b>Status:</b> ${is24 ? '<span style="color:#16a34a;font-weight:600">✅ Buka 24 Jam</span>' : '⏰ Tidak 24 Jam'}</p>
      ${s.no_wa ? `<p><b>WA:</b> ${s.no_wa}</p>` : ''}
      ${s.alamat ? `<p><b>Alamat:</b> ${esc(s.alamat)}</p>` : ''}
      <div class="popup-drag-hint">↔ Seret marker untuk pindahkan lokasi — auto-save</div>
      <div class="popup-actions">
        <button class="btn btn-ghost btn-sm" onclick="editSPBU(${s.id})">✏ Edit</button>
        <button class="btn btn-danger btn-sm" onclick="deleteSPBU(${s.id})">✕ Hapus</button>
      </div>`);
    marker._dataId = s.id;

    marker.on('dragend', async function (ev) {
      const { lat, lng } = ev.target.getLatLng();
      const res = await callAPI(`spbu.php?id=${s.id}`, 'PUT', {
        nama: s.nama, no_wa: s.no_wa, alamat: s.alamat,
        buka_24jam: s.buka_24jam, latitude: lat, longitude: lng
      });
      if (res.status === 'success') {
        s.latitude = lat;
        s.longitude = lng;
        toast(`📍 ${s.nama} dipindahkan`, 'success');
      } else {
        toast('Gagal update: ' + res.message, 'error');
        marker.setLatLng([s.latitude, s.longitude]);
      }
    });

    is24 ? layers.spbu24.addLayer(marker) : layers.spbuNon24.addLayer(marker);
  });
}

function startAddSPBU() {
  cancelMapClick();
  document.getElementById('btn-add-spbu').classList.add('active');
  showInstruction('Klik di peta untuk menentukan lokasi SPBU');
  onceMapClick((lat, lng) => {
    document.getElementById('btn-add-spbu').classList.remove('active');
    hideInstruction();
    openSPBUForm(null, lat, lng);
  });
}

function openSPBUForm(data, lat, lng) {
  const isEdit = !!data;
  const fLat = isEdit ? data.latitude : lat;
  const fLng = isEdit ? data.longitude : lng;
  openModal(isEdit ? 'Edit SPBU' : 'Tambah SPBU', `
    <div class="form-coord">📍 Koordinat: ${fLat.toFixed(7)}, ${fLng.toFixed(7)}</div>
    <div class="form-group"><label class="form-label">Nama SPBU *</label>
      <input class="form-input" id="spbu-nama" value="${esc(isEdit ? data.nama : '')}" placeholder="SPBU 64.751.01"/></div>
    <div class="form-group"><label class="form-label">No. WhatsApp</label>
      <input class="form-input" id="spbu-nowa" value="${esc(isEdit ? data.no_wa || '' : '')}" placeholder="081234…"/></div>
    <div class="form-group"><label class="form-label">Alamat</label>
      <input class="form-input" id="spbu-alamat" value="${esc(isEdit ? data.alamat || '' : '')}" placeholder="Jl. …"/></div>
    <div class="form-group"><label class="form-label">Status Operasional</label>
      <select class="form-select" id="spbu-24">
        <option value="1"${isEdit && data.buka_24jam ? ' selected' : ''}>✅ Buka 24 Jam</option>
        <option value="0"${isEdit && !data.buka_24jam ? ' selected' : ''}>⏰ Tidak 24 Jam</option>
      </select></div>`,
    `<button class="btn btn-ghost" onclick="closeModal()">Batal</button>
   <button class="btn btn-primary" onclick="saveSPBU(${isEdit ? data.id : 'null'},${fLat},${fLng})">💾 Simpan</button>`);
}

async function saveSPBU(id, lat, lng) {
  const body = {
    nama: document.getElementById('spbu-nama').value.trim(),
    no_wa: document.getElementById('spbu-nowa').value.trim(),
    alamat: document.getElementById('spbu-alamat').value.trim(),
    buka_24jam: document.getElementById('spbu-24').value === '1',
    latitude: lat,
    longitude: lng
  };
  if (!body.nama) return toast('Nama wajib diisi', 'error');
  const res = await callAPI(id ? `spbu.php?id=${id}` : 'spbu.php', id ? 'PUT' : 'POST', body);
  if (res.status === 'success') {
    toast(res.message, 'success');
    closeModal();
    switchTab('spbu');
  } else {
    toast(res.message, 'error');
  }
}

async function editSPBU(id) {
  map.closePopup();
  const r = await callAPI(`spbu.php?id=${id}`);
  if (r.data) openSPBUForm(r.data, r.data.latitude, r.data.longitude);
}

async function deleteSPBU(id) {
  if (!confirm('Hapus SPBU?')) return;
  const r = await callAPI(`spbu.php?id=${id}`, 'DELETE');
  if (r.status === 'success') {
    toast('Dihapus', 'success');
    map.closePopup();
    switchTab('spbu');
  }
}