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

{# Macro must be defined BEFORE it is used #}
{% macro ctr_actions(name) %}
<button class="ctr-action-btn restart" title="Restart" onclick="ctrAction('{{ name }}','restart',this)">
  <i class="fas fa-rotate-right"></i>
</button>
<button class="ctr-action-btn stop" title="Stop" onclick="ctrAction('{{ name }}','stop',this)">
  <i class="fas fa-stop"></i>
</button>
<button class="ctr-action-btn start" title="Start" onclick="ctrAction('{{ name }}','start',this)">
  <i class="fas fa-play"></i>
</button>
{% endmacro %}

{# ═══════════════════════════════════════════════════════
   DASHBOARD PAGE
═══════════════════════════════════════════════════════ #}
<div id="dashboard-page" class="page active">

  <div class="metrics-row">
    <div class="metric-card cpu">
      <div class="metric-label">CPU USAGE</div>
      <div class="metric-value" id="m-cpu">{{ system.cpu_pct }}<span>%</span></div>
      <div class="gauge-bar"><div class="gauge-fill" id="g-cpu" style="width:{{ system.cpu_pct }}%"></div></div>
    </div>
    <div class="metric-card mem">
      <div class="metric-label">MEMORY</div>
      <div class="metric-value" id="m-mem" style="font-size:16px;">{{ system.memory }}</div>
      <div class="gauge-bar"><div class="gauge-fill" id="g-mem" style="width:{{ system.mem_pct }}%"></div></div>
    </div>
    <div class="metric-card disk">
      <div class="metric-label">DISK /</div>
      <div class="metric-value" id="m-disk" style="font-size:16px;">{{ system.disk }}</div>
      <div class="gauge-bar"><div class="gauge-fill" id="g-disk" style="width:{{ system.disk_pct }}%"></div></div>
    </div>
    <div class="metric-card load">
      <div class="metric-label">LOAD AVG</div>
      <div class="metric-value" id="m-load" style="font-size:16px;">{{ system.load }}</div>
      <div class="gauge-bar"><div class="gauge-fill" id="g-load" style="width:10%"></div></div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-chart-line"></i> Overview</div>
      <span class="card-meta">Docker {{ system.docker_v }} · {{ main_server }}</span>
    </div>
    <div class="stat-row">
      <div class="stat-card"><div class="stat-number" id="stat-total">{{ containers|length }}</div><div class="stat-label">App Containers</div></div>
      <div class="stat-card"><div class="stat-number" id="stat-running">{{ running_count }}</div><div class="stat-label">Running</div></div>
      <div class="stat-card"><div class="stat-number" id="stat-users">{{ users|length }}</div><div class="stat-label">Linux Users</div></div>
      <div class="stat-card"><div class="stat-number" id="stat-local-bk">{{ backups|length }}</div><div class="stat-label">Local Backups</div></div>
      <div class="stat-card"><div class="stat-number" id="stat-vm-bk">{{ vm_backups|length }}</div><div class="stat-label">VM Backups</div></div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-cubes"></i> App Containers</div>
      <div style="display:flex;align-items:center;gap:10px;">
        <span class="card-meta">Auto-refresh 15s</span>
        <button class="btn btn-ghost btn-sm" onclick="toggleExtraColumns('app')" id="app-toggle-btn">
          <i class="fas fa-eye"></i> Show more
        </button>
      </div>
    </div>
    <div style="overflow-x:auto;">
      <table class="ct-table" id="app-containers-table">
        <thead>
          <tr>
            <th>NAME</th>
            <th>STATUS</th>
            <th>CPU</th>
            <th>MEMORY</th>
            <th>NET I/O</th>
            <th class="col-extra app-extra" style="display:none;">DISK I/O</th>
            <th class="col-extra app-extra" style="display:none;">IMAGE</th>
            <th class="col-extra app-extra" style="display:none;">PORTS</th>
            <th>ACTIONS</th>
          </tr>
        </thead>
        <tbody id="app-containers-body">
          {% for c in containers %}
          <tr data-ctr="{{ c.name }}">
            <td class="ct-name">{{ c.name }}</td>
            <td>
              {% if 'Up' in c.status %}
                <span class="badge badge-run">Running</span>
              {% else %}
                <span class="badge badge-stop">Stopped</span>
              {% endif %}
            </td>
            <td><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="cpu">—</span></td>
            <td>
              <div class="stat-bar-wrap">
                <div class="stat-bar-bg"><div class="stat-bar-fill" data-ctr="{{ c.name }}" data-stat="mem_bar" style="width:0%"></div></div>
                <span class="stat-pct" data-ctr="{{ c.name }}" data-stat="mem_pct">—</span>
              </div>
            </td>
            <td><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="net" style="color:var(--cyan)">—</span></td>
            <td class="col-extra app-extra" style="display:none;"><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="block" style="color:var(--yellow)">—</span></td>
            <td class="col-extra app-extra ct-image" style="display:none;">{{ c.image }}</td>
            <td class="col-extra app-extra ct-ports" style="display:none;">{{ c.ports or '—' }}</td>
            <td><div class="action-btns">{{ ctr_actions(c.name) }}</div></td>
          </tr>
          {% else %}
          <tr><td colspan="9"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{# ═══════════════════════════════════════════════════════
   ALL CONTAINERS PAGE
═══════════════════════════════════════════════════════ #}
<div id="containers-page" class="page">
  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-layer-group"></i> All Containers</div>
      <div style="display:flex;gap:8px;align-items:center;">
        <span class="card-meta" id="all-ctr-meta">—</span>
        <button class="btn btn-ghost btn-sm" onclick="toggleExtraColumns('all')" id="all-toggle-btn">
          <i class="fas fa-eye"></i> Show more
        </button>
        <button class="btn btn-ghost btn-sm" onclick="loadAllContainers()"><i class="fas fa-sync-alt"></i> Refresh</button>
      </div>
    </div>
    <div style="overflow-x:auto;">
      <table class="ct-table">
        <thead>
          <tr>
            <th>NAME</th>
            <th>OWNER</th>
            <th>STATUS</th>
            <th>CPU</th>
            <th>MEMORY</th>
            <th>NET I/O</th>
            <th class="col-extra all-extra" style="display:none;">DISK I/O</th>
            <th class="col-extra all-extra" style="display:none;">IMAGE</th>
            <th class="col-extra all-extra" style="display:none;">PORTS</th>
            <th>ACTIONS</th>
          </tr>
        </thead>
        <tbody id="all-containers-body">
          <tr><td colspan="10"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

{# ═══════════════════════════════════════════════════════
   RESTORE PAGE
═══════════════════════════════════════════════════════ #}
<div id="restore-page" class="page">
  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-rotate-right"></i> Restore Configuration</div>
    </div>

    <div class="restore-form">
      <div class="form-section">
        <div class="form-section-title">STEP 1 — SELECT BACKUP SOURCE</div>
        <div class="radio-group">
          <label class="radio-card">
            <input type="radio" name="backup_source" value="local" checked onchange="updateBackupList()">
            <div class="radio-body">
              <span class="radio-icon">🖥️</span>
              <div>
                <div class="radio-label">Main Server</div>
                <div class="radio-desc"><code>/root/backups/</code></div>
              </div>
            </div>
          </label>
          <label class="radio-card">
            <input type="radio" name="backup_source" value="vm" onchange="updateBackupList()">
            <div class="radio-body">
              <span class="radio-icon">💾</span>
              <div>
                <div class="radio-label">VM Backup Server</div>
                <div class="radio-desc"><code>/backups/main-server/</code></div>
              </div>
            </div>
          </label>
        </div>
        <div class="form-group" style="margin-top:14px; max-width:500px;">
          <label class="form-label">BACKUP FILE</label>
          <select id="backup-file-select" class="form-input">
            <optgroup label="Main Server" id="local-options">
              {% for b in backups %}<option value="{{ b }}" data-source="local">{{ b }}</option>{% else %}<option disabled>No local backups</option>{% endfor %}
            </optgroup>
            <optgroup label="VM Backups" id="vm-options" style="display:none;">
              {% for b in vm_backups %}<option value="{{ b }}" data-source="vm">{{ b }}</option>{% else %}<option disabled>No VM backups</option>{% endfor %}
            </optgroup>
          </select>
        </div>
      </div>

      <div class="form-section">
        <div class="form-section-title">STEP 2 — SELECT RESTORE TARGET</div>
        <div class="radio-group">
          <label class="radio-card">
            <input type="radio" name="restore_target" value="local" checked onchange="toggleRemoteFields()">
            <div class="radio-body">
              <span class="radio-icon">🎯</span>
              <div>
                <div class="radio-label">Restore on This Server</div>
                <div class="radio-desc" id="this-server-desc">Loading hostname…</div>
              </div>
            </div>
          </label>
          <label class="radio-card">
            <input type="radio" name="restore_target" value="remote" onchange="toggleRemoteFields()">
            <div class="radio-body">
              <span class="radio-icon">📡</span>
              <div>
                <div class="radio-label">External Machine</div>
                <div class="radio-desc">via SSH — any IP</div>
              </div>
            </div>
          </label>
        </div>

        <div id="remote-fields" style="display:none; margin-top:16px; max-width:560px;">
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">TARGET IP</label>
              <input type="text" id="remote-ip" class="form-input" placeholder="192.168.x.x or IP">
            </div>
            <div class="form-group" style="max-width:100px;">
              <label class="form-label">SSH PORT</label>
              <input type="text" id="remote-port" class="form-input" value="22">
            </div>
            <div class="form-group" style="max-width:120px;">
              <label class="form-label">SSH USER</label>
              <input type="text" id="remote-user" class="form-input" value="root">
            </div>
          </div>
          <div class="form-group" style="margin-top:8px;">
            <label class="form-label">AUTHENTICATION</label>
            <div class="radio-group" style="gap:8px;">
              <label class="radio-card small">
                <input type="radio" name="auth_method" value="key" checked onchange="toggleAuthFields()">
                <div class="radio-body"><span>🔑</span><div class="radio-label">SSH Key</div></div>
              </label>
              <label class="radio-card small">
                <input type="radio" name="auth_method" value="password" onchange="toggleAuthFields()">
                <div class="radio-body"><span>🔒</span><div class="radio-label">Password</div></div>
              </label>
            </div>
          </div>
          <div id="key-field" class="form-group" style="margin-top:8px;">
            <label class="form-label">SSH KEY PATH</label>
            <input type="text" id="ssh-key-path" class="form-input" value="/root/.ssh/contabo-key">
          </div>
          <div id="password-field" class="form-group" style="display:none; margin-top:8px;">
            <label class="form-label">SSH PASSWORD</label>
            <input type="password" id="ssh-password" class="form-input">
          </div>
        </div>
      </div>

      <div class="form-section">
        <button class="btn btn-danger btn-lg" onclick="launchRestore()" id="restore-btn">
          <i class="fas fa-play"></i> Start Restore
        </button>
        <p style="color:var(--text3); font-size:12px; margin-top:8px;">⚠ Healthy running containers are skipped.</p>
      </div>
    </div>

    <div id="restore-log-wrapper" style="display:none; margin-top:20px;">
      <div class="card-header" style="margin-bottom:10px;">
        <div class="card-title"><i class="fas fa-terminal"></i> Restore Log</div>
        <span class="badge" id="restore-status-badge" style="background:rgba(59,130,246,0.15);color:var(--accent2);">Running…</span>
      </div>
      <div id="restore-log" class="log-console"></div>
      <div style="color:var(--text3);font-size:11px;margin-top:6px;font-family:var(--mono);" id="restore-elapsed"></div>
    </div>
  </div>
</div>

{# ═══════════════════════════════════════════════════════
   BACKUPS PAGE
═══════════════════════════════════════════════════════ #}
<div id="backups-page" class="page">
  <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="two-col">
      <div>
        <div class="section-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"><span class="backup-name">{{ b }}</span><button class="btn btn-ghost btn-sm" onclick="quickRestore('local','{{ b }}')">↩ Restore</button></div>
          {% else %}
          <div class="empty-state"><i class="fas fa-inbox"></i>No backups</div>
          {% endfor %}
        </div>
      </div>
      <div>
        <div class="section-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"><span class="backup-name">{{ b }}</span><button class="btn btn-ghost btn-sm" onclick="quickRestore('vm','{{ b }}')">↩ Restore</button></div>
          {% else %}
          <div class="empty-state"><i class="fas fa-inbox"></i>No VM backups</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

{# ═══════════════════════════════════════════════════════
   USERS PAGE
═══════════════════════════════════════════════════════ #}
<div id="users-page" class="page">
  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-user-plus"></i> Create New User</div>
    </div>
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">USERNAME</label>
        <input type="text" id="new-username" class="form-input" placeholder="e.g. secuser2">
      </div>
      <div class="form-group">
        <label class="form-label">PASSWORD (optional)</label>
        <input type="password" id="new-password" class="form-input">
      </div>
      <div class="form-group">
        <label class="form-label">DISK SIZE MB (creates dedicated virtual disk)</label>
        <input type="number" id="new-quota" class="form-input" placeholder="e.g. 10240 for 10GB">
      </div>
      <div class="form-group" style="justify-content:flex-end;">
        <label class="form-check" style="margin-bottom:8px;">
          <input type="checkbox" id="new-docker" checked>
          <span>Setup rootless Docker</span>
        </label>
        <button class="btn btn-primary" onclick="createUser()"><i class="fas fa-plus"></i> Create User</button>
      </div>
    </div>
    <div id="create-user-result" class="alert" style="margin-top:14px;"></div>
    <div id="create-user-log" class="log-console" style="display:none; margin-top:12px; max-height:200px;"></div>
  </div>

  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-users"></i> System Users</div>
      <button class="btn btn-ghost btn-sm" onclick="loadUsers()"><i class="fas fa-sync-alt"></i> Refresh</button>
    </div>
    <div class="users-grid" id="users-grid">
      {% for u in users %}
      <div class="user-card" onclick="loadUserContainers('{{ u.name }}')">
        <div class="user-card-top">
          <div class="user-avatar" style="background:{{ loop.index | colorize if colorize is defined else '#3b82f6' }}">{{ u.name[0].upper() }}</div>
          <div>
            <div class="user-name">{{ u.name }}</div>
            <div class="user-uid">uid {{ u.uid }}</div>
          </div>
        </div>
        <div class="user-tags">
          {% if u.has_docker %}<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>{% endif %}
          {% if u.linger %}<span class="user-tag linger">linger</span>{% endif %}
          {% if u.has_vdisk %}<span class="user-tag" style="background:rgba(34,211,238,0.12);color:var(--cyan);">💾 vdisk</span>{% endif %}
        </div>
        <div class="user-stats">
          <div class="user-stat">Disk: <strong>{{ u.disk_used }}</strong></div>
          <div class="user-stat">Ctrs: <strong>{{ u.container_count }}</strong></div>
        </div>
      </div>
      {% else %}
      <div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No non-system users</div>
      {% endfor %}
    </div>
  </div>

  <div class="card" id="user-detail-panel" style="display:none;">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-cube"></i> <span id="user-detail-title">Containers</span></div>
      <div style="display:flex;gap:8px;">
        <button class="btn btn-ghost btn-sm" style="color:var(--red);" onclick="deleteUser()"><i class="fas fa-trash"></i> Delete</button>
        <button class="btn btn-ghost btn-sm" onclick="document.getElementById('user-detail-panel').style.display='none'">✕</button>
      </div>
    </div>
    <div style="overflow-x:auto;">
      <table class="ct-table">
        <thead><tr><th>NAME</th><th>STATUS</th><th>IMAGE</th><th>PORTS</th></tr></thead>
        <tbody id="user-containers-body"></tbody>
      </table>
    </div>
    <div id="user-action-result" class="alert" style="margin-top:14px;"></div>
  </div>
</div>

{# ═══════════════════════════════════════════════════════
   SETTINGS PAGE
═══════════════════════════════════════════════════════ #}
<div id="settings-page" class="page">
  <div class="card">
    <div class="card-header"><div class="card-title"><i class="fas fa-sliders"></i> Platform Settings</div></div>
    <div style="max-width:460px; display:flex; flex-direction:column; gap:14px;">
      <div class="form-group"><label class="form-label">MAIN SERVER IP</label><input class="form-input" value="{{ main_server }}" readonly></div>
      <div class="form-group"><label class="form-label">PLATFORM HOST</label><input class="form-input" value="{{ 'Main Server' if running_on_main else 'VM (backup mode)' }}" readonly></div>
      <div class="form-group"><label class="form-label">VM BACKUP PATH</label><input class="form-input" value="/backups/main-server/" readonly></div>
      <div class="form-group"><label class="form-label">MAIN SERVER UPTIME</label><input class="form-input" id="settings-uptime" value="{{ system.uptime }}" readonly></div>
      <div class="form-group"><label class="form-label">DOCKER VERSION</label><input class="form-input" value="{{ system.docker_v }}" readonly></div>
      <button class="btn btn-ghost" onclick="refreshAll()"><i class="fas fa-sync-alt"></i> Refresh</button>
    </div>
  </div>
</div>

{# ═══════════════════════════════════════════════════════
   JAVASCRIPT
═══════════════════════════════════════════════════════ #}
<script>
// ── Fetch and display current hostname in restore target label ───
(async function() {
  try {
    const r = await fetch('/api/system');
    const d = await r.json();
    const el = document.getElementById('this-server-desc');
    if (el && d.hostname) el.textContent = d.hostname;
  } catch {}
})();

// ── Pages ───────────────────────────────────────────────
const PAGE_INFO = {
  'dashboard':  { title:'Dashboard',       sub:'{{ main_server }}' },
  'containers': { title:'All Containers',  sub:'main server · all users' },
  'restore':    { title:'Restore',         sub:'backup → target' },
  'backups':    { title:'Backups',         sub:'local & VM' },
  'users':      { title:'User Management', sub:'linux + docker' },
  'settings':   { title:'Settings',        sub:'platform config' },
};
function showPage(name) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  const page = document.getElementById(name+'-page');
  if (page) page.classList.add('active');
  const nav = document.querySelector(`[data-page="${name}"]`);
  if (nav) nav.classList.add('active');
  const info = PAGE_INFO[name] || {};
  document.getElementById('page-title').textContent    = info.title || name;
  document.getElementById('page-subtitle').textContent = info.sub   || '';
  if (name === 'containers') loadAllContainers();
  if (name === 'backups')    refreshBackupsList();
  if (name === 'users')      loadUsers();
}
document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('click', e => { e.preventDefault(); showPage(item.dataset.page); });
});

// ── Collapsible columns ─────────────────────────────────
const extraState = { app: false, all: false };
function toggleExtraColumns(prefix) {
  extraState[prefix] = !extraState[prefix];
  const show = extraState[prefix];
  document.querySelectorAll(`.${prefix}-extra`).forEach(el => {
    el.style.display = show ? '' : 'none';
  });
  const btn = document.getElementById(`${prefix}-toggle-btn`);
  if (btn) {
    btn.innerHTML = show
      ? '<i class="fas fa-eye-slash"></i> Show less'
      : '<i class="fas fa-eye"></i> Show more';
  }
}

// ── Container action (start/stop/restart) ───────────────
async function ctrAction(name, action, btn) {
  const origHTML = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

  try {
    const r = await fetch('/api/container/action', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, action })
    });
    const d = await r.json();
    btn.innerHTML = d.success ? '<i class="fas fa-check"></i>' : '<i class="fas fa-times"></i>';
    btn.style.opacity = '1';
    setTimeout(() => {
      btn.innerHTML = origHTML;
      btn.disabled = false;
      setTimeout(() => { refreshContainerStats(); loadAllContainers(); }, 2000);
    }, 1500);
  } catch (e) {
    btn.innerHTML = origHTML;
    btn.disabled = false;
  }
}

// ── Server status ────────────────────────────────────────
async function checkServerStatus() {
  try {
    const r = await fetch('/server/status');
    const d = await r.json();
    const dot  = document.getElementById('pulse-dot');
    const text = document.getElementById('server-status-text');
    if (d.status === 'online') {
      dot.className = 'pulse-dot online'; text.textContent = 'Online';
    } else {
      dot.className = 'pulse-dot offline'; text.textContent = 'Offline';
    }
  } catch {}
}

// ── System metrics ───────────────────────────────────────
async function refreshSystemMetrics() {
  try {
    const r = await fetch('/api/system');
    const d = await r.json();
    document.getElementById('m-cpu').innerHTML  = d.cpu_pct + '<span>%</span>';
    document.getElementById('m-mem').textContent = d.memory;
    document.getElementById('m-disk').textContent = d.disk;
    document.getElementById('m-load').textContent = d.load;
    document.getElementById('g-cpu').style.width  = Math.min(parseFloat(d.cpu_pct)||0, 100)+'%';
    document.getElementById('g-mem').style.width  = Math.min(parseFloat(d.mem_pct)||0, 100)+'%';
    document.getElementById('g-disk').style.width = Math.min(parseFloat(d.disk_pct)||0, 100)+'%';
    document.getElementById('uptime-chip').textContent = d.uptime;
    const su = document.getElementById('settings-uptime');
    if (su) su.value = d.uptime;
    // Update "this server" label in restore page with live hostname
    if (d.hostname) {
      const el = document.getElementById('this-server-desc');
      if (el) el.textContent = d.hostname;
    }
  } catch {}
}

// ── Container stats (live) ───────────────────────────────
async function refreshContainerStats() {
  try {
    const r = await fetch('/api/stats');
    const stats = await r.json();
    document.querySelectorAll('[data-stat]').forEach(el => {
      const name = el.dataset.ctr;
      const stat = el.dataset.stat;
      const s = stats[name];
      if (!s) return;
      if (stat === 'cpu')     el.textContent = s.cpu     || '—';
      if (stat === 'net')     el.textContent = s.net     || '—';
      if (stat === 'block')   el.textContent = s.block   || '—';
      if (stat === 'mem_pct') el.textContent = s.mem_pct || '—';
      if (stat === 'mem_bar') {
        const pct = parseFloat(s.mem_pct) || 0;
        el.style.width = Math.min(pct, 100) + '%';
        el.className = 'stat-bar-fill' + (pct > 85 ? ' crit' : pct > 65 ? ' warn' : '');
      }
    });
  } catch {}
}

// ── All containers ───────────────────────────────────────
function buildActionBtns(name) {
  return `<div class="action-btns">
    <button class="ctr-action-btn restart" title="Restart" onclick="ctrAction('${name}','restart',this)"><i class="fas fa-rotate-right"></i></button>
    <button class="ctr-action-btn stop"    title="Stop"    onclick="ctrAction('${name}','stop',this)"><i class="fas fa-stop"></i></button>
    <button class="ctr-action-btn start"   title="Start"   onclick="ctrAction('${name}','start',this)"><i class="fas fa-play"></i></button>
  </div>`;
}

async function loadAllContainers() {
  const body = document.getElementById('all-containers-body');
  const meta = document.getElementById('all-ctr-meta');
  body.innerHTML = '<tr><td colspan="10"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>';

  try {
    const [ctrRes, statRes] = await Promise.all([
      fetch('/api/containers/all'),
      fetch('/api/stats'),
    ]);
    const { containers, running } = await ctrRes.json();
    const stats = await statRes.json();

    meta.textContent = `${containers.length} total · ${running} running`;
    document.getElementById('nav-badge-containers').textContent = containers.length;

    if (!containers.length) {
      body.innerHTML = '<tr><td colspan="10"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>';
      return;
    }
    const showExtra = extraState.all;
    body.innerHTML = containers.map(c => {
      const up  = c.status.includes('Up');
      const s   = stats[c.name] || {};
      const pct = parseFloat(s.mem_pct) || 0;
      const cls = pct > 85 ? 'crit' : pct > 65 ? 'warn' : '';
      const ed  = showExtra ? '' : 'display:none;';
      return `<tr>
        <td class="ct-name">${c.name}</td>
        <td class="ct-owner">${c.owner}</td>
        <td>${up ? '<span class="badge badge-run">Running</span>' : '<span class="badge badge-stop">Stopped</span>'}</td>
        <td><span class="stat-pct">${s.cpu||'—'}</span></td>
        <td><div class="stat-bar-wrap">
          <div class="stat-bar-bg"><div class="stat-bar-fill ${cls}" style="width:${Math.min(pct,100)}%"></div></div>
          <span class="stat-pct">${s.mem_pct||'—'}</span>
        </div></td>
        <td><span class="stat-pct" style="color:var(--cyan)">${s.net||'—'}</span></td>
        <td class="col-extra all-extra" style="${ed}"><span class="stat-pct" style="color:var(--yellow)">${s.block||'—'}</span></td>
        <td class="col-extra all-extra ct-image" style="${ed}">${c.image}</td>
        <td class="col-extra all-extra ct-ports" style="${ed}">${c.ports||'—'}</td>
        <td>${buildActionBtns(c.name)}</td>
      </tr>`;
    }).join('');
  } catch (e) {
    body.innerHTML = `<tr><td colspan="10"><div class="empty-state">${e}</div></td></tr>`;
  }
}

// ── Backups ──────────────────────────────────────────────
async function refreshBackupsList() {
  try {
    const r = await fetch('/api/backups');
    const d = await r.json();
    renderBackupList(d.local, 'local-backup-list', 'local');
    renderBackupList(d.vm,    'vm-backup-list',    'vm');
    document.getElementById('stat-local-bk').textContent = d.local.length;
    document.getElementById('stat-vm-bk').textContent    = d.vm.length;
    const lo = document.getElementById('local-options');
    const vo = document.getElementById('vm-options');
    lo.innerHTML = d.local.length
      ? d.local.map(b => `<option value="${b}" data-source="local">${b}</option>`).join('')
      : '<option disabled>No local backups</option>';
    vo.innerHTML = d.vm.length
      ? d.vm.map(b => `<option value="${b}" data-source="vm">${b}</option>`).join('')
      : '<option disabled>No VM backups</option>';
  } catch {}
}
function renderBackupList(items, id, source) {
  const el = document.getElementById(id);
  if (!el) return;
  if (!items || !items.length) { el.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i>No backups</div>'; return; }
  el.innerHTML = items.map(b => `
    <div class="backup-item">
      <span class="backup-name">${b}</span>
      <button class="btn btn-ghost btn-sm" onclick="quickRestore('${source}','${b}')">↩ Restore</button>
    </div>`).join('');
}

// ── Users ────────────────────────────────────────────────
let selectedUser = null;
const userColors = ['#3b82f6','#a78bfa','#22c55e','#f59e0b','#ef4444','#22d3ee'];

async function loadUsers() {
  try {
    const r = await fetch('/api/users');
    const users = await r.json();
    document.getElementById('nav-badge-users').textContent = users.length;
    document.getElementById('stat-users').textContent = users.length;
    const grid = document.getElementById('users-grid');
    if (!users.length) { grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No users</div>'; return; }
    grid.innerHTML = users.map((u, i) => `
      <div class="user-card" onclick="loadUserContainers('${u.name}')">
        <div class="user-card-top">
          <div class="user-avatar" style="background:${userColors[i % userColors.length]}">${u.name[0].toUpperCase()}</div>
          <div><div class="user-name">${u.name}</div><div class="user-uid">uid ${u.uid}</div></div>
        </div>
        <div class="user-tags">
          ${u.has_docker ? '<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>' : ''}
          ${u.linger ? '<span class="user-tag linger">linger</span>' : ''}
          ${u.has_vdisk ? '<span class="user-tag" style="background:rgba(34,211,238,0.12);color:var(--cyan)">💾 vdisk</span>' : ''}
        </div>
        <div class="user-stats">
          <div class="user-stat">Disk: <strong>${u.disk_used}</strong></div>
          <div class="user-stat">Ctrs: <strong>${u.container_count}</strong></div>
        </div>
      </div>`).join('');
  } catch {}
}

async function loadUserContainers(username) {
  selectedUser = username;
  const panel = document.getElementById('user-detail-panel');
  panel.style.display = '';
  document.getElementById('user-detail-title').textContent = `${username}'s Containers`;
  document.getElementById('user-action-result').className = 'alert';
  const body = document.getElementById('user-containers-body');
  body.innerHTML = '<tr><td colspan="4"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i></div></td></tr>';
  try {
    const r = await fetch(`/api/users/${username}/containers`);
    const ctrs = await r.json();
    if (!ctrs.length) { body.innerHTML = '<tr><td colspan="4"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>'; return; }
    body.innerHTML = ctrs.map(c => {
      const up = c.status.includes('Up');
      return `<tr>
        <td class="ct-name">${c.name}</td>
        <td>${up ? '<span class="badge badge-run">Running</span>' : '<span class="badge badge-stop">Stopped</span>'}</td>
        <td class="ct-image">${c.image}</td>
        <td class="ct-ports">${c.ports||'—'}</td>
      </tr>`;
    }).join('');
    panel.scrollIntoView({ behavior: 'smooth' });
  } catch {}
}

async function createUser() {
  const username = document.getElementById('new-username').value.trim();
  const password = document.getElementById('new-password').value.trim();
  const quota    = document.getElementById('new-quota').value.trim();
  const docker   = document.getElementById('new-docker').checked;
  if (!username) { showAlert('create-user-result', 'error', 'Username required'); return; }
  const btn = event.target;
  btn.disabled = true; btn.textContent = 'Creating…';
  const logEl = document.getElementById('create-user-log');
  logEl.style.display = ''; logEl.textContent = '⏳ Setting up…\n';
  try {
    const r = await fetch('/api/users/create', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password: password||null, setup_docker: docker, disk_quota_mb: quota ? parseInt(quota) : null })
    });
    const d = await r.json();
    logEl.textContent = d.message || '';
    if (d.success) {
      showAlert('create-user-result', 'success', `✅ User "${username}" created`);
      document.getElementById('new-username').value = '';
      document.getElementById('new-password').value = '';
      document.getElementById('new-quota').value = '';
      loadUsers();
    } else {
      showAlert('create-user-result', 'error', `❌ ${d.message}`);
    }
  } catch (e) { showAlert('create-user-result', 'error', `${e}`); }
  finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-plus"></i> Create User'; }
}

async function deleteUser() {
  if (!selectedUser) return;
  if (!confirm(`Delete user "${selectedUser}"?`)) return;
  const removeHome = confirm(`Also delete /home/${selectedUser}?`);
  try {
    const r = await fetch('/api/users/delete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: selectedUser, remove_home: removeHome })
    });
    const d = await r.json();
    showAlert('user-action-result', d.success ? 'success' : 'error', d.message);
    if (d.success) { document.getElementById('user-detail-panel').style.display='none'; loadUsers(); }
  } catch (e) { showAlert('user-action-result', 'error', `${e}`); }
}

