// Complete inline JS for the V4 monitoring page
// This goes in a single <script> block after the HTML body

const API = window.location.origin + '/api';

// ===== Runtime helpers (must work in all browsers, no fancy syntax) ====
function get(id) { return document.getElementById(id); }
function show(id) { var e = get(id); if (e) e.style.display = ''; }
function hide(id) { var e = get(id); if (e) e.style.display = 'none'; }
function qs(s) { return document.querySelector(s); }
function qsa(s) { return document.querySelectorAll(s); }
function html(id, h) { var e = get(id); if (e) e.innerHTML = h; }

var TOKEN = '';
var USER = {};
var PAGE = 'dashboard';
var TELEMETRY = null;
var TELEM_HISTORY = [];
var DEVICES = [];
var METERS = [];
var SNAPSHOTS = [];
var TENANTS = [];
var STATS = {};
var LOGS = [];
var LAST_CMD = '';
var WS = null;
var WS_CONNECTED = false;

// Load from storage
try {
  var t = localStorage.getItem('rej_token');
  if (t) TOKEN = t;
  var u = localStorage.getItem('rej_user');
  if (u) USER = JSON.parse(u);
} catch(e) {}

// ===== Toast =====
function toast(msg, type) {
  if (!type) type = 'info';
  var el = get('toast-el');
  if (!el) {
    el = document.createElement('div'); el.id = 'toast-el';
    el.style.cssText = 'position:fixed;bottom:24px;right:24px;padding:12px 24px;border-radius:8px;color:#fff;font-size:13px;z-index:2000;transition:all 0.3s';
    document.body.appendChild(el);
  }
  el.textContent = msg;
  el.style.background = type === 'success' ? '#1b5e20' : type === 'error' ? '#b71c1c' : '#0d47a1';
  el.style.opacity = '1';
  el.style.transform = 'translateY(0)';
  setTimeout(function() { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; }, 3000);
}

// ===== API =====
function apiHeaders() {
  var h = { 'Content-Type': 'application/json' };
  if (TOKEN) h['X-Token'] = TOKEN;
  return h;
}

function apiGet(path, cb) {
  fetch(API + path, { headers: apiHeaders() })
    .then(function(r) { if (r.status === 401 && TOKEN) { logout(); return null; } return r.json(); })
    .then(function(d) { if (cb) cb(d); })
    .catch(function() {});
}

function apiPost(path, body, cb) {
  fetch(API + path, { method: 'POST', headers: apiHeaders(), body: JSON.stringify(body) })
    .then(function(r) { if (r.status === 401 && TOKEN) { logout(); return null; } return r.json(); })
    .then(function(d) { if (cb) cb(d); })
    .catch(function() {});
}

function apiDel(path, cb) {
  fetch(API + path, { method: 'DELETE', headers: apiHeaders() })
    .then(function(r) { return r.json(); })
    .then(function(d) { if (cb) cb(d); })
    .catch(function() {});
}

// ===== Auth =====
function doLogin() {
  var user = (get('login-user') && get('login-user').value) || 'admin';
  var pass = (get('login-pass') && get('login-pass').value) || 'Gaochi@2026';
  var errEl = get('login-error');
  apiPost('/v4/auth/login', { username: user, password: pass }, function(d) {
    if (d && d.status === 'ok') {
      TOKEN = d.token; USER = d;
      try { localStorage.setItem('rej_token', d.token); localStorage.setItem('rej_user', JSON.stringify(d)); } catch(e) {}
      showPage('main-page');
      hide('login-page');
      connectWS();
      loadAll();
    } else {
      if (errEl) { errEl.style.display = 'block'; errEl.textContent = '登录失败，请检查用户名和密码'; }
    }
  });
}

function logout() {
  if (WS) try { WS.close(); } catch(e) {}
  TOKEN = ''; USER = {};
  try { localStorage.removeItem('rej_token'); localStorage.removeItem('rej_user'); } catch(e) {}
  hide('main-page');
  show('login-page');
}

