/**
 * Poverty-Mapping GIS — script.js
 * WebGIS Distribusi Bantuan Sosial
 */

// ============================================================
// CONFIG
// ============================================================
const MAP_CENTER     = [-0.0532, 109.3458];
const MAP_ZOOM       = 15;
const DEFAULT_RADIUS = 300;

// ============================================================
// ROLE SYSTEM
// ============================================================
let currentRole = 'admin';

const ROLE_CONFIG = {
    admin: {
        label: 'Admin', icon: '👑',
        canAdd: true, canEdit: true, canDelete: true, canReset: true,
        canReport: true, canViewReport: true, canViewDetail: true,
        canEditKas: true, canDragRadius: true
    },
    surveyer: {
        label: 'Surveyer', icon: '📋',
        canAdd: true, canEdit: true, canDelete: false, canReset: false,
        canReport: true, canViewReport: true, canViewDetail: true,
        canEditKas: false, canDragRadius: false
    },
    viewer: {
        label: 'Viewer', icon: '👁',
        canAdd: false, canEdit: false, canDelete: false, canReset: false,
        canReport: true, canViewReport: false, canViewDetail: true,
        canEditKas: false, canDragRadius: false
    }
};

function can(action) { return ROLE_CONFIG[currentRole]?.[action] === true; }

function openRoleModal() {
    document.getElementById('roleModal').classList.remove('hidden');
    document.querySelectorAll('.role-card').forEach(c => c.classList.remove('active-role'));
    document.getElementById(`roleCard_${currentRole}`)?.classList.add('active-role');
}
function closeRoleModal() { document.getElementById('roleModal').classList.add('hidden'); }

function setRole(role) {
    currentRole = role;
    const cfg = ROLE_CONFIG[role];
    document.getElementById('roleIcon').textContent  = cfg.icon;
    document.getElementById('roleLabel').textContent = cfg.label;
    document.querySelectorAll('.role-card').forEach(c => c.classList.remove('active-role'));
    document.getElementById(`roleCard_${role}`)?.classList.add('active-role');
    applyRoleUI();
    closeRoleModal();
}

function applyRoleUI() {
    const cfg = ROLE_CONFIG[currentRole];

    const btnGroup = document.getElementById('actionBtnGroup');
    if (btnGroup) btnGroup.style.display = cfg.canAdd ? 'flex' : 'none';

    const btnReset = document.getElementById('btnReset');
    if (btnReset) btnReset.style.display = cfg.canReset ? 'block' : 'none';

    const notice = document.getElementById('viewerNotice');
    if (notice) notice.style.display = currentRole === 'viewer' ? 'block' : 'none';

    const reportColList   = document.getElementById('reportColList');
    const reportColViewer = document.getElementById('reportColViewer');
    if (cfg.canViewReport) {
        if (reportColList)   reportColList.style.display   = 'flex';
        if (reportColViewer) reportColViewer.style.display = 'none';
    } else {
        if (reportColList)   reportColList.style.display   = 'none';
        if (reportColViewer) reportColViewer.style.display = 'flex';
    }

    updateReportBadge();

    centers.forEach(c => { if (c.marker) c.marker.setPopupContent(buildCenterPopup(c)); });
    houses.forEach(h => { if (h.marker) h.marker.setPopupContent(buildHouseMapPopup(h)); });
    updateSidebar();

    centers.forEach(c => {
        if (c.handle) {
            if (cfg.canDragRadius) c.handle.dragging?.enable();
            else c.handle.dragging?.disable();
        }
        if (c.marker) {
            if (cfg.canEdit) c.marker.dragging?.enable();
            else c.marker.dragging?.disable();
        }
    });
}

// ============================================================
// NAVIGATION
// ============================================================
function navigateTo(page) {
    const pagePeta      = document.getElementById('pagePeta');
    const pagePelaporan = document.getElementById('pagePelaporan');
    const navHome       = document.getElementById('navHome');
    const navReport     = document.getElementById('navReport');

    if (page === 'map') {
        pagePeta.classList.add('active-page');
        pagePelaporan.classList.remove('active-page');
        navHome.classList.add('active');
        navReport.classList.remove('active');
        setTimeout(() => map.invalidateSize(), 100);
    } else {
        pagePeta.classList.remove('active-page');
        pagePelaporan.classList.add('active-page');
        navHome.classList.remove('active');
        navReport.classList.add('active');
        applyRoleUI();
        renderReportList();
    }
}

// ============================================================
// MAP INIT
// ============================================================
const map = L.map('map', { zoomControl: false }).setView(MAP_CENTER, MAP_ZOOM);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    maxZoom: 19
}).addTo(map);

L.control.zoom({ position: 'bottomright' }).addTo(map);

// ============================================================
// STATE
// ============================================================
let isAddingCenter = false;
let isAddingHouse  = false;
let centers        = [];
let houses         = [];
let reports        = [];

// ============================================================
// ICON TYPES
// ============================================================
const CENTER_TYPE_MAP = {
    'masjid':           { emoji: '🕌', color: '#0d9488' },
    'musholla':         { emoji: '🕌', color: '#0d9488' },
    'surau':            { emoji: '🕌', color: '#0d9488' },
    'gereja katedral':  { emoji: '⛪', color: '#2563eb' },
    'gereja katolik':   { emoji: '⛪', color: '#2563eb' },
    'katedral':         { emoji: '⛪', color: '#2563eb' },
    'gereja protestan': { emoji: '✝️', color: '#7c3aed' },
    'gereja':           { emoji: '⛪', color: '#1d4ed8' },
    'kapel':            { emoji: '✝️', color: '#7c3aed' },
    'vihara':           { emoji: '🛕', color: '#d97706' },
    'klenteng':         { emoji: '🛕', color: '#d97706' },
    'pura':             { emoji: '🛕', color: '#d97706' },
    'kuil':             { emoji: '🛕', color: '#d97706' },
    'sinagog':          { emoji: '✡️', color: '#1d4ed8' },
    'default':          { emoji: '🏛️', color: '#64748b' }
};

function getCenterType(name) {
    if (!name) return 'default';
    const lower = name.toLowerCase();
    const keys  = Object.keys(CENTER_TYPE_MAP)
        .filter(k => k !== 'default')
        .sort((a, b) => b.length - a.length);
    for (const k of keys) { if (lower.includes(k)) return k; }
    return 'default';
}

function createCenterIcon(name) {
    const info = CENTER_TYPE_MAP[getCenterType(name)] || CENTER_TYPE_MAP['default'];
    return L.divIcon({
        className: '',
        html: `<div style="width:38px;height:38px;background:${info.color};
            border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
            display:flex;align-items:center;justify-content:center;
            box-shadow:0 3px 12px rgba(0,0,0,.3);">
            <span style="transform:rotate(45deg);font-size:18px;line-height:1">${info.emoji}</span></div>`,
        iconSize: [38, 38], iconAnchor: [10, 38]
    });
}

function createHouseIcon(aidStatus, hasData) {
    const palette = {
        helped:     { bg: '#d97706', border: '#78350f', emoji: '🏠' },
        not_helped: { bg: '#dc2626', border: '#7f1d1d', emoji: '🏚' },
        outside:    { bg: '#16a34a', border: '#14532d', emoji: '🏠' },
        nodata:     { bg: '#94a3b8', border: '#475569', emoji: '📍' }
    };
    const key = !hasData ? 'nodata' : (aidStatus || 'outside');
    const c   = palette[key] || palette.nodata;
    return L.divIcon({
        className: '',
        html: `<div style="width:24px;height:24px;background:${c.bg};
            border:2.5px solid ${c.border};border-radius:4px 4px 4px 0;
            transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;
            font-size:11px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.25);">
            <span style="transform:rotate(45deg)">${c.emoji}</span></div>`,
        iconSize: [24, 24], iconAnchor: [6, 24]
    });
}

function createHandleIcon() {
    return L.divIcon({
        className: 'radius-handle',
        html: `<div style="width:14px;height:14px;background:white;border:2.5px solid #3b82f6;
            border-radius:50%;box-shadow:0 2px 6px rgba(59,130,246,.5);cursor:ew-resize;"></div>`,
        iconSize: [14, 14], iconAnchor: [7, 7]
    });
}

