{% extends 'base.html' %}
{% block title %}Audit Trail, Versioning & Backup Otomatis — SPPG Dapur MBG{% endblock %}
{% block page_title %}🛡️ Audit Trail Lengkap, Versioning Data & Backup Otomatis{% endblock %}

{% block content %}
<div class="container-fluid px-3 py-2">
  <!-- HEADER & TOP ACTIONS -->
  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
    <div>
      <h4 class="fw-bold mb-1 text-primary d-flex align-items-center gap-2">
        <i class="bi bi-shield-shaded text-danger"></i> Audit Trail & Versioning Data
      </h4>
      <p class="text-muted small mb-0">
        Pencatatan rekam jejak aktivitas, snapshot perubahan nilai (sebelum vs sesudah), fitur pemulihan (Undo), dan manajemen cadangan database.
      </p>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <button class="btn btn-outline-primary btn-sm d-flex align-items-center gap-1 shadow-sm" id="btnAutoBackup" title="Buat cadangan database snapshot di server">
        <i class="bi bi-clock-history"></i> Snapshot Backup Lokal
      </button>
      <a href="/api/system/backup-db" class="btn btn-success btn-sm d-flex align-items-center gap-1 shadow-sm text-white" title="Unduh berkas .db SQLite sekarang">
        <i class="bi bi-download"></i> Unduh Database (.db)
      </a>
      <button class="btn btn-secondary btn-sm d-flex align-items-center gap-1 shadow-sm" id="btnRefreshLogs">
        <i class="bi bi-arrow-clockwise"></i> Refresh Log
      </button>
    </div>
  </div>

  <!-- STATS OVERVIEW CARDS -->
  <div class="row g-2 mb-3">
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm rounded-3 p-3 bg-white border-start border-4 border-primary">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">TOTAL AKTIVITAS</div>
            <div class="h4 fw-bold text-dark mb-0 mt-1" id="statTotalLogs">0</div>
          </div>
          <div class="p-2 bg-primary bg-opacity-10 text-primary rounded-circle">
            <i class="bi bi-journal-text fs-4"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm rounded-3 p-3 bg-white border-start border-4 border-success">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">ENTRI BARU (CREATE)</div>
            <div class="h4 fw-bold text-success mb-0 mt-1" id="statCreateLogs">0</div>
          </div>
          <div class="p-2 bg-success bg-opacity-10 text-success rounded-circle">
            <i class="bi bi-plus-circle fs-4"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm rounded-3 p-3 bg-white border-start border-4 border-warning">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">PERUBAHAN (UPDATE)</div>
            <div class="h4 fw-bold text-warning mb-0 mt-1" id="statUpdateLogs">0</div>
          </div>
          <div class="p-2 bg-warning bg-opacity-10 text-warning rounded-circle">
            <i class="bi bi-pencil-square fs-4"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm rounded-3 p-3 bg-white border-start border-4 border-danger">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small fw-semibold">PENGHAPUSAN (DELETE)</div>
            <div class="h4 fw-bold text-danger mb-0 mt-1" id="statDeleteLogs">0</div>
          </div>
          <div class="p-2 bg-danger bg-opacity-10 text-danger rounded-circle">
            <i class="bi bi-trash fs-4"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- FILTER & SEARCH PANEL -->
  <div class="card border-0 shadow-sm rounded-3 mb-3">
    <div class="card-body p-3">
      <div class="row g-2 align-items-center">
        <div class="col-12 col-md-3">
          <label class="form-label small text-muted mb-1">Dari Tanggal</label>
          <input type="date" class="form-control form-control-sm" id="filterTglDari">
        </div>
        <div class="col-12 col-md-3">
          <label class="form-label small text-muted mb-1">Sampai Tanggal</label>
          <input type="date" class="form-control form-control-sm" id="filterTglSampai">
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small text-muted mb-1">Modul</label>
          <select class="form-select form-select-sm" id="filterModul">
            <option value="">Semua Modul</option>
            <option value="BELANJA">Belanja Bahan</option>
            <option value="OPERASIONAL">Operasional</option>
            <option value="PAGU_MBG">Pagu & RAB</option>
            <option value="SYSTEM">System & Backup</option>
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small text-muted mb-1">Aksi</label>
          <select class="form-select form-select-sm" id="filterAksi">
            <option value="">Semua Aksi</option>
            <option value="CREATE">CREATE (Tambah)</option>
            <option value="UPDATE">UPDATE (Edit)</option>
            <option value="DELETE">DELETE (Hapus)</option>
            <option value="VALIDATE">VALIDATE (Validasi)</option>
            <option value="RESTORE">RESTORE (Pemulihan)</option>
            <option value="BACKUP">BACKUP (Cadangan)</option>
          </select>
        </div>
        <div class="col-12 col-md-2 d-flex align-items-end gap-1">
          <button class="btn btn-primary btn-sm w-100" id="btnFilterSubmit">
            <i class="bi bi-filter"></i> Saring
          </button>
          <button class="btn btn-light border btn-sm" id="btnFilterReset" title="Reset Filter">
            <i class="bi bi-arrow-counterclockwise"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- TAB NAVIGATION: RIWAYAT AUDIT VS ARSIP BACKUP -->
  <ul class="nav nav-pills mb-3 border-bottom pb-2" id="auditTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active px-3 py-1 btn-sm d-flex align-items-center gap-1" id="tab-audit-link" data-bs-toggle="pill" data-bs-target="#tabAuditLogs" type="button" role="tab">
        <i class="bi bi-list-check"></i> Riwayat Audit & Versioning
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link px-3 py-1 btn-sm d-flex align-items-center gap-1" id="tab-backups-link" data-bs-toggle="pill" data-bs-target="#tabBackupsList" type="button" role="tab">
        <i class="bi bi-hdd-network"></i> Berkas Cadangan Lokal (Snapshot DB)
      </button>
    </li>
  </ul>

  <!-- TAB CONTENT -->
  <div class="tab-content" id="auditTabsContent">
    <!-- TAB 1: AUDIT LOGS -->
    <div class="tab-pane fade show active" id="tabAuditLogs" role="tabpanel">
      <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white border-0 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-clock-history text-primary"></i> Daftar Log Perubahan Terakhir
          </h6>
          <span class="badge bg-light text-secondary border" id="labelLogCount">Memuat...</span>
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0" id="tableAuditLogs">
            <thead class="table-light text-muted small">
              <tr>
                <th style="width: 140px;">WAKTU</th>
                <th style="width: 170px;">PENGGUNA</th>
                <th style="width: 120px;">AKSI</th>
                <th style="width: 120px;">MODUL</th>
                <th>DESKRIPSI AKTIVITAS</th>
                <th style="width: 110px;">IP ADDRESS</th>
                <th class="text-center" style="width: 130px;">AKSI / DIFF</th>
              </tr>
            </thead>
            <tbody id="auditLogsBody">
              <tr>
                <td colspan="7" class="text-center py-4 text-muted">
                  <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                  <span class="ms-2">Memuat rekaman log audit...</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- TAB 2: LOCAL BACKUPS -->
    <div class="tab-pane fade" id="tabBackupsList" role="tabpanel">
      <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white border-0 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-hdd-stack text-success"></i> Berkas Cadangan Tersimpan di Server (Folder /backups)
          </h6>
          <button class="btn btn-sm btn-outline-secondary" id="btnRefreshBackups">
            <i class="bi bi-arrow-clockwise"></i> Perbarui Daftar
          </button>
        </div>
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light text-muted small">
              <tr>
                <th>NAMA FILE CADANGAN</th>
                <th>UKURAN FILE</th>
                <th>WAKTU PEMBUATAN</th>
                <th class="text-center" style="width: 120px;">STATUS</th>
              </tr>
            </thead>
            <tbody id="backupsListBody">
              <tr>
                <td colspan="4" class="text-center py-4 text-muted">Belum ada berkas backup yang dimuat.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- MODAL DIFF / VERSIONING VIEWER -->
