// ===============================
// KONFIGURASI API
// ===============================
const API = {
  spbu:   'api/spbu.php',
  jalan:  'api/jalan.php',
  parsil: 'api/parsil.php'
};

// ===============================
// WARNA TEMA
// ===============================
const COLORS = {
  spbu24:    { fill: '#22c55e', stroke: '#15803d', glow: 'rgba(34,197,94,.35)' },
  spbuLtd:   { fill: '#f87171', stroke: '#dc2626', glow: 'rgba(248,113,113,.35)' },
  jalanNasional:  '#f97316',
  jalanProvinsi:  '#3b82f6',
  jalanKabupaten: '#10b981',
  SHM: { stroke: '#d97706', fill: '#fef3c7' },
  HGB: { stroke: '#8b5cf6', fill: '#ede9fe' },
  HGU: { stroke: '#0891b2', fill: '#cffafe' },
  HP:  { stroke: '#ec4899', fill: '#fce7f3' },
};

// ===============================
// STATE GLOBAL
// ===============================
let map;
let layers = { jalan: null, parsil: null };
let spbu24Group, spbuLtdGroup;

let currentGeom    = null;
let drawPoints     = [];
let tempLayer      = null;
let savedDrawPoints = [];

let allSpbu = [], allJalan = [], allParsil = [];
let isDraggingMarker = false;

let vertexMarkers = [];
let undoStack = [];
let redoStack = [];

let editingFeature = null;

// ===============================
// CONFIRM DIALOG
// ===============================
function showConfirm(message, title = 'Konfirmasi') {
  return new Promise(resolve => {
    const overlay  = document.getElementById('confirm-overlay');
    const titleEl  = document.getElementById('confirm-title');
    const msgEl    = document.getElementById('confirm-message');
    if (titleEl) titleEl.textContent = title;
    if (msgEl)   msgEl.textContent   = message;
    overlay.classList.add('open');
    const btnOk     = document.getElementById('confirm-ok');
    const btnCancel = document.getElementById('confirm-cancel');
    function cleanup() {
      overlay.classList.remove('open');
      btnOk.removeEventListener('click', onOk);
      btnCancel.removeEventListener('click', onCancel);
    }
    function onOk()     { cleanup(); resolve(true); }
    function onCancel() { cleanup(); resolve(false); }
    btnOk.addEventListener('click', onOk);
    btnCancel.addEventListener('click', onCancel);
  });
}

function showToast(msg, type = 'ok') {
  const container = document.getElementById('toasts');
  const toast = document.createElement('div');
  toast.className = `toast ${type}`;
  toast.innerHTML = (type === 'ok' ? '✅ ' : '❌ ') + msg;
  container.appendChild(toast);
  setTimeout(() => toast.remove(), 3200);
}