// ============================================================
// UTILS
// ============================================================
function haversineDistance(lat1, lng1, lat2, lng2) {
    const R  = 6371000;
    const φ1 = lat1 * Math.PI / 180, φ2 = lat2 * Math.PI / 180;
    const Δφ = (lat2 - lat1) * Math.PI / 180;
    const Δλ = (lng2 - lng1) * Math.PI / 180;
    const a  = Math.sin(Δφ / 2) ** 2 + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) ** 2;
    return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}

function radiusPoint(lat, lng, dist, bearing = 90) {
    const R  = 6371000;
    const φ1 = lat * Math.PI / 180, λ1 = lng * Math.PI / 180;
    const brng = bearing * Math.PI / 180;
    const φ2 = Math.asin(Math.sin(φ1) * Math.cos(dist / R) + Math.cos(φ1) * Math.sin(dist / R) * Math.cos(brng));
    const λ2 = λ1 + Math.atan2(Math.sin(brng) * Math.sin(dist / R) * Math.cos(φ1), Math.cos(dist / R) - Math.sin(φ1) * Math.sin(φ2));
    return L.latLng(φ2 * 180 / Math.PI, λ2 * 180 / Math.PI);
}

async function reverseGeocode(lat, lng) {
    try {
        const res  = await fetch(
            `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&addressdetails=1`,
            { headers: { 'Accept-Language': 'id' } }
        );
        const data = await res.json();
        const addr = data.address || {};
        return {
            full:        data.display_name || '',
            road:        addr.road || addr.pedestrian || '',
            village:     addr.village || addr.suburb || addr.neighbourhood || '',
            subdistrict: addr.city_district || addr.town || '',
            city:        addr.city || addr.county || '',
            postcode:    addr.postcode || ''
        };
    } catch {
        return { full: `${lat.toFixed(5)}, ${lng.toFixed(5)}`, road: '', village: '', subdistrict: '', city: '', postcode: '' };
    }
}

function formatRupiah(num) {
    if (num === null || num === undefined || num === '') return '—';
    return 'Rp ' + Number(num).toLocaleString('id-ID');
}

function formatDate(d) {
    if (!d) return '—';
    const dt = new Date(d);
    if (isNaN(dt)) return d;
    return dt.toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' });
}

function calcAge(tglLahir) {
    if (!tglLahir) return null;
    const today = new Date(), birth = new Date(tglLahir);
    let age = today.getFullYear() - birth.getFullYear();
    if (today < new Date(today.getFullYear(), birth.getMonth(), birth.getDate())) age--;
    return age;
}

// ============================================================
// AID STATUS LOGIC
// ============================================================
function getAidStatus(house) {
    if (!house.hasData) return 'outside';
    if (house.aidStatus === 'helped') return 'helped';
    for (const c of centers) {
        if (haversineDistance(house.lat, house.lng, c.lat, c.lng) <= c.radius) return 'not_helped';
    }
    return 'outside';
}

function getCoveringCenters(house) {
    return centers.filter(c => haversineDistance(house.lat, house.lng, c.lat, c.lng) <= c.radius);
}

function findNearestCenter(house) {
    let nearest = null, minDist = Infinity;
    centers.forEach(c => {
        const d = haversineDistance(house.lat, house.lng, c.lat, c.lng);
        if (d < minDist) { minDist = d; nearest = c; }
    });
    return { center: nearest, distance: Math.round(minDist) };
}

function updateAllHouseIcons() {
    houses.forEach(h => {
        const status = getAidStatus(h);
        if (h.aidStatus !== 'helped') h.aidStatus = (status === 'not_helped') ? 'not_helped' : 'outside';
        h.marker.setIcon(createHouseIcon(h.aidStatus, h.hasData));
    });
    updateStats();
}

// ============================================================
// STATS
// ============================================================
function updateStats() {
    const total   = houses.filter(h => h.hasData).length;
    const helped  = houses.filter(h => h.aidStatus === 'helped').length;
    const inside  = houses.filter(h => getAidStatus(h) === 'not_helped').length;
    const outside = houses.filter(h => hasData && getAidStatus(h) === 'outside').length;

    document.getElementById('statTotal').textContent   = houses.length;
    document.getElementById('statHelped').textContent  = helped;
    document.getElementById('statInside').textContent  = inside;
    document.getElementById('statOutside').textContent = houses.filter(h => h.hasData && getAidStatus(h) === 'outside').length;
}

// ============================================================
// RADIUS DRAG HANDLE
// ============================================================
function addRadiusHandle(centerObj) {
    if (centerObj.handle) map.removeLayer(centerObj.handle);
    const tooltip = document.getElementById('radiusTooltip');
    const handle  = L.marker(radiusPoint(centerObj.lat, centerObj.lng, centerObj.radius), {
        icon: createHandleIcon(), draggable: true, zIndexOffset: 500
    }).addTo(map);

    handle.on('drag', function(e) {
        if (!can('canDragRadius')) return;
        centerObj.radius = Math.max(50, Math.round(
            haversineDistance(centerObj.lat, centerObj.lng, e.target.getLatLng().lat, e.target.getLatLng().lng)
        ));
        centerObj.circle.setRadius(centerObj.radius);
        tooltip.textContent = `⭕ Radius: ${centerObj.radius} m`;
        tooltip.classList.remove('hidden');
        updateAllHouseIcons(); updateSidebar();
    });
    handle.on('dragend', function() {
        if (!can('canDragRadius')) { handle.setLatLng(radiusPoint(centerObj.lat, centerObj.lng, centerObj.radius)); return; }
        handle.setLatLng(radiusPoint(centerObj.lat, centerObj.lng, centerObj.radius));
        tooltip.classList.add('hidden');
        saveCenterBackend(centerObj, true);
        if (centerObj.marker.isPopupOpen()) centerObj.marker.setPopupContent(buildCenterPopup(centerObj));
    });
    centerObj.handle = handle;
}

// ============================================================
// POPUPS
// ============================================================
function buildHouseMapPopup(house) {
    const status   = getAidStatus(house);
    const badgeCls = !house.hasData ? 'nodata' : status;
    const badgeTxt = !house.hasData ? 'Belum ada data'
                   : status === 'helped'     ? 'Sudah Dibantu'
                   : status === 'not_helped' ? 'Dalam Radius'
                   : 'Luar Radius';

    const kkName = house.anggota?.[0]?.nama || '';

    let actionBtns = '';
    if (house.hasData) {
        actionBtns = `<button class="popup-btn primary" onclick="openDetailModal(${house.id})">📋 Detail</button>`;
        if (can('canEdit')) actionBtns += `<button class="popup-btn orange" onclick="openHouseModal(${house.id})">✏️ Edit</button>`;
    } else {
        if (can('canEdit')) actionBtns = `<button class="popup-btn orange" style="flex:2" onclick="openHouseModal(${house.id})">➕ Isi Data</button>`;
        else actionBtns = `<span style="font-size:11px;color:var(--text-muted);padding:4px">Belum ada data</span>`;
    }

    const deleteBtn = can('canDelete')
        ? `<button class="popup-btn" style="background:var(--danger-light);color:var(--danger);border:1px solid #fca5a5;" onclick="deleteHouse(${house.id})">🗑</button>`
        : '';

    return `<div class="map-popup">
        <div class="map-popup-badge ${badgeCls}">● ${badgeTxt}</div>
        <div class="map-popup-title">🏠 Rumah #${house.id}${kkName ? ' — ' + kkName : ''}</div>
        <div class="map-popup-addr">${house.address || '<em style="color:var(--text-muted)">Mengambil alamat...</em>'}</div>
    </div>
    <div class="map-popup-actions">${actionBtns}${deleteBtn}</div>`;
}