<div class="modal fade" id="modalDiffViewer" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header bg-light py-2">
        <h6 class="modal-title fw-bold text-dark d-flex align-items-center gap-2">
          <i class="bi bi-file-diff text-primary"></i> Snapshot Perubahan Data (Versioning)
        </h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-3">
        <div class="p-2 mb-3 bg-light rounded border small" id="diffMetaInfo">
          <!-- Metadata log inserted by JS -->
        </div>
        <div class="row g-2">
          <div class="col-md-6">
            <div class="card border-danger h-100">
              <div class="card-header bg-danger bg-opacity-10 text-danger fw-bold py-1 small d-flex justify-content-between align-items-center">
                <span><i class="bi bi-file-earmark-minus"></i> Data Sebelum (Lama)</span>
                <span class="badge bg-danger">Nilai Lama</span>
              </div>
              <div class="card-body p-2" style="background:#fcfcfc;">
                <pre class="mb-0 small" id="jsonOldData" style="max-height: 280px; overflow-y:auto; font-size: 0.75rem; white-space: pre-wrap; word-break: break-all;"></pre>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-success h-100">
              <div class="card-header bg-success bg-opacity-10 text-success fw-bold py-1 small d-flex justify-content-between align-items-center">
                <span><i class="bi bi-file-earmark-plus"></i> Data Sesudah (Baru)</span>
                <span class="badge bg-success">Nilai Baru</span>
              </div>
              <div class="card-body p-2" style="background:#fcfcfc;">
                <pre class="mb-0 small" id="jsonNewData" style="max-height: 280px; overflow-y:auto; font-size: 0.75rem; white-space: pre-wrap; word-break: break-all;"></pre>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer py-2 bg-light">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<script>
