{% extends 'base.html' %}
{% block title %}Manajemen Role & Hak Akses Fungsi — SPPG{% endblock %}
{% block page_title %}🛡️ Manajemen Role & Kontrol Hak Akses Halaman{% endblock %}

{% block extra_css %}
<style>
.role-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  transition: all 0.25s ease;
}
.role-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.perm-table th {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  background: #f8fafc;
  vertical-align: middle;
}
.perm-table td {
  vertical-align: middle;
  padding: 0.65rem 0.85rem;
}
.perm-switch {
  width: 2.2rem;
  height: 1.15rem;
  cursor: pointer;
}
.perm-module-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #1F4E79;
  background: #f1f5f9;
}
.role-badge-super { background: #1F4E79; color: #fff; }
.role-badge-val   { background: #15803D; color: #fff; }
.role-badge-dapur { background: #D97706; color: #fff; }
.role-badge-view  { background: #64748B; color: #fff; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-2 py-1">

  <!-- HEADER & TOP ACTION -->
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <div>
      <h4 class="fw-bold mb-1 text-primary d-flex align-items-center gap-2">
        <i class="bi bi-person-gear text-primary"></i> Manajemen Role & Kontrol Hak Akses
      </h4>
      <p class="text-muted small mb-0">
        Kelola pengguna, penugasan peran (Role), serta atur sakelar fungsi halaman (bisa diatur aktif/nonaktif per peran).
      </p>
    </div>
    <div class="d-flex gap-2">
      <button class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1 shadow-sm" onclick="resetDefaultPermissions()" title="Kembalikan ke aturan standar default">
        <i class="bi bi-arrow-counterclockwise"></i> Reset Default Matriks
      </button>
      <button class="btn btn-primary btn-sm d-flex align-items-center gap-1 shadow-sm" onclick="bukaModalUser()">
        <i class="bi bi-person-plus-fill"></i> Tambah Pengguna Baru
      </button>
    </div>
  </div>

  <!-- RINGKASAN ROLE CARDS -->
  <div class="row g-2 mb-3">
    <div class="col-6 col-md-3">
      <div class="role-card p-3 border-start border-4 border-primary shadow-sm">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="badge role-badge-super px-2 py-1">👑 Super Admin</span>
          <span class="badge bg-light text-dark border" id="count-super-admin">0 user</span>
        </div>
        <div class="small text-muted" style="font-size:0.75rem;">Akses penuh tanpa batas ke semua menu, ekspor data, konfigurasi dan hapus data.</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="role-card p-3 border-start border-4 border-success shadow-sm">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="badge role-badge-val px-2 py-1">🛡️ Validator</span>
          <span class="badge bg-light text-dark border" id="count-validator">0 user</span>
        </div>
        <div class="small text-muted" style="font-size:0.75rem;">Hak validasi/persetujuan belanja & operasional, melihat audit log & monitoring.</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="role-card p-3 border-start border-4 border-warning shadow-sm">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="badge role-badge-dapur px-2 py-1">🍳 Admin Dapur</span>
          <span class="badge bg-light text-dark border" id="count-admin-dapur">0 user</span>
        </div>
        <div class="small text-muted" style="font-size:0.75rem;">Input belanja, operasional & melihat harga pasar terbatas pada unit dapurnya.</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="role-card p-3 border-start border-4 border-secondary shadow-sm">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="badge role-badge-view px-2 py-1">👀 Viewer</span>
          <span class="badge bg-light text-dark border" id="count-viewer">0 user</span>
        </div>
        <div class="small text-muted" style="font-size:0.75rem;">Mode tinjau (*read-only*), memantau rekap laporan tanpa hak ubah/validasi.</div>
      </div>
    </div>
  </div>

  <!-- NAV TABS: MATRIKS AKSES VS DAFTAR USER -->
  <ul class="nav nav-pills mb-3 border-bottom pb-2" id="roleTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active btn-sm px-3 py-1 d-flex align-items-center gap-1" id="tab-matrix-link" data-bs-toggle="pill" data-bs-target="#tabMatrix" type="button" role="tab">
        <i class="bi bi-sliders"></i> Matriks Pengaturan Fungsi & Halaman
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link btn-sm px-3 py-1 d-flex align-items-center gap-1" id="tab-users-link" data-bs-toggle="pill" data-bs-target="#tabUsers" type="button" role="tab">
        <i class="bi bi-people"></i> Daftar Akun Pengguna & Peran
      </button>
    </li>
  </ul>

  <!-- TAB CONTENT -->
  <div class="tab-content" id="roleTabsContent">

    <!-- ── TAB 1: MATRIKS KONTROL FUNGSI HALAMAN ── -->
    <div class="tab-pane fade show active" id="tabMatrix" role="tabpanel">
      <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white py-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
          <div>
            <h6 class="fw-bold mb-0 text-dark d-flex align-items-center gap-2">
              <i class="bi bi-toggle2-on text-primary"></i> Kontrol Hak Akses Halaman & Fitur Tindakan
            </h6>
            <small class="text-muted">Centang switch untuk mengaktifkan atau menonaktifkan halaman & fitur bagi masing-masing role.</small>
          </div>
          <button class="btn btn-success btn-sm d-flex align-items-center gap-1 shadow-sm text-white" onclick="simpanMatriksPermissions()">
            <i class="bi bi-check2-circle"></i> Simpan Pengaturan Hak Akses
          </button>
        </div>

        <div class="table-responsive">
          <table class="table table-hover align-middle perm-table mb-0">
            <thead>
              <tr class="text-secondary small">
                <th style="min-width: 240px;">HALAMAN / FUNGSI FITUR</th>
                <th class="text-center" style="width: 140px;">SUPER ADMIN</th>
                <th class="text-center" style="width: 140px;">VALIDATOR</th>
                <th class="text-center" style="width: 140px;">ADMIN DAPUR</th>
                <th class="text-center" style="width: 140px;">VIEWER</th>
              </tr>
            </thead>
            <tbody id="matrixTbody">
              <!-- Baris-baris switch di-render via JS -->
              <tr><td colspan="5" class="text-center py-4 text-muted">Memuat konfigurasi hak akses...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ── TAB 2: DAFTAR AKUN PENGGUNA ── -->
    <div class="tab-pane fade" id="tabUsers" role="tabpanel">
      <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
          <h6 class="fw-bold mb-0 text-dark d-flex align-items-center gap-2">
            <i class="bi bi-people text-primary"></i> Daftar Pengguna Aktif & Penugasan Unit
          </h6>
          <button class="btn btn-sm btn-outline-secondary" onclick="loadUsers()">
            <i class="bi bi-arrow-clockwise"></i> Perbarui
          </button>
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light text-secondary small">
              <tr>
                <th>USERNAME</th>
                <th>NAMA LENGKAP</th>
                <th>ROLE / PERAN</th>
                <th>UNIT DAPUR</th>
                <th class="text-center" style="width: 90px;">STATUS</th>
                <th class="text-end" style="width: 120px;">AKSI</th>
              </tr>
            </thead>
            <tbody id="usersTbody">
              <tr><td colspan="6" class="text-center py-4 text-muted">Memuat daftar akun...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

</div>

<!-- ── MODAL TAMBAH / EDIT PENGGUNA ── -->
<div class="modal fade" id="modalUserRole" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content border-0 shadow">
      <div class="modal-header py-2" style="background: linear-gradient(135deg,#1F4E79,#2E75B6); color:#fff;">
        <h6 class="modal-title mb-0" id="modalUserRoleTitle"><i class="bi bi-person-gear me-2"></i>Pengaturan Pengguna</h6>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-3">
        <input type="hidden" id="ur-id">
        <div class="mb-2">
          <label class="form-label small fw-semibold">Username <span class="text-danger">*</span></label>
          <input type="text" id="ur-username" class="form-control form-control-sm font-monospace" placeholder="huruf kecil tanpa spasi">
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Nama Lengkap & Gelar <span class="text-danger">*</span></label>
          <input type="text" id="ur-nama" class="form-control form-control-sm" placeholder="Contoh: Budi Santoso, S.Kom">
        </div>
        <div class="row g-2 mb-2">
          <div class="col-6">
            <label class="form-label small fw-semibold">Peran / Role <span class="text-danger">*</span></label>
            <select id="ur-role" class="form-select form-select-sm" onchange="onModalRoleChange()">
              <option value="super_admin">👑 Super Admin</option>
              <option value="validator">🛡️ Validator</option>
              <option value="admin_dapur" selected>🍳 Admin Dapur</option>
              <option value="viewer">👀 Viewer</option>
            </select>
          </div>
          <div class="col-6" id="wrap-ur-dapur">
            <label class="form-label small fw-semibold">Unit Dapur Terikat</label>
            <select id="ur-dapur" class="form-select form-select-sm">
              <option value="">-- Bebas / Lintas Dapur --</option>
              {% for d in dapur_list %}
              <option value="{{ d.id }}">{{ d.nama }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="mb-2">
          <label class="form-label small fw-semibold">Password <span class="text-danger" id="ur-req-pwd">*</span></label>
          <input type="password" id="ur-password" class="form-control form-control-sm" placeholder="Minimal 4 karakter">
          <div class="form-text small text-muted" id="ur-hint-pwd">Kosongkan jika tidak ingin mengubah password saat edit.</div>
        </div>
        <div class="form-check form-switch mt-3">
          <input class="form-check-input" type="checkbox" id="ur-aktif" checked>
          <label class="form-check-label small fw-semibold" for="ur-aktif">Akun Aktif (Bisa Login ke Aplikasi)</label>
        </div>
      </div>
      <div class="modal-footer py-2 bg-light">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-sm btn-primary" onclick="simpanUserRole()">
          <i class="bi bi-save me-1"></i> Simpan Pengguna
        </button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
// Definisi modul dan fitur yang dapat diatur
const PERMISSION_DEFINITIONS = [
  {
    category: 'AKSES HALAMAN UTAMA',
    items: [
      { key: 'dashboard', label: 'Dashboard & Ringkasan Keuangan', desc: 'Halaman beranda ringkasan transaksi' },
      { key: 'analitik', label: 'Analitik & Business Intelligence', desc: 'Grafik tren, rasio biaya, performa' },
      { key: 'analisa_scm', label: 'SCM Intelijen & Pembagian Dapur', desc: 'Rantai pasok komoditas & vendor' },
      { key: 'pagu_mbg', label: 'Pagu Anggaran & Simulasi RAB', desc: 'Plafon pagu MBG dan realisasi anggaran' },
      { key: 'monitoring_harga', label: 'Harga Pasar Wonogiri & Benchmarking', desc: 'Katalog harga pasar dan deviasi belanja' },
      { key: 'buat_pengajuan', label: 'Form Pengajuan Baru', desc: 'Membuat dokumen belanja bahan baru' },
      { key: 'riwayat', label: 'Riwayat Pengajuan', desc: 'Daftar arsip pengajuan terdahulu' },
      { key: 'pemasok', label: 'Manajemen Rekanan Pemasok', desc: 'Katalog vendor rekanan & nomor rekening' },
      { key: 'validasi_belanja', label: 'Validasi Belanja Bahan', desc: 'Tabel transaksi belanja pemasok' },
      { key: 'operasional', label: 'Pengajuan Operasional Dapur', desc: 'Biaya operasional (LPG, listrik, dll)' },
      { key: 'pengeluaran_wajib', label: 'Pengeluaran Wajib & Opsional (Non-VA)', desc: 'Pencatatan pengeluaran independen: Tagihan, Gaji, Tukang, Pemeliharaan, dll' },
      { key: 'analisa_va', label: 'Analisa Saldo VA & Cash Runway', desc: 'Monitoring kas, burn rate, dan runway kas dapur' },
      { key: 'audit_log', label: 'Audit Trail & Backup Data', desc: 'Riwayat log perubahan & unduh database' },
      { key: 'pengaturan', label: 'Akses Halaman Pengaturan', desc: 'Akses menu Pengaturan secara umum' },
    ]
  },
  {
    category: '⚙️ SUB-FUNGSI PENGATURAN SISTEM (DAPUR, KATEGORI, NOTIFIKASI, RESET)',
    items: [
      { key: 'peng_identitas_dapur', label: 'Pengaturan Identitas & Profil Dapur', desc: 'Mengatur nama dapur, pengelola, alamat, dan biaya admin bank' },
      { key: 'peng_daftar_dapur', label: 'Pengaturan Daftar Dapur / Unit', desc: 'Menambah, mengubah, mengurutkan tab unit dapur multi-cabang' },
      { key: 'peng_kategori', label: 'Pengaturan Kategori Pengajuan', desc: 'Menambah, mengubah, mengurutkan kategori Bahan & Operasional' },
      { key: 'peng_notifikasi', label: 'Pengaturan Notifikasi (WhatsApp & Telegram)', desc: 'Konfigurasi bot token, grup chat ID, provider WA gateway, dan trigger broadcast' },
      { key: 'peng_template_notif', label: 'Pengaturan Template Pesan WA / Telegram', desc: 'Melihat dan mengubah format template balasan pesan notifikasi pengajuan & validasi' },
      { key: 'peng_reset_data', label: 'Pengaturan Reset Data Transaksi & Analisa', desc: 'Mengakses menu dan hak reset data operasional, belanja, dan kas (Zona Bahaya)' },
    ]
  },
  {
    category: 'FUNGSI & HAK TINDAKAN DI DALAM HALAMAN',
    items: [
      { key: 'fitur_validasi', label: 'Hak Menyetujui / Memvalidasi Transaksi', desc: 'Dapat mencentang dan mengesahkan pencairan dana' },
      { key: 'topup_va', label: 'Hak Top-Up Saldo VA Dapur', desc: 'Dapat menambahkan setoran saldo ke rekening Virtual Account Dapur' },
      { key: 'fitur_pengeluaran_wajib_tambah', label: 'Hak Tambah Pengeluaran Wajib', desc: 'Dapat mencatat transaksi pengeluaran wajib atau opsional baru' },
      { key: 'fitur_pengeluaran_wajib_validasi', label: 'Hak Setujui Pengeluaran Wajib', desc: 'Dapat memvalidasi dan menyetujui pengeluaran wajib / opsional' },
      { key: 'fitur_pengeluaran_wajib_kategori', label: 'Hak Kelola Kategori Pengeluaran Wajib', desc: 'Dapat menambah, mengubah, atau mengatur kategori sendiri' },
      { key: 'fitur_pengeluaran_wajib_hapus', label: 'Hak Hapus Pengeluaran Wajib', desc: 'Dapat menghapus data transaksi pengeluaran wajib/opsional' },
      { key: 'fitur_edit', label: 'Hak Mengubah / Mengedit Data', desc: 'Dapat mengedit rincian catatan belanja & operasional' },
      { key: 'fitur_hapus', label: 'Hak Menghapus Data Transaksi', desc: 'Dapat menghapus nota belanja atau operasional' },
      { key: 'fitur_export', label: 'Hak Unduh Laporan (Excel / CSV / PDF)', desc: 'Dapat mengekspor dokumen rekapitulasi' },
      { key: 'fitur_reset_data', label: 'Hak Eksekusi Reset Data Sistem', desc: 'Dapat mengeksekusi penghapusan/reset data belanja, operasional, dan kas' },
    ]
  }
];

let roleMatrix = {};
let usersList = [];
const modalUser = new bootstrap.Modal(document.getElementById('modalUserRole'));

document.addEventListener('DOMContentLoaded', function() {
  loadPermissionsMatrix();
  loadUsers();
});

async function loadPermissionsMatrix() {
  const tbody = document.getElementById('matrixTbody');
  tbody.innerHTML = `<tr><td colspan="5" class="text-center py-4 text-muted"><div class="spinner-border spinner-border-sm text-primary"></div><span class="ms-2">Memuat matriks...</span></td></tr>`;
  try {
    const res = await fetch('/api/role-permissions');
    roleMatrix = await res.json();
    renderMatrixTable();
  } catch(err) {
    tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger py-4">Gagal memuat matriks: ${err.message}</td></tr>`;
  }
}

function renderMatrixTable() {
  const tbody = document.getElementById('matrixTbody');
  let html = '';

  PERMISSION_DEFINITIONS.forEach(section => {
    html += `
      <tr class="perm-module-title">
        <td colspan="5" class="py-2 px-3">
          <i class="bi bi-folder2-open me-2"></i>${section.category}
        </td>
      </tr>
    `;

    section.items.forEach(item => {
      const k = item.key;
      const superVal = (roleMatrix.super_admin && roleMatrix.super_admin[k] !== undefined) ? roleMatrix.super_admin[k] : true;
      const valVal   = (roleMatrix.validator && roleMatrix.validator[k] !== undefined) ? roleMatrix.validator[k] : false;
      const dapurVal = (roleMatrix.admin_dapur && roleMatrix.admin_dapur[k] !== undefined) ? roleMatrix.admin_dapur[k] : false;
      const viewVal  = (roleMatrix.viewer && roleMatrix.viewer[k] !== undefined) ? roleMatrix.viewer[k] : false;

      html += `
        <tr>
          <td>
            <div class="fw-semibold text-dark">${item.label}</div>
            <div class="text-muted" style="font-size:0.75rem;">${item.desc}</div>
          </td>
          <!-- SUPER ADMIN: SELALU AKTIF / TERKUNCI -->
          <td class="text-center">
            <div class="form-check form-switch d-inline-block">
              <input class="form-check-input perm-switch" type="checkbox" checked disabled title="Super Admin memiliki akses mutlak ke semua fitur">
            </div>
          </td>
          <!-- VALIDATOR -->
          <td class="text-center">
            <div class="form-check form-switch d-inline-block">
              <input class="form-check-input perm-switch" type="checkbox" id="perm_val_${k}" ${valVal ? 'checked' : ''} onchange="updateMatrixState('validator', '${k}', this.checked)">
            </div>
          </td>
          <!-- ADMIN DAPUR -->
          <td class="text-center">
            <div class="form-check form-switch d-inline-block">
              <input class="form-check-input perm-switch" type="checkbox" id="perm_dapur_${k}" ${dapurVal ? 'checked' : ''} onchange="updateMatrixState('admin_dapur', '${k}', this.checked)">
            </div>
          </td>
          <!-- VIEWER -->
          <td class="text-center">
            <div class="form-check form-switch d-inline-block">
              <input class="form-check-input perm-switch" type="checkbox" id="perm_view_${k}" ${viewVal ? 'checked' : ''} onchange="updateMatrixState('viewer', '${k}', this.checked)">
            </div>
          </td>
        </tr>
      `;
    });
  });

  tbody.innerHTML = html;
}

function updateMatrixState(role, key, isChecked) {
  if (!roleMatrix[role]) roleMatrix[role] = {};
  roleMatrix[role][key] = isChecked;
}

async function simpanMatriksPermissions() {
  try {
    const res = await fetch('/api/role-permissions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(roleMatrix)
    });
    const result = await res.json();
    if (res.ok && result.success) {
      Swal.fire({
        icon: 'success',
        title: 'Pengaturan Disimpan!',
        text: 'Hak akses peran dan kontrol fungsi halaman berhasil diperbarui.',
        timer: 1500,
        showConfirmButton: false
      });
    } else {
      Swal.fire({ icon: 'error', title: 'Gagal Menyimpan', text: result.error || 'Terjadi kesalahan' });
    }
  } catch(err) {
    Swal.fire({ icon: 'error', title: 'Error Jaringan', text: err.message });
  }
}

async function resetDefaultPermissions() {
  const confirm = await Swal.fire({
    title: 'Kembalikan ke Default?',
    text: 'Seluruh sakelar hak akses akan dikembalikan ke konfigurasi standar sistem.',
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: 'Ya, Kembalikan',
    cancelButtonText: 'Batal'
  });
  if (!confirm.isConfirmed) return;

  const defaultMatrix = {
    super_admin: {
      dashboard: true, analitik: true, analisa_scm: true, pagu_mbg: true, monitoring_harga: true,
      buat_pengajuan: true, riwayat: true, pemasok: true, validasi_belanja: true, operasional: true, pengeluaran_wajib: true,
      audit_log: true, pengaturan: true, peng_identitas_dapur: true, peng_kategori: true, peng_notifikasi: true,
      peng_template_notif: true, peng_reset_data: true, topup_va: true,
      fitur_pengeluaran_wajib_tambah: true, fitur_pengeluaran_wajib_validasi: true, fitur_pengeluaran_wajib_kategori: true, fitur_pengeluaran_wajib_hapus: true,
      fitur_validasi: true, fitur_hapus: true, fitur_edit: true, fitur_export: true, fitur_reset_data: true
    },
    validator: {
      dashboard: true, analitik: true, analisa_scm: true, pagu_mbg: true, monitoring_harga: true,
      buat_pengajuan: true, riwayat: true, pemasok: true, validasi_belanja: true, operasional: true, pengeluaran_wajib: true,
      audit_log: true, pengaturan: false, peng_identitas_dapur: false, peng_kategori: false, peng_notifikasi: false,
      peng_template_notif: false, peng_reset_data: false, topup_va: true,
      fitur_pengeluaran_wajib_tambah: true, fitur_pengeluaran_wajib_validasi: true, fitur_pengeluaran_wajib_kategori: true, fitur_pengeluaran_wajib_hapus: false,
      fitur_validasi: true, fitur_hapus: false, fitur_edit: true, fitur_export: true, fitur_reset_data: false
    },
    admin_dapur: {
      dashboard: true, analitik: false, analisa_scm: false, pagu_mbg: true, monitoring_harga: true,
      buat_pengajuan: true, riwayat: true, pemasok: true, validasi_belanja: true, operasional: true, pengeluaran_wajib: true,
      audit_log: false, pengaturan: false, peng_identitas_dapur: false, peng_kategori: false, peng_notifikasi: false,
      peng_template_notif: false, peng_reset_data: false, topup_va: false,
      fitur_pengeluaran_wajib_tambah: true, fitur_pengeluaran_wajib_validasi: false, fitur_pengeluaran_wajib_kategori: false, fitur_pengeluaran_wajib_hapus: false,
      fitur_validasi: false, fitur_hapus: false, fitur_edit: true, fitur_export: true, fitur_reset_data: false
    },
    viewer: {
      dashboard: true, analitik: true, analisa_scm: false, pagu_mbg: true, monitoring_harga: true,
      buat_pengajuan: false, riwayat: true, pemasok: true, validasi_belanja: true, operasional: true, pengeluaran_wajib: true,
      audit_log: false, pengaturan: false, peng_identitas_dapur: false, peng_kategori: false, peng_notifikasi: false,
      peng_template_notif: false, peng_reset_data: false, topup_va: false,
      fitur_pengeluaran_wajib_tambah: false, fitur_pengeluaran_wajib_validasi: false, fitur_pengeluaran_wajib_kategori: false, fitur_pengeluaran_wajib_hapus: false,
      fitur_validasi: false, fitur_hapus: false, fitur_edit: false, fitur_export: true, fitur_reset_data: false
    }
  };

  roleMatrix = defaultMatrix;
  renderMatrixTable();
  await simpanMatriksPermissions();
}

// ── MANAJEMEN USER & ROLE ──
async function loadUsers() {
  const tbody = document.getElementById('usersTbody');
  try {
    const res = await fetch('/api/users');
    usersList = await res.json();

    // Hitung ringkasan per role
    let cSuper = 0, cVal = 0, cDapur = 0, cView = 0;
    usersList.forEach(u => {
      if (u.role === 'super_admin') cSuper++;
      else if (u.role === 'validator') cVal++;
      else if (u.role === 'admin_dapur') cDapur++;
      else if (u.role === 'viewer') cView++;
    });
    document.getElementById('count-super-admin').textContent = `${cSuper} user`;
    document.getElementById('count-validator').textContent   = `${cVal} user`;
    document.getElementById('count-admin-dapur').textContent = `${cDapur} user`;
    document.getElementById('count-viewer').textContent      = `${cView} user`;

    if (!usersList.length) {
      tbody.innerHTML = `<tr><td colspan="6" class="text-center py-4 text-muted">Belum ada pengguna terdaftar.</td></tr>`;
      return;
    }

    tbody.innerHTML = usersList.map(u => {
      let roleBadge = '<span class="badge bg-secondary">Viewer</span>';
      if (u.role === 'super_admin') roleBadge = '<span class="badge role-badge-super">👑 Super Admin</span>';
      else if (u.role === 'validator') roleBadge = '<span class="badge role-badge-val">🛡️ Validator</span>';
      else if (u.role === 'admin_dapur') roleBadge = '<span class="badge role-badge-dapur">🍳 Admin Dapur</span>';

      const statusBadge = u.aktif
        ? '<span class="badge bg-success bg-opacity-10 text-success border border-success">Aktif</span>'
        : '<span class="badge bg-danger bg-opacity-10 text-danger border border-danger">Nonaktif</span>';

      const dapurBadge = u.dapur_nama
        ? `<span class="badge bg-light text-primary border"><i class="bi bi-buildings me-1"></i>${u.dapur_nama}</span>`
        : '<span class="text-muted small">Lintas Dapur (Pusat)</span>';

      return `
        <tr>
          <td><strong class="font-monospace text-dark">@${u.username}</strong></td>
          <td><span class="fw-semibold text-dark">${u.nama_lengkap}</span></td>
          <td>${roleBadge}</td>
          <td>${dapurBadge}</td>
          <td class="text-center">${statusBadge}</td>
          <td class="text-end">
            <button class="btn btn-sm btn-outline-primary py-0 px-2" onclick="editUserRole(${u.id})" title="Ubah Akun / Peran"><i class="bi bi-pencil"></i></button>
            <button class="btn btn-sm btn-outline-danger py-0 px-2" onclick="hapusUserRole(${u.id})" title="Hapus"><i class="bi bi-trash"></i></button>
          </td>
        </tr>
      `;
    }).join('');

  } catch(err) {
    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-danger py-4">Gagal memuat pengguna: ${err.message}</td></tr>`;
  }
}

function onModalRoleChange() {
  const role = document.getElementById('ur-role').value;
  const wrapDapur = document.getElementById('wrap-ur-dapur');
  if (role === 'admin_dapur') {
    wrapDapur.style.display = 'block';
  } else {
    wrapDapur.style.display = 'none';
    document.getElementById('ur-dapur').value = '';
  }
}

function bukaModalUser() {
  document.getElementById('modalUserRoleTitle').innerHTML = '<i class="bi bi-person-plus me-2"></i>Tambah Pengguna Baru';
  document.getElementById('ur-id').value = '';
  document.getElementById('ur-username').value = '';
  document.getElementById('ur-username').disabled = false;
  document.getElementById('ur-nama').value = '';
  document.getElementById('ur-role').value = 'admin_dapur';
  document.getElementById('ur-dapur').value = '';
  document.getElementById('ur-password').value = '';
  document.getElementById('ur-req-pwd').style.display = 'inline';
  document.getElementById('ur-hint-pwd').style.display = 'none';
  document.getElementById('ur-aktif').checked = true;
  onModalRoleChange();
  modalUser.show();
}

function editUserRole(uid) {
  const u = usersList.find(x => x.id === uid);
  if (!u) return;

  document.getElementById('modalUserRoleTitle').innerHTML = '<i class="bi bi-person-gear me-2"></i>Ubah Akun Pengguna';
  document.getElementById('ur-id').value = u.id;
  document.getElementById('ur-username').value = u.username;
  document.getElementById('ur-username').disabled = true;
  document.getElementById('ur-nama').value = u.nama_lengkap;
  document.getElementById('ur-role').value = u.role;
  document.getElementById('ur-dapur').value = u.dapur_id || '';
  document.getElementById('ur-password').value = '';
  document.getElementById('ur-req-pwd').style.display = 'none';
  document.getElementById('ur-hint-pwd').style.display = 'block';
  document.getElementById('ur-aktif').checked = u.aktif;
  onModalRoleChange();
  modalUser.show();
}

async function simpanUserRole() {
  const uid      = document.getElementById('ur-id').value;
  const username = document.getElementById('ur-username').value.trim().toLowerCase();
  const nama     = document.getElementById('ur-nama').value.trim();
  const role     = document.getElementById('ur-role').value;
  const dapurId  = document.getElementById('ur-dapur').value;
  const password = document.getElementById('ur-password').value.trim();
  const aktif    = document.getElementById('ur-aktif').checked;

  if (!username || !nama) {
    Swal.fire({ icon: 'warning', title: 'Data Belum Lengkap', text: 'Username dan Nama Lengkap wajib diisi.' });
    return;
  }
  if (!uid && !password) {
    Swal.fire({ icon: 'warning', title: 'Password Wajib', text: 'Password wajib diisi untuk pengguna baru.' });
    return;
  }

  const payload = {
    username: username,
    nama_lengkap: nama,
    role: role,
    dapur_id: (role === 'admin_dapur' && dapurId) ? parseInt(dapurId) : null,
    aktif: aktif
  };
  if (password) payload.password = password;

  try {
    const url = uid ? `/api/users/${uid}` : '/api/users';
    const method = uid ? 'PUT' : 'POST';
    const res = await fetch(url, {
      method: method,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    const result = await res.json();
    if (res.ok) {
      modalUser.hide();
      loadUsers();
      Swal.fire({ icon: 'success', title: 'Berhasil!', timer: 1200, showConfirmButton: false });
    } else {
      Swal.fire({ icon: 'error', title: 'Gagal Menyimpan', text: result.error || 'Terjadi kesalahan' });
    }
  } catch(err) {
    Swal.fire({ icon: 'error', title: 'Error', text: err.message });
  }
}

async function hapusUserRole(uid) {
  const confirm = await Swal.fire({
    title: 'Hapus pengguna ini?',
    text: 'Pengguna yang dihapus tidak akan dapat masuk kembali ke sistem.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#dc3545',
    confirmButtonText: 'Ya, Hapus',
    cancelButtonText: 'Batal'
  });
  if (!confirm.isConfirmed) return;

  try {
    const res = await fetch(`/api/users/${uid}`, { method: 'DELETE' });
    const result = await res.json();
    if (res.ok && result.ok) {
      loadUsers();
      Swal.fire({ icon: 'success', title: 'Pengguna Dihapus', timer: 1200, showConfirmButton: false });
    } else {
      Swal.fire({ icon: 'error', title: 'Gagal', text: result.error || 'Terjadi kesalahan' });
    }
  } catch(err) {
    Swal.fire({ icon: 'error', title: 'Error', text: err.message });
  }
}
</script>
{% endblock %}