function buildCenterPopup(c) {
    const covered = houses.filter(h => haversineDistance(h.lat, h.lng, c.lat, c.lng) <= c.radius);
    const helped  = covered.filter(h => h.aidStatus === 'helped').length;
    const info    = CENTER_TYPE_MAP[getCenterType(c.name)] || CENTER_TYPE_MAP['default'];

    const kasEditHtml = can('canEditKas') ? `
        <button onclick="toggleEditKas(${c.id})" style="margin-left:6px;padding:2px 8px;background:white;border:1px solid #86efac;border-radius:6px;font-size:10px;cursor:pointer;color:#16a34a;font-weight:600;">✏️ Edit</button>` : '';

    const kasFormHtml = can('canEditKas') ? `
        <div id="kasEditForm_${c.id}" style="display:none;margin-bottom:8px;padding:8px 10px;background:#f0fdf4;border:1px solid #86efac;border-radius:8px;">
            <div style="font-size:10px;font-weight:700;color:#16a34a;margin-bottom:6px">Edit Kas</div>
            <div style="display:flex;gap:6px;align-items:center;">
                <input type="number" id="kasInput_${c.id}" value="${c.kas}" min="0" step="1000"
                    style="flex:1;padding:6px 8px;border:1.5px solid #86efac;border-radius:6px;font-size:12px;font-weight:600;color:#16a34a;outline:none;"/>
                <button onclick="saveKas(${c.id})" style="padding:6px 10px;background:#16a34a;color:white;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;">Simpan</button>
                <button onclick="toggleEditKas(${c.id})" style="padding:6px 8px;background:white;color:#64748b;border:1px solid #e2e8f0;border-radius:6px;font-size:11px;cursor:pointer;">Batal</button>
            </div>
        </div>` : '';

    const editBtn = can('canEdit')
        ? `<div style="padding:5px 13px 0;">
               <button onclick="openCenterEditModal(${c.id})" style="width:100%;padding:7px;background:#fff7ed;color:var(--orange);border:1px solid #fdba74;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;">✏️ Edit Rumah Ibadah</button>
           </div>` : '';

    const deleteBtn = can('canDelete')
        ? `<div style="padding:6px 13px 10px;">
               <button onclick="deleteCenter(${c.id})" style="width:100%;padding:7px;background:var(--danger-light);color:var(--danger);border:1px solid #fca5a5;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;">🗑 Hapus</button>
           </div>` : '';

    return `<div class="center-popup">
        <div class="center-popup-header">
            <div class="center-popup-icon">${info.emoji}</div>
            <div class="center-popup-title">${c.name}</div>
        </div>
        <div class="center-popup-addr">📍 ${c.address || '—'}</div>
        <div class="kas-badge" id="kasBadge_${c.id}">
            <span class="kas-label">💰 Kas</span>
            <span class="kas-value" id="kasVal_${c.id}">${formatRupiah(c.kas)}</span>
            ${kasEditHtml}
        </div>
        ${kasFormHtml}
        <div class="radius-info-box">
            <span>⭕ Radius</span><span class="radius-val">${c.radius} m</span>
        </div>
        <div class="radius-info-box" style="background:#fef9c3;border-color:#fde047;color:#854d0e;">
            <span>🏠 Dalam radius</span><span class="radius-val">${covered.length} (${helped} dibantu)</span>
        </div>
        <div class="radius-drag-hint">${can('canDragRadius') ? '💡 Drag titik biru untuk ubah radius' : '👁 Radius hanya bisa dilihat'}</div>
    </div>${editBtn}${deleteBtn}`;
}

// ============================================================
// KAS EDIT (popup inline)
// ============================================================
function toggleEditKas(centerId) {
    const form  = document.getElementById(`kasEditForm_${centerId}`);
    const badge = document.getElementById(`kasBadge_${centerId}`);
    if (!form) return;
    const visible = form.style.display !== 'none';
    form.style.display  = visible ? 'none' : 'block';
    badge.style.display = visible ? 'flex' : 'none';
    if (!visible) setTimeout(() => document.getElementById(`kasInput_${centerId}`)?.focus(), 50);
}

function saveKas(centerId) {
    const center = centers.find(c => c.id === centerId);
    if (!center) return;
    center.kas = parseFloat(document.getElementById(`kasInput_${centerId}`)?.value) || 0;
    const kasVal = document.getElementById(`kasVal_${centerId}`);
    if (kasVal) kasVal.textContent = formatRupiah(center.kas);
    toggleEditKas(centerId);
    updateCenterList();
    saveCenterBackend(center, true);
}

// ============================================================
// CENTER EDIT MODAL
// ============================================================
function openCenterEditModal(centerId) {
    if (!can('canEdit')) { alert('Role Anda tidak dapat mengedit data.'); return; }
    const c = centers.find(c => c.id === centerId);
    if (!c) return;
    map.closePopup();

    document.getElementById('ce_id').value      = c.id;
    document.getElementById('ce_name').value    = c.name;
    document.getElementById('ce_address').value = c.address || '';
    document.getElementById('ce_kas').value     = c.kas || 0;
    document.getElementById('ce_radius').value  = c.radius;

    const sel   = document.getElementById('ce_type');
    const type  = getCenterType(c.name);
    const match = Array.from(sel.options).find(o => o.value === type);
    sel.value   = match ? type : 'default';

    document.getElementById('centerEditModal').classList.remove('hidden');
    setTimeout(() => document.getElementById('ce_name')?.focus(), 100);
}
function closeCenterEditModal() { document.getElementById('centerEditModal').classList.add('hidden'); }

function saveCenterEdit() {
    const id      = parseInt(document.getElementById('ce_id')?.value);
    const name    = document.getElementById('ce_name')?.value?.trim();
    const address = document.getElementById('ce_address')?.value?.trim();
    const kas     = parseFloat(document.getElementById('ce_kas')?.value) || 0;
    const radius  = parseInt(document.getElementById('ce_radius')?.value) || DEFAULT_RADIUS;

    if (!name) { document.getElementById('ce_name').focus(); return; }
    if (radius < 50) { alert('Radius minimal 50 meter!'); return; }

    const center = centers.find(c => c.id === id);
    if (!center) return;

    center.name    = name;
    center.address = address;
    center.kas     = kas;
    center.radius  = radius;

    center.marker.setIcon(createCenterIcon(name));
    center.circle.setRadius(radius);
    if (center.handle) center.handle.setLatLng(radiusPoint(center.lat, center.lng, radius));
    center.marker.setPopupContent(buildCenterPopup(center));

    closeCenterEditModal();
    updateAllHouseIcons();
    updateSidebar();
    saveCenterBackend(center, true);
}

// ============================================================
// ADD MODES
// ============================================================
function startAddingCenter() {
    if (!can('canAdd')) { alert('Role Anda tidak dapat menambah data.'); return; }
    if (isAddingCenter) { cancelModes(); return; }
    cancelModes(); isAddingCenter = true; setModeUI('center');
}
function startAddingHouse() {
    if (!can('canAdd')) { alert('Role Anda tidak dapat menambah data.'); return; }
    if (isAddingHouse) { cancelModes(); return; }
    cancelModes(); isAddingHouse = true; setModeUI('house');
}
function setModeUI(mode) {
    const badge = document.getElementById('modeIndicator');
    badge.classList.remove('hidden', 'house-mode');
    map.getContainer().classList.add('adding-mode');
    if (mode === 'center') {
        document.getElementById('modeIndicatorText').textContent = 'Klik peta untuk menempatkan rumah ibadah';
        document.getElementById('btnAddCenter').classList.add('active');
        document.getElementById('btnAddCenter').textContent = '✕ Batalkan';
    } else {
        badge.classList.add('house-mode');
        document.getElementById('modeIndicatorText').textContent = 'Klik peta untuk menempatkan titik rumah miskin';
        document.getElementById('btnAddHouse').classList.add('active');
        document.getElementById('btnAddHouse').textContent = '✕ Batalkan';
    }
}
function cancelModes() {
    isAddingCenter = isAddingHouse = false;
    document.getElementById('modeIndicator').classList.add('hidden');
    document.getElementById('modeIndicator').classList.remove('house-mode');
    document.getElementById('btnAddCenter').classList.remove('active');
    document.getElementById('btnAddCenter').innerHTML = '🕌 Tambah Rumah Ibadah';
    document.getElementById('btnAddHouse').classList.remove('active');
    document.getElementById('btnAddHouse').innerHTML = '🏠 Tambah Rumah Miskin';
    map.getContainer().classList.remove('adding-mode');
}