let currentAuditLogs = [];

document.addEventListener('DOMContentLoaded', function() {
  loadAuditLogs();

  document.getElementById('btnRefreshLogs').addEventListener('click', loadAuditLogs);
  document.getElementById('btnFilterSubmit').addEventListener('click', loadAuditLogs);
  document.getElementById('btnFilterReset').addEventListener('click', function() {
    document.getElementById('filterTglDari').value = '';
    document.getElementById('filterTglSampai').value = '';
    document.getElementById('filterModul').value = '';
    document.getElementById('filterAksi').value = '';
    loadAuditLogs();
  });

  document.getElementById('btnAutoBackup').addEventListener('click', handleAutoBackup);
  document.getElementById('tab-backups-link').addEventListener('shown.bs.tab', loadLocalBackups);
  document.getElementById('btnRefreshBackups').addEventListener('click', loadLocalBackups);
});

async function loadAuditLogs() {
  const tbody = document.getElementById('auditLogsBody');
  tbody.innerHTML = `<tr><td colspan="7" class="text-center py-4 text-muted"><div class="spinner-border spinner-border-sm text-primary"></div><span class="ms-2">Memuat data...</span></td></tr>`;

  const tglDari = document.getElementById('filterTglDari').value;
  const tglSampai = document.getElementById('filterTglSampai').value;
  const modul = document.getElementById('filterModul').value;
  const aksi = document.getElementById('filterAksi').value;

  const params = new URLSearchParams();
  if (tglDari) params.append('tgl_dari', tglDari);
  if (tglSampai) params.append('tgl_sampai', tglSampai);
  if (modul) params.append('modul', modul);
  if (aksi) params.append('aksi', aksi);

  try {
    const res = await fetch(`/api/audit-logs?${params.toString()}`);
    const data = await res.json();
    currentAuditLogs = data.logs || [];

    // Update Stats Cards
    if (data.stats) {
      document.getElementById('statTotalLogs').textContent = (data.stats.total || 0).toLocaleString();
      document.getElementById('statCreateLogs').textContent = (data.stats.create || 0).toLocaleString();
      document.getElementById('statUpdateLogs').textContent = (data.stats.update || 0).toLocaleString();
      document.getElementById('statDeleteLogs').textContent = (data.stats.delete || 0).toLocaleString();
    }
    document.getElementById('labelLogCount').textContent = `${currentAuditLogs.length} riwayat dimuat`;

    if (currentAuditLogs.length === 0) {
      tbody.innerHTML = `<tr><td colspan="7" class="text-center py-4 text-muted"><i class="bi bi-info-circle me-1"></i> Tidak ada catatan log yang sesuai kriteria saringan.</td></tr>`;
      return;
    }

    let rowsHtml = '';
    currentAuditLogs.forEach(log => {
      // Badge Aksi
      let badgeAksi = '<span class="badge bg-secondary">LOG</span>';
      if (log.aksi === 'CREATE') badgeAksi = '<span class="badge bg-success"><i class="bi bi-plus-circle me-1"></i>CREATE</span>';
      else if (log.aksi === 'UPDATE') badgeAksi = '<span class="badge bg-warning text-dark"><i class="bi bi-pencil-square me-1"></i>UPDATE</span>';
      else if (log.aksi === 'DELETE') badgeAksi = '<span class="badge bg-danger"><i class="bi bi-trash me-1"></i>DELETE</span>';
      else if (log.aksi === 'VALIDATE') badgeAksi = '<span class="badge bg-info text-dark"><i class="bi bi-check-all me-1"></i>VALIDASI</span>';
      else if (log.aksi === 'UNVALIDATE') badgeAksi = '<span class="badge bg-secondary"><i class="bi bi-x-circle me-1"></i>BATAL VAL</span>';
      else if (log.aksi === 'RESTORE') badgeAksi = '<span class="badge bg-primary"><i class="bi bi-arrow-counterclockwise me-1"></i>RESTORE</span>';
      else if (log.aksi === 'BACKUP') badgeAksi = '<span class="badge bg-dark"><i class="bi bi-database me-1"></i>BACKUP</span>';

      // Badge Modul
      let badgeModul = `<span class="badge bg-light text-dark border">${log.modul}</span>`;

      // Buttons Diff & Restore
      const hasDiff = log.data_lama || log.data_baru;
      const btnDiff = hasDiff ? `<button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="showDiffModal(${log.id})" title="Lihat Snapshot Data Sebelum/Sesudah"><i class="bi bi-file-diff"></i> Diff</button>` : '';

      let btnRestore = '';
      if (log.can_restore) {
        if (log.is_restored) {
          btnRestore = `<span class="badge bg-secondary" title="Data sudah pernah dipulihkan"><i class="bi bi-check2"></i> Dipulihkan</span>`;
        } else {
          btnRestore = `<button class="btn btn-sm btn-outline-danger py-0 px-2 fw-semibold" onclick="restoreDeletedRecord(${log.id})" title="Pulihkan (Undo) entri ini kembali ke database"><i class="bi bi-arrow-counterclockwise"></i> Pulihkan</button>`;
        }
      }

      rowsHtml += `
        <tr>
          <td class="small text-nowrap"><i class="bi bi-clock me-1 text-muted"></i>${log.waktu}</td>
          <td>
            <div class="fw-semibold small text-dark">${log.nama_lengkap || log.username}</div>
            <div class="text-muted" style="font-size:0.7rem;">@${log.username} (${log.role || 'user'})</div>
          </td>
          <td>${badgeAksi}</td>
          <td>${badgeModul}</td>
          <td>
            <div class="small fw-semibold text-dark">${log.deskripsi || '-'}</div>
            ${log.dapur_nama ? `<span class="text-muted" style="font-size:0.7rem;"><i class="bi bi-geo-alt"></i> ${log.dapur_nama}</span>` : ''}
          </td>
          <td class="small text-muted font-monospace">${log.ip_address || '-'}</td>
          <td class="text-center">
            <div class="d-flex justify-content-center align-items-center gap-1">
              ${btnDiff}
              ${btnRestore}
            </div>
          </td>
        </tr>
      `;
    });

    tbody.innerHTML = rowsHtml;
  } catch (err) {
    console.error(err);
    tbody.innerHTML = `<tr><td colspan="7" class="text-center py-4 text-danger"><i class="bi bi-exclamation-triangle me-1"></i> Gagal memuat log audit: ${err.message}</td></tr>`;
  }
}

