'use strict';

// ============================================================
// OPS Dashboard — Vanilla JS Application
// ============================================================

// ---------------------------------------------------------------------------
// State
// ---------------------------------------------------------------------------
let allServices = [];
let currentPage = 'dashboard';
let drillLevel = 0;        // 0=projects, 1=environments, 2=services
let drillProject = null;
let drillEnv = null;
let refreshTimer = null;
const REFRESH_INTERVAL = 30000;

// Log modal state
let logModalProject = null;
let logModalEnv = null;
let logModalService = null;

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function formatBytes(bytes) {
  if (bytes == null || bytes === '') return '\u2014';
  const n = Number(bytes);
  if (isNaN(n) || n === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(Math.abs(n)) / Math.log(k));
  return (n / Math.pow(k, i)).toFixed(i === 0 ? 0 : 1) + ' ' + sizes[i];
}

function timeAgo(dateInput) {
  if (!dateInput) return '\u2014';
  const date = typeof dateInput === 'string' ? new Date(dateInput) : dateInput;
  if (isNaN(date)) return '\u2014';
  const secs = Math.floor((Date.now() - date.getTime()) / 1000);
  if (secs < 60) return secs + 's ago';
  if (secs < 3600) return Math.floor(secs / 60) + 'm ago';
  if (secs < 86400) return Math.floor(secs / 3600) + 'h ago';
  return Math.floor(secs / 86400) + 'd ago';
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

function statusDotClass(status, health) {
  const s = (status || '').toLowerCase();
  const h = (health || '').toLowerCase();
  if (s === 'up' && (h === 'healthy' || h === '')) return 'status-dot-green';
  if (s === 'up' && h === 'unhealthy') return 'status-dot-red';
  if (s === 'up' && h === 'starting') return 'status-dot-yellow';
  if (s === 'down' || s === 'exited') return 'status-dot-red';
  return 'status-dot-gray';
}

function badgeClass(status, health) {
  const s = (status || '').toLowerCase();
  const h = (health || '').toLowerCase();
  if (s === 'up' && (h === 'healthy' || h === '')) return 'badge-green';
  if (s === 'up' && h === 'unhealthy') return 'badge-red';
  if (s === 'up' && h === 'starting') return 'badge-yellow';
  if (s === 'down' || s === 'exited') return 'badge-red';
  return 'badge-gray';
}

function diskColorClass(pct) {
  const n = parseInt(pct);
  if (isNaN(n)) return 'disk-ok';
  if (n >= 90) return 'disk-danger';
  if (n >= 75) return 'disk-warn';
  return 'disk-ok';
}

// ---------------------------------------------------------------------------
// Auth
// ---------------------------------------------------------------------------
function getToken() {
  return localStorage.getItem('ops_token');
}

function doLogin() {
  const input = document.getElementById('login-token');
  const errEl = document.getElementById('login-error');
  const token = input.value.trim();
  if (!token) {
    errEl.textContent = 'Please enter a token';
    errEl.style.display = 'block';
    return;
  }
  errEl.style.display = 'none';

  // Validate token by calling the API
  fetch('/api/status/', { headers: { 'Authorization': 'Bearer ' + token } })
    .then(r => {
      if (!r.ok) throw new Error('Invalid token');
      return r.json();
    })
    .then(data => {
      localStorage.setItem('ops_token', token);
      allServices = data;
      document.getElementById('login-overlay').style.display = 'none';
      document.getElementById('app').style.display = 'flex';
      showPage('dashboard');
      startAutoRefresh();
    })
    .catch(() => {
      errEl.textContent = 'Invalid token. Try again.';
      errEl.style.display = 'block';
    });
}

function doLogout() {
  localStorage.removeItem('ops_token');
  stopAutoRefresh();
  document.getElementById('app').style.display = 'none';
  document.getElementById('login-overlay').style.display = 'flex';
  document.getElementById('login-token').value = '';
}

// ---------------------------------------------------------------------------
// API Helper
// ---------------------------------------------------------------------------
async function api(path, opts = {}) {
  const token = getToken();
  const headers = { ...(opts.headers || {}), 'Authorization': 'Bearer ' + token };
  const resp = await fetch(path, { ...opts, headers });
  if (resp.status === 401) {
    doLogout();
    throw new Error('Session expired');
  }
  if (!resp.ok) {
    const body = await resp.text();
    throw new Error(body || 'HTTP ' + resp.status);
  }
  const ct = resp.headers.get('content-type') || '';
  if (ct.includes('json')) return resp.json();
  return resp.text();
}

async function fetchStatus() {
  allServices = await api('/api/status/');
}

// ---------------------------------------------------------------------------
// Toast Notifications
// ---------------------------------------------------------------------------
function toast(message, type = 'info') {
  const container = document.getElementById('toast-container');
  const el = document.createElement('div');
  el.className = 'toast toast-' + type;
  el.innerHTML = `<span>${escapeHtml(message)}</span><span class="toast-dismiss" onclick="this.parentElement.remove()">&times;</span>`;
  container.appendChild(el);
  setTimeout(() => {
    el.classList.add('toast-out');
    setTimeout(() => el.remove(), 200);
  }, 4000);
}

// ---------------------------------------------------------------------------
// Sidebar & Navigation
// ---------------------------------------------------------------------------
function toggleSidebar() {
  document.getElementById('sidebar').classList.toggle('open');
  document.getElementById('mobile-overlay').classList.toggle('open');
}

function showPage(page) {
  currentPage = page;
  drillLevel = 0;
  drillProject = null;
  drillEnv = null;

  // Update sidebar active
  document.querySelectorAll('#sidebar-nav .sidebar-link').forEach(el => {
    el.classList.toggle('active', el.dataset.page === page);
  });

  // Close mobile sidebar
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('mobile-overlay').classList.remove('open');

  renderPage();
}

function renderPage() {
  const content = document.getElementById('page-content');
  content.innerHTML = '<div style="text-align:center;padding:3rem;"><div class="spinner spinner-lg"></div></div>';

  switch (currentPage) {
    case 'dashboard': renderDashboard(); break;
    case 'services':  renderServicesFlat(); break;
    case 'backups':   renderBackups(); break;
    case 'system':    renderSystem(); break;
    case 'restore':   renderRestore(); break;
    default:          renderDashboard();
  }
}

function refreshCurrentPage() {
  showRefreshSpinner();
  fetchStatus()
    .then(() => renderPage())
    .catch(e => toast('Refresh failed: ' + e.message, 'error'))
    .finally(() => hideRefreshSpinner());
}

// ---------------------------------------------------------------------------
// Auto-refresh
// ---------------------------------------------------------------------------
function startAutoRefresh() {
  stopAutoRefresh();
  refreshTimer = setInterval(() => {
    fetchStatus()
      .then(() => {
        if (currentPage === 'dashboard' || currentPage === 'services') renderPage();
      })
      .catch(() => {});
  }, REFRESH_INTERVAL);
}

function stopAutoRefresh() {
  if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
}

function showRefreshSpinner() {
  document.getElementById('refresh-indicator').classList.remove('paused');
}
function hideRefreshSpinner() {
  document.getElementById('refresh-indicator').classList.add('paused');
}

// ---------------------------------------------------------------------------
// Breadcrumbs
// ---------------------------------------------------------------------------
function updateBreadcrumbs() {
  const bc = document.getElementById('breadcrumbs');
  let html = '';

  if (currentPage === 'dashboard') {
    if (drillLevel === 0) {
      html = '<span class="current">Dashboard</span>';
    } else if (drillLevel === 1) {
      html = '<a onclick="drillBack(0)">Dashboard</a><span class="sep">/</span><span class="current">' + escapeHtml(drillProject) + '</span>';
    } else if (drillLevel === 2) {
      html = '<a onclick="drillBack(0)">Dashboard</a><span class="sep">/</span><a onclick="drillBack(1)">' + escapeHtml(drillProject) + '</a><span class="sep">/</span><span class="current">' + escapeHtml(drillEnv) + '</span>';
    }
  } else {
    const names = { services: 'Services', backups: 'Backups', system: 'System', restore: 'Restore' };
    html = '<span class="current">' + (names[currentPage] || currentPage) + '</span>';
  }

  bc.innerHTML = html;
}

function drillBack(level) {
  if (level === 0) {
    drillLevel = 0;
    drillProject = null;
    drillEnv = null;
  } else if (level === 1) {
    drillLevel = 1;
    drillEnv = null;
  }
  renderDashboard();
}

// ---------------------------------------------------------------------------
// Dashboard — 3-level Drill
// ---------------------------------------------------------------------------
function renderDashboard() {
  currentPage = 'dashboard';
  if (drillLevel === 0) renderProjects();
  else if (drillLevel === 1) renderEnvironments();
  else if (drillLevel === 2) renderServices();
  updateBreadcrumbs();
}

function renderProjects() {
  const content = document.getElementById('page-content');
  const projects = groupByProject(allServices);

  // Summary stats
  const totalUp = allServices.filter(s => s.status === 'Up').length;
  const totalDown = allServices.length - totalUp;

  let html = '<div class="page-enter" style="padding:0;">';

  // Summary bar
  html += '<div class="stat-grid" style="margin-bottom:1.5rem;">';
  html += statCard('Projects', Object.keys(projects).length, '#3b82f6');
  html += statCard('Services', allServices.length, '#8b5cf6');
  html += statCard('Healthy', totalUp, '#10b981');
  html += statCard('Down', totalDown, totalDown > 0 ? '#ef4444' : '#6b7280');
  html += '</div>';

  // Project cards
  html += '<div class="project-grid">';
  for (const [name, proj] of Object.entries(projects)) {
    const upCount = proj.services.filter(s => s.status === 'Up').length;
    const total = proj.services.length;
    const allUp = upCount === total;
    const envNames = [...new Set(proj.services.map(s => s.env))];

    html += `<div class="card card-clickable" onclick="drillToProject('${escapeHtml(name)}')">
      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
        <span class="status-dot ${allUp ? 'status-dot-green' : 'status-dot-red'}"></span>
        <span style="font-weight:600;font-size:1.0625rem;color:#f3f4f6;">${escapeHtml(name)}</span>
        <span style="margin-left:auto;font-size:0.8125rem;color:#6b7280;">${total} services</span>
      </div>
      <div style="display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.5rem;">
        ${envNames.map(e => `<span class="badge badge-blue">${escapeHtml(e)}</span>`).join('')}
      </div>
      <div style="font-size:0.8125rem;color:#9ca3af;">${upCount}/${total} healthy</div>
    </div>`;
  }
  html += '</div></div>';
  content.innerHTML = html;
}

function renderEnvironments() {
  const content = document.getElementById('page-content');
  const projServices = allServices.filter(s => s.project === drillProject);
  const envs = groupByEnv(projServices);

  let html = '<div class="page-enter" style="padding:0;">';
  html += '<div class="env-grid">';

  for (const [envName, services] of Object.entries(envs)) {
    const upCount = services.filter(s => s.status === 'Up').length;
    const total = services.length;
    const allUp = upCount === total;

    html += `<div class="card card-clickable" onclick="drillToEnv('${escapeHtml(envName)}')">
      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;">
        <span class="status-dot ${allUp ? 'status-dot-green' : 'status-dot-red'}"></span>
        <span style="font-weight:600;font-size:1.0625rem;color:#f3f4f6;">${escapeHtml(envName).toUpperCase()}</span>
        <span style="margin-left:auto;font-size:0.8125rem;color:#6b7280;">${total} services</span>
      </div>
      <div style="display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:0.5rem;">
        ${services.map(s => `<span class="badge ${badgeClass(s.status, s.health)}">${escapeHtml(s.service)}</span>`).join('')}
      </div>
      <div style="font-size:0.8125rem;color:#9ca3af;">${upCount}/${total} healthy</div>
    </div>`;
  }

  html += '</div></div>';
  content.innerHTML = html;
}

function renderServices() {
  const content = document.getElementById('page-content');
  const services = allServices.filter(s => s.project === drillProject && s.env === drillEnv);

  let html = '<div class="page-enter" style="padding:0;">';
  html += '<div class="service-grid">';

  for (const svc of services) {
    html += serviceCard(svc);
  }

  html += '</div></div>';
  content.innerHTML = html;
}

function drillToProject(name) {
  drillProject = name;
  drillLevel = 1;
  renderDashboard();
}

function drillToEnv(name) {
  drillEnv = name;
  drillLevel = 2;
  renderDashboard();
}

// ---------------------------------------------------------------------------
// Service Card (shared component)
// ---------------------------------------------------------------------------
function serviceCard(svc) {
  const proj = escapeHtml(svc.project);
  const env = escapeHtml(svc.env);
  const service = escapeHtml(svc.service);
  const bc = badgeClass(svc.status, svc.health);
  const dc = statusDotClass(svc.status, svc.health);

  return `<div class="card">
    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
      <span class="status-dot ${dc}"></span>
      <span style="font-weight:600;color:#f3f4f6;">${service}</span>
      <span class="badge ${bc}" style="margin-left:auto;">${escapeHtml(svc.status)}</span>
    </div>
    <div style="font-size:0.8125rem;color:#9ca3af;margin-bottom:0.75rem;">
      Health: ${escapeHtml(svc.health || 'n/a')} &middot; Uptime: ${escapeHtml(svc.uptime || 'n/a')}
    </div>
    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
      <button class="btn btn-ghost btn-xs" onclick="viewLogs('${proj}','${env}','${service}')">Logs</button>
      <button class="btn btn-warning btn-xs" onclick="restartService('${proj}','${env}','${service}')">Restart</button>
    </div>
  </div>`;
}

function statCard(label, value, color) {
  return `<div class="card" style="text-align:center;">
    <div style="font-size:1.75rem;font-weight:700;color:${color};">${value}</div>
    <div style="font-size:0.8125rem;color:#9ca3af;">${label}</div>
  </div>`;
}

// ---------------------------------------------------------------------------
// Services (flat list page)
// ---------------------------------------------------------------------------
function renderServicesFlat() {
  updateBreadcrumbs();
  const content = document.getElementById('page-content');

  if (allServices.length === 0) {
    content.innerHTML = '<div style="text-align:center;padding:3rem;color:#6b7280;">No services found.</div>';
    return;
  }

  let html = '<div class="page-enter" style="padding:0;">';
  html += '<div class="table-wrapper"><table class="ops-table">';
  html += '<thead><tr><th>Project</th><th>Env</th><th>Service</th><th>Status</th><th>Health</th><th>Uptime</th><th>Actions</th></tr></thead>';
  html += '<tbody>';

  for (const svc of allServices) {
    const bc = badgeClass(svc.status, svc.health);
    const proj = escapeHtml(svc.project);
    const env = escapeHtml(svc.env);
    const service = escapeHtml(svc.service);

    html += `<tr>
      <td style="font-weight:500;">${proj}</td>
      <td><span class="badge badge-blue">${env}</span></td>
      <td class="mono">${service}</td>
      <td><span class="badge ${bc}">${escapeHtml(svc.status)}</span></td>
      <td>${escapeHtml(svc.health || 'n/a')}</td>
      <td>${escapeHtml(svc.uptime || 'n/a')}</td>
      <td style="white-space:nowrap;">
        <button class="btn btn-ghost btn-xs" onclick="viewLogs('${proj}','${env}','${service}')">Logs</button>
        <button class="btn btn-warning btn-xs" onclick="restartService('${proj}','${env}','${service}')">Restart</button>
      </td>
    </tr>`;
  }

  html += '</tbody></table></div></div>';
  content.innerHTML = html;
}

// ---------------------------------------------------------------------------
// Backups Page
// ---------------------------------------------------------------------------
async function renderBackups() {
  updateBreadcrumbs();
  const content = document.getElementById('page-content');

  try {
    const [local, offsite] = await Promise.all([
      api('/api/backups/'),
      api('/api/backups/offsite').catch(() => []),
    ]);

    let html = '<div class="page-enter" style="padding:0;">';

    // Quick backup buttons
    html += '<div style="margin-bottom:1.5rem;">';
    html += '<h2 style="font-size:1.125rem;font-weight:600;color:#f3f4f6;margin-bottom:0.75rem;">Create Backup</h2>';
    html += '<div style="display:flex;flex-wrap:wrap;gap:0.5rem;">';
    for (const proj of ['mdf', 'seriousletter']) {
      for (const env of ['dev', 'int', 'prod']) {
        html += `<button class="btn btn-ghost btn-sm" onclick="createBackup('${proj}','${env}')">${proj}/${env}</button>`;
      }
    }
    html += '</div></div>';

    // Local backups
    html += '<h2 style="font-size:1.125rem;font-weight:600;color:#f3f4f6;margin-bottom:0.75rem;">Local Backups</h2>';
    if (local.length === 0) {
      html += '<div class="card" style="color:#6b7280;">No local backups found.</div>';
    } else {
      html += '<div class="table-wrapper"><table class="ops-table">';
      html += '<thead><tr><th>Project</th><th>Env</th><th>Date</th><th>Size</th><th>Files</th></tr></thead><tbody>';
      for (const b of local) {
        html += `<tr>
          <td>${escapeHtml(b.project || '')}</td>
          <td><span class="badge badge-blue">${escapeHtml(b.env || b.environment || '')}</span></td>
          <td>${escapeHtml(b.date || b.timestamp || '')}</td>
          <td>${escapeHtml(b.size || '')}</td>
          <td class="mono" style="font-size:0.75rem;">${escapeHtml(b.file || b.files || '')}</td>
        </tr>`;
      }
      html += '</tbody></table></div>';
    }

    // Offsite backups
    html += '<h2 style="font-size:1.125rem;font-weight:600;color:#f3f4f6;margin:1.5rem 0 0.75rem;">Offsite Backups</h2>';
    if (offsite.length === 0) {
      html += '<div class="card" style="color:#6b7280;">No offsite backups found.</div>';
    } else {
      html += '<div class="table-wrapper"><table class="ops-table">';
      html += '<thead><tr><th>Project</th><th>Env</th><th>Date</th><th>Size</th></tr></thead><tbody>';
      for (const b of offsite) {
        html += `<tr>
          <td>${escapeHtml(b.project || '')}</td>
          <td><span class="badge badge-blue">${escapeHtml(b.env || b.environment || '')}</span></td>
          <td>${escapeHtml(b.date || b.timestamp || '')}</td>
          <td>${escapeHtml(b.size || '')}</td>
        </tr>`;
      }
      html += '</tbody></table></div>';
    }

    html += '</div>';
    content.innerHTML = html;
  } catch (e) {
    content.innerHTML = '<div class="card" style="color:#f87171;">Failed to load backups: ' + escapeHtml(e.message) + '</div>';
  }
}

// ---------------------------------------------------------------------------
// System Page
// ---------------------------------------------------------------------------
async function renderSystem() {
  updateBreadcrumbs();
  const content = document.getElementById('page-content');

  try {
    const [disk, health, timers, info] = await Promise.all([
      api('/api/system/disk').catch(e => ({ filesystems: [], raw: e.message })),
      api('/api/system/health').catch(e => ({ checks: [], raw: e.message })),
      api('/api/system/timers').catch(e => ({ timers: [], raw: e.message })),
      api('/api/system/info').catch(e => ({ uptime: 'error', load: 'error' })),
    ]);

    let html = '<div class="page-enter" style="padding:0;">';

    // System info bar
    html += '<div class="stat-grid" style="margin-bottom:1.5rem;">';
    html += statCard('Uptime', info.uptime || 'n/a', '#3b82f6');
    html += statCard('Load', info.load || 'n/a', '#8b5cf6');
    html += '</div>';

    // Disk usage
    html += '<h2 style="font-size:1.125rem;font-weight:600;color:#f3f4f6;margin-bottom:0.75rem;">Disk Usage</h2>';
    if (disk.filesystems && disk.filesystems.length > 0) {
      html += '<div style="display:grid;gap:0.75rem;margin-bottom:1.5rem;">';
      for (const fs of disk.filesystems) {
        const pct = parseInt(fs.use_percent) || 0;
        html += `<div class="card">
          <div style="display:flex;justify-content:space-between;margin-bottom:0.5rem;">
            <span class="mono" style="font-size:0.8125rem;">${escapeHtml(fs.mount || fs.filesystem)}</span>
            <span style="font-size:0.8125rem;color:#9ca3af;">${escapeHtml(fs.used)} / ${escapeHtml(fs.size)} (${escapeHtml(fs.use_percent)})</span>
          </div>
          <div class="progress-bar-track">
            <div class="progress-bar-fill ${diskColorClass(fs.use_percent)}" style="width:${pct}%;"></div>
          </div>
        </div>`;
      }
      html += '</div>';
    } else {
      html += '<div class="card" style="color:#6b7280;">No disk data available.</div>';
    }

    // Health checks
    html += '<h2 style="font-size:1.125rem;font-weight:600;color:#f3f4f6;margin-bottom:0.75rem;">Health Checks</h2>';
    if (health.checks && health.checks.length > 0) {
      html += '<div style="display:grid;gap:0.5rem;margin-bottom:1.5rem;">';
      for (const c of health.checks) {
        const st = (c.status || '').toUpperCase();
        const cls = st === 'OK' ? 'badge-green' : st === 'FAIL' ? 'badge-red' : 'badge-gray';
        html += `<div class="card" style="display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;">
          <span class="badge ${cls}">${escapeHtml(st)}</span>
          <span style="font-size:0.875rem;">${escapeHtml(c.check)}</span>
        </div>`;
      }
      html += '</div>';
    } else {
      html += '<div class="card" style="color:#6b7280;">No health check data.</div>';
    }

    // Timers
    html += '<h2 style="font-size:1.125rem;font-weight:600;color:#f3f4f6;margin-bottom:0.75rem;">Systemd Timers</h2>';
    if (timers.timers && timers.timers.length > 0) {
      html += '<div class="table-wrapper"><table class="ops-table">';
      html += '<thead><tr><th>Unit</th><th>Next</th><th>Left</th><th>Last</th><th>Passed</th></tr></thead><tbody>';
      for (const t of timers.timers) {
        html += `<tr>
          <td class="mono">${escapeHtml(t.unit)}</td>
          <td>${escapeHtml(t.next)}</td>
          <td>${escapeHtml(t.left)}</td>
          <td>${escapeHtml(t.last)}</td>
          <td>${escapeHtml(t.passed)}</td>
        </tr>`;
      }
      html += '</tbody></table></div>';
    } else {
      html += '<div class="card" style="color:#6b7280;">No timers found.</div>';
    }

    html += '</div>';
    content.innerHTML = html;
  } catch (e) {
    content.innerHTML = '<div class="card" style="color:#f87171;">Failed to load system info: ' + escapeHtml(e.message) + '</div>';
  }
}

// ---------------------------------------------------------------------------
// Restore Page
// ---------------------------------------------------------------------------
function renderRestore() {
  updateBreadcrumbs();
  const content = document.getElementById('page-content');

  let html = '<div class="page-enter" style="padding:0;">';
  html += '<h2 style="font-size:1.125rem;font-weight:600;color:#f3f4f6;margin-bottom:0.75rem;">Restore Backup</h2>';
  html += '<div class="card" style="max-width:480px;">';

  html += '<div style="margin-bottom:1rem;">';
  html += '<label class="form-label">Project</label>';
  html += '<select id="restore-project" class="form-select"><option value="mdf">mdf</option><option value="seriousletter">seriousletter</option></select>';
  html += '</div>';

  html += '<div style="margin-bottom:1rem;">';
  html += '<label class="form-label">Environment</label>';
  html += '<select id="restore-env" class="form-select"><option value="dev">dev</option><option value="int">int</option><option value="prod">prod</option></select>';
  html += '</div>';

  html += '<div style="margin-bottom:1rem;">';
  html += '<label class="form-label">Source</label>';
  html += '<select id="restore-source" class="form-select"><option value="local">Local</option><option value="offsite">Offsite</option></select>';
  html += '</div>';

  html += '<div style="margin-bottom:1rem;">';
  html += '<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:#9ca3af;">';
  html += '<input type="checkbox" id="restore-dry" checked> Dry run (preview only)';
  html += '</label>';
  html += '</div>';

  html += '<button class="btn btn-danger" onclick="startRestore()">Start Restore</button>';
  html += '</div>';

  html += '<div id="restore-output" style="display:none;margin-top:1rem;">';
  html += '<h3 style="font-size:1rem;font-weight:600;color:#f3f4f6;margin-bottom:0.5rem;">Output</h3>';
  html += '<div id="restore-terminal" class="terminal" style="max-height:400px;"></div>';
  html += '</div>';

  html += '</div>';
  content.innerHTML = html;
}

async function startRestore() {
  const project = document.getElementById('restore-project').value;
  const env = document.getElementById('restore-env').value;
  const source = document.getElementById('restore-source').value;
  const dryRun = document.getElementById('restore-dry').checked;

  if (!confirm(`Restore ${project}/${env} from ${source}${dryRun ? ' (dry run)' : ''}? This may overwrite data.`)) return;

  const outputDiv = document.getElementById('restore-output');
  const terminal = document.getElementById('restore-terminal');
  outputDiv.style.display = 'block';
  terminal.textContent = 'Starting restore...\n';

  const url = `/api/restore/${project}/${env}?source=${source}&dry_run=${dryRun}&token=${encodeURIComponent(getToken())}`;
  const evtSource = new EventSource(url);

  evtSource.onmessage = function(e) {
    const data = JSON.parse(e.data);
    if (data.done) {
      evtSource.close();
      terminal.textContent += data.success ? '\n--- Restore complete ---\n' : '\n--- Restore FAILED ---\n';
      toast(data.success ? 'Restore completed' : 'Restore failed', data.success ? 'success' : 'error');
      return;
    }
    if (data.line) {
      terminal.textContent += data.line + '\n';
      terminal.scrollTop = terminal.scrollHeight;
    }
  };

  evtSource.onerror = function() {
    evtSource.close();
    terminal.textContent += '\n--- Connection lost ---\n';
    toast('Restore connection lost', 'error');
  };
}

// ---------------------------------------------------------------------------
// Service Actions
// ---------------------------------------------------------------------------
async function restartService(project, env, service) {
  if (!confirm(`Restart ${service} in ${project}/${env}?`)) return;

  toast('Restarting ' + service + '...', 'info');
  try {
    const result = await api(`/api/services/restart/${project}/${env}/${service}`, { method: 'POST' });
    toast(result.message || 'Restarted successfully', 'success');
    setTimeout(() => refreshCurrentPage(), 3000);
  } catch (e) {
    toast('Restart failed: ' + e.message, 'error');
  }
}

async function viewLogs(project, env, service) {
  logModalProject = project;
  logModalEnv = env;
  logModalService = service;

  document.getElementById('log-modal-title').textContent = `Logs: ${project}/${env}/${service}`;
  document.getElementById('log-modal-content').textContent = 'Loading...';
  document.getElementById('log-modal').style.display = 'flex';

  await refreshLogs();
}

async function refreshLogs() {
  if (!logModalProject) return;
  try {
    const data = await api(`/api/services/logs/${logModalProject}/${logModalEnv}/${logModalService}?lines=200`);
    const terminal = document.getElementById('log-modal-content');
    terminal.textContent = data.logs || 'No logs available.';
    terminal.scrollTop = terminal.scrollHeight;
  } catch (e) {
    document.getElementById('log-modal-content').textContent = 'Error loading logs: ' + e.message;
  }
}

function closeLogModal() {
  document.getElementById('log-modal').style.display = 'none';
  logModalProject = null;
  logModalEnv = null;
  logModalService = null;
}

// ---------------------------------------------------------------------------
// Backup Actions
// ---------------------------------------------------------------------------
async function createBackup(project, env) {
  if (!confirm(`Create backup for ${project}/${env}?`)) return;
  toast('Creating backup for ' + project + '/' + env + '...', 'info');
  try {
    await api(`/api/backups/${project}/${env}`, { method: 'POST' });
    toast('Backup created for ' + project + '/' + env, 'success');
    if (currentPage === 'backups') renderBackups();
  } catch (e) {
    toast('Backup failed: ' + e.message, 'error');
  }
}

// ---------------------------------------------------------------------------
// Data Grouping
// ---------------------------------------------------------------------------
function groupByProject(services) {
  const map = {};
  for (const s of services) {
    const key = s.project || 'other';
    if (!map[key]) map[key] = { name: key, services: [] };
    map[key].services.push(s);
  }
  return map;
}

function groupByEnv(services) {
  const map = {};
  for (const s of services) {
    const key = s.env || 'default';
    if (!map[key]) map[key] = [];
    map[key].push(s);
  }
  return map;
}

// ---------------------------------------------------------------------------
// Init
// ---------------------------------------------------------------------------
(function init() {
  const token = getToken();
  if (token) {
    // Validate and load
    fetch('/api/status/', { headers: { 'Authorization': 'Bearer ' + token } })
      .then(r => {
        if (!r.ok) throw new Error('Invalid token');
        return r.json();
      })
      .then(data => {
        allServices = data;
        document.getElementById('login-overlay').style.display = 'none';
        document.getElementById('app').style.display = 'flex';
        showPage('dashboard');
        startAutoRefresh();
      })
      .catch(() => {
        localStorage.removeItem('ops_token');
        document.getElementById('login-overlay').style.display = 'flex';
      });
  }

  // ESC to close modals
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
      closeLogModal();
    }
  });
})();