map.on('click', async function(e) {
    if (!isAddingCenter && !isAddingHouse) return;
    const { lat, lng } = e.latlng;
    if (isAddingCenter) { cancelModes(); openCenterForm(lat, lng, e.latlng); }
    else { cancelModes(); placeHousePin(lat, lng); }
});

// ============================================================
// CENTER FORM (map popup)
// ============================================================
async function openCenterForm(lat, lng, latlng) {
    const popup = L.popup({ maxWidth: 290, closeOnClick: false })
        .setLatLng(latlng)
        .setContent(`
            <div class="form-popup">
                <h3>🕌 Tambah Rumah Ibadah</h3>
                <div class="form-group">
                    <label class="form-label">Jenis</label>
                    <select class="form-input" id="fpType">
                        <option value="masjid">🕌 Masjid / Musholla</option>
                        <option value="gereja katedral">⛪ Gereja Katolik</option>
                        <option value="gereja protestan">✝️ Gereja Protestan</option>
                        <option value="vihara">🛕 Vihara / Klenteng / Pura</option>
                        <option value="sinagog">✡️ Sinagog</option>
                        <option value="default">🏛️ Lainnya</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Nama *</label>
                    <input class="form-input" id="fpName" type="text" placeholder="Nama rumah ibadah..." autofocus/>
                </div>
                <div class="form-group">
                    <label class="form-label">Alamat</label>
                    <div id="fpAddrLoading" style="font-size:11px;color:var(--text-muted);padding:4px 0">⏳ Mengambil alamat...</div>
                    <input class="form-input" id="fpAddr" type="text" placeholder="Alamat..." style="display:none"/>
                </div>
                <div class="form-group">
                    <label class="form-label">Kas / Dana (Rp)</label>
                    <input class="form-input" id="fpKas" type="number" placeholder="0" min="0" step="1000"/>
                </div>
                <div class="form-group">
                    <label class="form-label">Radius Awal (meter)</label>
                    <input class="form-input" id="fpRadius" type="number" value="${DEFAULT_RADIUS}" min="50" step="10"/>
                </div>
                <button class="form-submit" onclick="submitCenter(${lat},${lng})">💾 Simpan</button>
                <button class="form-cancel" onclick="map.closePopup()" style="width:100%;margin-top:6px;padding:8px;border:1px solid var(--border);border-radius:9px;background:var(--bg);cursor:pointer;font-size:12px;">Batal</button>
            </div>`)
        .openOn(map);

    const geo = await reverseGeocode(lat, lng);
    const loadEl = document.getElementById('fpAddrLoading');
    const addrEl = document.getElementById('fpAddr');
    if (loadEl) loadEl.style.display = 'none';
    if (addrEl) { addrEl.style.display = 'block'; addrEl.value = geo.full; }
}

async function submitCenter(lat, lng) {
    const name    = document.getElementById('fpName')?.value?.trim();
    const address = document.getElementById('fpAddr')?.value?.trim() || `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
    const kas     = parseFloat(document.getElementById('fpKas')?.value) || 0;
    const radius  = parseInt(document.getElementById('fpRadius')?.value) || DEFAULT_RADIUS;
    if (!name) { document.getElementById('fpName')?.focus(); return; }
    map.closePopup();
    addCenter({ name, address, kas, lat, lng, radius });
}

function addCenter(data) {
    const marker = L.marker([data.lat, data.lng], {
        icon: createCenterIcon(data.name),
        draggable: can('canEdit'),
        zIndexOffset: 200
    }).addTo(map);

    const circle = L.circle([data.lat, data.lng], {
        radius: data.radius, color: '#3b82f6', weight: 1.5,
        fillColor: '#3b82f6', fillOpacity: 0.07, dashArray: '6 4'
    }).addTo(map);

    const centerObj = {
        id: data.id || null, name: data.name, address: data.address,
        kas: data.kas || 0, lat: data.lat, lng: data.lng,
        radius: data.radius, marker, circle, handle: null
    };

    marker.bindPopup(() => buildCenterPopup(centerObj), { maxWidth: 260 });
    marker.on('popupopen', () => marker.setPopupContent(buildCenterPopup(centerObj)));
    marker.on('dragend', function(e) {
        centerObj.lat = e.target.getLatLng().lat;
        centerObj.lng = e.target.getLatLng().lng;
        circle.setLatLng([centerObj.lat, centerObj.lng]);
        if (centerObj.handle) centerObj.handle.setLatLng(radiusPoint(centerObj.lat, centerObj.lng, centerObj.radius));
        updateAllHouseIcons(); updateSidebar();
        saveCenterBackend(centerObj, true);
    });

    addRadiusHandle(centerObj);
    if (!can('canDragRadius')) centerObj.handle?.dragging?.disable();
    if (!can('canEdit')) marker.dragging?.disable();

    centers.push(centerObj);

    if (!data.id) {
        saveCenterBackend(centerObj, false);
    } else {
        marker.openPopup();
        updateAllHouseIcons(); updateSidebar();
    }
}

async function saveCenterBackend(centerObj, isUpdate) {
    const body = new URLSearchParams({
        id: centerObj.id || 0,
        name: centerObj.name, address: centerObj.address || '',
        kas: centerObj.kas, lat: centerObj.lat, lng: centerObj.lng,
        radius: centerObj.radius, update: isUpdate ? '1' : '0'
    });
    try {
        const res  = await fetch('simpan_pusat.php', { method: 'POST', body });
        const data = await res.json();
        if (data.success && !centerObj.id) {
            centerObj.id = data.id;
            centerObj.marker.setPopupContent(buildCenterPopup(centerObj));
            centerObj.marker.openPopup();
            updateAllHouseIcons(); updateSidebar();
        }
    } catch (e) { console.error('saveCenterBackend', e); }
}

// ============================================================
// HOUSE PIN
// ============================================================
async function placeHousePin(lat, lng) {
    const marker = L.marker([lat, lng], { icon: createHouseIcon(null, false), zIndexOffset: 100 }).addTo(map);

    const house = {
        id: null, lat, lng, address: '',
        rt: '', rw: '', kelurahan: '',
        statusMiskin: '', jumlahAnggota: 0, anggota: [],
        aidStatus: 'outside', hasData: false,
        marker, _geoData: null
    };
    houses.push(house);

    marker.bindPopup(() => buildHouseMapPopup(house), { maxWidth: 270 });
    marker.on('popupopen', () => marker.setPopupContent(buildHouseMapPopup(house)));
    marker.openPopup();

    try {
        const geo = await reverseGeocode(lat, lng);
        house.address  = geo.full || `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
        house._geoData = geo;
    } catch {
        house.address = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
    }

    marker.setPopupContent(buildHouseMapPopup(house));
    updateStats(); updateHouseList();
    await saveHouseBackend(house, false);
}

async function saveHouseBackend(house, isUpdate) {
    const body = new URLSearchParams({
        id:             house.id || 0,
        lat:            house.lat,
        lng:            house.lng,
        address:        house.address || '',
        rt:             house.rt || '',
        rw:             house.rw || '',
        kelurahan:      house.kelurahan || '',
        status_miskin:  house.statusMiskin || '',
        jumlah_anggota: house.jumlahAnggota || 0,
        anggota:        JSON.stringify(house.anggota || []),
        aid_status:     house.aidStatus || 'outside',
        has_data:       house.hasData ? 1 : 0,
        update:         isUpdate ? '1' : '0'
    });
    try {
        const res  = await fetch('simpan_rumah.php', { method: 'POST', body });
        const data = await res.json();
        if (data.success && !house.id) {
            house.id = data.id;
            house.marker.setPopupContent(buildHouseMapPopup(house));
            updateHouseList();
        }
    } catch (e) { console.error('saveHouseBackend', e); }
}