// ===============================
// ICON SPBU
// ===============================
function makeSpbuIcon(is24) {
  const c = is24 ? COLORS.spbu24 : COLORS.spbuLtd;
  const id = is24 ? 'g' : 'r';
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
    <defs>
      <filter id="glow-${id}" x="-40%" y="-40%" width="180%" height="180%">
        <feGaussianBlur stdDeviation="2.5" result="blur"/>
        <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>
    <ellipse cx="16" cy="38" rx="7" ry="2.5" fill="rgba(0,0,0,0.18)"/>
    <path d="M16 2 C9.4 2 4 7.4 4 14 C4 22 16 36 16 36 C16 36 28 22 28 14 C28 7.4 22.6 2 16 2Z"
      fill="${c.fill}" stroke="${c.stroke}" stroke-width="1.8" filter="url(#glow-${id})"/>
    <circle cx="16" cy="14" r="7" fill="white" opacity="0.92"/>
    <text x="16" y="18.5" text-anchor="middle" font-size="10" font-family="sans-serif">⛽</text>
  </svg>`;
  return L.divIcon({ html: svg, className: '', iconSize: [32, 40], iconAnchor: [16, 38], popupAnchor: [0, -38] });
}

// ===============================
// INIT MAP
// ===============================
function initMap() {
  map = L.map('map').setView([-0.0263, 109.3425], 14);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap', maxZoom: 19
  }).addTo(map);

  map.on('click', onMapClick);
  map.on('mousemove', e => {
    document.getElementById('cur-lat').innerText = e.latlng.lat.toFixed(5);
    document.getElementById('cur-lng').innerText = e.latlng.lng.toFixed(5);
  });

  spbu24Group  = L.layerGroup().addTo(map);
  spbuLtdGroup = L.layerGroup().addTo(map);
}

// ===============================
// BUILD POPUP — SPBU
// ===============================
function buildSpbuPopup(s) {
  const nama  = s.namaspbu || '—';
  const is24  = s.statusbuka === 'full';
  const coord = (s.lat && s.lng) ? `${Number(s.lat).toFixed(6)}, ${Number(s.lng).toFixed(6)}` : '—';
  const wa    = s.nomorwa || '';
  const badgeCls = is24 ? 'bg' : 'br';
  const statusLabel = is24 ? 'Buka 24 Jam' : 'Tidak 24 Jam';

  return `
  <div class="pcard-detail">
    <div class="pcd-header">
      <div class="pcd-header-icon">⛽</div>
      <div class="pcd-header-text">
        <div class="pcd-title">${nama}</div>
        <div class="pcd-subtitle">SPBU</div>
      </div>
    </div>
    <div class="pcd-rows">
      <div class="pcd-row">
        <span class="pcd-label">📍 Koordinat</span>
        <span class="pcd-val">${coord}</span>
      </div>
      <div class="pcd-row">
        <span class="pcd-label">⏰ Status</span>
        <span class="badge ${badgeCls}">${statusLabel}</span>
      </div>
      ${wa ? `<div class="pcd-row">
        <span class="pcd-label">📱 WhatsApp</span>
        <span class="pcd-val">${wa}</span>
      </div>` : ''}
    </div>
    <div class="pcd-actions">
      <button class="pbtn pbtn-edit" onclick="editSpbu(${s.id})">✏️ Edit</button>
      <button class="pbtn pbtn-del"  onclick="hapusSpbu(${s.id})">🗑️ Hapus</button>
    </div>
  </div>`;
}

// ===============================
// BUILD POPUP — JALAN
// ===============================
function buildJalanPopup(p) {
  const nama    = p.nama   || '—';
  const status  = p.status || 'kabupaten';
  const panjang = p.panjang_meter ? Number(p.panjang_meter).toFixed(2) + ' m' : '—';
  let statusLabel = 'Kabupaten', badgeClass = 'bb-green';
  if (status === 'nasional')  { statusLabel = 'Nasional';  badgeClass = 'bb-orange'; }
  if (status === 'provinsi')  { statusLabel = 'Provinsi';  badgeClass = 'bb-blue'; }

  return `
  <div class="pcard-detail">
    <div class="pcd-header">
      <div class="pcd-header-icon jalan">🛣️</div>
      <div class="pcd-header-text">
        <div class="pcd-title">${nama}</div>
        <div class="pcd-subtitle">Jalan</div>
      </div>
    </div>
    <div class="pcd-rows">
      <div class="pcd-row">
        <span class="pcd-label">🛣️ Status</span>
        <span class="badge ${badgeClass}">${statusLabel}</span>
      </div>
      <div class="pcd-row">
        <span class="pcd-label">📏 Panjang</span>
        <span class="pcd-val">${panjang}</span>
      </div>
    </div>
    <div class="pcd-actions">
      <button class="pbtn pbtn-edit" onclick="editJalan(${p.id})">✏️ Edit Atribut</button>
      <button class="pbtn pbtn-move" onclick="startEditGeomJalan(${p.id})">📐 Edit Geometri</button>
      <button class="pbtn pbtn-del"  onclick="hapusJalan(${p.id})">🗑️ Hapus</button>
    </div>
  </div>`;
}

// ===============================
// BUILD POPUP — PARSIL
// ===============================
function buildParsilPopup(props) {
  const nama   = props.nama || '—';
  const status = props.status_kepemilikan || 'SHM';
  const luas   = props.luas_m2 ? Number(props.luas_m2).toFixed(2) + ' m²' : '—';
  const badgeMap = { SHM: 'bp-shm', HGB: 'bp-hgb', HGU: 'bp-hgu', HP: 'bp-hp' };
  const badgeClass = badgeMap[status] || 'bp-shm';

  return `
  <div class="pcard-detail">
    <div class="pcd-header">
      <div class="pcd-header-icon parsil">🗺️</div>
      <div class="pcd-header-text">
        <div class="pcd-title">${nama}</div>
        <div class="pcd-subtitle">Parsil Tanah</div>
      </div>
    </div>
    <div class="pcd-rows">
      <div class="pcd-row">
        <span class="pcd-label">📋 Kepemilikan</span>
        <span class="badge ${badgeClass}">${status}</span>
      </div>
      <div class="pcd-row">
        <span class="pcd-label">📐 Luas</span>
        <span class="pcd-val">${luas}</span>
      </div>
    </div>
    <div class="pcd-actions">
      <button class="pbtn pbtn-edit" onclick="editParsil(${props.id})">✏️ Edit Atribut</button>
      <button class="pbtn pbtn-move" onclick="startEditGeomParsil(${props.id})">📐 Edit Geometri</button>
      <button class="pbtn pbtn-del"  onclick="hapusParsil(${props.id})">🗑️ Hapus</button>
    </div>
  </div>`;
}

// ===============================
// RENDER SPBU
// ===============================
function renderSpbuLayer() {
  spbu24Group.clearLayers();
  spbuLtdGroup.clearLayers();

  allSpbu.forEach(s => {
    const is24   = s.statusbuka === 'full';
    const icon   = makeSpbuIcon(is24);
    const marker = L.marker([s.lat, s.lng], { icon, draggable: true, title: s.namaspbu });
    marker.bindPopup(buildSpbuPopup(s));
    marker.on('click', () => { if (!currentGeom) marker.openPopup(); });
    marker.on('dragstart', () => { isDraggingMarker = true; marker.setOpacity(0.65); });
    marker.on('dragend', async () => {
      isDraggingMarker = false;
      marker.setOpacity(1);
      const newPos = marker.getLatLng();
      await updateSpbuCoordinates(s.id, newPos.lat, newPos.lng);
      s.lat = newPos.lat; s.lng = newPos.lng;
      marker.setPopupContent(buildSpbuPopup(s));
      showToast('Koordinat SPBU diperbarui');
    });
    if (is24) spbu24Group.addLayer(marker);
    else      spbuLtdGroup.addLayer(marker);
  });
}

// ===============================
// LOAD DATA
// ===============================
async function loadAllData() {
  try {
    const [spbuRes, jalanRes, parsilRes] = await Promise.all([
      fetch(API.spbu   + '?action=list').then(r => r.json()),
      fetch(API.jalan  + '?action=list').then(r => r.json()),
      fetch(API.parsil + '?action=list').then(r => r.json())
    ]);
    allSpbu   = spbuRes.data   || [];
    allJalan  = jalanRes.data  || [];
    allParsil = parsilRes.data || [];
    renderSpbuLayer();
    renderJalanLayer();
    renderParsilLayer();
    renderSpbuList();
  } catch (e) {
    console.error(e);
  } finally {
    document.getElementById('loading').style.display = 'none';
  }
}

// ===============================
// RENDER JALAN
// ===============================
function renderJalanLayer() {
  if (layers.jalan) map.removeLayer(layers.jalan);
  const geojson = allJalan.map(j => ({
    type: 'Feature', geometry: JSON.parse(j.geom), properties: j
  }));
  layers.jalan = L.geoJSON(geojson, {
    style: f => {
      const s = f.properties.status;
      let color = COLORS.jalanKabupaten;
      if (s === 'nasional') color = COLORS.jalanNasional;
      else if (s === 'provinsi') color = COLORS.jalanProvinsi;
      return { color, weight: 4, opacity: 0.9 };
    },
    onEachFeature: (f, layer) => {
      layer.bindPopup(buildJalanPopup(f.properties));
      layer.on('click', e => { if (!currentGeom) { L.DomEvent.stopPropagation(e); layer.openPopup(); } });
    }
  }).addTo(map);
}

// ===============================
// RENDER PARSIL
// ===============================
function renderParsilLayer() {
  if (layers.parsil) map.removeLayer(layers.parsil);
  const geojson = allParsil.map(p => ({
    type: 'Feature', geometry: JSON.parse(p.geom), properties: p
  }));
  layers.parsil = L.geoJSON(geojson, {
    style: f => {
      const c = COLORS[f.properties.status_kepemilikan] || COLORS.SHM;
      return { color: c.stroke, fillColor: c.fill, weight: 2.5, fillOpacity: 0.45 };
    },
    onEachFeature: (f, layer) => {
      layer.bindPopup(buildParsilPopup(f.properties));
      layer.on('click', e => { if (!currentGeom) { L.DomEvent.stopPropagation(e); layer.openPopup(); } });
    }
  }).addTo(map);
}

// ===============================
// LIST SPBU & STATS
// ===============================
function renderSpbuList() {
  const el = document.getElementById('spbu-list');
  if (!el) return;
  document.getElementById('cnt-total').innerText  = allSpbu.length;
  document.getElementById('cnt-24').innerText     = allSpbu.filter(s => s.statusbuka === 'full').length;
  document.getElementById('cnt-jalan').innerText  = allJalan.length;
  document.getElementById('cnt-parsil').innerText = allParsil.length;

  if (!allSpbu.length) {
    el.innerHTML = '<div class="empty">Belum ada SPBU tercatat.</div>';
    return;
  }
  el.innerHTML = allSpbu.map(s => {
    const lat = parseFloat(s.lat) || 0;
    const lng = parseFloat(s.lng) || 0;
    const dot = s.statusbuka === 'full' ? 'dot-green' : 'dot-red';
    return `
    <div class="spbu-item" onclick="flyTo(${lat},${lng})">
      <div class="si-top">
        <div class="si-name">
          <span class="si-dot ${dot}"></span>
          ${s.namaspbu || '—'}
        </div>
        <div class="si-actions" onclick="event.stopPropagation()">
          <button class="ib" title="Edit"  onclick="editSpbu(${s.id})">✏️</button>
          <button class="ib del" title="Hapus" onclick="hapusSpbu(${s.id})">🗑️</button>
        </div>
      </div>
    </div>`;
  }).join('');
}

function flyTo(lat, lng) { if (map) map.setView([lat, lng], 16); }

// ===============================
// EDIT / HAPUS SPBU
// ===============================
function editSpbu(id) {
  const s = allSpbu.find(x => x.id == id);
  if (!s) return showToast('Data SPBU tidak ditemukan', 'er');
  document.getElementById('e-spbu-id').value     = s.id;
  document.getElementById('e-spbu-nama').value   = s.namaspbu || '';
  document.getElementById('e-spbu-wa').value     = s.nomorwa  || '';
  document.getElementById('e-spbu-status').value = s.statusbuka || 'limited';
  openModal('m-edit-spbu');
}

async function hapusSpbu(id) {
  const ok = await showConfirm('Hapus SPBU ini? Tindakan tidak dapat dibatalkan.', 'Hapus SPBU');
  if (!ok) return;
  try {
    const res = await fetch(API.spbu, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'delete', id })
    });
    const j = await res.json();
    if (j.status === 'success') { loadAllData(); showToast('SPBU berhasil dihapus'); }
    else showToast(j.message || 'Gagal hapus', 'er');
  } catch (e) { showToast('Gagal: ' + e.message, 'er'); }
}

async function updateSpbu() {
  const id        = parseInt(document.getElementById('e-spbu-id').value || 0);
  const namaspbu  = document.getElementById('e-spbu-nama').value;
  const nomorwa   = document.getElementById('e-spbu-wa').value;
  const statusbuka = document.getElementById('e-spbu-status').value;
  try {
    const res = await fetch(API.spbu, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'update', id, namaspbu, nomorwa, statusbuka })
    });
    const j = await res.json();
    if (j.status === 'success') { closeModal('m-edit-spbu'); loadAllData(); showToast('SPBU diperbarui'); }
    else showToast(j.message || 'Gagal update', 'er');
  } catch (e) { showToast('Gagal: ' + e.message, 'er'); }
}

async function updateSpbuCoordinates(id, lat, lng) {
  const spbu = allSpbu.find(x => x.id == id);
  if (!spbu) return;
  await fetch(API.spbu, {
    method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      action: 'update', id,
      namaspbu: spbu.namaspbu, nomorwa: spbu.nomorwa, statusbuka: spbu.statusbuka,
      koordinat: { type: 'Point', coordinates: [lng, lat] }
    })
  });
}

// ===============================
// EDIT / HAPUS JALAN
// ===============================
function editJalan(id) {
  const j = allJalan.find(x => x.id == id);
  if (!j) return showToast('Data jalan tidak ditemukan', 'er');
  document.getElementById('e-jalan-id').value  = j.id;
  document.getElementById('e-j-nama').value    = j.nama   || '';
  document.getElementById('e-j-status').value  = j.status || 'kabupaten';
  document.getElementById('e-j-panjang').value = j.panjang_meter || '';
  openModal('m-edit-jalan');
}

async function hapusJalan(id) {
  const ok = await showConfirm('Hapus jalan ini? Tindakan tidak dapat dibatalkan.', 'Hapus Jalan');
  if (!ok) return;
  try {
    const res = await fetch(API.jalan, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'delete', id })
    });
    const j = await res.json();
    if (j.status === 'success') { loadAllData(); showToast('Jalan berhasil dihapus'); }
    else showToast(j.message || 'Gagal hapus', 'er');
  } catch (e) { showToast('Gagal: ' + e.message, 'er'); }
}

async function updateJalan() {
  const id     = parseInt(document.getElementById('e-jalan-id').value || 0);
  const nama   = document.getElementById('e-j-nama').value;
  const status = document.getElementById('e-j-status').value;
  const panjang_meter = parseFloat(document.getElementById('e-j-panjang').value);
  try {
    const res = await fetch(API.jalan, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'update', id, nama, status, panjang_meter })
    });
    const j = await res.json();
    if (j.status === 'success') { closeModal('m-edit-jalan'); loadAllData(); showToast('Jalan diperbarui'); }
    else showToast(j.message || 'Gagal update', 'er');
  } catch (e) { showToast('Gagal: ' + e.message, 'er'); }
}

// ===============================
// EDIT GEOMETRI JALAN
// ===============================
function startEditGeomJalan(id) {
  map.closePopup();
  stopEditGeom();
  const j = allJalan.find(x => x.id == id);
  if (!j) return;
  const geom   = JSON.parse(j.geom);
  let coords   = geom.coordinates.map(c => [c[1], c[0]]);
  const geomLayer = L.polyline(coords, { color: '#f97316', weight: 4, dashArray: '8,5', opacity: 1 }).addTo(map);
  const vms    = [];
  const updatePolyline = () => {
    const pts = vms.map(vm => vm.getLatLng());
    geomLayer.setLatLngs(pts);
    const turfCoords = pts.map(p => [p.lng, p.lat]);
    if (turfCoords.length >= 2) {
      const panjang = turf.length(turf.lineString(turfCoords), { units: 'meters' });
      document.getElementById('geom-edit-info').textContent = `Panjang: ${panjang.toFixed(2)} m`;
    }
  };
  coords.forEach(c => {
    const vm = L.marker(c, { draggable: true, icon: vertexIcon() }).addTo(map);
    vm.on('drag', updatePolyline);
    vms.push(vm);
  });
  editingFeature = { type: 'jalan', id, geomLayer, vms };
  showEditGeomToolbar('Drag titik untuk edit geometri jalan');
}

// ===============================
// EDIT / HAPUS PARSIL
// ===============================
function editParsil(id) {
  const p = allParsil.find(x => x.id == id);
  if (!p) return showToast('Data parsil tidak ditemukan', 'er');
  document.getElementById('e-parsil-id').value  = p.id;
  document.getElementById('e-p-nama').value     = p.nama   || '';
  document.getElementById('e-p-status').value   = p.status_kepemilikan || 'SHM';
  document.getElementById('e-p-luas').value     = p.luas_m2 || '';
  openModal('m-edit-parsil');
}

async function hapusParsil(id) {
  const ok = await showConfirm('Hapus parsil ini? Tindakan tidak dapat dibatalkan.', 'Hapus Parsil');
  if (!ok) return;
  try {
    const res = await fetch(API.parsil, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'delete', id })
    });
    const j = await res.json();
    if (j.status === 'success') { loadAllData(); showToast('Parsil berhasil dihapus'); }
    else showToast(j.message || 'Gagal hapus', 'er');
  } catch (e) { showToast('Gagal: ' + e.message, 'er'); }
}

async function updateParsil() {
  const id = parseInt(document.getElementById('e-parsil-id').value || 0);
  const nama               = document.getElementById('e-p-nama').value;
  const status_kepemilikan = document.getElementById('e-p-status').value;
  const luas_m2            = parseFloat(document.getElementById('e-p-luas').value);
  try {
    const res = await fetch(API.parsil, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'update', id, nama, status_kepemilikan, luas_m2 })
    });
    const j = await res.json();
    if (j.status === 'success') { closeModal('m-edit-parsil'); loadAllData(); showToast('Parsil diperbarui'); }
    else showToast(j.message || 'Gagal update', 'er');
  } catch (e) { showToast('Gagal: ' + e.message, 'er'); }
}

// ===============================
// EDIT GEOMETRI PARSIL
// ===============================
function startEditGeomParsil(id) {
  map.closePopup();
  stopEditGeom();
  const p = allParsil.find(x => x.id == id);
  if (!p) return;
  const geom   = JSON.parse(p.geom);
  let coords   = geom.coordinates[0].slice(0, -1).map(c => [c[1], c[0]]);
  const geomLayer = L.polygon(coords, { color: '#8b5cf6', fillColor: '#ede9fe', weight: 2.5, dashArray: '8,5', fillOpacity: 0.3 }).addTo(map);
  const vms    = [];
  const updatePolygon = () => {
    const pts = vms.map(vm => vm.getLatLng());
    geomLayer.setLatLngs(pts);
    const turfCoords = [...pts.map(p => [p.lng, p.lat])];
    turfCoords.push(turfCoords[0]);
    if (turfCoords.length >= 4) {
      const luas = turf.area(turf.polygon([turfCoords]));
      document.getElementById('geom-edit-info').textContent = `Luas: ${luas.toFixed(2)} m²`;
    }
  };
  coords.forEach(c => {
    const vm = L.marker(c, { draggable: true, icon: vertexIcon() }).addTo(map);
    vm.on('drag', updatePolygon);
    vms.push(vm);
  });
  editingFeature = { type: 'parsil', id, geomLayer, vms };
  showEditGeomToolbar('Drag titik untuk edit geometri parsil');
}

function vertexIcon() {
  return L.divIcon({
    html: `<div style="width:14px;height:14px;background:#fff;border:2.5px solid #16a34a;border-radius:50%;box-shadow:0 2px 8px rgba(22,163,74,.4);cursor:grab;"></div>`,
    className: '', iconSize: [14, 14], iconAnchor: [7, 7]
  });
}

function showEditGeomToolbar(hint) {
  const tb = document.getElementById('geom-edit-toolbar');
  document.getElementById('geom-edit-hint').textContent = hint;
  document.getElementById('geom-edit-info').textContent = '';
  tb.classList.add('visible');
}

function stopEditGeom() {
  if (!editingFeature) return;
  if (editingFeature.geomLayer) map.removeLayer(editingFeature.geomLayer);
  editingFeature.vms.forEach(vm => { try { map.removeLayer(vm); } catch (e) {} });
  editingFeature = null;
  document.getElementById('geom-edit-toolbar').classList.remove('visible');
}

async function saveEditGeom() {
  if (!editingFeature) return;
  const { type, id, vms } = editingFeature;
  const pts = vms.map(vm => vm.getLatLng());
  try {
    if (type === 'jalan') {
      const coords  = pts.map(p => [p.lng, p.lat]);
      const panjang = turf.length(turf.lineString(coords), { units: 'meters' });
      const j = allJalan.find(x => x.id == id);
      const res = await fetch(API.jalan, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'update', id, nama: j.nama, status: j.status, panjang_meter: panjang, geom: { type: 'LineString', coordinates: coords } })
      });
      const data = await res.json();
      if (data.status === 'success') { showToast('Geometri jalan diperbarui'); stopEditGeom(); loadAllData(); }
      else showToast(data.message || 'Gagal simpan', 'er');
    } else if (type === 'parsil') {
      const coords = pts.map(p => [p.lng, p.lat]);
      coords.push(coords[0]);
      const luas = turf.area(turf.polygon([coords]));
      const p = allParsil.find(x => x.id == id);
      const res = await fetch(API.parsil, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'update', id, nama: p.nama, status_kepemilikan: p.status_kepemilikan, luas_m2: luas, geom: { type: 'Polygon', coordinates: [coords] } })
      });
      const data = await res.json();
      if (data.status === 'success') { showToast('Geometri parsil diperbarui'); stopEditGeom(); loadAllData(); }
      else showToast(data.message || 'Gagal simpan', 'er');
    }
  } catch (e) { showToast('Gagal: ' + e.message, 'er'); }
}

// ===============================
// DRAWING
// ===============================
function onMapClick(e) {
  if (isDraggingMarker) return;
  if (!currentGeom) return;
  if (currentGeom === 'point') {
    document.getElementById('spbu-lat').value = e.latlng.lat;
    document.getElementById('spbu-lng').value = e.latlng.lng;
    openModal('m-add-spbu');
    return;
  }
  drawPoints.push({ lat: e.latlng.lat, lng: e.latlng.lng });
  undoStack.push({ lat: e.latlng.lat, lng: e.latlng.lng });
  redoStack = [];
  drawTemp();
}

function drawTemp() {
  if (tempLayer) { map.removeLayer(tempLayer); tempLayer = null; }
  vertexMarkers.forEach(m => { try { map.removeLayer(m); } catch (e) {} });
  vertexMarkers = [];
  if (!drawPoints.length) { updateCounter(); return; }
  const latlngs = drawPoints.map(p => [p.lat, p.lng]);
  if (currentGeom === 'polyline' && drawPoints.length >= 2)
    tempLayer = L.polyline(latlngs, { color: COLORS.jalanProvinsi, weight: 3, dashArray: '7,5', opacity: .85 }).addTo(map);
  if (currentGeom === 'polygon' && drawPoints.length >= 3)
    tempLayer = L.polygon(latlngs, { color: COLORS.SHM.stroke, weight: 2.5, dashArray: '7,5', fillColor: COLORS.SHM.fill, fillOpacity: .25 }).addTo(map);
  drawPoints.forEach(p => {
    const vm = L.circleMarker([p.lat, p.lng], {
      radius: 6, color: '#fff', weight: 2.5,
      fillColor: currentGeom === 'polygon' ? COLORS.SHM.stroke : COLORS.jalanProvinsi, fillOpacity: 1
    }).addTo(map);
    vertexMarkers.push(vm);
  });
  updateCounter();
}

function undoDraw() { if (!drawPoints.length) return; redoStack.push(drawPoints.pop()); drawTemp(); }
function redoDraw() { if (!redoStack.length) return; drawPoints.push(redoStack.pop()); drawTemp(); }

function finishDrawing() {
  if (currentGeom === 'polyline') {
    if (drawPoints.length < 2) { showToast('Minimal 2 titik untuk membuat jalan!', 'er'); return; }
    finishJalanDrawing();
  } else if (currentGeom === 'polygon') {
    if (drawPoints.length < 3) { showToast('Minimal 3 titik untuk membuat parsil!', 'er'); return; }
    finishParsilDrawing();
  }
}

function finishJalanDrawing() {
  savedDrawPoints = drawPoints.map(p => ({ lat: p.lat, lng: p.lng }));
  const coords    = savedDrawPoints.map(p => [p.lng, p.lat]);
  const panjang   = turf.length(turf.lineString(coords), { units: 'meters' });
  document.getElementById('j-nama').value    = '';
  document.getElementById('j-status').value  = 'kabupaten';
  document.getElementById('j-panjang').value = panjang.toFixed(2);
  openModal('m-add-jalan');
}

function finishParsilDrawing() {
  savedDrawPoints = drawPoints.map(p => ({ lat: p.lat, lng: p.lng }));
  const coords    = savedDrawPoints.map(p => [p.lng, p.lat]);
  coords.push(coords[0]);
  const luas = turf.area(turf.polygon([coords]));
  document.getElementById('p-nama').value   = '';
  document.getElementById('p-status').value = 'SHM';
  document.getElementById('p-luas').value   = luas.toFixed(2);
  openModal('m-add-parsil');
}

async function saveSpbu() {
  const lat      = parseFloat(document.getElementById('spbu-lat').value);
  const lng      = parseFloat(document.getElementById('spbu-lng').value);
  const namaspbu = document.getElementById('spbu-nama').value.trim();
  if (!namaspbu)           { showToast('Nama SPBU wajib diisi!', 'er'); return; }
  if (isNaN(lat) || isNaN(lng)) { showToast('Koordinat tidak valid!', 'er'); return; }
  try {
    const res = await fetch(API.spbu, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        action: 'create', namaspbu,
        nomorwa:    document.getElementById('spbu-wa').value,
        statusbuka: document.getElementById('spbu-status').value,
        koordinat:  { type: 'Point', coordinates: [lng, lat] }
      })
    });
    const data = await res.json();
    if (data.status !== 'success') { showToast(data.message || 'Gagal simpan', 'er'); return; }
    closeModal('m-add-spbu'); deactivateGeom(); loadAllData(); showToast('SPBU berhasil ditambahkan');
  } catch (e) { showToast('Error: ' + e.message, 'er'); }
}

async function saveJalan() {
  const nama = document.getElementById('j-nama').value.trim();
  if (!nama) { showToast('Nama jalan wajib diisi!', 'er'); return; }
  if (savedDrawPoints.length < 2) { showToast('Data koordinat hilang, silakan gambar ulang.', 'er'); return; }
  try {
    const res = await fetch(API.jalan, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        action: 'create', nama,
        status:       document.getElementById('j-status').value,
        panjang_meter: parseFloat(document.getElementById('j-panjang').value),
        geom: { type: 'LineString', coordinates: savedDrawPoints.map(p => [p.lng, p.lat]) }
      })
    });
    const data = await res.json();
    if (data.status !== 'success') { showToast(data.message || 'Gagal simpan', 'er'); return; }
    closeModal('m-add-jalan'); deactivateGeom(); cancelDraw(); loadAllData(); showToast('Jalan berhasil ditambahkan');
  } catch (e) { showToast('Error: ' + e.message, 'er'); }
}

async function saveParsil() {
  const nama = document.getElementById('p-nama').value.trim();
  if (!nama) { showToast('Nama parsil wajib diisi!', 'er'); return; }
  if (savedDrawPoints.length < 3) { showToast('Data koordinat hilang, silakan gambar ulang.', 'er'); return; }
  const coords = savedDrawPoints.map(p => [p.lng, p.lat]);
  coords.push(coords[0]);
  try {
    const res = await fetch(API.parsil, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        action: 'create', nama,
        status_kepemilikan: document.getElementById('p-status').value,
        luas_m2: parseFloat(document.getElementById('p-luas').value),
        geom: { type: 'Polygon', coordinates: [coords] }
      })
    });
    const data = await res.json();
    if (data.status !== 'success') { showToast(data.message || 'Gagal simpan', 'er'); return; }
    closeModal('m-add-parsil'); deactivateGeom(); cancelDraw(); loadAllData(); showToast('Parsil berhasil ditambahkan');
  } catch (e) { showToast('Error: ' + e.message, 'er'); }
}

function cancelDraw() {
  drawPoints = []; undoStack = []; redoStack = []; savedDrawPoints = [];
  if (tempLayer) { try { map.removeLayer(tempLayer); } catch (e) {} tempLayer = null; }
  vertexMarkers.forEach(m => { try { map.removeLayer(m); } catch (e) {} });
  vertexMarkers = [];
  updateCounter();
  document.getElementById('draw-toolbar').classList.remove('visible');
}

function deactivateGeom() {
  currentGeom = null;
  document.querySelectorAll('.geom-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('geom-hint').classList.remove('on');
  document.getElementById('map').classList.remove('crosshair-cursor');
  document.getElementById('draw-toolbar').classList.remove('visible');
}

function openModal(id)  { document.getElementById(id).classList.add('open'); }
function closeModal(id) { document.getElementById(id).classList.remove('open'); }

function updateCounter() {
  const n = drawPoints.length;
  document.getElementById('dt-counter').innerText     = n + ' titik';
  document.getElementById('btn-undo').disabled        = n === 0;
  document.getElementById('btn-redo').disabled        = redoStack.length === 0;
}

// ===============================
// SEARCH
// ===============================
function setupSearch() {
  const input   = document.getElementById('search-input');
  const results = document.getElementById('search-results');
  if (!input || !results) return;

  input.addEventListener('input', () => {
    const q = input.value.trim().toLowerCase();
    results.innerHTML = '';
    if (!q) { results.classList.remove('open'); return; }

    const hits = [];
    allSpbu.forEach(s => {
      if ((s.namaspbu || '').toLowerCase().includes(q))
        hits.push({ label: s.namaspbu, sub: 'SPBU · Point', icon: '⛽',
          action: () => { flyTo(s.lat, s.lng); input.value = ''; results.classList.remove('open'); } });
    });
    allJalan.forEach(j => {
      if ((j.nama || '').toLowerCase().includes(q))
        hits.push({ label: j.nama, sub: `Jalan ${j.status || ''}`, icon: '🛣️',
          action: () => {
            try { const geom = JSON.parse(j.geom); const mid = geom.coordinates[Math.floor(geom.coordinates.length/2)]; map.setView([mid[1], mid[0]], 16); } catch (e) {}
            input.value = ''; results.classList.remove('open');
          } });
    });
    allParsil.forEach(p => {
      if ((p.nama || '').toLowerCase().includes(q))
        hits.push({ label: p.nama, sub: `Parsil · ${p.status_kepemilikan || 'SHM'}`, icon: '🗺️',
          action: () => {
            try { const geom = JSON.parse(p.geom); const coords = geom.coordinates[0]; const cx = coords.reduce((a,c)=>a+c[0],0)/coords.length; const cy = coords.reduce((a,c)=>a+c[1],0)/coords.length; map.setView([cy,cx],17); } catch (e) {}
            input.value = ''; results.classList.remove('open');
          } });
    });

    if (!hits.length) {
      results.innerHTML = '<div class="sr-empty">Tidak ada hasil</div>';
    } else {
      results.innerHTML = hits.slice(0, 8).map((h, i) =>
        `<div class="sr-item" data-idx="${i}">
          <span class="sr-icon">${h.icon}</span>
          <div class="sr-text">
            <div class="sr-label">${h.label}</div>
            <div class="sr-sub">${h.sub}</div>
          </div>
        </div>`
      ).join('');
      results.querySelectorAll('.sr-item').forEach((el, i) => {
        el.addEventListener('click', () => hits[i].action());
      });
    }
    results.classList.add('open');
  });
  document.addEventListener('click', e => {
    if (!e.target.closest('#search-wrap')) results.classList.remove('open');
  });
}

// ===============================
// INIT
// ===============================
document.addEventListener('DOMContentLoaded', () => {
  initMap();
  loadAllData();
  setupSearch();

  document.getElementById('btn-finish').onclick      = finishDrawing;
  document.getElementById('btn-undo').onclick        = undoDraw;
  document.getElementById('btn-redo').onclick        = redoDraw;
  document.getElementById('btn-cancel-draw').onclick = () => { cancelDraw(); deactivateGeom(); };
  document.getElementById('btn-geom-save').onclick   = saveEditGeom;
  document.getElementById('btn-geom-cancel').onclick = stopEditGeom;

  // Geom buttons
  document.querySelectorAll('.geom-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const geom = btn.dataset.geom;
      if (currentGeom === geom) { cancelDraw(); deactivateGeom(); return; }
      cancelDraw();
      currentGeom = geom;
      document.querySelectorAll('.geom-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      document.getElementById('map').classList.add('crosshair-cursor');
      document.getElementById('draw-toolbar').classList.toggle('visible', geom === 'polyline' || geom === 'polygon');
      const hint     = document.getElementById('geom-hint');
      const hintText = document.getElementById('geom-hint-text');
      hint.classList.add('on');
      if (geom === 'point')    hintText.innerText = 'Klik peta untuk tambah SPBU';
      if (geom === 'polyline') hintText.innerText = 'Klik peta untuk menambah titik jalan, klik Selesai jika sudah';
      if (geom === 'polygon')  hintText.innerText = 'Klik peta untuk menambah titik parsil, klik Selesai jika sudah';
    });
  });

  // Layer toggle custom
  const ldbtn     = document.getElementById('ldbtn');
  const layerMenu = document.getElementById('layer-menu');
  if (ldbtn && layerMenu) {
    ldbtn.addEventListener('click', e => {
      e.stopPropagation();
      layerMenu.classList.toggle('open');
      const chev = ldbtn.querySelector('.chev');
      if (chev) chev.textContent = layerMenu.classList.contains('open') ? '▲' : '▼';
    });
    document.addEventListener('click', () => {
      layerMenu.classList.remove('open');
      const chev = ldbtn.querySelector('.chev');
      if (chev) chev.textContent = '▼';
    });

    const cbPoint   = document.getElementById('lm-point');
    const cbSpbu24  = document.getElementById('lm-spbu24');
    const cbSpbuLtd = document.getElementById('lm-spbuLtd');
    const subSpbu   = document.getElementById('lm-sub-spbu');

    function syncSpbuLayers() {
      const spbuOn = cbPoint.checked;
      subSpbu.classList.toggle('hidden', !spbuOn);
      if (spbuOn && cbSpbu24.checked)  spbu24Group.addTo(map);  else map.removeLayer(spbu24Group);
      if (spbuOn && cbSpbuLtd.checked) spbuLtdGroup.addTo(map); else map.removeLayer(spbuLtdGroup);
    }
    cbPoint.addEventListener('change', syncSpbuLayers);
    cbSpbu24.addEventListener('change', syncSpbuLayers);
    cbSpbuLtd.addEventListener('change', syncSpbuLayers);

    document.getElementById('lm-jalan').addEventListener('change', function () {
      if (this.checked) { if (layers.jalan)  layers.jalan.addTo(map); }
      else { if (layers.jalan) map.removeLayer(layers.jalan); }
    });
    document.getElementById('lm-parsil').addEventListener('change', function () {
      if (this.checked) { if (layers.parsil) layers.parsil.addTo(map); }
      else { if (layers.parsil) map.removeLayer(layers.parsil); }
    });
  }
});