function showAlert(id, type, msg) {
  const el = document.getElementById(id);
  el.className = `alert alert-${type} show`;
  el.textContent = msg;
}

// ── Restore form ─────────────────────────────────────────
function updateBackupList() {
  const src = document.querySelector('input[name="backup_source"]:checked').value;
  document.getElementById('local-options').style.display = src==='local' ? '' : 'none';
  document.getElementById('vm-options').style.display    = src==='vm'    ? '' : 'none';
  const sel = document.getElementById('backup-file-select');
  for (let opt of sel.options) {
    if (!opt.disabled && opt.parentElement.style.display !== 'none') { opt.selected = true; break; }
  }
}
function toggleRemoteFields() {
  document.getElementById('remote-fields').style.display =
    document.querySelector('input[name="restore_target"]:checked').value === 'remote' ? '' : 'none';
}
function toggleAuthFields() {
  const m = document.querySelector('input[name="auth_method"]:checked').value;
  document.getElementById('key-field').style.display      = m==='key'      ? '' : 'none';
  document.getElementById('password-field').style.display = m==='password' ? '' : 'none';
}
function quickRestore(source, filename) {
  showPage('restore');
  document.querySelector(`input[name="backup_source"][value="${source}"]`).checked = true;
  updateBackupList();
  const sel = document.getElementById('backup-file-select');
  for (let opt of sel.options) { if (opt.value === filename) { opt.selected = true; break; } }
  document.querySelector('input[name="restore_target"][value="local"]').checked = true;
  toggleRemoteFields();
  window.scrollTo(0, 0);
}

