{% extends "base.html" %}
{% block title %}System — Neto{% endblock %}

{% block content %}
<div class="page-title">
  System
  <div class="controls" style="display:inline-flex;margin-left:16px;margin-bottom:0">
    <label>Window:</label>
    <select id="hours-sel">
      {% for h, l in [(1,'1h'),(6,'6h'),(12,'12h'),(24,'24h'),(48,'48h'),(168,'7 days')] %}
        <option value="{{ h }}" {% if h == hours %}selected{% endif %}>{{ l }}</option>
      {% endfor %}
    </select>
  </div>
</div>

<!-- Live stat cards -->
<div class="stat-grid" id="live-stats">
  <div class="stat-card" id="card-cpu">
    <div class="label">CPU Usage</div>
    <div class="value" id="val-cpu">—</div>
    <div class="sub">current</div>
  </div>
  <div class="stat-card" id="card-mem">
    <div class="label">Memory</div>
    <div class="value" id="val-mem">—</div>
    <div class="sub" id="sub-mem">used / total</div>
  </div>
  <div class="stat-card" id="card-disk">
    <div class="label">Disk (root)</div>
    <div class="value" id="val-disk">—</div>
    <div class="sub" id="sub-disk">used / total</div>
  </div>
  <div class="stat-card" id="card-temp">
    <div class="label">CPU Temperature</div>
    <div class="value" id="val-temp">—</div>
    <div class="sub">°C</div>
  </div>
</div>

<!-- Charts -->
<div class="chart-grid">
  <div class="chart-wrap">
    <h4>CPU usage (%)</h4>
    <canvas id="c-cpu" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Memory usage (%)</h4>
    <canvas id="c-mem" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>CPU temperature (°C)</h4>
    <canvas id="c-temp" height="180"></canvas>
  </div>
  <div class="chart-wrap">
    <h4>Disk usage (%)</h4>
    <canvas id="c-disk" height="180"></canvas>
  </div>
</div>


<!-- Pi hardware info -->
<div class="card" style="margin-bottom:20px">
  <h3 style="margin-bottom:18px">🍓 Pi hardware</h3>
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0">
    {% if pi_info.model %}
    <div style="padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:12px">
      <span style="color:var(--muted);font-size:13px;min-width:120px">Model</span>
      <span style="font-size:13px;font-weight:500">{{ pi_info.model }}</span>
    </div>
    {% endif %}
    {% if pi_info.serial %}
    <div style="padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:12px">
      <span style="color:var(--muted);font-size:13px;min-width:120px">Serial</span>
      <code style="font-size:12px">{{ pi_info.serial }}</code>
    </div>
    {% endif %}
    {% if pi_info.os %}
    <div style="padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:12px">
      <span style="color:var(--muted);font-size:13px;min-width:120px">OS</span>
      <span style="font-size:13px">{{ pi_info.os }}</span>
    </div>
    {% endif %}
    {% if pi_info.arch %}
    <div style="padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:12px">
      <span style="color:var(--muted);font-size:13px;min-width:120px">Architecture</span>
      <span style="font-size:13px">{{ pi_info.arch }}</span>
    </div>
    {% endif %}
    {% if pi_info.eth_mac %}
    <div style="padding:10px 0;border-bottom:1px solid var(--border);display:flex;gap:12px">
      <span style="color:var(--muted);font-size:13px;min-width:120px">Ethernet MAC</span>
      <code style="font-size:12px">{{ pi_info.eth_mac }}</code>
    </div>
    {% endif %}
    {% if pi_info.wifi_mac %}
    <div style="padding:10px 0;display:flex;gap:12px">
      <span style="color:var(--muted);font-size:13px;min-width:120px">WiFi MAC</span>
      <code style="font-size:12px">{{ pi_info.wifi_mac }}</code>
    </div>
    {% endif %}
  </div>
</div>