// ===== WebSocket =====
function connectWS() {
  if (WS) try { WS.close(); } catch(e) {}
  var proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
  try {
    var ws = new WebSocket(proto + '//' + window.location.host + '/api/v4/ws');
    ws.onopen = function() { WS_CONNECTED = true; };
    ws.onmessage = function(e) {
      try {
        var msg = JSON.parse(e.data);
        if (msg.type === 'telemetry') { TELEMETRY = msg.data; }
      } catch(e1) {}
    };
    ws.onclose = function() { WS_CONNECTED = false; setTimeout(connectWS, 5000); };
    ws.onerror = function() { ws.close(); };
    WS = ws;
  } catch(e) {}
}

// ===== Data loading =====
function loadAll() {
  apiGet('/v4/stats', function(d) { STATS = d && d.stats ? d.stats : {}; });
  apiGet('/v4/devices', function(d) { DEVICES = d && d.devices ? d.devices : []; renderCurrent(); });
  apiGet('/v4/admin/tenants', function(d) { TENANTS = d && d.tenants ? d.tenants : []; });
  apiGet('/v4/admin/audit?limit=20', function(d) { LOGS = d && d.logs ? d.logs : []; });
  refreshTelemetry();
}

function refreshTelemetry() {
  apiGet('/v4/telemetry/latest?token=' + TOKEN, function(d) {
    TELEMETRY = d && d.data ? d.data : (d || null);
    if (PAGE === 'telemetry') renderTelemetry();
  });
  apiGet('/v4/telemetry/history?token=' + TOKEN + '&hours=24&limit=200', function(d) {
    TELEM_HISTORY = d && d.data ? d.data : [];
  });
}

function refreshMeters() {
  apiGet('/v4/meter/latest?token=' + TOKEN, function(d) {
    METERS = d && d.data ? d.data : [];
    if (PAGE === 'meters') renderMeters();
  });
}

function refreshSnapshots() {
  apiGet('/v4/snapshots?token=' + TOKEN + '&limit=20', function(d) {
    SNAPSHOTS = d && d.data ? d.data : [];
    if (PAGE === 'snapshots') renderSnapshots();
  });
}

// ===== Navigation =====
function navigate(page) {
  PAGE = page;
  renderCurrent();
  if (page === 'dashboard') loadAll();
  else if (page === 'telemetry') { refreshTelemetry(); }
  else if (page === 'meters') { refreshMeters(); }
  else if (page === 'snapshots') { refreshSnapshots(); }
}

function renderCurrent() {
  var navItems = [
    ['dashboard','📊','仪表盘'],['telemetry','📡','遥测数据'],['meters','⚡','抄表数据'],
    ['snapshots','📷','抓拍图片'],['devices','🔌','设备管理'],['tenants','🏢','租户管理'],
    ['events','🔔','事件告警'],['export','📥','数据导出'],['audit','📋','审计日志']
  ];
  var navHtml = '';
  for (var i = 0; i < navItems.length; i++) {
    var active = navItems[i][0] === PAGE ? ' active' : '';
    navHtml += '<div class="nav-item' + active + '" onclick="navigate(\'' + navItems[i][0] + '\')">';
    navHtml += '<span class="nav-icon">' + navItems[i][1] + '</span>' + navItems[i][2] + '</div>';
  }
  html('sidebar-nav', navHtml);

  var titleMap = {}; for (var i = 0; i < navItems.length; i++) titleMap[navItems[i][0]] = navItems[i][2];
  html('header-title', titleMap[PAGE] || 'V4');

  renderContent();
}

