{% extends "base.html" %}
{% block content %}

{# ── Extra styles scoped to this page (modals only) ── #}
<style>
/* page-specific modal styles — backup layout lives in style.css */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeInOverlay 0.18s ease;
}
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 18px;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  animation: slideUpModal 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
[data-theme="light"] .modal-box {
  background: #fff;
  border-color: #dde1ed;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}
@keyframes slideUpModal {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  z-index: 2;
}
[data-theme="light"] .modal-header { background: #fff; border-color: #dde1ed; }

.modal-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.modal-close {
  background: var(--surface2);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text3);
  font-size: 14px;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.25); }

.modal-body { padding: 20px 24px 24px; }

/* ── AUDIT STATUS BANNER ─────────────────────────────────────── */
.audit-status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.audit-status-banner.healthy  { background: rgba(34,197,94,0.08);  border-color: rgba(34,197,94,0.2); }
.audit-status-banner.warning  { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); }
.audit-status-banner.critical { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.2); }

.audit-status-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.audit-status-banner.healthy  .audit-status-icon { background: rgba(34,197,94,0.15);  color: var(--green); }
.audit-status-banner.warning  .audit-status-icon { background: rgba(245,158,11,0.15); color: var(--yellow); }
.audit-status-banner.critical .audit-status-icon { background: rgba(239,68,68,0.15);  color: var(--red); }

.audit-status-info { flex: 1; min-width: 0; }
.audit-status-label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.audit-status-banner.healthy  .audit-status-label { color: var(--green); }
.audit-status-banner.warning  .audit-status-label { color: var(--yellow); }
.audit-status-banner.critical .audit-status-label { color: var(--red); }

.audit-status-file {
  font-family: var(--mono); font-size: 11px; color: var(--text3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audit-status-size {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text2);
}

/* ── SCORE BAR ─────────────────────────────────────────────── */
.audit-score-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.audit-score-bar-wrap {
  flex: 1; height: 6px; background: var(--border2); border-radius: 10px; overflow: hidden;
}
.audit-score-bar-fill {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1);
}
.audit-score-bar-fill.warn { background: linear-gradient(90deg, var(--yellow), #f97316); }
.audit-score-bar-fill.crit { background: linear-gradient(90deg, var(--red), #f97316); }
.audit-score-num {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  min-width: 36px; text-align: right;
}

/* ── AUDIT CHECKS LIST ───────────────────────────────────────── */
.audit-checks-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--text3);
  text-transform: uppercase; margin-bottom: 8px;
}
.audit-check-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  transition: background 0.12s;
}
.audit-check-item:hover { background: var(--bg4); }
.audit-check-icon {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0; margin-top: 1px;
}
.audit-check-icon.pass { background: rgba(34,197,94,0.15);  color: var(--green); }
.audit-check-icon.warn { background: rgba(245,158,11,0.15); color: var(--yellow); }
.audit-check-icon.fail { background: rgba(239,68,68,0.15);  color: var(--red); }

.audit-check-body { flex: 1; min-width: 0; }
.audit-check-name { font-size: 12px; font-weight: 600; color: var(--text); }
.audit-check-detail { font-size: 11px; color: var(--text3); font-family: var(--mono); margin-top: 2px; word-break: break-word; }

.audit-sha {
  margin-top: 14px; padding: 10px 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--mono); font-size: 11px;
  color: var(--text3); word-break: break-all;
}
.audit-sha span { color: var(--cyan); }

/* ── AUDIT summary ─────────────────────────────────────────── */
.audit-summary-box {
  margin-top: 14px; padding: 12px 14px;
  background: var(--surface2); border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 12px; color: var(--text2); line-height: 1.6;
}

/* ── DETAILS MODAL specific ──────────────────────────────────── */
.details-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.details-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.details-card-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--text3); text-transform: uppercase; margin-bottom: 5px;
}
.details-card-value {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text);
  word-break: break-all; line-height: 1.4;
}
.details-card-value.accent { color: var(--accent2); }
.details-card-value.green  { color: var(--green); }
.details-card-value.yellow { color: var(--yellow); }