<!-- Hostname -->
<div class="card" style="margin-bottom:20px">
  <h3 style="margin-bottom:6px">🏷️ Hostname</h3>
  <p style="font-size:13px;color:var(--muted);margin-bottom:16px">
    Current hostname: <code>{{ pi_info.hostname or 'unknown' }}</code>
    &nbsp;·&nbsp; Accessible at <code>{{ pi_info.hostname or 'neto' }}.local</code>
  </p>
  {% if not demo_mode %}
  <form method="post" action="/system/hostname" style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap">
    <div>
      <label style="font-size:12px;color:var(--muted);display:block;margin-bottom:4px">New hostname</label>
      <input type="text" name="hostname" placeholder="neto" value="{{ pi_info.hostname or '' }}"
             pattern="[a-zA-Z0-9\-]+" title="Letters, numbers and hyphens only"
             style="background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:6px;font-size:14px;width:200px">
    </div>
    <button type="submit" style="background:var(--accent);color:#fff;border:none;padding:8px 18px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer">
      Change hostname
    </button>
  </form>
  <p style="font-size:12px;color:var(--muted);margin-top:10px">A reboot is required for the new hostname to take effect everywhere.</p>
  {% endif %}
</div>

<!-- Time & Date -->
<div class="card" style="margin-top:24px">
  <h3 style="margin-bottom:4px">Time &amp; Date</h3>
  <p style="font-size:13px;color:var(--muted);margin-bottom:16px">Accurate time is important for test timestamps. The Pi syncs via NTP when connected to the internet.</p>
  <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px;font-size:13px">
    <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 16px">
      <div style="color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px">Current time</div>
      <div style="font-weight:600;font-family:monospace" id="sys-time">{{ sys_time }}</div>
    </div>
    <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 16px">
      <div style="color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px">Timezone</div>
      <div style="font-weight:600" id="sys-tz">{{ sys_tz }}</div>
    </div>
    <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 16px">
      <div style="color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px">NTP sync</div>
      <div style="font-weight:600;color:{% if ntp_synced %}var(--green){% else %}var(--red){% endif %}">
        {% if ntp_synced %}✓ Synchronised{% else %}✗ Not synced{% endif %}
      </div>
    </div>
  </div>

  <form method="post" action="/system/time" style="max-width:600px">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
      <div>
        <label style="display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:5px">Timezone</label>
        <select name="timezone" style="width:100%;border:1px solid var(--border);border-radius:7px;padding:9px 13px;font-size:13px;font-family:var(--font);background:var(--bg)">
          {% for tz in timezones %}
          <option value="{{ tz }}" {% if tz == sys_tz %}selected{% endif %}>{{ tz }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label style="display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:5px">NTP server</label>
        <input type="text" name="ntp_server" value="{{ ntp_server }}"
               placeholder="pool.ntp.org"
               style="width:100%;border:1px solid var(--border);border-radius:7px;padding:9px 13px;font-size:13px;font-family:var(--font);background:var(--bg)">
      </div>
    </div>
    <div style="margin-bottom:14px">
      <label style="display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:5px">Set time manually (leave blank to use NTP)</label>
      <input type="datetime-local" name="manual_time"
             style="border:1px solid var(--border);border-radius:7px;padding:9px 13px;font-size:13px;font-family:var(--font);background:var(--bg)">
      <span style="font-size:12px;color:var(--muted);margin-left:8px">Only use this if the Pi has no internet access</span>
    </div>
    <button type="submit"
      style="background:var(--accent);color:#fff;border:none;padding:9px 20px;border-radius:7px;cursor:pointer;font-size:14px;font-weight:500;font-family:var(--font)">
      Apply time settings
    </button>
    <a href="/system/time/resync" style="display:inline-flex;align-items:center;margin-left:10px;background:#f1f5f9;border:1px solid var(--border);color:var(--text);padding:9px 20px;border-radius:7px;font-size:14px;font-weight:500;text-decoration:none">
      ↺ Force NTP resync
    </a>
  </form>
</div>

<!-- Power controls -->
<div class="card" style="margin-top:24px">
  <h3 style="margin-bottom:14px">Power</h3>
  <div style="display:flex;gap:12px;flex-wrap:wrap">
    <button onclick="restartService()"
      style="background:#eff6ff;border:1px solid #93c5fd;color:#1d4ed8;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;font-family:var(--font)">
      ↺ Restart web service
    </button>
    <button onclick="confirmAction('reboot')"
      style="background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;font-family:var(--font)">
      🔄 Reboot Pi
    </button>
    <button onclick="confirmAction('shutdown')"
      style="background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;font-family:var(--font)">
      ⏻ Shutdown Pi
    </button>
  </div>
  <p style="font-size:12px;color:var(--muted);margin-top:10px">After shutting down, the Pi must be manually powered on again.</p>
</div>

<!-- Power confirmation modal -->
<div id="power-modal" style="visibility:hidden;pointer-events:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1000;display:flex;align-items:center;justify-content:center">
  <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:28px 32px;max-width:380px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.12);text-align:center">
    <div id="power-icon" style="font-size:40px;margin-bottom:12px"></div>
    <h3 id="power-title" style="font-size:17px;margin-bottom:8px"></h3>
    <p id="power-msg" style="font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.6"></p>
    <div style="display:flex;gap:10px;justify-content:center">
      <button onclick="hidePowerModal()"
        style="background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px">
        Cancel
      </button>
      <button id="power-confirm-btn"
        style="border:none;padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;color:#fff">
        Confirm
      </button>
    </div>
  </div>