function renderContent() {
  if (PAGE === 'dashboard') return renderDashboard();
  if (PAGE === 'telemetry') return renderTelemetry();
  if (PAGE === 'meters') return renderMeters();
  if (PAGE === 'snapshots') return renderSnapshots();
  if (PAGE === 'devices') return renderDevices();
  if (PAGE === 'tenants') return renderTenants();
  if (PAGE === 'events') return renderEvents();
  if (PAGE === 'export') return renderExport();
  if (PAGE === 'audit') return renderAudit();
  renderDashboard();
}

// ===== Dashboard =====
function renderDashboard() {
  var s = STATS || {};
  var h = '<div class="stats-grid">';
  h += '<div class="stat-card"><div class="label">🔌 边缘端设备</div><div class="value">' + (s.devices||0) + '</div><div class="sub">在线 ' + (s.online||0) + '</div></div>';
  h += '<div class="stat-card"><div class="label">📡 24h遥测</div><div class="value">' + (s.telemetry_24h||0) + '</div><div class="sub">条记录</div></div>';
  h += '<div class="stat-card"><div class="label">📷 抓拍图片</div><div class="value">' + (s.snapshots||0) + '</div><div class="sub">张</div></div>';
  h += '<div class="stat-card"><div class="label">🏢 租户站点</div><div class="value">' + (TENANTS ? TENANTS.length : 0) + '</div><div class="sub">个</div></div></div>';

  h += '<div class="card"><div class="card-header"><h3>已注册设备</h3>';
  h += '<button class="btn btn-sm btn-primary" onclick="showRegister()">+ 注册</button></div>';
  h += '<div class="card-body">';
  if (!DEVICES || DEVICES.length === 0) {
    h += '<div class="empty-state"><div class="icon">🔌</div><p>暂无设备</p></div>';
  } else {
    h += '<table class="data-table"><thead><tr><th>设备ID</th><th>名称</th><th>版本</th><th>状态</th><th>IP</th><th>最后在线</th><th>操作</th></tr></thead><tbody>';
    for (var i = 0; i < DEVICES.length; i++) {
      var d = DEVICES[i];
      var online = d.status === 'online';
      h += '<tr><td><strong>' + (d.device_id||'') + '</strong></td><td>' + (d.name||'') + '</td><td>V' + (d.version||'') + '</td>';
      h += '<td><span class="status-badge ' + (online ? 'status-online' : 'status-offline') + '">';
      h += '<span class="dot ' + (online ? 'dot-online' : 'dot-offline') + '"></span>' + (online ? '在线' : '离线') + '</span></td>';
      h += '<td>' + (d.ip_address||'-') + '</td>';
      h += '<td>' + (d.last_seen ? new Date(d.last_seen).toLocaleString('zh-CN') : '-') + '</td>';
      h += '<td><button class="btn btn-sm btn-outline" onclick="sendCmd(\'' + (d.device_id||'') + '\')">指令</button></td></tr>';
    }
    h += '</tbody></table>';
  }
  h += '</div></div>';
  html('page-content', h);
}