let currentJobId = null, pollInterval = null;

async function launchRestore() {
  const src    = document.querySelector('input[name="backup_source"]:checked').value;
  const file   = document.getElementById('backup-file-select').value;
  const target = document.querySelector('input[name="restore_target"]:checked').value;
  if (!file || file === 'undefined') { alert('Select a backup file.'); return; }

  const payload = { backup_source: src, backup_file: file, target };
  if (target === 'remote') {
    payload.remote_ip   = document.getElementById('remote-ip').value.trim();
    payload.remote_port = document.getElementById('remote-port').value.trim() || '22';
    payload.remote_user = document.getElementById('remote-user').value.trim() || 'root';
    payload.auth_method = document.querySelector('input[name="auth_method"]:checked').value;
    if (payload.auth_method === 'key')
      payload.ssh_key_path = document.getElementById('ssh-key-path').value.trim();
    else
      payload.ssh_password = document.getElementById('ssh-password').value;
    if (!payload.remote_ip) { alert('Enter target IP.'); return; }
  }

  const tgtLabel = target === 'local'
    ? (document.getElementById('this-server-desc').textContent || 'this server')
    : `${payload.remote_ip}:${payload.remote_port||22}`;
  if (!confirm(`Restore "${file}" → ${tgtLabel}?`)) return;

  const btn = document.getElementById('restore-btn');
  btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting…';

  document.getElementById('restore-log-wrapper').style.display = '';
  document.getElementById('restore-log').innerHTML = '';
  const badge = document.getElementById('restore-status-badge');
  badge.style = 'background:rgba(59,130,246,0.15);color:var(--accent2)';
  badge.textContent = 'Running…';

  try {
    const res  = await fetch('/restore/start', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload) });
    const data = await res.json();
    if (data.error) { appendLog('❌ '+data.error, 'error'); btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore'; return; }
    currentJobId = data.job_id;
    pollRestore();
  } catch (e) { appendLog('❌ '+e, 'error'); btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore'; }
}