// ============================================================
// HOUSE DATA MODAL
// ============================================================
function openHouseModal(houseId) {
    if (!can('canEdit')) { alert('Role Anda tidak dapat mengedit data.'); return; }
    const house = houses.find(h => h.id === houseId);
    if (!house) return;
    map.closePopup();

    const covering  = getCoveringCenters(house);
    const nearestR  = findNearestCenter(house);
    const geo       = house._geoData || {};

    const centersHtml = covering.length > 0
        ? covering.map(c => {
            const info = CENTER_TYPE_MAP[getCenterType(c.name)] || CENTER_TYPE_MAP['default'];
            return `<span style="display:inline-flex;align-items:center;gap:4px;background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;margin:2px;">${info.emoji} ${c.name}</span>`;
          }).join('')
        : `<span style="font-size:11px;color:var(--text-muted)">Tidak ada — Terdekat: ${nearestR.center ? nearestR.center.name + ' (' + nearestR.distance + ' m)' : '—'}</span>`;

    document.getElementById('houseModalBody').innerHTML = `
        <div class="modal-section">
            <div class="modal-section-title">📍 Informasi Lokasi</div>
            <div class="info-box">
                <div class="info-box-row"><span class="info-box-label">Alamat</span><span class="info-box-val">${geo.road || house.address?.split(',')[0] || '—'}</span></div>
                <div class="info-box-row"><span class="info-box-label">Kelurahan</span><span class="info-box-val">${geo.village || '—'}</span></div>
                <div class="info-box-row"><span class="info-box-label">Kecamatan</span><span class="info-box-val">${geo.subdistrict || '—'}</span></div>
                <div class="info-box-row"><span class="info-box-label">Kota</span><span class="info-box-val">${geo.city || '—'}</span></div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">RT</label>
                    <input class="form-input" id="hm_rt" type="text" placeholder="001" value="${house.rt || ''}"/>
                </div>
                <div class="form-group">
                    <label class="form-label">RW</label>
                    <input class="form-input" id="hm_rw" type="text" placeholder="001" value="${house.rw || ''}"/>
                </div>
                <div class="form-group" style="flex:2">
                    <label class="form-label">Kelurahan</label>
                    <input class="form-input" id="hm_kel" type="text" value="${house.kelurahan || geo.village || ''}"/>
                </div>
            </div>
        </div>
        <div class="modal-section">
            <div class="modal-section-title">🕌 Rumah Ibadah yang Menangani</div>
            <div style="margin-bottom:8px">${centersHtml}</div>
        </div>
        <div class="modal-section">
            <div class="modal-section-title">📊 Status Kemiskinan</div>
            <div class="status-pills">
                <div class="status-pill" data-val="sangat_miskin" onclick="selectStatusMiskin('sangat_miskin')">😢 Sangat Miskin</div>
                <div class="status-pill" data-val="miskin" onclick="selectStatusMiskin('miskin')">😟 Miskin</div>
                <div class="status-pill" data-val="tidak_miskin" onclick="selectStatusMiskin('tidak_miskin')">😊 Tidak Miskin</div>
            </div>
            <input type="hidden" id="hm_statusMiskin" value="${house.statusMiskin || ''}"/>
        </div>
        <div class="modal-section">
            <div class="modal-section-title">👨‍👩‍👧 Anggota Keluarga</div>
            <div class="form-group">
                <label class="form-label">Jumlah Anggota Keluarga *</label>
                <input class="form-input" id="hm_jumlah" type="number" min="1" max="20"
                    placeholder="Masukkan jumlah..." value="${house.jumlahAnggota || ''}"
                    onchange="renderMemberForms(${houseId})"/>
            </div>
            <div id="memberFormsContainer"></div>
        </div>`;

    if (house.jumlahAnggota > 0) renderMemberForms(houseId);
    if (house.statusMiskin) setTimeout(() => selectStatusMiskin(house.statusMiskin), 0);

    document.getElementById('houseModal').classList.remove('hidden');

    const modal  = document.getElementById('houseModal');
    const oldBar = modal.querySelector('.modal-actions');
    if (oldBar) oldBar.remove();
    const bar = document.createElement('div');
    bar.className = 'modal-actions';
    bar.innerHTML = `
        <button class="btn-modal-cancel" onclick="closeHouseModal()">Batal</button>
        <button class="btn-modal-save" onclick="saveHouseData(${houseId})">💾 Simpan Data</button>`;
    modal.querySelector('.modal-box').appendChild(bar);
}

function closeHouseModal() { document.getElementById('houseModal').classList.add('hidden'); }

function selectStatusMiskin(val) {
    document.querySelectorAll('.status-pill').forEach(el => el.classList.remove('selected', 'sangat_miskin', 'miskin', 'tidak_miskin'));
    document.querySelector(`.status-pill[data-val="${val}"]`)?.classList.add('selected', val);
    const hidden = document.getElementById('hm_statusMiskin');
    if (hidden) hidden.value = val;
}

function renderMemberForms(houseId) {
    const house     = houses.find(h => h.id === houseId);
    const jumlah    = parseInt(document.getElementById('hm_jumlah')?.value) || 0;
    const container = document.getElementById('memberFormsContainer');
    if (!container) return;
    container.innerHTML = '';
    for (let i = 0; i < Math.min(jumlah, 20); i++) {
        container.insertAdjacentHTML('beforeend', buildMemberForm(i, house?.anggota?.[i] || {}));
    }
}

function buildMemberForm(i, data = {}) {
    const statusOpts  = ['Kepala Keluarga', 'Istri/Suami', 'Anak', 'Orang Tua', 'Saudara', 'Lainnya']
        .map(s => `<option ${data.statusAnggota === s ? 'selected' : ''}>${s}</option>`).join('');
    const pekerjaanOpts = ['Tidak Bekerja', 'Pelajar/Mahasiswa', 'Buruh/Karyawan', 'Wiraswasta', 'PNS/TNI/Polri', 'Petani/Nelayan', 'Lainnya']
        .map(p => `<option ${data.pekerjaan === p ? 'selected' : ''}>${p}</option>`).join('');
    const showSalary = data.pekerjaan && !['Tidak Bekerja', 'Pelajar/Mahasiswa'].includes(data.pekerjaan);
    const displayDate = data.tglLahir ? formatDate(data.tglLahir) : '';

    return `<div class="member-card">
        <div class="member-card-header"><div class="member-num">${i + 1}</div> Anggota ke-${i + 1}</div>
        <div class="member-card-body">
            <div class="form-row">
                <div class="form-group" style="flex:2">
                    <label class="form-label">Nama Lengkap</label>
                    <input class="form-input" id="m_nama_${i}" type="text" value="${data.nama || ''}" placeholder="Nama..."/>
                </div>
                <div class="form-group">
                    <label class="form-label">Status</label>
                    <select class="form-input" id="m_status_${i}">${statusOpts}</select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Tanggal Lahir</label>
                    <div class="date-input-wrap">
                        <button type="button" class="date-display-btn" id="m_tgl_btn_${i}"
                            onclick="openDatepicker('m_tgl_${i}', 'm_tgl_btn_${i}')">${displayDate || '📅 Pilih tanggal'}</button>
                        <input type="hidden" id="m_tgl_${i}" value="${data.tglLahir || ''}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Pekerjaan</label>
                    <select class="form-input" id="m_pkrj_${i}" onchange="toggleSalary(${i})">${pekerjaanOpts}</select>
                </div>
            </div>
            <div class="form-row salary-row${showSalary ? ' visible' : ''}" id="salary_row_${i}">
                <div class="form-group" style="width:100%">
                    <label class="form-label">Penghasilan per Bulan (Rp)</label>
                    <input class="form-input" id="m_gaji_${i}" type="number" min="0" step="50000" value="${data.gaji || ''}" placeholder="0"/>
                </div>
            </div>
        </div>
    </div>`;
}

function toggleSalary(i) {
    const pekerjaan = document.getElementById(`m_pkrj_${i}`)?.value;
    const row = document.getElementById(`salary_row_${i}`);
    if (!row) return;
    const hide = ['Tidak Bekerja', 'Pelajar/Mahasiswa'].includes(pekerjaan);
    row.classList.toggle('visible', !hide);
}