// ===== Telemetry =====
function renderTelemetry() {
  var t = TELEMETRY;
  var h = '<div class="stats-grid">';
  h += '<div class="stat-card"><div class="label">📡 遥测数据</div><div class="value">' + (STATS.telemetry_24h||0) + '</div><div class="sub">24小时内</div></div>';
  h += '<div class="stat-card"><div class="label">设备</div><div class="value" style="font-size:20px">' + (t && t.device_id ? t.device_id : '-') + '</div><div class="sub">' + (t && t.tenant_id ? t.tenant_id : '') + '</div></div>';
  
  var isClose = t && (t.di_a05 === true || t.di_a05 === 1);
  var isOpen = t && (t.di_a05 === false || t.di_a05 === 0);
  h += '<div class="stat-card"><div class="label">开关位置</div>';
  h += '<div class="value ' + (isClose ? 'value-normal' : isOpen ? 'value-danger' : '') + '">';
  h += isClose ? '✅ 合闸' : isOpen ? '⚡ 分闸' : '--';
  h += '</div></div>';
  h += '<div class="stat-card"><div class="label">更新时间</div><div class="value" style="font-size:16px">';
  h += (t && t.time ? new Date(t.time).toLocaleString('zh-CN') : '--') + '</div></div></div>';

  // Voltage / Current
  h += '<div class="grid-2"><div class="card"><div class="card-header"><h3>电压 / 电流</h3></div><div class="card-body"><div class="detail-grid">';
  h += field('Uab', t && t.uab != null ? t.uab.toFixed(1) : '--', 'V');
  h += field('Ubc', t && t.ubc != null ? t.ubc.toFixed(1) : '--', 'V');
  h += field('Uca', t && t.uca != null ? t.uca.toFixed(1) : '--', 'V');
  h += field('Ia', t && t.ia != null ? t.ia.toFixed(2) : '--', 'A');
  h += field('Ib', t && t.ib != null ? t.ib.toFixed(2) : '--', 'A');
  h += field('Ic', t && t.ic != null ? t.ic.toFixed(2) : '--', 'A');
  h += '</div></div></div>';

  // Power / Zero seq
  h += '<div class="card"><div class="card-header"><h3>功率 / 零序</h3></div><div class="card-body"><div class="detail-grid">';
  h += field('3Io', t && t.io != null ? t.io.toFixed(2) : '--', 'A');
  h += field('3Uo', t && t.uo != null ? t.uo.toFixed(1) : '--', 'V');
  h += field('频率 F', t && t.freq != null ? t.freq.toFixed(2) : '--', 'Hz');
  h += field('有功 P', t && t.p != null ? t.p.toFixed(1) : '--', 'W');
  h += field('无功 Q', t && t.q != null ? t.q.toFixed(1) : '--', 'Var');
  h += field('功率因数 PF', t && t.pf != null ? t.pf.toFixed(3) : '--', '');
  h += '</div></div></div></div>';

  // Control buttons
  var devId = (t && t.device_id) || 'orangepi_gc1';
  h += '<div class="grid-2"><div class="card"><div class="card-header"><h3>🔘 分合闸控制</h3></div><div class="card-body">';
  h += '<div class="ctrl-btns"><button class="btn btn-success ctrl-btn" onclick="cmdClose(\'' + devId + '\')">✅ 合 闸</button>';
  h += '<button class="btn btn-danger ctrl-btn" onclick="cmdTrip(\'' + devId + '\')">⚡ 分 闸</button></div>';
  h += '<div class="ctrl-info">上次指令: ' + (LAST_CMD || '无') + ' | 当前: ' + (isClose ? '合闸位置' : isOpen ? '分闸位置' : '未知') + '</div></div></div>';

  // Lamp indicators
  h += '<div class="card"><div class="card-header"><h3>💡 分/合位指示灯</h3></div><div class="card-body"><div class="lamp-row">';
  h += '<div class="lamp-box ' + (t && t.lamp_open ? 'lamp-active-open' : '') + '"><div class="lamp-icon">' + (t && t.lamp_open ? '🔴' : '⚪') + '</div><div>分位灯</div></div>';
  h += '<div class="lamp-box ' + (t && t.lamp_close ? 'lamp-active-close' : '') + '"><div class="lamp-icon">' + (t && t.lamp_close ? '🟢' : '⚪') + '</div><div>合位灯</div></div>';
  h += '</div></div></div></div>';

  // DI points
  var diLabels = [
    ['di_a05','断路器状态'],['di_a06','断路器分位'],['di_a07','下隔离'],['di_a08','接地刀'],
    ['di_a09','远方控制'],['di_a10','弹簧未储能'],['di_a11','重瓦斯'],['di_a12','轻瓦斯'],
    ['di_a13','门禁开'],['di_a14','闭锁重合闸']
  ];
  h += '<div class="card"><div class="card-header"><h3>🔌 遥信点状态 (A05~A14)</h3></div><div class="card-body"><div class="di-grid">';
  for (var i = 0; i < diLabels.length; i++) {
    var key = diLabels[i][0];
    var label = diLabels[i][1];
    var val = t ? t[key] : null;
    var isOn = val === true || val === 1;
    h += '<div class="di-item ' + (isOn ? 'di-on' : 'di-off') + '">';
    h += '<div class="di-dot">' + (isOn ? '✅' : '⭕') + '</div>';
    h += '<div class="di-label">' + label + '</div>';
    h += '<div class="di-val">' + (isOn ? '合/投入' : '分/退出') + '</div></div>';
  }
  h += '</div></div></div>';

  h += '<div class="card"><div class="card-header"><h3>遥测历史趋势 (24h)</h3></div>';
  h += '<div class="card-body"><div id="chart-telemetry-history" class="chart-container"></div></div></div>';
  
  if (t) {
    h += '<div class="card"><div class="card-header"><h3>完整遥测数据</h3></div>';
    h += '<div class="card-body"><pre class="json-pre">' + JSON.stringify(t, null, 2) + '</pre></div></div>';
  }
  html('page-content', h);
  setTimeout(initTelemetryChart, 200);
}