</div>

<!-- Power feedback overlay -->
<div id="power-feedback" style="visibility:hidden;pointer-events:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1001;display:flex;align-items:center;justify-content:center">
  <div style="background:var(--bg2);border-radius:12px;padding:32px 40px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.2)">
    <div id="feedback-icon" style="font-size:48px;margin-bottom:12px"></div>
    <div id="feedback-msg" style="font-size:16px;font-weight:500"></div>
    <div id="feedback-sub" style="font-size:13px;color:var(--muted);margin-top:6px"></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.color = '#6b7490';
Chart.defaults.borderColor = '#dde2ea';
Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
Chart.defaults.font.size = 11;

function makeChart(id, color, unit) {
  return new Chart(document.getElementById(id).getContext('2d'), {
    type: 'line',
    data: { labels: [], datasets: [{ data: [], borderColor: color, backgroundColor: color.replace(')', ',0.08)').replace('rgb','rgba'), borderWidth: 1.5, fill: true, tension: 0.3, pointRadius: 0, pointHoverRadius: 4, spanGaps: true }] },
    options: {
      responsive: true, animation: false,
      plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => `${ctx.parsed.y != null ? ctx.parsed.y.toFixed(1) : '—'} ${unit}` } } },
      scales: {
        x: { ticks: { maxTicksLimit: 8, maxRotation: 0 }, grid: { color: '#eef1f5' } },
        y: { beginAtZero: true, max: id === 'c-cpu' || id === 'c-mem' || id === 'c-disk' ? 100 : undefined, grid: { color: '#eef1f5' }, ticks: { callback: v => v + ' ' + unit } }
      }
    }
  });
}

const charts = {
  cpu:  makeChart('c-cpu',  'rgb(37,99,235)',  '%'),
  mem:  makeChart('c-mem',  'rgb(124,58,237)', '%'),
  temp: makeChart('c-temp', 'rgb(220,38,38)',  '°C'),
  disk: makeChart('c-disk', 'rgb(22,163,74)',  '%'),
};

function fmtTime(ts) {
  const d = new Date(ts * 1000);
  return d.toLocaleDateString('en-GB',{day:'2-digit',month:'2-digit'}) + ' ' +
         d.toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit'});
}

function colorClass(pct) {
  if (pct == null) return '';
  if (pct < 60) return 'green';
  if (pct < 85) return 'amber';
  return 'red';
}

function tempClass(t) {
  if (t == null) return '';
  if (t < 60) return 'green';
  if (t < 75) return 'amber';
  return 'red';
}

async function loadLive() {
  const r = await fetch('/api/system/latest');
  const d = await r.json();
  if (!d.ts) return;
  const cpuCard = document.getElementById('card-cpu');
  cpuCard.className = 'stat-card ' + colorClass(d.cpu_pct);
  document.getElementById('val-cpu').textContent = d.cpu_pct != null ? d.cpu_pct.toFixed(1) + '%' : '—';
  const memCard = document.getElementById('card-mem');
  memCard.className = 'stat-card ' + colorClass(d.mem_pct);
  document.getElementById('val-mem').textContent = d.mem_pct != null ? d.mem_pct.toFixed(1) + '%' : '—';
  document.getElementById('sub-mem').textContent = d.mem_used_mb != null ? `${d.mem_used_mb.toFixed(0)} / ${d.mem_total_mb.toFixed(0)} MB` : 'used / total';
  const diskCard = document.getElementById('card-disk');
  diskCard.className = 'stat-card ' + colorClass(d.disk_pct);
  document.getElementById('val-disk').textContent = d.disk_pct != null ? d.disk_pct.toFixed(1) + '%' : '—';
  document.getElementById('sub-disk').textContent = d.disk_used_gb != null ? `${d.disk_used_gb} / ${d.disk_total_gb} GB` : 'used / total';
  const tempCard = document.getElementById('card-temp');
  tempCard.className = 'stat-card ' + tempClass(d.cpu_temp);
  document.getElementById('val-temp').textContent = d.cpu_temp != null ? d.cpu_temp.toFixed(1) + '°C' : '—';
}

