const RI = (() => {
  let all = [], editId = null;

  const DEMO = [
    { id:1, nama:"Masjid Jami' Pontianak",           jenis:'Masjid',   kecamatan:'Pontianak Timur',   kontak:'0561-732001', radius_meter:350, jumlah_kk:3, jumlah_penduduk:8,  lat:-0.02596, lng:109.34307 },
    { id:2, nama:'Gereja Katedral Pontianak',         jenis:'Gereja',   kecamatan:'Pontianak Selatan', kontak:'0561-766000', radius_meter:300, jumlah_kk:2, jumlah_penduduk:5,  lat:-0.03200, lng:109.33200 },
    { id:3, nama:'Vihara Bodhisattva Karaniya Metta', jenis:'Vihara',   kecamatan:'Pontianak Kota',    kontak:'0561-733456', radius_meter:300, jumlah_kk:2, jumlah_penduduk:4,  lat:-0.02100, lng:109.33800 },
    { id:4, nama:'Klenteng Kwan Ti Miau',             jenis:'Klenteng', kecamatan:'Pontianak Kota',    kontak:'0561-740123', radius_meter:280, jumlah_kk:1, jumlah_penduduk:2,  lat:-0.01900, lng:109.34100 },
    { id:5, nama:'Masjid Mujahidin Pontianak',        jenis:'Masjid',   kecamatan:'Pontianak Selatan', kontak:'0561-764567', radius_meter:400, jumlah_kk:1, jumlah_penduduk:2,  lat:-0.04800, lng:109.32500 },
    { id:6, nama:'Gereja GPIB Immanuel',              jenis:'Gereja',   kecamatan:'Pontianak Kota',    kontak:'0561-735890', radius_meter:300, jumlah_kk:1, jumlah_penduduk:1,  lat:-0.02800, lng:109.34500 },
  ];

  const JENIS_EMOJI  = { Masjid:'🕌', Gereja:'⛪', Vihara:'🛕', Pura:'🛕', Klenteng:'🏮', Lainnya:'🏛️' };
  const JENIS_COLOR  = { Masjid:'#06d6a0', Gereja:'#4cc9f0', Vihara:'#ffd166', Pura:'#f97316', Klenteng:'#b48eff', Lainnya:'#6b7a99' };

  async function load() {
    try { all = await Api.get('/rumah-ibadah'); } catch { all = DEMO; }
    render(all);
  }

  function render(data) {
    ge('ri-grid').innerHTML = data.map(r => `
      <div class="ri-card" style="border-top:3px solid ${JENIS_COLOR[r.jenis]||'#6b7a99'}">
        <div class="ri-icon-big">${JENIS_EMOJI[r.jenis]||'🏛️'}</div>
        <div class="ri-name">${r.nama}</div>
        <div class="ri-type">${r.jenis} · ${r.kecamatan||'—'}</div>
        <div class="ri-stats">
          <div class="ri-stat">
            <div class="ri-stat-num" style="color:${JENIS_COLOR[r.jenis]}">${r.jumlah_kk||0}</div>
            <div class="ri-stat-lbl">KK Binaan</div>
          </div>
          <div class="ri-stat">
            <div class="ri-stat-num" style="color:var(--blue)">${r.jumlah_penduduk||0}</div>
            <div class="ri-stat-lbl">Jiwa</div>
          </div>
        </div>
        <div style="font-size:11px;color:var(--muted);margin-bottom:10px">
          📞 ${r.kontak||'—'} &nbsp;·&nbsp; ⭕ Radius ${r.radius_meter}m
        </div>
        ${App.canEdit() ? `
        <div style="display:flex;gap:6px">
          <button class="btn btn-secondary btn-sm" style="flex:1" onclick="RI.showForm(${r.id})">✏️ Edit</button>
          <button class="btn btn-danger btn-sm" onclick="RI.hapus(${r.id})">🗑</button>
        </div>` : ''}
      </div>`).join('');
  }

  async function showForm(id = null) {
    editId = id;
    ge('mri-title').textContent = id ? '✏️ Edit Rumah Ibadah' : '🕌 Tambah Rumah Ibadah';
    if (id) {
      const r = all.find(x => x.id == id) || {};
      sv('fri-nama', r.nama); sv('fri-jenis', r.jenis);
      sv('fri-radius', r.radius_meter||300); sv('fri-lat', r.lat);
      sv('fri-lng', r.lng); sv('fri-kec', r.kecamatan);
      sv('fri-kontak', r.kontak); sv('fri-alamat', r.alamat);
    } else {
      ['fri-nama','fri-kec','fri-kontak','fri-alamat'].forEach(i => sv(i,''));
      sv('fri-radius','300'); sv('fri-lat',''); sv('fri-lng','');
    }
    App.showModal('modal-ri');
  }

  async function save() {
    if (!gv('fri-nama')) { App.toast('Nama wajib diisi','error'); return; }
    if (!gv('fri-lat') || !gv('fri-lng')) { App.toast('Koordinat (lat/lng) wajib diisi','error'); return; }
    const body = {
      nama: gv('fri-nama'), jenis: gv('fri-jenis'),
      radius_meter: +gv('fri-radius')||300,
      lat: +gv('fri-lat'), lng: +gv('fri-lng'),
      kecamatan: gv('fri-kec'), kontak: gv('fri-kontak'), alamat: gv('fri-alamat'),
    };
    try {
      if (editId) { await Api.put(`/rumah-ibadah/${editId}`, body); App.toast('Data diperbarui ✅','success'); }
      else        { await Api.post('/rumah-ibadah', body); App.toast('Rumah ibadah ditambahkan ✅','success'); }
      App.closeModal('modal-ri'); load();
    } catch(e) { App.toast(e.message,'error'); }
  }

  async function hapus(id) {
    if (!confirm('Nonaktifkan rumah ibadah ini?')) return;
    try { await Api.delete(`/rumah-ibadah/${id}`); App.toast('Dinonaktifkan','success'); load(); }
    catch(e) { App.toast(e.message,'error'); }
  }

  return { load, showForm, save, hapus, getAll: () => all };
})();