function field(lbl, val, unit) {
  return '<div class="detail-item"><div class="label">' + lbl + '</div><div class="val">' + val + ' ' + unit + '</div></div>';
}

// ===== Meters =====
function renderMeters() {
  var h = '<div class="stats-grid">';
  h += '<div class="stat-card"><div class="label">⚡ 抄表设备</div><div class="value">' + (METERS ? METERS.length : 0) + '</div></div>';
  var latestTime = (METERS && METERS.length > 0 && METERS[0].time) ? new Date(METERS[0].time).toLocaleString('zh-CN') : '--';
  h += '<div class="stat-card"><div class="label">最新读数时间</div><div class="value" style="font-size:16px">' + latestTime + '</div></div></div>';
  h += '<div class="card"><div class="card-header"><h3>电表读数</h3><button class="btn btn-sm btn-outline" onclick="refreshMeters()">🔄</button></div><div class="card-body">';
  if (!METERS || METERS.length === 0) {
    h += '<div class="empty-state"><div class="icon">⚡</div><p>暂无抄表数据</p></div>';
  } else {
    h += '<table class="data-table"><thead><tr><th>电表类型</th><th>读数</th><th>单位</th><th>时间</th></tr></thead><tbody>';
    for (var i = 0; i < METERS.length; i++) {
      var m = METERS[i];
      h += '<tr><td>' + (m.meter_type||'') + '</td><td><strong>' + (m.reading||'--') + '</strong></td><td>' + (m.unit||'-') + '</td>';
      h += '<td>' + (m.time ? new Date(m.time).toLocaleString('zh-CN') : '-') + '</td></tr>';
    }
    h += '</tbody></table>';
  }
  h += '</div></div>';
  html('page-content', h);
}

// ===== Snapshots =====
function renderSnapshots() {
  var h = '<div class="flex-between mb-12"><span style="font-size:13px;color:var(--text-secondary)">共 ' + (SNAPSHOTS ? SNAPSHOTS.length : 0) + ' 张抓拍</span>';
  h += '<button class="btn btn-sm btn-outline" onclick="refreshSnapshots()">🔄 刷新</button></div>';
  h += '<div class="card"><div class="card-body">';
  if (!SNAPSHOTS || SNAPSHOTS.length === 0) {
    h += '<div class="empty-state"><div class="icon">📷</div><p>暂无抓拍图片</p></div>';
  } else {
    h += '<div class="gallery">';
    for (var i = 0; i < SNAPSHOTS.length; i++) {
      var s = SNAPSHOTS[i];
      var fn = s.filename || s.file_path || '';
      h += '<div class="gallery-item" onclick="viewImage(\'/snapshots/' + fn + '\')">';
      h += '<img src="/snapshots/' + fn + '" loading="lazy" onerror="this.style.display=\'none\'">';
      h += '<div class="time">' + (s.time ? new Date(s.time).toLocaleString('zh-CN') : '--') + '</div></div>';
    }
    h += '</div>';
  }
  h += '</div></div>';
  html('page-content', h);
}