async function saveHouseData(houseId) {
    const house = houses.find(h => h.id === houseId);
    if (!house) return;

    house.rt          = document.getElementById('hm_rt')?.value?.trim() || '';
    house.rw          = document.getElementById('hm_rw')?.value?.trim() || '';
    house.kelurahan   = document.getElementById('hm_kel')?.value?.trim() || '';
    house.statusMiskin = document.getElementById('hm_statusMiskin')?.value || '';
    house.jumlahAnggota = parseInt(document.getElementById('hm_jumlah')?.value) || 0;

    house.anggota = [];
    for (let i = 0; i < house.jumlahAnggota; i++) {
        house.anggota.push({
            nama:         document.getElementById(`m_nama_${i}`)?.value?.trim() || '',
            statusAnggota: document.getElementById(`m_status_${i}`)?.value || '',
            tglLahir:     document.getElementById(`m_tgl_${i}`)?.value || '',
            pekerjaan:    document.getElementById(`m_pkrj_${i}`)?.value || '',
            gaji:         parseFloat(document.getElementById(`m_gaji_${i}`)?.value) || 0
        });
    }
    house.hasData = house.jumlahAnggota > 0 || !!house.statusMiskin;

    const status = getAidStatus(house);
    if (house.aidStatus !== 'helped') house.aidStatus = status;

    house.marker.setIcon(createHouseIcon(house.aidStatus, house.hasData));
    house.marker.setPopupContent(buildHouseMapPopup(house));

    closeHouseModal();
    updateStats(); updateHouseList();
    await saveHouseBackend(house, true);
}

// ============================================================
// DETAIL MODAL
// ============================================================
function openDetailModal(houseId) {
    const house = houses.find(h => h.id === houseId);
    if (!house) return;
    map.closePopup();

    const covering = getCoveringCenters(house);
    const status   = getAidStatus(house);
    const nearestR = findNearestCenter(house);

    const statusLabels = {
        sangat_miskin: '😢 Sangat Miskin',
        miskin:        '😟 Miskin',
        tidak_miskin:  '😊 Tidak Miskin',
        '':            '—'
    };
    const aidLabels = {
        helped:     '✅ Sudah Dibantu',
        not_helped: '⏳ Belum Dibantu',
        outside:    '🟢 Luar Radius'
    };

    const membersHtml = house.anggota.length > 0
        ? `<table class="member-table"><thead><tr>
               <th>#</th><th>Nama</th><th>Status</th><th>Usia</th><th>Pekerjaan</th><th>Penghasilan</th>
           </tr></thead><tbody>` +
          house.anggota.map((m, i) => {
              const age = calcAge(m.tglLahir);
              return `<tr>
                  <td>${i + 1}</td>
                  <td>${m.nama || '—'}</td>
                  <td>${m.statusAnggota || '—'}</td>
                  <td>${age !== null ? age + ' th' : '—'}</td>
                  <td>${m.pekerjaan || '—'}</td>
                  <td>${m.gaji ? formatRupiah(m.gaji) : '—'}</td>
              </tr>`;
          }).join('') + `</tbody></table>`
        : '<div class="empty-state">Belum ada data anggota keluarga.</div>';

    const nearestInfo = nearestR.center
        ? `${nearestR.center.name} (${nearestR.distance} m)`
        : '—';

    const aidBtns = can('canEdit') ? `
        <div class="aid-btn-row">
            <button class="aid-btn${house.aidStatus === 'helped' ? ' active-helped' : ''}" onclick="setAidStatus(${house.id}, 'helped', '${covering[0]?.id || 0}')">✅ Sudah Dibantu</button>
            <button class="aid-btn${house.aidStatus === 'not_helped' ? ' active-not_helped' : ''}" onclick="setAidStatus(${house.id}, 'not_helped', '${covering[0]?.id || 0}')">⏳ Belum Dibantu</button>
            <button class="aid-btn${house.aidStatus === 'outside' ? ' active-outside' : ''}" onclick="setAidStatus(${house.id}, 'outside', '0')">🟢 Luar Radius</button>
        </div>` : '';

    document.getElementById('detailModalBody').innerHTML = `
        <div class="detail-section">
            <div class="detail-section-title">📍 Lokasi</div>
            <div class="detail-grid">
                <div class="detail-kv"><div class="detail-key">Alamat</div><div class="detail-val">${house.address || '—'}</div></div>
                <div class="detail-kv"><div class="detail-key">RT / RW</div><div class="detail-val">${house.rt || '—'} / ${house.rw || '—'}</div></div>
                <div class="detail-kv"><div class="detail-key">Kelurahan</div><div class="detail-val">${house.kelurahan || '—'}</div></div>
                <div class="detail-kv"><div class="detail-key">Koordinat</div><div class="detail-val" style="font-family:var(--mono);font-size:11px">${house.lat.toFixed(5)}, ${house.lng.toFixed(5)}</div></div>
            </div>
        </div>
        <div class="detail-section">
            <div class="detail-section-title">📊 Status Bantuan</div>
            <div class="detail-grid">
                <div class="detail-kv"><div class="detail-key">Kemiskinan</div><div class="detail-val">${statusLabels[house.statusMiskin] || '—'}</div></div>
                <div class="detail-kv"><div class="detail-key">Status Bantuan</div><div class="detail-val">${aidLabels[status] || '—'}</div></div>
                <div class="detail-kv"><div class="detail-key">Rumah Ibadah</div><div class="detail-val">${covering.length > 0 ? covering.map(c => c.name).join(', ') : 'Luar radius'}</div></div>
                <div class="detail-kv"><div class="detail-key">Terdekat</div><div class="detail-val">${nearestInfo}</div></div>
            </div>
            ${aidBtns}
        </div>
        <div class="detail-section">
            <div class="detail-section-title">👨‍👩‍👧 Anggota Keluarga (${house.jumlahAnggota} orang)</div>
            ${membersHtml}
        </div>`;

    document.getElementById('detailModal').classList.remove('hidden');
}
function closeDetailModal() { document.getElementById('detailModal').classList.add('hidden'); }

async function setAidStatus(houseId, newStatus, centerId) {
    const house = houses.find(h => h.id === houseId);
    if (!house) return;
    house.aidStatus = newStatus;
    house.marker.setIcon(createHouseIcon(house.aidStatus, house.hasData));
    house.marker.setPopupContent(buildHouseMapPopup(house));
    updateStats(); updateHouseList();
    closeDetailModal();

    try {
        const body = new URLSearchParams({ house_id: houseId, aid_status: newStatus, center_id: centerId });
        await fetch('update_status.php', { method: 'POST', body });
    } catch (e) { console.error('setAidStatus', e); }
}

// ============================================================
// DELETE
// ============================================================
function deleteHouse(houseId) {
    if (!can('canDelete')) return;
    if (!confirm('Hapus data rumah ini?')) return;
    const idx = houses.findIndex(h => h.id === houseId);
    if (idx === -1) return;
    map.removeLayer(houses[idx].marker);
    houses.splice(idx, 1);
    updateStats(); updateHouseList();
    fetch('hapus_rumah.php', { method: 'POST', body: new URLSearchParams({ id: houseId }) });
}

function deleteCenter(centerId) {
    if (!can('canDelete')) return;
    if (!confirm('Hapus rumah ibadah ini beserta data terkait?')) return;
    const idx = centers.findIndex(c => c.id === centerId);
    if (idx === -1) return;
    map.removeLayer(centers[idx].marker);
    map.removeLayer(centers[idx].circle);
    if (centers[idx].handle) map.removeLayer(centers[idx].handle);
    centers.splice(idx, 1);
    map.closePopup();
    updateAllHouseIcons(); updateSidebar();
    fetch('hapus_pusat.php', { method: 'POST', body: new URLSearchParams({ id: centerId }) });
}

// ============================================================
// RESET
// ============================================================
function confirmReset() {
    if (!can('canReset')) return;
    if (!confirm('RESET semua data? Tindakan ini tidak dapat dibatalkan!')) return;
    centers.forEach(c => {
        map.removeLayer(c.marker);
        map.removeLayer(c.circle);
        if (c.handle) map.removeLayer(c.handle);
    });
    houses.forEach(h => map.removeLayer(h.marker));
    centers = []; houses = []; reports = [];
    updateStats(); updateSidebar();
    fetch('reset.php', { method: 'POST' });
}