.details-path-row {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.details-path-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--text3); text-transform: uppercase; margin-bottom: 4px;
}
.details-path-value {
  font-family: var(--mono); font-size: 12px; color: var(--cyan); word-break: break-all;
}
.details-sha-row {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.details-badge-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.details-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font-family: var(--mono);
  font-size: 11px; font-weight: 600;
}
.details-badge.ok     { background: rgba(34,197,94,0.1);  color: var(--green);  border: 1px solid rgba(34,197,94,0.2); }
.details-badge.warn   { background: rgba(245,158,11,0.1); color: var(--yellow); border: 1px solid rgba(245,158,11,0.2); }
.details-badge.info   { background: rgba(96,165,250,0.1); color: var(--accent2);border: 1px solid rgba(96,165,250,0.2); }

/* ── CLOUD AUDIT specifics ───────────────────────────────────── */
.r2-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px; color: var(--text2);
}
.r2-check-icon { font-size: 14px; flex-shrink: 0; }

/* ── R2 toast ─────────────────────────────────────────────── */
#r2-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 12px; font-family: var(--mono); color: var(--text2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  min-width: 290px;
  animation: slideUpModal 0.2s ease;
}
</style>

{# ── Manual Backup ── #}
<div class="card">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-shield-halved"></i> Manual Backup</div>
  </div>
  <div style="padding:4px 0 12px;">
    <p style="color:var(--text2);font-size:13px;margin-bottom:14px;">Manually trigger a backup of all containers</p>
    <button class="btn btn-primary" onclick="runManualBackup()" id="manual-backup-btn">
      <i class="fas fa-play"></i> Run Backup Now
    </button>
  </div>
  <div id="manual-backup-wrapper" style="display:none; margin-top:16px;">
    <div class="card-header" style="margin-bottom:8px;">
      <div class="card-title" style="font-size:13px;"><i class="fas fa-terminal"></i> Backup Log</div>
      <span class="badge" id="manual-backup-badge" style="background:rgba(59,130,246,0.15);color:var(--accent2);">Running…</span>
    </div>
    <div id="manual-backup-log" class="log-console" style="max-height:240px;"></div>
    <div style="color:var(--text3);font-size:11px;margin-top:6px;font-family:var(--mono);" id="manual-backup-elapsed"></div>
  </div>
</div>

{# ── Available Backups ── #}
<div class="card">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-database"></i> Available Backups</div>
    <button class="btn btn-ghost btn-sm" onclick="refreshBackupsList()"><i class="fas fa-sync-alt"></i> Refresh</button>
  </div>

  <div class="backup-columns">

    {# LOCAL #}
    <div class="backup-column">
      <div class="backup-column-header">
        <div class="section-title">🖥️ Main Server</div>
        <span class="card-meta">/root/backups/</span>
      </div>
      <div class="backup-list" id="local-backup-list">
        {% for b in backups %}
        <div class="backup-item">
          <div class="backup-item-main">
            <span class="backup-name">{{ b }}</span>
          </div>
          <div class="backup-actions">
            <button class="btn btn-ghost btn-sm" style="color:var(--text3);" onclick="showBackupDetails('local','{{ b }}',this)" title="Quick details"><i class="fas fa-circle-info"></i></button>
            <button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('local','{{ b }}',this)"><i class="fas fa-shield-check"></i> Audit</button>
            <button class="btn btn-ghost btn-sm" onclick="quickRestore('local','{{ b }}')">↩ Restore</button>
            <button class="btn btn-ghost btn-sm" onclick="quickUploadR2('{{ b }}',this)" title="Upload to R2"><i class="fas fa-cloud-upload-alt"></i></button>
            <button class="btn btn-ghost btn-sm btn-delete-backup" onclick="deleteBackup('local','{{ b }}',this)"><i class="fas fa-trash"></i></button>
          </div>
        </div>
        {% else %}<div class="empty-state"><i class="fas fa-inbox"></i>No backups</div>{% endfor %}
      </div>
    </div>

    {# VM #}
    <div class="backup-column">
      <div class="backup-column-header">
        <div class="section-title">💾 VM Server</div>
        <span class="card-meta">/backups/main-server/</span>
      </div>
      <div class="backup-list" id="vm-backup-list">
        {% for b in vm_backups %}
        <div class="backup-item">
          <div class="backup-item-main">
            <span class="backup-name">{{ b }}</span>
          </div>
          <div class="backup-actions">
            <button class="btn btn-ghost btn-sm" style="color:var(--text3);" onclick="showBackupDetails('vm','{{ b }}',this)" title="Quick details"><i class="fas fa-circle-info"></i></button>
            <button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('vm','{{ b }}',this)"><i class="fas fa-shield-check"></i> Audit</button>
            <button class="btn btn-ghost btn-sm" onclick="quickRestore('vm','{{ b }}')">↩ Restore</button>
            <button class="btn btn-ghost btn-sm btn-delete-backup" onclick="deleteBackup('vm','{{ b }}',this)"><i class="fas fa-trash"></i></button>
          </div>
        </div>
        {% else %}<div class="empty-state"><i class="fas fa-inbox"></i>No VM backups</div>{% endfor %}
      </div>
    </div>

    {# CLOUD R2 #}
    <div class="backup-column">
      <div class="backup-column-header">
        <div class="section-title">☁️ Cloud (R2)</div>
        <span class="card-meta">navitrends-backups</span>
      </div>
      <div class="backup-list" id="cloud-backup-list">
        <div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div>
      </div>
    </div>

  </div>
</div>

{# ── Backup History ── #}
<div class="card" style="margin-top:0;">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-clock-rotate-left"></i> Backup History</div>
    <button class="btn btn-ghost btn-sm" onclick="loadBackupLog()"><i class="fas fa-sync-alt"></i> Refresh</button>
  </div>
  <div id="backup-history-list" class="cloud-backup-list"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></div>
</div>


{# ══════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════ #}

{# ── Local/VM Audit modal ── #}
<div id="audit-modal" class="modal-overlay" style="display:none;" onclick="closeAuditModal(event)">
  <div class="modal-box" onclick="event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <i class="fas fa-shield-halved" style="color:var(--cyan);"></i>
        Backup Health Audit
      </div>
      <button class="modal-close" onclick="closeAuditModal()" title="Close">✕</button>
    </div>
    <div class="modal-body" id="audit-modal-content">
      <div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Running audit…</div>
    </div>
  </div>
</div>

{# ── Cloud (R2) Audit modal ── #}
<div id="r2-audit-modal" class="modal-overlay" style="display:none;" onclick="closeR2AuditModal(event)">
  <div class="modal-box" onclick="event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <i class="fas fa-shield-halved" style="color:var(--cyan);"></i>
        Cloud Backup Audit — R2
      </div>
      <button class="modal-close" onclick="closeR2AuditModal()" title="Close">✕</button>
    </div>
    <div class="modal-body" id="r2-audit-content">
      <div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Running audit…</div>
    </div>
  </div>
</div>

{# ── Details modal ── #}
<div id="details-modal" class="modal-overlay" style="display:none;" onclick="closeDetailsModal(event)">
  <div class="modal-box" onclick="event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <i class="fas fa-circle-info" style="color:var(--accent2);"></i>
        Backup Details
      </div>
      <button class="modal-close" onclick="closeDetailsModal()" title="Close">✕</button>
    </div>
    <div class="modal-body" id="details-modal-content">
      <div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading details…</div>
    </div>
  </div>
</div>

{# ── R2 upload toast ── #}
<div id="r2-toast" style="display:none;">
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
    <i class="fas fa-cloud-upload-alt" style="color:var(--accent2);font-size:16px;"></i>
    <span id="r2-toast-msg" style="flex:1;font-size:12px;">Uploading to R2…</span>
  </div>
  <div style="height:5px;background:var(--border2);border-radius:10px;overflow:hidden;">
    <div id="r2-toast-bar" style="height:100%;background:linear-gradient(90deg,var(--accent2),var(--cyan));width:0%;transition:width 0.4s ease;border-radius:10px;"></div>
  </div>
</div>


<script>
// ════════════════════════════════════════════════════════════════
// HELPERS
// ════════════════════════════════════════════════════════════════

function _statusTier(status) {
  if (status === 'healthy')  return 'healthy';
  if (status === 'warning')  return 'warning';
  return 'critical';
}
function _statusIcon(status) {
  if (status === 'healthy')  return 'fa-circle-check';
  if (status === 'warning')  return 'fa-triangle-exclamation';
  return 'fa-circle-xmark';
}
function _checkIcon(s) {
  if (s === 'pass') return '✓';
  if (s === 'warn') return '!';
  return '✗';
}
function _scoreClass(score) {
  if (score >= 75) return '';
  if (score >= 50) return 'warn';
  return 'crit';
}

// ════════════════════════════════════════════════════════════════
// AUDIT — LOCAL / VM
// ════════════════════════════════════════════════════════════════

function renderAuditModal(report) {
  const tier      = report.health_tier || _statusTier(report.status || '');
  const label     = report.health_label || report.status || 'Unknown';
  const score     = typeof report.score === 'number' ? report.score : null;
  const scoreStr  = score !== null ? score + '%' : '—';
  const scoreCls  = score !== null ? _scoreClass(score) : 'crit';

  let checksHtml = '';
  (report.checks || []).forEach(c => {
    checksHtml += `
      <div class="audit-check-item">
        <div class="audit-check-icon ${c.status}">${_checkIcon(c.status)}</div>
        <div class="audit-check-body">
          <div class="audit-check-name">${c.name}</div>
          ${c.detail ? `<div class="audit-check-detail">${c.detail}</div>` : ''}
        </div>
      </div>`;
  });

  return `
    <div class="audit-status-banner ${tier}">
      <div class="audit-status-icon">
        <i class="fas ${_statusIcon(tier)}"></i>
      </div>
      <div class="audit-status-info">
        <div class="audit-status-label">${label}</div>
        <div class="audit-status-file">${report.backup_file || ''}</div>
      </div>
      ${report.file_size_display ? `<div class="audit-status-size">${report.file_size_display}</div>` : ''}
    </div>

    ${score !== null ? `
    <div class="audit-score-row">
      <div style="font-family:var(--mono);font-size:11px;color:var(--text3);">Health Score</div>
      <div class="audit-score-bar-wrap">
        <div class="audit-score-bar-fill ${scoreCls}" style="width:${score}%"></div>
      </div>
      <div class="audit-score-num" style="color:${score>=75?'var(--green)':score>=50?'var(--yellow)':'var(--red)'}">${scoreStr}</div>
    </div>` : ''}

    ${report.checks && report.checks.length ? `
    <div class="audit-checks-label">Checks</div>
    ${checksHtml}` : ''}

    ${report.summary ? `
    <div class="audit-summary-box">
      <i class="fas fa-info-circle" style="color:var(--accent2);margin-right:6px;"></i>${report.summary}
    </div>` : ''}

    ${report.stored_hash || report.sha256 ? `
    <div class="audit-sha">
      <span style="color:var(--text3);">SHA256 </span>
      <span>${report.stored_hash || report.sha256}</span>
    </div>` : ''}
  `;
}

async function auditBackup(source, filename, btn) {
  const modal   = document.getElementById('audit-modal');
  const content = document.getElementById('audit-modal-content');
  modal.style.display = 'flex';
  content.innerHTML   = '<div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Running audit…</div>';

  try {
    const res    = await fetch('/api/backups/audit', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({source, backup_file: filename})
    });
    const report = await res.json();
    content.innerHTML = renderAuditModal(report);
    // animate score bar
    setTimeout(() => {
      const bar = content.querySelector('.audit-score-bar-fill');
      if (bar) bar.style.width = (report.score || 0) + '%';
    }, 80);
  } catch(e) {
    content.innerHTML = `<div style="color:var(--red);font-family:var(--mono);font-size:12px;padding:16px;">❌ Audit request failed: ${e.message}</div>`;
  }
}

function closeAuditModal(event) {
  if (!event || event.target === document.getElementById('audit-modal')) {
    document.getElementById('audit-modal').style.display = 'none';
  }
}


// ════════════════════════════════════════════════════════════════
// AUDIT — CLOUD R2
// ════════════════════════════════════════════════════════════════

async function auditCloudBackup(key, btn) {
  const modal   = document.getElementById('r2-audit-modal');
  const content = document.getElementById('r2-audit-content');
  modal.style.display = 'flex';
  content.innerHTML   = '<div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Running audit…</div>';

  try {
    const res    = await fetch('/api/cloud/r2/audit', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({key})
    });
    const report = await res.json();

    const tier  = _statusTier(report.status);
    const score = report.score || null;
    const scoreCls = score !== null ? _scoreClass(score) : 'crit';

    let checksHtml = '';
    (report.checks || []).forEach(c => {
      const icon = c.startsWith('✅') ? 'ok' : c.startsWith('⚠️') ? 'warn' : 'fail';
      checksHtml += `<div class="r2-check-row">
        <span class="r2-check-icon">${c.startsWith('✅') ? '✅' : c.startsWith('⚠️') ? '⚠️' : '❌'}</span>
        <span>${c.replace(/^[✅⚠️❌]\s*/,'')}</span>
      </div>`;
    });

    content.innerHTML = `
      <div class="audit-status-banner ${tier}">
        <div class="audit-status-icon"><i class="fas ${_statusIcon(tier)}"></i></div>
        <div class="audit-status-info">
          <div class="audit-status-label">${report.status || 'Unknown'}</div>
          <div class="audit-status-file">${key}</div>
        </div>
        ${report.size_human ? `<div class="audit-status-size">${report.size_human}</div>` : ''}
      </div>

      ${score !== null ? `
      <div class="audit-score-row">
        <div style="font-family:var(--mono);font-size:11px;color:var(--text3);">Health Score</div>
        <div class="audit-score-bar-wrap">
          <div class="audit-score-bar-fill ${scoreCls}" style="width:0%"></div>
        </div>
        <div class="audit-score-num" style="color:${score>=75?'var(--green)':score>=50?'var(--yellow)':'var(--red)'}">${score}%</div>
      </div>` : ''}

      ${checksHtml ? `<div class="audit-checks-label">Checks</div>${checksHtml}` : ''}

      ${report.warnings && report.warnings.length ? `
        <div class="audit-checks-label" style="color:var(--yellow);margin-top:12px;">Warnings</div>
        ${report.warnings.map(w=>`<div class="r2-check-row" style="border-color:rgba(245,158,11,0.2);">
          <span class="r2-check-icon">⚠️</span><span style="color:var(--yellow);">${w}</span>
        </div>`).join('')}` : ''}

      ${report.errors && report.errors.length ? `
        <div class="audit-checks-label" style="color:var(--red);margin-top:12px;">Errors</div>
        ${report.errors.map(e=>`<div class="r2-check-row" style="border-color:rgba(239,68,68,0.2);">
          <span class="r2-check-icon">❌</span><span style="color:var(--red);">${e}</span>
        </div>`).join('')}` : ''}

      ${report.stored_hash ? `<div class="audit-sha"><span style="color:var(--text3);">SHA256 </span><span>${report.stored_hash}</span></div>` : ''}
    `;

    setTimeout(() => {
      const bar = content.querySelector('.audit-score-bar-fill');
      if (bar) bar.style.width = (score || 0) + '%';
    }, 80);

  } catch(e) {
    content.innerHTML = `<div style="color:var(--red);font-family:var(--mono);font-size:12px;padding:16px;">❌ Audit request failed: ${e.message}</div>`;
  }
}

function closeR2AuditModal(event) {
  if (!event || event.target === document.getElementById('r2-audit-modal')) {
    document.getElementById('r2-audit-modal').style.display = 'none';
  }
}


// ════════════════════════════════════════════════════════════════
// DETAILS MODAL
// ════════════════════════════════════════════════════════════════

async function showBackupDetails(source, filename, btn) {
  const modal   = document.getElementById('details-modal');
  const content = document.getElementById('details-modal-content');
  modal.style.display = 'flex';
  content.innerHTML   = '<div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading details…</div>';

  try {
    const res  = await fetch('/api/backups/details', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({source, backup_file: filename})
    });
    const d = await res.json();

    // Parse date from filename: myapps-backup-YYYYMMDD_HHMMSS.tar.gz
    const m = filename.match(/(\d{4})(\d{2})(\d{2})_(\d{2})(\d{2})(\d{2})/);
    let dateStr = d.created_at || '—';
    if (!d.created_at && m) {
      dateStr = `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]} UTC`;
    }

    const path = source === 'local'
      ? `/root/backups/${filename}`
      : `/backups/main-server/${filename}`;

    const hasSha = d.sha256 && d.sha256 !== 'none';
    const ageDisplay = d.age_days !== undefined
      ? (d.age_days === 0 ? 'Today' : d.age_days === 1 ? '1 day ago' : `${d.age_days} days ago`)
      : '—';

    content.innerHTML = `
      <div class="details-path-row">
        <div class="details-path-label">File Path</div>
        <div class="details-path-value">${d.path || path}</div>
      </div>

      <div class="details-grid">
        <div class="details-card">
          <div class="details-card-label">File Size</div>
          <div class="details-card-value accent">${d.size_human || '—'}</div>
        </div>
        <div class="details-card">
          <div class="details-card-label">Created</div>
          <div class="details-card-value" style="font-size:11px;">${dateStr}</div>
        </div>
        <div class="details-card">
          <div class="details-card-label">Age</div>
          <div class="details-card-value ${d.age_days > 7 ? 'yellow' : 'green'}">${ageDisplay}</div>
        </div>
        <div class="details-card">
          <div class="details-card-label">Source</div>
          <div class="details-card-value">${source === 'local' ? '🖥️ Main Server' : '💾 VM Server'}</div>
        </div>
      </div>

      <div class="details-sha-row">
        <div class="details-path-label">SHA256 Checksum</div>
        ${hasSha
          ? `<div style="font-family:var(--mono);font-size:11px;color:var(--cyan);word-break:break-all;margin-top:4px;">${d.sha256}</div>`
          : `<div style="font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:4px;">No .sha256 sidecar — run a new backup to generate checksums</div>`}
      </div>

      <div class="details-badge-row">
        ${hasSha ? `<span class="details-badge ok"><i class="fas fa-check"></i> Checksum present</span>` : `<span class="details-badge warn"><i class="fas fa-triangle-exclamation"></i> No checksum</span>`}
        ${d.size_bytes && d.size_bytes > 50*1024*1024 ? `<span class="details-badge ok"><i class="fas fa-check"></i> Size OK</span>` : `<span class="details-badge warn"><i class="fas fa-triangle-exclamation"></i> Small file</span>`}
        <span class="details-badge info"><i class="fas fa-file-zipper"></i> tar.gz</span>
        ${d.on_cloud ? `<span class="details-badge ok"><i class="fas fa-cloud"></i> Synced to R2</span>` : `<span class="details-badge info"><i class="fas fa-cloud"></i> Not in R2</span>`}
      </div>
    `;
  } catch(e) {
    content.innerHTML = `<div style="color:var(--red);font-family:var(--mono);font-size:12px;padding:16px;">❌ Failed to load details: ${e.message}</div>`;
  }
}

function closeDetailsModal(event) {
  if (!event || event.target === document.getElementById('details-modal')) {
    document.getElementById('details-modal').style.display = 'none';
  }
}


// ════════════════════════════════════════════════════════════════
// CLOUD BACKUP COLUMN
// ════════════════════════════════════════════════════════════════

async function loadCloudBackupsColumn() {
  const list = document.getElementById('cloud-backup-list');
  try {
    const res  = await fetch('/api/cloud/r2/backups');
    const data = await res.json();
    if (!data.backups || data.backups.length === 0) {
      list.innerHTML = '<div class="empty-state"><i class="fas fa-cloud"></i> No cloud backups yet</div>';
      return;
    }
    const archives = data.backups.filter(b => b.name.endsWith('.tar.gz'));
    list.innerHTML = archives.map(b => `
      <div class="backup-item">
        <div class="backup-item-main">
          <span class="backup-name"><i class="fas fa-cloud" style="color:var(--accent2);"></i>${b.name}</span>
          <span class="backup-meta">${b.size_human} · ${b.last_modified_str}</span>
        </div>
        <div class="backup-actions">
          <button class="btn btn-ghost btn-sm btn-audit" onclick="auditCloudBackup('${b.key}', this)" title="Audit R2 integrity">
            <i class="fas fa-shield-check"></i> Audit
          </button>
          <button class="btn btn-ghost btn-sm" onclick="restoreFromCloud('${b.key}','${b.name}')">↩ Restore</button>
          <button class="btn btn-ghost btn-sm btn-delete-backup" onclick="deleteCloudBackup('${b.key}',this)"><i class="fas fa-trash"></i></button>
        </div>
      </div>
    `).join('');
  } catch(e) {
    list.innerHTML = `<div class="empty-state" style="color:var(--red);">Failed to load R2 backups</div>`;
  }
}


// ════════════════════════════════════════════════════════════════
// QUICK UPLOAD TO R2
// ════════════════════════════════════════════════════════════════

async function quickUploadR2(filename, btn) {
  const toast    = document.getElementById('r2-toast');
  const toastMsg = document.getElementById('r2-toast-msg');
  const toastBar = document.getElementById('r2-toast-bar');

  btn.disabled = true;
  btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  toast.style.display = 'block';
  toastMsg.textContent = `Uploading ${filename}…`;
  toastBar.style.width = '0%';

  try {
    const res  = await fetch('/api/cloud/r2/upload', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({backup_file: filename, source: 'local'})
    });
    const data = await res.json();
    if (!data.success) {
      toastMsg.textContent = '❌ ' + data.message;
      btn.disabled = false;
      btn.innerHTML = '<i class="fas fa-cloud-upload-alt"></i>';
      setTimeout(() => toast.style.display = 'none', 4000);
      return;
    }

    const jobId = data.job_id;
    const poll  = setInterval(async () => {
      try {
        const s   = await fetch(`/api/cloud/r2/upload/status/${jobId}`);
        const job = await s.json();
        toastBar.style.width = job.progress + '%';
        toastMsg.textContent = job.progress < 100
          ? `Uploading ${filename}… ${job.progress}%`
          : `✅ Uploaded to R2!`;
        if (job.status === 'done') {
          clearInterval(poll);
          btn.disabled = false;
          btn.innerHTML = '<i class="fas fa-cloud-upload-alt"></i>';
          loadCloudBackupsColumn();
          setTimeout(() => toast.style.display = 'none', 3000);
        } else if (job.status === 'error') {
          clearInterval(poll);
          toastMsg.textContent = '❌ Upload failed';
          btn.disabled = false;
          btn.innerHTML = '<i class="fas fa-cloud-upload-alt"></i>';
          setTimeout(() => toast.style.display = 'none', 4000);
        }
      } catch(e) { clearInterval(poll); }
    }, 1200);
  } catch(e) {
    toastMsg.textContent = '❌ ' + e.message;
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-cloud-upload-alt"></i>';
    setTimeout(() => toast.style.display = 'none', 4000);
  }
}


// ════════════════════════════════════════════════════════════════
// DELETE / RESTORE
// ════════════════════════════════════════════════════════════════

function restoreFromCloud(key, filename) {
  window.location = `/restore?source=cloud&file=${encodeURIComponent(filename)}&key=${encodeURIComponent(key)}`;
}

async function deleteCloudBackup(key, btn) {
  if (!confirm(`Delete from Cloudflare R2?\n${key}`)) return;
  btn.disabled = true;
  btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  try {
    const res  = await fetch('/api/cloud/r2/delete', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({key})
    });
    const data = await res.json();
    if (data.success) {
      loadCloudBackupsColumn();
    } else {
      alert('Delete failed: ' + data.message);
      btn.disabled = false;
      btn.innerHTML = '<i class="fas fa-trash"></i>';
    }
  } catch(e) {
    alert(e.message);
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-trash"></i>';
  }
}

// Init
document.addEventListener('DOMContentLoaded', loadCloudBackupsColumn);
</script>
{% endblock %}