// ===== Devices =====
function renderDevices() {
  var h = '<div style="margin-bottom:14px;display:flex;gap:8px"><button class="btn btn-sm btn-primary" onclick="showRegister()">+ 注册边缘端</button>';
  h += '<button class="btn btn-sm btn-outline" onclick="navigate(\'devices\')">🔄 刷新</button></div>';
  h += '<div class="card"><div class="card-header"><h3>边缘端设备列表</h3></div><div class="card-body">';
  if (!DEVICES || DEVICES.length === 0) {
    h += '<div class="empty-state"><div class="icon">🔌</div><p>暂无设备</p></div>';
  } else {
    h += '<table class="data-table"><thead><tr><th>设备ID</th><th>名称</th><th>租户</th><th>版本</th><th>状态</th><th>IP</th><th>最后在线</th><th>操作</th></tr></thead><tbody>';
    for (var i = 0; i < DEVICES.length; i++) {
      var d = DEVICES[i];
      var online = d.status === 'online';
      h += '<tr><td><strong>' + (d.device_id||'') + '</strong></td><td>' + (d.name||'') + '</td><td>' + (d.tenant_id||'') + '</td><td>V' + (d.version||'') + '</td>';
      h += '<td><span class="status-badge ' + (online ? 'status-online' : 'status-offline') + '">';
      h += '<span class="dot ' + (online ? 'dot-online' : 'dot-offline') + '"></span>' + (online ? '在线' : '离线') + '</span></td>';
      h += '<td>' + (d.ip_address||'-') + '</td>';
      h += '<td>' + (d.last_seen ? new Date(d.last_seen).toLocaleString('zh-CN') : '-') + '</td>';
      h += '<td><button class="btn btn-sm btn-outline" onclick="sendCmd(\'' + (d.device_id||'') + '\')">📤 指令</button></td></tr>';
    }
    h += '</tbody></table>';
  }
  h += '</div></div>';
  html('page-content', h);
}

// ===== Tenants =====
function renderTenants() {
  var h = '<div style="margin-bottom:14px"><button class="btn btn-sm btn-primary" onclick="showCreateTenant()">+ 新建租户</button></div>';
  h += '<div class="card"><div class="card-header"><h3>租户列表</h3></div><div class="card-body"><table class="data-table"><thead><tr><th>ID</th><th>名称</th><th>API Key</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead><tbody>';
  if (TENANTS) {
    for (var i = 0; i < TENANTS.length; i++) {
      var t = TENANTS[i];
      h += '<tr><td><strong>' + (t.id||'') + '</strong></td><td>' + (t.name||'') + '</td>';
      h += '<td style="font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis"><code>' + (t.api_key ? t.api_key.substring(0,24)+'...' : '-') + '</code>';
      h += '<button class="btn btn-sm" style="padding:1px 5px;font-size:10px;margin-left:4px" onclick="copyKey(\'' + (t.api_key||'') + '\')">📋</button></td>';
      h += '<td><span class="status-badge ' + (t.active ? 'status-online' : 'status-offline') + '">' + (t.active ? '启用' : '停用') + '</span></td>';
      h += '<td>' + (t.created_at ? new Date(t.created_at).toLocaleDateString('zh-CN') : '-') + '</td>';
      h += '<td><button class="btn btn-sm btn-danger" onclick="delTenant(\'' + (t.id||'') + '\')">停用</button></td></tr>';
    }
  }
  h += '</tbody></table></div></div>';
  html('page-content', h);
}