function showDiffModal(logId) {
  const log = currentAuditLogs.find(l => l.id === logId);
  if (!log) return;

  document.getElementById('diffMetaInfo').innerHTML = `
    <strong>${log.aksi} ${log.modul}</strong> — Ref ID: #${log.ref_id || '-'} &bull; 
    Pengguna: <strong>${log.nama_lengkap} (@${log.username})</strong> &bull; Waktu: ${log.waktu}
    <div class="text-muted mt-1">${log.deskripsi}</div>
  `;

  document.getElementById('jsonOldData').textContent = log.data_lama ? JSON.stringify(log.data_lama, null, 2) : '(Tidak ada rekaman data lama)';
  document.getElementById('jsonNewData').textContent = log.data_baru ? JSON.stringify(log.data_baru, null, 2) : '(Tidak ada rekaman data baru)';

  const modal = new bootstrap.Modal(document.getElementById('modalDiffViewer'));
  modal.show();
}

async function restoreDeletedRecord(logId) {
  if (!confirm('Apakah Anda yakin ingin memulihkan (Undo) data yang telah dihapus ini kembali ke sistem?')) return;

  try {
    const res = await fetch(`/api/audit-logs/restore/${logId}`, { method: 'POST' });
    const result = await res.json();
    if (res.ok && result.success) {
      alert(result.message || 'Data berhasil dipulihkan!');
      loadAuditLogs();
    } else {
      alert(`Gagal memulihkan data: ${result.error || 'Terjadi kesalahan sistem.'}`);
    }
  } catch (err) {
    alert(`Terjadi error jaringan: ${err.message}`);
  }
}

