const LaporanPanel = (() => {
  const DEMO = [
    { id:1, nama_pelapor:'Anonim',       deskripsi:'Ibu Maria sakit keras sudah seminggu, tidak bisa berobat karena tidak ada biaya. Butuh bantuan medis segera.', urgensi:'darurat',  status:'diverifikasi', alamat_laporan:'Jl. Kemuning No.3, Akcaya', created_at:'2025-05-01T08:00:00', nama_ri:'Gereja Katedral' },
    { id:2, nama_pelapor:'Eko Prasetyo', deskripsi:'Ada keluarga baru pindah ke Gg. Melati yang sepertinya sangat membutuhkan bantuan. Anak-anak tidak sekolah.', urgensi:'sedang',   status:'pending',      alamat_laporan:'Gg. Melati, Dalam Bugis',   created_at:'2025-05-10T10:00:00', nama_ri:"Masjid Jami'" },
    { id:3, nama_pelapor:'Anonim',       deskripsi:'Pak Tan penyandang disabilitas, hidup sebatang kara dan sangat sulit mendapat penghasilan. Perlu perhatian.', urgensi:'tinggi',   status:'diproses',     alamat_laporan:'Jl. Gusti Situt No.7',      created_at:'2025-05-12T14:00:00', nama_ri:'Klenteng Kwan Ti Miau' },
    { id:4, nama_pelapor:'Hendra',       deskripsi:'Balita 2 tahun kondisi gizi buruk. Orang tua tidak mampu memenuhi kebutuhan gizi anak.',                     urgensi:'darurat',  status:'pending',      alamat_laporan:'Gg. Teratai, Parit Tokaya', created_at:'2025-05-15T09:00:00', nama_ri:'Masjid Mujahidin' },
  ];

  const URG = { darurat:'🔴', tinggi:'🟠', sedang:'🟡', rendah:'🟢' };
  const URG_COLOR = { darurat:'var(--red)', tinggi:'var(--orange)', sedang:'var(--yellow)', rendah:'var(--green)' };
  const STATUS_LABEL = { pending:'⏳ Pending', diverifikasi:'✅ Diverifikasi', diproses:'🔄 Diproses', selesai:'🏁 Selesai' };

  async function load() {
    const st = gv('lf-status');
    const ur = gv('lf-urgensi');
    let url = '/laporan';
    const p = []; if(st) p.push(`status=${st}`); if(ur) p.push(`urgensi=${ur}`);
    if(p.length) url += '?' + p.join('&');
    let data;
    try { data = await Api.get(url); } catch { data = DEMO; }
    if(st) data = data.filter(l => l.status === st);
    if(ur) data = data.filter(l => l.urgensi === ur);
    render(data);
  }

  function render(data) {
    const el = ge('laporan-grid');
    if (!data.length) {
      el.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="es-icon">✅</div><h3>Tidak ada laporan</h3><p>Semua laporan sudah ditangani</p></div>';
      return;
    }
    el.innerHTML = data.map(l => `
      <div class="laporan-card ${l.urgensi}">
        <div class="lc-hdr">
          <div>
            <span class="bdg bdg-${l.urgensi}" style="margin-bottom:6px;display:inline-block">${URG[l.urgensi]||'📋'} ${(l.urgensi||'').toUpperCase()}</span>
            <div class="lc-title">#${l.id} — ${l.nama_pelapor||'Anonim'}</div>
          </div>
          <span class="bdg bdg-${l.status}">${STATUS_LABEL[l.status]||l.status}</span>
        </div>
        <div class="lc-desc">${l.deskripsi}</div>
        <div class="lc-meta">
          <span>📍 ${l.alamat_laporan||'—'}</span>
          <span>🕌 ${l.nama_ri||'—'}</span>
          <span>📅 ${(l.created_at||'').substring(0,10)}</span>
        </div>
        ${App.canEdit() && l.status !== 'selesai' ? `
        <div class="lc-actions">
          ${l.status === 'pending'      ? `<button class="btn btn-secondary btn-sm" onclick="LaporanPanel.updateStatus(${l.id},'diverifikasi')">✅ Verifikasi</button>` : ''}
          ${l.status === 'diverifikasi' ? `<button class="btn btn-warning btn-sm"   onclick="LaporanPanel.updateStatus(${l.id},'diproses')">🔄 Proses</button>` : ''}
          ${l.status !== 'selesai'      ? `<button class="btn btn-success btn-sm"   onclick="LaporanPanel.updateStatus(${l.id},'selesai')">🏁 Selesai</button>` : ''}
          <button class="btn btn-danger btn-sm" onclick="LaporanPanel.hapus(${l.id})">🗑</button>
        </div>` : ''}
      </div>`).join('');
  }

  async function updateStatus(id, status) {
    try {
      await Api.put(`/laporan/${id}`, { status });
      App.toast(`Status laporan diubah: ${STATUS_LABEL[status]||status}`, 'success');
      load(); App.updateHeaderStats();
    } catch(e) { App.toast(e.message,'error'); }
  }

  async function hapus(id) {
    if (!confirm('Hapus laporan ini?')) return;
    try { await Api.delete(`/laporan/${id}`); App.toast('Laporan dihapus','success'); load(); }
    catch(e) { App.toast(e.message,'error'); }
  }

  function showKirimModal() {
    ['fl-nama','fl-hp','fl-nik','fl-alamat','fl-deskripsi'].forEach(id => sv(id,''));
    sv('fl-urgensi','sedang');
    App.showModal('modal-laporan');
  }

  async function kirim() {
    if (!gv('fl-deskripsi')) { App.toast('Deskripsi kondisi wajib diisi','error'); return; }
    const body = {
      nama_pelapor:  gv('fl-nama')   || null,
      no_hp_pelapor: gv('fl-hp')     || null,
      nik_terdampak: gv('fl-nik')    || null,
      urgensi:       gv('fl-urgensi'),
      alamat_laporan:gv('fl-alamat'),
      deskripsi:     gv('fl-deskripsi'),
    };
    try {
      await Api.post('/laporan', body);
      App.closeModal('modal-laporan');
      App.toast('Laporan berhasil dikirim! Terima kasih 🙏','success');
      load(); App.updateHeaderStats();
    } catch(e) { App.toast(e.message,'error'); }
  }

  return { load, updateStatus, hapus, showKirimModal, kirim };
})();