// ===== Events =====
function renderEvents() {
  var h = '<div class="card"><div class="card-header"><h3>事件告警</h3></div><div class="card-body"><div class="empty-state"><div class="icon">🔔</div><p>事件告警功能已就绪</p>';
  h += '<p style="font-size:12px;margin-top:8px;color:var(--text-secondary)">边缘端上线后将实时推送设备事件</p></div></div></div>';
  html('page-content', h);
}

// ===== Export =====
function renderExport() {
  var h = '<div class="card"><div class="card-header"><h3>数据导出</h3></div><div class="card-body">';
  h += '<div class="export-grid"><div class="export-card"><h4>📡 遥测数据</h4><p>导出24h遥测数据为CSV</p>';
  h += '<button class="btn btn-sm btn-primary" onclick="exportTelemetry()">📥 下载 CSV</button></div>';
  h += '<div class="export-card"><h4>⚡ 抄表读数</h4><p>导出逐条抄表数据</p>';
  h += '<button class="btn btn-sm btn-primary" onclick="exportMeters()">📥 下载 CSV</button></div>';
  h += '<div class="export-card"><h4>📊 抄表快照</h4><p>含尖峰平谷完整快照</p>';
  h += '<button class="btn btn-sm btn-primary" onclick="exportMeterSnapshots()">📥 下载 CSV</button></div></div></div></div>';
  html('page-content', h);
}

// ===== Audit =====
function renderAudit() {
  var h = '<div class="card"><div class="card-header"><h3>操作审计日志</h3></div><div class="card-body"><table class="data-table"><thead><tr><th>时间</th><th>用户</th><th>操作</th><th>目标</th><th>详情</th></tr></thead><tbody>';
  if (LOGS) {
    for (var i = 0; i < LOGS.length; i++) {
      var l = LOGS[i];
      h += '<tr><td>' + new Date(l.created_at).toLocaleString('zh-CN') + '</td>';
      h += '<td>' + (l.username||'') + '</td><td><span style="color:var(--primary-light)">' + (l.action||'') + '</span></td>';
      h += '<td>' + (l.target||'') + '</td><td style="color:var(--text-secondary);font-size:12px">' + (l.detail||'-') + '</td></tr>';
    }
  }
  h += '</tbody></table></div></div>';
  html('page-content', h);
}

// ===== Actions =====
function showRegister() {
  var id = prompt('设备ID (如 gc1-orangepi):'); if (!id) return;
  var name = prompt('设备名称:', id); if (!name) return;
  var apiKey = prompt('API Key (租户管理页面获取):'); if (!apiKey) return;
  apiPost('/v4/devices/register', { device_id: id, name: name, api_key: apiKey, version: '4.0.0', ip: '' }, function(r) {
    if (r && r.status === 'ok') { toast('设备注册成功', 'success'); loadAll(); }
  });
}

function showCreateTenant() {
  var id = prompt('租户ID (如 gc6):'); if (!id) return;
  var name = prompt('名称 (如 高驰科技-6号箱变):'); if (!name) return;
  apiPost('/v4/admin/tenants', { id: id, name: name }, function(r) {
    if (r && r.status === 'ok') { toast('租户创建成功! API Key: ' + r.api_key, 'success'); loadAll(); }
  });
}

function cmdTrip(deviceId) {
  if (!confirm('⚠️ 确认执行【分闸】操作？\n\n设备: ' + deviceId + '\n操作: 分闸 (Trip)')) return;
  apiPost('/v4/devices/' + deviceId + '/command', { command: 'trip', params: {} }, function(r) {
    if (r && r.status === 'ok') {
      LAST_CMD = '分闸 ' + new Date().toLocaleTimeString('zh-CN');
      toast('✅ 分闸指令已发送到 ' + deviceId, 'success');
    }
  });
}

function cmdClose(deviceId) {
  if (!confirm('⚠️ 确认执行【合闸】操作？\n\n设备: ' + deviceId + '\n操作: 合闸 (Close)')) return;
  apiPost('/v4/devices/' + deviceId + '/command', { command: 'close', params: {} }, function(r) {
    if (r && r.status === 'ok') {
      LAST_CMD = '合闸 ' + new Date().toLocaleTimeString('zh-CN');
      toast('✅ 合闸指令已发送到 ' + deviceId, 'success');
    }
  });
}