async function loadCharts() {
  const hours = document.getElementById('hours-sel').value;
  const r = await fetch(`/api/system?hours=${hours}`);
  const rows = await r.json();
  const labels = rows.map(r => fmtTime(r.ts));
  const update = (chart, field) => {
    chart.data.labels = labels;
    chart.data.datasets[0].data = rows.map(r => r[field] ?? null);
    chart.update('none');
  };
  update(charts.cpu,  'cpu_pct');
  update(charts.mem,  'mem_pct');
  update(charts.temp, 'cpu_temp');
  update(charts.disk, 'disk_pct');
}

document.getElementById('hours-sel').addEventListener('change', loadCharts);
loadLive();
loadCharts();
setInterval(loadLive, 30000);

// ── Power controls ──
let pendingAction = null;

async function restartService() {
  const btn = event.target;
  btn.textContent = '↺ Restarting…';
  btn.disabled = true;
  await fetch('/restart-service', { method: 'POST' });
  // Poll until back
  setTimeout(async function poll() {
    try {
      const r = await fetch('/', { method: 'HEAD', cache: 'no-store' });
      if (r.ok) { btn.textContent = '↺ Restart web service'; btn.disabled = false; return; }
    } catch(e) {}
    setTimeout(poll, 2000);
  }, 3000);
}

function confirmAction(action) {
  pendingAction = action;
  const isReboot = action === 'reboot';
  document.getElementById('power-icon').textContent  = isReboot ? '🔄' : '⏻';
  document.getElementById('power-title').textContent = isReboot ? 'Reboot Pi?' : 'Shutdown Pi?';
  document.getElementById('power-msg').textContent   = isReboot
    ? 'The Pi will restart. The dashboard will be unavailable for about 30–60 seconds.'
    : 'The Pi will power off. You will need to physically power it back on.';
  const btn = document.getElementById('power-confirm-btn');
  btn.textContent = isReboot ? 'Reboot' : 'Shutdown';
  btn.style.background = isReboot ? '#d97706' : '#dc2626';
  btn.onclick = executePowerAction;
  const modal = document.getElementById('power-modal');
  modal.style.visibility = 'visible';
  modal.style.pointerEvents = 'auto';
}

function hidePowerModal() {
  const modal = document.getElementById('power-modal');
  modal.style.visibility = 'hidden';
  modal.style.pointerEvents = 'none';
}

async function executePowerAction() {
  hidePowerModal();
  const isReboot = pendingAction === 'reboot';
  const fb = document.getElementById('power-feedback');
  document.getElementById('feedback-icon').textContent = isReboot ? '🔄' : '⏻';
  document.getElementById('feedback-msg').textContent  = isReboot ? 'Rebooting…' : 'Shutting down…';
  document.getElementById('feedback-sub').textContent  = isReboot
    ? 'Dashboard will return in ~60 seconds'
    : 'Power off in progress';
  fb.style.visibility = 'visible';
  fb.style.pointerEvents = 'auto';
  await fetch('/' + pendingAction, { method: 'POST' });
  if (isReboot) {
    setTimeout(async function poll() {
      try {
        const r = await fetch('/', { method: 'HEAD', cache: 'no-store' });
        if (r.ok) { window.location.href = '/'; return; }
      } catch(e) {}
      document.getElementById('feedback-sub').textContent = 'Still rebooting… checking again shortly';
      setTimeout(poll, 3000);
    }, 15000);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('power-modal').style.visibility = 'hidden';
  document.getElementById('power-modal').style.pointerEvents = 'none';
  document.getElementById('power-feedback').style.visibility = 'hidden';
  document.getElementById('power-feedback').style.pointerEvents = 'none';
});
</script>
{% endblock %}