Varaverk/Plugin/unraid/pages/arrs.php

<?php
// ═══════════════════════════════════════════════════════════════════════════════════════════════
// PURPOSE
//   Arrs tab. Library counts, queue state, root folders and recent cleanup/discovery activity
//   for every Sonarr / Radarr / Lidarr instance across all nodes.
//
// DESIGN PRINCIPLES
//   Pure view — markup plus a poll against api/arrs.php. Instance discovery, live fetching
//   and stats parsing all live in include/arrs.php.
//
//   Local nodes are live, remote nodes are cached. The page surfaces cache age rather than
//   hiding it, so a 2-hour-old partner count is never presented as current.
//
// OPERATIONAL SAFEGUARDS
//   Read-only with respect to media. Nothing here triggers a scan, import, or deletion —
//   the arr cleanups are scheduled scripts, not page buttons.
//
//   A node with no cache yet renders as "not collected", distinct from a node that genuinely
//   has an empty library.
//
// RENDERS
//   Per-node arr cards: tracked counts, queue, root folders, cleanup and discovery stats
//   Inline conf editing for arr-related settings
//
// DEPENDS ON
//   api/arrs.php      polled every 60s   → include/arrs.php
//   api/confform.php  inline conf edits  → include/confform.php
?>
<style>
/* ── Cards ───────────────────────────────────────────────── */
.vv-arr-card  { background:#161616;border:1px solid #2a2a2a;border-radius:6px;padding:12px 14px;min-width:0; }
.vv-arr-sep   { border:none;border-top:1px solid #1e1e1e;margin:8px 0; }

/* ── Card header ─────────────────────────────────────────── */
.vv-arr-hdr   { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
.vv-arr-name  { font-size:12px;font-weight:700;text-transform:uppercase;color:#888;letter-spacing:.06em; }
.vv-arr-dot   { width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-right:4px;display:inline-block; }
.vv-arr-ver   { font-size:10px;color:#444; }

/* ── Big stats ───────────────────────────────────────────── */
.vv-arr-stats { display:flex;gap:0;margin-bottom:10px; }
.vv-arr-stat  { flex:1;text-align:center;padding:0 4px; }
.vv-arr-stat + .vv-arr-stat { border-left:1px solid #1e1e1e; }
.vv-arr-stat-n{ font-size:18px;font-weight:700;color:#ccc;line-height:1.1; }
.vv-arr-stat-l{ font-size:9px;color:#444;text-transform:uppercase;letter-spacing:.06em;margin-top:1px; }
.vv-arr-stat-n.dim { color:#333; }

/* ── Disk bar ────────────────────────────────────────────── */
.vv-arr-disk  { margin-bottom:8px; }
.vv-arr-disk-bar { height:3px;background:#1a1a1a;border-radius:2px;overflow:hidden;margin-top:3px; }
.vv-arr-disk-fill{ height:100%;border-radius:2px;transition:width .3s; }
.vv-arr-disk-lbl { display:flex;justify-content:space-between;align-items:baseline; }

/* ── Queue badges ────────────────────────────────────────── */
.vv-arr-q     { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.vv-arr-qbadge{ font-size:10px;padding:1px 7px;border-radius:3px;font-weight:600; }
.vv-arr-qbadge.dl   { background:#0a1a2a;color:#4a9eff;border:1px solid #1a3a5a; }
.vv-arr-qbadge.warn { background:#1f1500;color:#ffb74d;border:1px solid #3a2800; }
.vv-arr-qbadge.err  { background:#200d0d;color:#ef5350;border:1px solid #3a1a1a; }
.vv-arr-qbadge.idle { background:#111;color:#333;border:1px solid #1e1e1e; }

/* ── Health ──────────────────────────────────────────────── */
.vv-arr-health{ background:#1a0a0a;border-left:2px solid #ef5350;border-radius:0 3px 3px 0;
                padding:5px 8px;margin-top:6px;font-size:10px;color:#c66;line-height:1.5; }
.vv-arr-health.warn { background:#1a1000;border-color:#ff9800;color:#c96; }

/* ── Cleanup / Discovery rows ────────────────────────────── */
.vv-arr-meta  { display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:3px 0; }
.vv-arr-meta-lbl{ font-size:10px;color:#444; }
.vv-arr-meta-val{ font-size:10px;color:#666;text-align:right; }
.vv-arr-meta-sub{ font-size:9px;color:#333;margin-top:0px; }
.vv-arr-meta-sub.warn { color:#8b4;  }

/* ── Root path ───────────────────────────────────────────── */
.vv-arr-root  { font-size:10px;color:#2a2a2a;white-space:nowrap;overflow:hidden;
                text-overflow:ellipsis;margin-top:8px;font-family:monospace; }

/* ── Node section ────────────────────────────────────────── */
.vv-arr-node  { grid-column:1/-1; }
.vv-arr-node-hdr { display:flex;align-items:baseline;gap:10px;margin-bottom:10px;
                    padding-bottom:7px;border-bottom:1px solid #1e1e1e; }
.vv-arr-node-id   { font-size:11px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.08em; }
.vv-arr-node-host { font-size:12px;color:#888; }
.vv-arr-node-tag  { font-size:9px;color:#2a3a2a;background:#0d180d;border:1px solid #1a3a1a;
                    border-radius:3px;padding:1px 6px;margin-left:2px; }
.vv-arr-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px; }

/* ── Sync + Recovery cards ───────────────────────────────── */
.vv-arr-sr-grid { grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media (max-width:700px) { .vv-arr-sr-grid { grid-template-columns:1fr; } }
.vv-arr-sr-num  { font-size:20px;font-weight:700;color:#ccc;line-height:1; }
.vv-arr-sr-lbl  { font-size:9px;color:#444;text-transform:uppercase;letter-spacing:.06em;margin-top:2px; }
.vv-arr-sr-row  { display:flex;gap:16px;flex-wrap:wrap; }
.vv-arr-sr-item { display:flex;flex-direction:column;gap:1px; }

/* ── Settings card ───────────────────────────────────────── */
.vv-arr-set-card { grid-column:1/-1; }
.vv-arr-tog-wrap { display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none; }
.vv-arr-tog-track{ width:28px;height:16px;border-radius:8px;background:#1e1e1e;border:1px solid #2a2a2a;
                   position:relative;transition:background .15s,border-color .15s;flex-shrink:0; }
.vv-arr-tog-track.on { background:#1a3a1a;border-color:#2d5a2d; }
.vv-arr-tog-track::after { content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;
                            border-radius:50%;background:#444;transition:left .15s,background .15s; }
.vv-arr-tog-track.on::after { left:14px;background:#4caf50; }
.vv-arr-tog-lbl  { font-size:11px;color:#666; }
.vv-arr-set-inp  { background:#0d0d0d;border:1px solid #252525;border-radius:3px;color:#888;
                   font-size:11px;padding:3px 7px;outline:none;width:60px; }
.vv-arr-set-inp:focus { border-color:#444; }
.vv-arr-pill  { display:inline-block;font-size:9px;padding:1px 7px;border-radius:3px;font-weight:700; }
.vv-arr-pill.ok   { background:#0d1f0d;color:#4caf50;border:1px solid #1a3a1a; }
.vv-arr-pill.err  { background:#200d0d;color:#ef5350;border:1px solid #3a1a1a; }
.vv-arr-pill.off  { background:#1e1e1e;color:#444;border:1px solid #2a2a2a; }
</style>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 2px;">
  <span style="font-size:13px;font-weight:bold;color:#888;text-transform:uppercase;letter-spacing:.06em;">Arrs</span>
  <span style="font-size:11px;color:#3a3a3a;" id="vv-arrs-ts"></span>
</div>

<div id="vv-arrs-grid" style="display:grid;grid-template-columns:repeat(8,1fr);gap:12px;">
  <div style="grid-column:1/-1;color:#444;font-size:12px;padding:24px 0;text-align:center;">Loading…</div>
</div>

<script>
(function() {

// ── Arr card ──────────────────────────────────────────────────────────────────
function _arrCard(arr) {
  const LABELS = { sonarr:'Sonarr', radarr:'Radarr', lidarr:'Lidarr' };
  const name   = LABELS[arr.type] || arr.type;
  const online = !!arr.online;
  const dotCol = online ? '#4caf50' : (arr.remote ? '#444' : '#c62828');

  // ── Offline / remote state ────────────────────────────────────────────────
  if (!online) {
    const msg = arr.remote ? 'not available from this host' : 'offline';
    return `<div class="vv-arr-card" style="opacity:.6;">
      <div class="vv-arr-hdr">
        <span class="vv-arr-name">${name}</span>
        <span><span class="vv-arr-dot" style="background:${dotCol}"></span>
              <span class="vv-arr-ver">${msg}</span></span>
      </div>
      ${arr.root ? `<div class="vv-arr-root">${arr.root}</div>` : ''}
    </div>`;
  }

  // ── Stats ─────────────────────────────────────────────────────────────────
  let stats = '';
  if (arr.type === 'sonarr') {
    stats = `
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.total)}</div><div class="vv-arr-stat-l">Series</div></div>
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.monitored)}</div><div class="vv-arr-stat-l">Monitored</div></div>
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.episodes)}</div><div class="vv-arr-stat-l">Episodes</div></div>`;
  } else if (arr.type === 'radarr') {
    const pct = arr.total ? Math.round((arr.files||0)/arr.total*100) : 0;
    stats = `
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.total)}</div><div class="vv-arr-stat-l">Movies</div></div>
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.files)}</div><div class="vv-arr-stat-l">Have file</div></div>
      <div class="vv-arr-stat"><div class="vv-arr-stat-n ${pct<50?'dim':''}">${pct}%</div><div class="vv-arr-stat-l">Complete</div></div>`;
  } else if (arr.type === 'lidarr') {
    stats = `
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.total)}</div><div class="vv-arr-stat-l">Artists</div></div>
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.monitored)}</div><div class="vv-arr-stat-l">Monitored</div></div>
      <div class="vv-arr-stat"><div class="vv-arr-stat-n">${_n(arr.albums)}</div><div class="vv-arr-stat-l">Albums</div></div>`;
  }

  // ── Disk bar ──────────────────────────────────────────────────────────────
  let disk = '';
  if (arr.disk?.length) {
    const d    = arr.disk.reduce((a,b) => (b.totalSpace||0) > (a.totalSpace||0) ? b : a);
    const free = d.freeSpace, tot = d.totalSpace;
    if (free && tot) {
      const usedPct = Math.round((1 - free/tot)*100);
      const col     = usedPct > 90 ? '#ef5350' : usedPct > 75 ? '#ffb74d' : '#4caf50';
      disk = `<div class="vv-arr-disk">
        <div class="vv-arr-disk-lbl">
          <span style="font-size:10px;color:#555;">${_sz(free)} free</span>
          <span style="font-size:10px;color:#333;">${_sz(tot)} · ${usedPct}%</span>
        </div>
        <div class="vv-arr-disk-bar">
          <div class="vv-arr-disk-fill" style="width:${usedPct}%;background:${col};"></div>
        </div>
      </div>`;
    }
  }

  // ── Queue ─────────────────────────────────────────────────────────────────
  const q    = arr.queue || {};
  const qDl  = q.dl  || 0, qWrn = q.warn || 0, qErr = q.err || 0;
  const qTot = qDl + qWrn + qErr;
  let qHtml;
  if (qTot === 0) {
    qHtml = `<span class="vv-arr-qbadge idle">idle</span>`;
  } else {
    qHtml = '';
    if (qDl)  qHtml += `<span class="vv-arr-qbadge dl">${qDl} downloading</span>`;
    if (qWrn) qHtml += `<span class="vv-arr-qbadge warn">${qWrn} warning</span>`;
    if (qErr) qHtml += `<span class="vv-arr-qbadge err">${qErr} error</span>`;
  }

  // ── Health ────────────────────────────────────────────────────────────────
  let health = '';
  if (arr.health?.length) {
    const hasErr = arr.health.some(h => h.type === 'error');
    const cls    = hasErr ? 'vv-arr-health' : 'vv-arr-health warn';
    const msgs   = arr.health.slice(0,3).map(h => h.message || h.type).join('<br>');
    health = `<div class="${cls}">${msgs}</div>`;
  }

  // ── Cleanup ───────────────────────────────────────────────────────────────
  let cleanup = '';
  const cl = arr.cleanup || {};
  if (cl.last_run) {
    const st    = cl.status === 'ok' ? '<span style="color:#4caf50">✓</span>' : '<span style="color:#ef5350">✗</span>';
    const orph  = cl.orphans || 0, junk = cl.junk || 0;
    const orCol = (orph || junk) ? 'color:#8b4a2a' : 'color:#333';
    cleanup = `
      <div class="vv-arr-meta">
        <span class="vv-arr-meta-lbl">Cleanup</span>
        <span class="vv-arr-meta-val">${_relTime(cl.last_run)} ${st}</span>
      </div>
      ${cl.tracked != null ? `<div class="vv-arr-meta-sub" style="${orCol}">
        ${_n(cl.tracked)} files · ${orph} orphans${junk ? ' · ' + junk + ' junk' : ''}
      </div>` : ''}`;
  }

  // ── Discovery ─────────────────────────────────────────────────────────────
  let disc = '';
  const dsc = arr.discovery || {};
  if (dsc.last_run) {
    const added = dsc.added != null ? `&thinsp;<span style="color:#6fcf97">+${dsc.added}</span>` : '';
    disc = `<div class="vv-arr-meta">
      <span class="vv-arr-meta-lbl">Discovery</span>
      <span class="vv-arr-meta-val">${_relTime(dsc.last_run)}${added}</span>
    </div>`;
  }

  const hasMeta = cleanup || disc;

  return `<div class="vv-arr-card">
    <div class="vv-arr-hdr">
      <span class="vv-arr-name">${name}</span>
      <span>
        <span class="vv-arr-dot" style="background:${dotCol}"></span>
        <span class="vv-arr-ver">${arr.version || 'online'}</span>
      </span>
    </div>
    <div class="vv-arr-stats">${stats}</div>
    ${disk}
    <hr class="vv-arr-sep" style="margin:6px 0 8px;">
    <div class="vv-arr-q">${qHtml}</div>
    ${health}
    ${hasMeta ? `<hr class="vv-arr-sep" style="margin:8px 0 4px;">${cleanup}${disc}` : ''}
    <div class="vv-arr-root">${arr.root || ''}</div>
  </div>`;
}

// ── Node section ──────────────────────────────────────────────────────────────
function _nodeSection(node) {
  const isLocal = node.local;
  const isMiss  = node.cache_miss;

  let tag, body;

  if (isLocal) {
    tag  = '<span class="vv-arr-node-tag">local</span>';
    body = `<div class="vv-arr-cards">${node.arrs.map(_arrCard).join('')}</div>`;
  } else if (isMiss) {
    tag  = `<span class="vv-arr-node-tag" style="background:#111;border-color:#222;color:#333;">no data</span>
            <button id="vv-arr-rfsh-${node.host}" onclick="vvArrsRefreshRemote('${node.host}')"
                    style="font-size:9px;color:#4a9eff;background:#0a1a2a;border:1px solid #1a3a5a;
                           border-radius:3px;padding:1px 8px;cursor:pointer;margin-left:6px;">↻ Fetch now</button>`;
    body = `<div style="color:#333;font-size:11px;padding:10px 0;">
      No remote data yet — first fetch runs within 2 hours, or click ↻ Fetch now.
    </div>`;
  } else {
    const age    = node.cache_age || 0;
    const ageStr = age < 3600 ? Math.floor(age/60) + 'm ago'
                 : age < 86400 ? Math.floor(age/3600) + 'h ago'
                 : Math.floor(age/86400) + 'd ago';
    tag  = `<span class="vv-arr-node-tag" style="background:#1a1000;border-color:#3a2800;color:#b87;">cached ${ageStr}</span>
            <button id="vv-arr-rfsh-${node.host}" onclick="vvArrsRefreshRemote('${node.host}')"
                    style="font-size:9px;color:#666;background:none;border:1px solid #2a2a2a;
                           border-radius:3px;padding:1px 8px;cursor:pointer;margin-left:6px;">↻</button>`;
    body = `<div class="vv-arr-cards" style="opacity:.85;">${node.arrs.map(_arrCard).join('')}</div>`;
  }

  return `<div class="vv-arr-node">
    <div class="vv-arr-node-hdr">
      <span class="vv-arr-node-id">${node.host.toUpperCase()}</span>
      <span class="vv-arr-node-host">${node.name}</span>${tag}
    </div>
    ${body}
  </div>`;
}

// ── Sync + Recovery row ───────────────────────────────────────────────────────
function _syncSection(sync, recovery, settings) {
  const _card = (title, data, items, extra) => {
    const ok  = data.last_run && data.status === 'ok';
    const bad = data.last_run && data.status !== 'ok';
    const pillCls = !data.last_run ? 'off' : ok ? 'ok' : 'err';
    const pillTxt = !data.last_run ? 'never run' : ok ? 'ok' : data.status || 'error';
    let body = '';
    if (data.last_run) {
      body += `<div style="font-size:11px;color:#555;margin-bottom:10px;">${_relTime(data.last_run)}</div>`;
    }
    body += `<div class="vv-arr-sr-row">${items}</div>`;
    if (extra) body += extra;
    return `<div class="vv-arr-card">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
        <span style="font-size:11px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.07em;">${title}</span>
        <span class="vv-arr-pill ${pillCls}">${pillTxt}</span>
      </div>
      ${body}
    </div>`;
  };

  const _item = (val, lbl) => `<div class="vv-arr-sr-item">
    <div class="vv-arr-sr-num">${val}</div>
    <div class="vv-arr-sr-lbl">${lbl}</div>
  </div>`;

  const syncEnabled = settings?.arr_sync_enabled !== false;
  const syncExtra   = !syncEnabled
    ? `<div style="font-size:10px;color:#8b4a2a;margin-top:8px;">ARR_SYNC_ENABLED=false — sync disabled</div>` : '';

  const syncItems = sync.last_run
    ? _item(`<span style="color:#6fcf97">+${_n(sync.added)}</span>`, 'Added') +
      (sync.nodes != null ? _item(_n(sync.nodes), 'Nodes') : '') +
      (sync.blocklist_count != null ? _item(_n(sync.blocklist_count), 'Blocklist') : '')
    : `<span style="color:#333;font-size:11px;">No run history</span>`;

  const recItems = recovery.last_run
    ? _item(_n(recovery.fixed), 'Fixed') + _item(_n(recovery.searched), 'Re-searched')
    : `<span style="color:#333;font-size:11px;">No run history</span>`;

  return `<div class="vv-arr-sr-grid">
    ${_card('Arr Sync', sync, syncItems, syncExtra)}
    ${_card('Failed / Stalled Recovery', recovery, recItems, '')}
  </div>`;
}

// ── Settings card ─────────────────────────────────────────────────────────────
function _settingsCard(s) {
  if (!s) return '';
  const myHost = s.my_host || 'host1';
  const myId   = s.my_id   || 'HOST1';

  const _tog = (id, on, key, file, label) =>
    `<label class="vv-arr-tog-wrap">
      <div class="vv-arr-tog-track${on?' on':''}" id="vv-arr-tog-${id}"
           onclick="event.stopPropagation();vvArrToggle(this,'${key}','${file}')"></div>
      <span class="vv-arr-tog-lbl">${label}</span>
    </label>`;

  const syncTog = _tog('sync', s.arr_sync_enabled,
    'ARR_SYNC_ENABLED', 'master.conf', 'Arr sync enabled');

  const recTogs = [
    s.sonarr_recovery !== undefined
      ? _tog('sonarr-rec', s.sonarr_recovery, `${myId}_SONARR_RECOVERY`, `${myHost}.conf`, 'Sonarr') : '',
    s.radarr_recovery !== undefined
      ? _tog('radarr-rec', s.radarr_recovery, `${myId}_RADARR_RECOVERY`, `${myHost}.conf`, 'Radarr') : '',
    s.lidarr_recovery !== undefined
      ? _tog('lidarr-rec', s.lidarr_recovery, `${myId}_LIDARR_RECOVERY`, `${myHost}.conf`, 'Lidarr') : '',
  ].filter(Boolean).join('');

  return `<div class="vv-arr-card vv-arr-set-card">
    <div style="font-size:11px;font-weight:700;color:#555;text-transform:uppercase;
                letter-spacing:.07em;margin-bottom:12px;">Settings</div>

    <div style="display:flex;flex-wrap:wrap;gap:20px;margin-bottom:12px;">
      ${syncTog}
    </div>

    <hr class="vv-arr-sep">

    <div style="font-size:10px;color:#3a3a3a;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;">
      Recovery — ${myId}
    </div>
    <div style="display:flex;flex-wrap:wrap;gap:16px;margin-bottom:10px;">${recTogs}</div>
    <div style="display:flex;align-items:center;gap:8px;">
      <span style="font-size:11px;color:#555;">Import recovery age</span>
      <input class="vv-arr-set-inp" id="vv-arr-rec-age" type="number" min="1" max="72"
             value="${s.recovery_age_hours ?? 6}">
      <span style="font-size:10px;color:#3a3a3a;">hours — skip items newer than this</span>
      <button onclick="vvArrSaveAge()" id="vv-arr-age-btn"
              style="background:#1a1a1a;border:1px solid #333;color:#666;font-size:10px;
                     padding:3px 10px;border-radius:3px;cursor:pointer;margin-left:4px;">Save</button>
      <span id="vv-arr-age-fb" style="font-size:10px;"></span>
    </div>
  </div>`;
}

// ── Main render ───────────────────────────────────────────────────────────────
function _render(data) {
  const nodes = data.nodes || [];
  if (!nodes.length && !(data.sync?.last_run) && !(data.recovery?.last_run)) {
    document.getElementById('vv-arrs-grid').innerHTML =
      `<div style="grid-column:1/-1;color:#444;font-size:12px;padding:24px 0;text-align:center;">
         No arrs configured — add Sonarr/Radarr/Lidarr URLs and API keys to ${data.settings?.my_host ?? 'host'}.conf
       </div>`;
    return;
  }

  let html = '';
  for (const node of nodes) html += _nodeSection(node);
  html += _syncSection(data.sync || {}, data.recovery || {}, data.settings);
  html += _settingsCard(data.settings);

  document.getElementById('vv-arrs-grid').innerHTML = html;

  const ts = data.ts ? new Date(data.ts * 1000).toLocaleString([],
    {month:'numeric',day:'numeric',year:'numeric',hour:'2-digit',minute:'2-digit',second:'2-digit'}) : '';
  document.getElementById('vv-arrs-ts').textContent = ts ? 'Updated: ' + ts : '';
}

function vvArrsLoad() {
  fetch('/plugins/varaverk/api/arrs.php')
    .then(r => r.json())
    .then(_render)
    .catch(() => {
      document.getElementById('vv-arrs-grid').innerHTML =
        '<div style="grid-column:1/-1;color:#555;font-size:12px;padding:24px 0;text-align:center;">Error loading arrs data — check API</div>';
    });
}

vvArrsLoad();
setInterval(vvArrsLoad, 60000);

})();

// ── Remote node refresh ───────────────────────────────────────────────────────
function vvArrsRefreshRemote(host) {
  const btn = document.getElementById('vv-arr-rfsh-' + host);
  if (btn) { btn.disabled = true; btn.textContent = '↻…'; }
  fetch(`/plugins/varaverk/api/arrs.php?action=refresh_remote&host=${host}&_=` + Date.now())
    .then(r => r.json())
    .then(d => {
      if (btn) { btn.disabled = false; btn.textContent = d.ok ? '↻' : '✗'; }
      // Main cache was busted — reload to show fresh data
      setTimeout(vvArrsLoad, 500);
    })
    .catch(() => { if (btn) { btn.disabled = false; btn.textContent = '↻'; } });
}

// ── Toggle handler ────────────────────────────────────────────────────────────
function vvArrToggle(track, key, file) {
  const on = !track.classList.contains('on');
  track.classList.toggle('on', on);
  const fd = new FormData();
  fd.append('id', 'arrs');
  fd.append('changes', JSON.stringify([{ file, key, value: on ? 'true' : 'false', type: 'scalar' }]));
  fetch('/plugins/varaverk/api/confform.php', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (!d.ok) track.classList.toggle('on', !on); })
    .catch(()  => track.classList.toggle('on', !on));
}

// ── Recovery age save ─────────────────────────────────────────────────────────
function vvArrSaveAge() {
  const val = document.getElementById('vv-arr-rec-age')?.value;
  const btn = document.getElementById('vv-arr-age-btn');
  const fb  = document.getElementById('vv-arr-age-fb');
  if (!val) return;
  btn.disabled = true; btn.textContent = 'Saving…'; fb.textContent = '';
  const fd = new FormData();
  fd.append('id', 'arrs');
  fd.append('changes', JSON.stringify([{
    file: 'master.conf', key: 'ARR_IMPORT_RECOVERY_AGE', value: val, type: 'scalar'
  }]));
  fetch('/plugins/varaverk/api/confform.php', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      btn.disabled = false; btn.textContent = 'Save';
      fb.style.color = d.ok ? '#4caf50' : '#ef5350';
      fb.textContent  = d.ok ? 'Saved ✓' : (d.error || 'Failed');
      if (d.ok) setTimeout(() => { fb.textContent = ''; }, 3000);
    })
    .catch(() => { btn.disabled = false; btn.textContent = 'Save'; fb.style.color='#ef5350'; fb.textContent='Failed'; });
}
</script>