async function handleAutoBackup() {
  const btn = document.getElementById('btnAutoBackup');
  const originalHtml = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = `<span class="spinner-border spinner-border-sm me-1" role="status"></span> Menyimpan Snapshot...`;

  try {
    const res = await fetch('/api/system/auto-backup', { method: 'POST' });
    const result = await res.json();
    if (res.ok && result.success) {
      alert(`✅ Berhasil! Cadangan lokal dibuat:\nFile: ${result.filename}\nUkuran: ${result.size_kb} KB\nWaktu: ${result.timestamp}`);
      loadAuditLogs();
      loadLocalBackups();
    } else {
      alert(`Gagal membuat cadangan: ${result.error || 'Terjadi kesalahan'}`);
    }
  } catch (err) {
    alert(`Error: ${err.message}`);
  } finally {
    btn.disabled = false;
    btn.innerHTML = originalHtml;
  }
}

async function loadLocalBackups() {
  const tbody = document.getElementById('backupsListBody');
  tbody.innerHTML = `<tr><td colspan="4" class="text-center py-3 text-muted"><div class="spinner-border spinner-border-sm text-success"></div><span class="ms-2">Memeriksa berkas di server...</span></td></tr>`;

  try {
    const res = await fetch('/api/system/backups-list');
    const data = await res.json();
    const files = data.backups || [];

    if (files.length === 0) {
      tbody.innerHTML = `<tr><td colspan="4" class="text-center py-3 text-muted">Belum ada file cadangan snapshot lokal di folder /backups. Klik "Snapshot Backup Lokal" untuk membuat cadangan pertama.</td></tr>`;
      return;
    }

    let html = '';
    files.forEach(f => {
      html += `
        <tr>
          <td><i class="bi bi-database me-2 text-primary"></i><span class="fw-semibold font-monospace">${f.filename}</span></td>
          <td><span class="badge bg-light text-dark border">${f.size_kb} KB</span></td>
          <td class="small text-muted"><i class="bi bi-clock me-1"></i>${f.created_at}</td>
          <td class="text-center"><span class="badge bg-success bg-opacity-25 text-success">Tersimpan</span></td>
        </tr>
      `;
    });
    tbody.innerHTML = html;
  } catch (err) {
    tbody.innerHTML = `<tr><td colspan="4" class="text-center py-3 text-danger">Gagal memuat berkas backup: ${err.message}</td></tr>`;
  }
}
</script>
{% endblock %}