// ============================================================
// SIDEBAR
// ============================================================
function updateSidebar() { updateCenterList(); updateHouseList(); }

function filterCenters() {
    const query = document.getElementById('searchCenter')?.value?.toLowerCase() || '';
    const sort  = document.getElementById('sortCenter')?.value || '';

    let list = centers.filter(c => c.name.toLowerCase().includes(query) || (c.address || '').toLowerCase().includes(query));

    if (sort === 'kas_desc') list.sort((a, b) => (b.kas || 0) - (a.kas || 0));
    else if (sort === 'kas_asc') list.sort((a, b) => (a.kas || 0) - (b.kas || 0));
    else if (sort === 'tanggungan_desc') list.sort((a, b) => countCovered(b) - countCovered(a));
    else if (sort === 'tanggungan_asc') list.sort((a, b) => countCovered(a) - countCovered(b));

    renderCenterList(list);
}

function countCovered(c) {
    return houses.filter(h => haversineDistance(h.lat, h.lng, c.lat, c.lng) <= c.radius).length;
}

function updateCenterList() {
    document.getElementById('centerCount').textContent = centers.length;
    filterCenters();
}

function renderCenterList(list) {
    const el = document.getElementById('centerList');
    if (list.length === 0) { el.innerHTML = '<div class="empty-state">Belum ada rumah ibadah.</div>'; return; }

    el.innerHTML = list.map(c => {
        const info     = CENTER_TYPE_MAP[getCenterType(c.name)] || CENTER_TYPE_MAP['default'];
        const covered  = countCovered(c);
        const helped   = houses.filter(h => haversineDistance(h.lat, h.lng, c.lat, c.lng) <= c.radius && h.aidStatus === 'helped').length;
        const delBtn   = can('canDelete') ? `<button class="center-item-del" onclick="event.stopPropagation();deleteCenter(${c.id})">🗑</button>` : '';
        return `<div class="center-item" onclick="focusCenter(${c.id})">
            <div class="center-item-icon">${info.emoji}</div>
            <div class="center-item-body">
                <div class="center-item-name">${c.name}</div>
                <div class="center-item-addr">${c.address || '—'}</div>
                <div class="center-item-meta">
                    <span class="meta-tag">⭕ ${c.radius}m</span>
                    <span class="meta-tag">🏠 ${covered}</span>
                    <span class="meta-tag">💰 ${formatRupiah(c.kas)}</span>
                    ${helped > 0 ? `<span class="meta-tag" style="background:#fef9c3;color:#854d0e">✅ ${helped}</span>` : ''}
                </div>
            </div>
            ${delBtn}
        </div>`;
    }).join('');
}

function focusCenter(centerId) {
    const c = centers.find(c => c.id === centerId);
    if (!c) return;
    map.setView([c.lat, c.lng], 16);
    c.marker.openPopup();
}

function filterHouses() {
    const query        = document.getElementById('searchHouse')?.value?.toLowerCase() || '';
    const filterStatus = document.getElementById('filterStatus')?.value || '';
    const filterMiskin = document.getElementById('filterMiskin')?.value || '';

    let list = houses.filter(h => {
        const kkName = h.anggota?.[0]?.nama?.toLowerCase() || '';
        const addr   = (h.address || '').toLowerCase();
        const matchQ = !query || kkName.includes(query) || addr.includes(query);
        const matchS = !filterStatus || getAidStatus(h) === filterStatus;
        const matchM = !filterMiskin || h.statusMiskin === filterMiskin;
        return matchQ && matchS && matchM;
    });

    renderHouseList(list);
}

function updateHouseList() {
    document.getElementById('houseCount').textContent = houses.length;
    filterHouses();
}

function renderHouseList(list) {
    const el = document.getElementById('houseList');
    if (list.length === 0) { el.innerHTML = '<div class="empty-state">Belum ada data.</div>'; return; }

    el.innerHTML = list.map(h => {
        const status  = getAidStatus(h);
        const kkName  = h.anggota?.[0]?.nama || `Rumah #${h.id}`;
        const addr    = h.kelurahan || h.address?.split(',')[0] || '—';
        const icon    = h.hasData ? (status === 'helped' ? '🏠' : status === 'not_helped' ? '🏚' : '🏠') : '📍';
        const delBtn  = can('canDelete') ? `<button class="house-item-del" onclick="event.stopPropagation();deleteHouse(${h.id})">🗑</button>` : '';
        const statusLabels = { helped: '✅ Dibantu', not_helped: '⏳ Belum', outside: '🟢 Luar', nodata: '📍 Pin' };
        const miskinLabels = { sangat_miskin: '😢 Sangat Miskin', miskin: '😟 Miskin', tidak_miskin: '😊 Tidak Miskin' };

        return `<div class="house-item status-${status}" onclick="focusHouse(${h.id})">
            <div class="house-item-icon">${icon}</div>
            <div class="house-item-body">
                <div class="house-item-name">${kkName}</div>
                <div class="house-item-addr">${addr}</div>
                <div class="house-item-tags">
                    <span class="tag tag-${h.hasData ? status : 'nodata'}">${statusLabels[h.hasData ? status : 'nodata'] || status}</span>
                    ${h.statusMiskin ? `<span class="tag tag-${h.statusMiskin}">${miskinLabels[h.statusMiskin]}</span>` : ''}
                </div>
            </div>
            ${delBtn}
        </div>`;
    }).join('');
}

function focusHouse(houseId) {
    const h = houses.find(h => h.id === houseId);
    if (!h) return;
    map.setView([h.lat, h.lng], 17);
    h.marker.openPopup();
}

// ============================================================
// REPORTS
// ============================================================
function updateReportBadge() {
    const badge = document.getElementById('navReportBadge');
    const count = can('canViewReport') ? reports.filter(r => r.status === 'baru').length : 0;
    if (badge) {
        badge.textContent = count;
        badge.classList.toggle('hidden', count === 0);
    }
}

function filterReports() {
    const query  = document.getElementById('searchReport')?.value?.toLowerCase() || '';
    const status = document.getElementById('filterReportStatus')?.value || '';
    const list   = reports.filter(r => {
        const matchQ = !query || r.text.toLowerCase().includes(query) || (r.name || '').toLowerCase().includes(query);
        const matchS = !status || r.status === status;
        return matchQ && matchS;
    });
    renderReportList(list);
}

function renderReportList(list) {
    if (!list) list = reports;
    document.getElementById('reportCount').textContent = reports.length;

    const el = document.getElementById('reportList');
    if (list.length === 0) { el.innerHTML = '<div class="empty-state" style="margin-top:20px">Belum ada laporan.</div>'; return; }

    el.innerHTML = list.map(r => {
        const statusBadge = `<span class="report-status ${r.status}">${r.status === 'baru' ? '🆕 Baru' : r.status === 'ditangani' ? '🔄 Ditangani' : '✅ Selesai'}</span>`;
        const img = r.imgBase64 ? `<img src="${r.imgBase64}" style="width:100%;max-height:140px;object-fit:cover;border-radius:6px;margin:0 14px 8px;width:calc(100% - 28px)"/>` : '';
        const actions = can('canDelete')
            ? `<button class="report-action-btn danger" onclick="deleteReport(${r.id})">🗑 Hapus</button>` : '';
        const statusBtns = can('canViewReport')
            ? `<button class="report-action-btn" onclick="changeReportStatus(${r.id}, 'baru')">🆕</button>
               <button class="report-action-btn" onclick="changeReportStatus(${r.id}, 'ditangani')">🔄</button>
               <button class="report-action-btn" onclick="changeReportStatus(${r.id}, 'selesai')">✅</button>` : '';

        return `<div class="report-card">
            <div class="report-card-header">
                <div><div class="report-card-name">👤 ${r.name || 'Anonim'}</div><div class="report-card-meta">${r.lokasi ? '📍 ' + r.lokasi + ' · ' : ''}${r.time}</div></div>
                ${statusBadge}
            </div>
            <div class="report-card-text">${r.text}</div>
            ${img}
            <div class="report-card-footer">
                <div class="report-card-time">#${r.id}</div>
                <div class="report-card-actions">${statusBtns}${actions}</div>
            </div>
        </div>`;
    }).join('');
}