function pollRestore() {
  if (pollInterval) clearInterval(pollInterval);
  let lastLine = 0;
  pollInterval = setInterval(async () => {
    if (!currentJobId) return;
    try {
      const r = await fetch(`/restore/status/${currentJobId}`);
      const d = await r.json();
      d.log.slice(lastLine).forEach(l => appendLog(l));
      lastLine = d.log.length;
      document.getElementById('restore-elapsed').textContent = `⏱ ${d.elapsed}s`;
      if (d.status !== 'running') {
        clearInterval(pollInterval);
        const badge = document.getElementById('restore-status-badge');
        if (d.status === 'done') { badge.style='background:rgba(34,197,94,0.15);color:var(--green)'; badge.textContent='✅ Done'; }
        else                     { badge.style='background:rgba(239,68,68,0.15);color:var(--red)';   badge.textContent='❌ Error'; }
        const btn = document.getElementById('restore-btn');
        btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore';
      }
    } catch {}
  }, 1500);
}

function appendLog(line, type) {
  const el  = document.getElementById('restore-log');
  const div = document.createElement('div');
  div.className = 'log-line';
  if      (line.includes('✅')||type==='ok')    div.style.color='var(--green)';
  else if (line.includes('❌')||type==='error')  div.style.color='var(--red)';
  else if (line.includes('⚠️'))                  div.style.color='var(--yellow)';
  else if (line.includes('📌')||line.includes('STEP')) div.style.color='var(--accent2)';
  else if (line.includes('📤')||line.includes('🚀'))   div.style.color='var(--cyan)';
  div.textContent = line;
  el.appendChild(div);
  el.scrollTop = el.scrollHeight;
}

