<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plane Tracker - Display Fields</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
  :root {
    --bg:#00205b; --panel:#005587; --panel-strong:#005587;
    --amber:#b7c9d3; --amber-dim:#6399ae; --amber-bright:#ffffff;
    --text:#ffffff; --muted:#6399ae; --green:#0085ad; --red:#b7c9d3;
    --accent:#000000; --row-border:rgba(99,153,174,.30);
    --board:rgba(183,201,211,.08);
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:'Share Tech Mono', monospace; min-height:100vh; padding-bottom:80px; }
  .board-header { background:linear-gradient(90deg, #b7c9d3, #0085ad); color:#00205b; padding:10px 20px; display:flex; align-items:center; gap:12px; }
  .board-title { font-family:'VT323', monospace; font-size:28px; letter-spacing:4px; text-transform:uppercase; }
  .board-sub { font-size:11px; letter-spacing:3px; text-transform:uppercase; opacity:.82; }
  .nav-links { margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }
  .nav-links a { font-family:'VT323', monospace; font-size:20px; letter-spacing:2px; background:#00205b; color:#ffffff; padding:2px 12px; text-decoration:none; }
  .nav-links a:hover { background:#ffffff; color:#00205b; }
  .content { padding:20px 16px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .section { border:1px solid var(--row-border); background:var(--panel); }
  .section-header { font-family:'VT323', monospace; font-size:22px; letter-spacing:3px; color:var(--amber-bright); padding:10px 16px; border-bottom:1px solid var(--row-border); background:var(--panel-strong); text-transform:uppercase; }
  .section-body { padding:12px 16px; display:grid; gap:8px; }
  .field { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--row-border); }
  .field input { width:16px; height:16px; accent-color:var(--amber); }
  .field label { cursor:pointer; font-size:14px; color:var(--text); }
  .preview { grid-column:1 / -1; border:1px solid var(--row-border); padding:14px 16px; color:var(--muted); background:var(--panel); }
  .actions { position:fixed; left:0; right:0; bottom:0; display:flex; gap:12px; align-items:center; padding:16px; background:rgba(0,32,91,.96); border-top:1px solid var(--row-border); }
  .btn { font-family:'VT323', monospace; font-size:20px; letter-spacing:2px; padding:6px 20px; cursor:pointer; text-transform:uppercase; }
  .btn-save { background:var(--amber); color:#00205b; border:0; }
  .btn-reset { background:transparent; border:1px solid #6399ae; color:var(--muted); }
  .btn-restart { background:transparent; border:1px solid #b7c9d3; color:#b7c9d3; }
  .btn-reset:hover { border-color:var(--amber-bright); color:var(--amber-bright); }
  .btn-restart:hover { border-color:#b7c9d3; color:#b7c9d3; }
  #status.ok { color:var(--green); } #status.err { color:var(--red); }
  @media (max-width:760px) { .content { grid-template-columns:1fr; } .preview { grid-column:auto; } .nav-links { margin-left:0; } .board-header { flex-wrap:wrap; } }
</style>
</head>
<body>
<div class="board-header">
  <span style="font-size:22px">FLD</span>
  <div>
    <div class="board-title">Display Fields</div>
    <div class="board-sub">RGB Scrolling Lines</div>
  </div>
  <div class="nav-links">
    <a href="/">Board</a>
    <a href="/config">Config</a>
    <a href="/stats">Stats</a>
  </div>
</div>

<div class="content">
  <div class="section">
    <div class="section-header">Flight Line</div>
    <div class="section-body" id="flight_details"></div>
  </div>
  <div class="section">
    <div class="section-header">Aircraft Line</div>
    <div class="section-body" id="plane_details"></div>
  </div>
  <div class="preview">
    Saved changes are used when the display app restarts. Fields render in the order shown here.
  </div>
</div>

<div class="actions">
  <button class="btn btn-save" onclick="saveFields()">Save</button>
  <button class="btn btn-restart" onclick="saveAndRestart()">Save & Restart Display</button>
  <button class="btn btn-reset" onclick="restartDisplay()">Restart Display</button>
  <button class="btn btn-reset" onclick="loadFields()">Reload</button>
  <span id="status"></span>
</div>

<script>
let catalog = {};
let selected = {};

function renderSection(id) {
  const box = document.getElementById(id);
  const active = new Set(selected[id] || []);
  box.innerHTML = (catalog[id] || []).map(field => `
    <div class="field">
      <input type="checkbox" id="${id}-${field.id}" data-section="${id}" data-field="${field.id}" ${active.has(field.id) ? 'checked' : ''}>
      <label for="${id}-${field.id}">${field.label}</label>
    </div>
  `).join('');
}

async function loadFields() {
  const res = await fetch('/api/display-fields');
  const data = await res.json();
  catalog = data.catalog || {};
  selected = data.selected || data.defaults || {};
  renderSection('flight_details');
  renderSection('plane_details');
  setStatus('Loaded', 'ok');
}

async function saveFields() {
  const payload = {display_fields: {flight_details: [], plane_details: []}};
  document.querySelectorAll('input[type="checkbox"]').forEach(cb => {
    if (cb.checked) payload.display_fields[cb.dataset.section].push(cb.dataset.field);
  });
  const res = await fetch('/api/display-fields', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify(payload)
  });
  const data = await res.json();
  if (!res.ok || !data.ok) return setStatus('Save failed', 'err');
  selected = data.display_fields;
  setStatus('Saved. Restart the display app to apply.', 'ok');
  return true;
}

async function restartDisplay(confirmFirst=true) {
  if (confirmFirst && !confirm('Restart the display service? The matrix may go dark for a few seconds.')) return false;
  setStatus('Restarting display...', '');
  try {
    const res = await fetch('/api/restart', {method:'POST'});
    if (!res.ok) throw new Error('Restart request failed');
    setStatus('Restarting display. Reconnecting in 8s...', 'ok');
    setTimeout(() => window.location.reload(), 8000);
    return true;
  } catch (e) {
    setStatus(e.message, 'err');
    return false;
  }
}

async function saveAndRestart() {
  const saved = await saveFields();
  if (!saved) return;
  await restartDisplay(false);
}

function setStatus(text, cls) {
  const s = document.getElementById('status');
  s.textContent = text;
  s.className = cls;
}

loadFields();
</script>
</body>
</html>