function sendCmd(deviceId) {
  var cmd = prompt('输入指令 (如: trip / close / restart):');
  if (!cmd) return;
  apiPost('/v4/devices/' + deviceId + '/command', { command: cmd, params: {} }, function(r) {
    if (r && r.status === 'ok') toast('指令已发送到 ' + deviceId, 'success');
  });
}

function delTenant(id) {
  if (!confirm('确认停用租户 ' + id + '？')) return;
  apiDel('/v4/admin/tenants/' + id, function(r) { if (r && r.status === 'ok') { toast('已停用', 'success'); loadAll(); } });
}

function copyKey(text) {
  try { navigator.clipboard.writeText(text).then(function() { toast('已复制', 'success'); }); } catch(e) {}
}

function viewImage(src) {
  var overlay = document.createElement('div');
  overlay.className = 'modal-overlay';
  overlay.onclick = function() { document.body.removeChild(overlay); };
  overlay.innerHTML = '<div class="modal" style="max-width:90vw" onclick="event.stopPropagation()">'
    + '<div class="modal-header"><h3>📷 抓拍图片</h3><button class="modal-close" onclick="event.stopPropagation();this.closest(\'.modal-overlay\').remove()">×</button></div>'
    + '<div class="modal-body"><img src="' + src + '" style="max-width:100%;max-height:70vh;border-radius:8px"></div></div>';
  document.body.appendChild(overlay);
}

function exportTelemetry() { window.open(API + '/v4/export/telemetry?hours=24&token=' + TOKEN, '_blank'); toast('遥测数据下载中...','info'); }
function exportMeters() { window.open(API + '/v4/export/meters?hours=24&token=' + TOKEN, '_blank'); toast('抄表数据下载中...','info'); }
function exportMeterSnapshots() { window.open(API + '/v4/export/meter-snapshots?hours=24&token=' + TOKEN, '_blank'); toast('完整抄表快照下载中...','info'); }

// ===== Chart =====
function initTelemetryChart() {
  var el = get('chart-telemetry-history');
  if (!el || !window.echarts) return;
  var data = TELEM_HISTORY || [];
  if (data.length === 0) { el.innerHTML = '<div style="text-align:center;padding:40px;color:var(--text-secondary)">暂无历史数据</div>'; return; }
  try {
    var c = echarts.init(el);
    var times = []; var vals = [];
    for (var i = Math.min(data.length, 100) - 1; i >= 0; i--) {
      var item = data[i];
      times.push(item.time ? new Date(item.time).toLocaleTimeString('zh-CN') : '');
      var v = item.ia || item.uab || 0;
      vals.push(v);
    }
    c.setOption({
      tooltip: { trigger: 'axis' },
      grid: { left: '5%', right: '5%', top: '10%', bottom: '15%' },
      xAxis: { type: 'category', data: times, axisLabel: { color: '#9aa0a6', fontSize: 10, rotate: 30 } },
      yAxis: { type: 'value', axisLabel: { color: '#9aa0a6' }, splitLine: { lineStyle: { color: '#2a3350' } } },
      series: [{ type: 'line', data: vals, smooth: true, lineStyle: { color: '#1a73e8', width: 2 }, 
                 itemStyle: { color: '#1a73e8' }, areaStyle: { color: 'rgba(26,115,232,0.1)' } }]
    });
  } catch(e) { el.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-secondary)">图表加载失败</div>'; }
}

// ===== Init =====
function init() {
  if (TOKEN) {
    hide('login-page');
    show('main-page');
    connectWS();
    loadAll();
    renderCurrent();
  } else {
    show('login-page');
    hide('main-page');
  }
}

// Start when DOM ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}