// ── Global refresh ───────────────────────────────────────
function refreshAll() {
  const btn = document.querySelector('.icon-btn');
  btn.classList.add('spinning');
  Promise.all([checkServerStatus(), refreshSystemMetrics(), refreshContainerStats()])
    .finally(() => btn.classList.remove('spinning'));
}

// ── Boot ─────────────────────────────────────────────────
checkServerStatus();
refreshSystemMetrics();
refreshContainerStats();
document.getElementById('nav-badge-users').textContent      = '{{ users|length }}';
document.getElementById('nav-badge-containers').textContent = '{{ containers|length }}';
setInterval(() => { refreshSystemMetrics(); refreshContainerStats(); }, 15000);
setInterval(checkServerStatus, 30000);
</script>

<style>
/* Container action buttons */
.action-btns { display:flex; gap:5px; align-items:center; }
.ctr-action-btn {
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px; border:none; cursor:pointer;
  font-size:11px;
  transition:background 0.15s, transform 0.1s, opacity 0.15s;
}
.ctr-action-btn:hover { transform:scale(1.12); }
.ctr-action-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }

.ctr-action-btn.restart {
  background:rgba(59,130,246,0.15); color:var(--accent2);
}
.ctr-action-btn.restart:hover { background:rgba(59,130,246,0.3); }

.ctr-action-btn.stop {
  background:rgba(239,68,68,0.12); color:var(--red);
}
.ctr-action-btn.stop:hover { background:rgba(239,68,68,0.25); }

.ctr-action-btn.start {
  background:rgba(34,197,94,0.12); color:var(--green);
}
.ctr-action-btn.start:hover { background:rgba(34,197,94,0.25); }

[data-theme="light"] .ctr-action-btn.restart { background:rgba(37,99,235,0.08); }
[data-theme="light"] .ctr-action-btn.stop    { background:rgba(220,38,38,0.08); }
[data-theme="light"] .ctr-action-btn.start   { background:rgba(22,163,74,0.08); }
</style>
{% endblock %}