async function changeReportStatus(reportId, newStatus) {
    const r = reports.find(r => r.id === reportId);
    if (!r) return;
    r.status = newStatus;
    filterReports();
    updateReportBadge();
    try {
        await fetch('update_laporan.php', { method: 'POST', body: new URLSearchParams({ id: reportId, status: newStatus }) });
    } catch (e) { console.error(e); }
}

async function deleteReport(reportId) {
    if (!can('canDelete')) return;
    if (!confirm('Hapus laporan ini?')) return;
    reports = reports.filter(r => r.id !== reportId);
    filterReports();
    updateReportBadge();
    try {
        await fetch('hapus_laporan.php', { method: 'POST', body: new URLSearchParams({ id: reportId }) });
    } catch (e) { console.error(e); }
}

// ============================================================
// REPORT SUBMIT
// ============================================================
let reportImgBase64 = '';

function previewImage(event) {
    const file = event.target.files[0];
    if (!file) return;
    if (file.size > 5_000_000) { alert('Ukuran file maksimal 5MB'); return; }
    const reader = new FileReader();
    reader.onload = e => {
        reportImgBase64 = e.target.result;
        document.getElementById('previewImg').src = e.target.result;
        document.getElementById('imgPreview').style.display = 'block';
        document.getElementById('uploadArea').style.display = 'none';
    };
    reader.readAsDataURL(file);
}

function removeImage() {
    reportImgBase64 = '';
    document.getElementById('reportImg').value = '';
    document.getElementById('imgPreview').style.display = 'none';
    document.getElementById('uploadArea').style.display = 'block';
}

async function submitReport() {
    const text   = document.getElementById('reportText')?.value?.trim();
    const name   = document.getElementById('reportName')?.value?.trim() || 'Anonim';
    const lokasi = document.getElementById('reportLocation')?.value?.trim() || '';

    if (!text) { document.getElementById('reportText')?.focus(); alert('Deskripsi laporan tidak boleh kosong'); return; }

    try {
        const body = new URLSearchParams({ name, text, lokasi, img: reportImgBase64 });
        const res  = await fetch('simpan_laporan.php', { method: 'POST', body });
        const data = await res.json();
        if (data.success) {
            const newReport = {
                id: data.id, name, text, lokasi,
                imgBase64: reportImgBase64 || null,
                status: 'baru',
                time: new Date().toLocaleDateString('id-ID', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
            };
            reports.unshift(newReport);
            document.getElementById('reportText').value    = '';
            document.getElementById('reportName').value    = '';
            document.getElementById('reportLocation').value = '';
            removeImage();
            filterReports();
            updateReportBadge();
            alert('Laporan berhasil dikirim! Terima kasih.');
        } else {
            alert('Gagal kirim laporan: ' + (data.message || 'Error'));
        }
    } catch (e) { console.error(e); alert('Terjadi kesalahan. Coba lagi.'); }
}

// ============================================================
// DATE PICKER
// ============================================================
let _dpTargetInput = null;
let _dpTargetBtn   = null;
let _dpYear        = new Date().getFullYear();
let _dpMonth       = new Date().getMonth();
let _dpSelected    = null;

function openDatepicker(inputId, btnId) {
    _dpTargetInput = document.getElementById(inputId);
    _dpTargetBtn   = document.getElementById(btnId);
    const existing = _dpTargetInput?.value;
    if (existing) {
        const d  = new Date(existing);
        _dpYear  = d.getFullYear();
        _dpMonth = d.getMonth();
        _dpSelected = existing;
    } else {
        _dpYear  = new Date().getFullYear();
        _dpMonth = new Date().getMonth();
        _dpSelected = null;
    }
    renderDatepicker();
    document.getElementById('datepickerOverlay').classList.remove('hidden');
}

function closeDatepicker() { document.getElementById('datepickerOverlay').classList.add('hidden'); }
function closeDatepickerIfOutside(e) { if (e.target.id === 'datepickerOverlay') closeDatepicker(); }

function renderDatepicker() {
    const box    = document.getElementById('datepickerBox');
    const months = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
    const days   = ['Min','Sen','Sel','Rab','Kam','Jum','Sab'];

    const firstDay = new Date(_dpYear, _dpMonth, 1).getDay();
    const daysInMonth = new Date(_dpYear, _dpMonth + 1, 0).getDate();
    const today = new Date();

    let gridHtml = days.map(d => `<div class="dp-day-label">${d}</div>`).join('');
    for (let i = 0; i < firstDay; i++) {
        const prevDays = new Date(_dpYear, _dpMonth, 0).getDate();
        gridHtml += `<div class="dp-day other-month disabled">${prevDays - firstDay + i + 1}</div>`;
    }
    for (let d = 1; d <= daysInMonth; d++) {
        const dateStr  = `${_dpYear}-${String(_dpMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
        const isToday  = d === today.getDate() && _dpMonth === today.getMonth() && _dpYear === today.getFullYear();
        const isSel    = dateStr === _dpSelected;
        const isFuture = new Date(_dpYear, _dpMonth, d) > today;
        gridHtml += `<div class="dp-day${isToday ? ' today' : ''}${isSel ? ' selected' : ''}${isFuture ? ' disabled' : ''}"
            onclick="${!isFuture ? `selectDate('${dateStr}')` : ''}">${d}</div>`;
    }

    box.innerHTML = `
        <div class="dp-header">
            <button class="dp-nav" onclick="dpNav(-1)">◀</button>
            <div class="dp-title">${months[_dpMonth]} ${_dpYear}</div>
            <button class="dp-nav" onclick="dpNav(1)">▶</button>
        </div>
        <div class="dp-grid">${gridHtml}</div>
        <div class="dp-footer">
            <button class="dp-btn" onclick="closeDatepicker()">Batal</button>
            <button class="dp-btn primary" onclick="confirmDate()">Pilih</button>
        </div>`;
}

function dpNav(dir) {
    _dpMonth += dir;
    if (_dpMonth < 0) { _dpMonth = 11; _dpYear--; }
    if (_dpMonth > 11) { _dpMonth = 0; _dpYear++; }
    renderDatepicker();
}

function selectDate(dateStr) {
    _dpSelected = dateStr;
    renderDatepicker();
}

function confirmDate() {
    if (!_dpSelected || !_dpTargetInput) { closeDatepicker(); return; }
    _dpTargetInput.value = _dpSelected;
    if (_dpTargetBtn) _dpTargetBtn.textContent = formatDate(_dpSelected);
    closeDatepicker();
}

// ============================================================
// LOAD DATA FROM BACKEND
// ============================================================
async function loadData() {
    try {
        const res  = await fetch('get_data.php');
        const data = await res.json();
        if (!data.success) return;

        data.centers.forEach(c => {
            addCenter({ id: c.id, name: c.name, address: c.address, kas: c.kas, lat: c.latitude, lng: c.longitude, radius: c.radius });
        });

        data.houses.forEach(h => {
            const marker = L.marker([h.latitude, h.longitude], {
                icon: createHouseIcon(h.aid_status, !!h.has_data),
                zIndexOffset: 100
            }).addTo(map);

            const house = {
                id: h.id, lat: h.latitude, lng: h.longitude,
                address: h.address, rt: h.rt, rw: h.rw, kelurahan: h.kelurahan,
                statusMiskin: h.status_miskin, jumlahAnggota: h.jumlah_anggota,
                anggota: h.anggota || [], aidStatus: h.aid_status,
                hasData: !!h.has_data, marker, _geoData: null
            };
            marker.bindPopup(() => buildHouseMapPopup(house), { maxWidth: 270 });
            marker.on('popupopen', () => marker.setPopupContent(buildHouseMapPopup(house)));
            houses.push(house);
        });

        reports = data.reports || [];

        updateStats();
        updateSidebar();
        updateReportBadge();
    } catch (e) {
        console.error('loadData', e);
    }
}

// ============================================================
// INIT
// ============================================================
applyRoleUI();
loadData();