// ========== IoT 设备控制面板 ==========
function startIoTRefresh() {
  stopIoTRefresh();
  STATE.iotInterval = setInterval(function() {
    if (STATE.activePanel === 'iot') renderIoTPanel();
  }, 3000);
}

function stopIoTRefresh() {
  if (STATE.iotInterval) { clearInterval(STATE.iotInterval); STATE.iotInterval = null; }
}

async function fetchIoTDevices() {
  var data = await api('/api/iot/devices');
  if (data.error) return { error: data };
  var devices = [];
  if (Array.isArray(data)) devices = data;
  else if (data.devices) devices = data.devices;
  return { devices: devices };
}

var IOT_DEVICE_TYPES = {
  'ac': '❄️', 'light': '💡', 'curtain': '🪟', 'door_lock': '🔒',
  'camera': '📷', 'sensor': '📡', 'speaker': '🔊', 'thermostat': '🌡️',
};

var IOT_MODE_OPTIONS = ['cool', 'heat', 'auto', 'fan', 'dry'];
var IOT_COLOR_OPTIONS = [
  { name: '暖白', value: 'warm_white', bg: '#f5d0a9' },
  { name: '冷白', value: 'cool_white', bg: '#d4e6fc' },
  { name: '暖黄', value: 'warm_yellow', bg: '#fce4a6' },
  { name: '蓝色', value: 'blue', bg: '#3b82f6' },
  { name: '紫色', value: 'purple', bg: '#a855f7' },
  { name: '绿色', value: 'green', bg: '#22c55e' },
];

async function renderIoTPanel() {
  document.getElementById('panel-actions').innerHTML =
    '<button class="btn btn-sm" onclick="renderIoTPanel()" id="iot-refresh-btn">🔄 刷新</button>' +
    '<span class="iot-last-update">⏱ 每3秒自动刷新 · 最后更新: ' + new Date().toLocaleTimeString('zh-CN', {hour12: false}) + '</span>';

  var result = await fetchIoTDevices();
  var panel = document.getElementById('panel-iot');

  if (result.error) {
    var hint = '';
    if (result.error.errorType === 'iot_not_running') {
      hint = '<br><span style="font-size:11px">💡 提示: 请先在「服务管理」面板中启动 IoT Debug 服务</span>';
    }
    panel.innerHTML = '<div class="empty-state"><div class="icon">⚠️</div>' + escHtml(result.error.error) + hint + '</div>';
    return;
  }

  var devices = result.devices;
  var badge = document.getElementById('iot-badge');
  if (badge) {
    badge.textContent = devices.length;
    badge.style.display = devices.length > 0 ? 'inline-block' : 'none';
  }

  var html = '<div class="iot-refresh-bar">' +
    '<span style="font-weight:600;font-size:14px">📡 模拟 IoT 设备 (' + devices.length + ')</span>' +
    '<span style="font-size:11px;color:var(--text2)">通过 IoT 调试服务 (端口 8083) 管理</span>' +
    '</div><div class="iot-device-grid" id="iot-device-grid">' +
    devices.map(function(d) { return renderIoTDeviceCard(d); }).join('') +
    '</div>';

  panel.innerHTML = html;
}

function renderIoTDeviceCard(device) {
  var isOn = device.status === 'on';
  var icon = IOT_DEVICE_TYPES[device.type] || '📦';
  var propsHtml = '';

  if (device.type === 'ac') {
    propsHtml =
      '<div class="iot-prop-row">' +
        '<span class="iot-prop-label">🌡️ 温度</span>' +
        '<div class="iot-prop-control">' +
          '<input type="range" min="16" max="30" value="' + (device.temperature || 26) + '"' +
          ' onchange="iotSetProperty(\'' + device.id + '\', \'temperature\', parseInt(this.value)); this.nextElementSibling.textContent=this.value+\'°C\'">' +
          '<span class="iot-prop-value">' + (device.temperature || 26) + '°C</span>' +
        '</div>' +
      '</div>' +
      '<div class="iot-prop-row">' +
        '<span class="iot-prop-label">🔄 模式</span>' +
        '<div class="iot-prop-control" style="gap:4px">' +
          IOT_MODE_OPTIONS.map(function(m) {
            var active = (device.mode || 'cool') === m ? ' active' : '';
            return '<button class="iot-mode-btn' + active + '" onclick="iotSetProperty(\'' + device.id + '\', \'mode\', \'' + m + '\');refreshIoTDeviceCard(\'' + device.id + '\')">' + m + '</button>';
          }).join('') +
        '</div>' +
      '</div>';
  } else if (device.type === 'light') {
    propsHtml =
      '<div class="iot-prop-row">' +
        '<span class="iot-prop-label">💡 亮度</span>' +
        '<div class="iot-prop-control">' +
          '<input type="range" min="1" max="100" value="' + (device.brightness || 80) + '"' +
          ' onchange="iotSetProperty(\'' + device.id + '\', \'brightness\', parseInt(this.value)); this.nextElementSibling.textContent=this.value+\'%\'">' +
          '<span class="iot-prop-value">' + (device.brightness || 80) + '%</span>' +
        '</div>' +
      '</div>' +
      '<div class="iot-prop-row">' +
        '<span class="iot-prop-label">🎨 颜色</span>' +
        '<div class="iot-prop-control" style="gap:4px">' +
          IOT_COLOR_OPTIONS.map(function(c) {
            var active = (device.color || 'warm_white') === c.value ? ' active' : '';
            return '<button class="iot-color-btn' + active + '" style="background:' + c.bg + '" title="' + c.name + '"' +
              ' onclick="iotSetProperty(\'' + device.id + '\', \'color\', \'' + c.value + '\');refreshIoTDeviceCard(\'' + device.id + '\')"></button>';
          }).join('') +
        '</div>' +
      '</div>';
  } else if (device.type === 'curtain') {
    propsHtml =
      '<div class="iot-prop-row">' +
        '<span class="iot-prop-label">🪟 位置</span>' +
        '<div class="iot-prop-control">' +
          '<input type="range" min="0" max="100" value="' + (device.position != null ? device.position : 100) + '"' +
          ' onchange="iotSetProperty(\'' + device.id + '\', \'position\', parseInt(this.value)); this.nextElementSibling.textContent=this.value+\'%\'">' +
          '<span class="iot-prop-value">' + (device.position != null ? device.position : 100) + '%</span>' +
        '</div>' +
      '</div>';
  } else if (device.temperature != null) {
    propsHtml =
      '<div class="iot-prop-row">' +
        '<span class="iot-prop-label">🌡️ 温度</span>' +
        '<span class="iot-prop-value">' + device.temperature + (device.unit || '°C') + '</span>' +
      '</div>';
  }

  if (device.battery != null) {
    propsHtml +=
      '<div class="iot-prop-row">' +
        '<span class="iot-prop-label">🔋 电量</span>' +
        '<span class="iot-prop-value">' + device.battery + '%</span>' +
      '</div>';
  }

  var actionsHtml = '<div class="iot-device-actions">' +
    '<button class="iot-toggle-btn ' + (isOn ? 'on' : 'off') + '" onclick="iotToggle(\'' + device.id + '\')">' +
      (isOn ? '⏻ 关闭' : '⏻ 开启') +
    '</button>';

  if (device.type === 'ac') {
    var currentTemp = device.temperature || 26;
    actionsHtml +=
      '<button class="btn btn-xs" onclick="iotSetProperty(\'' + device.id + '\', \'temperature\', ' + (currentTemp - 2) + ');refreshIoTDeviceCard(\'' + device.id + '\')">⬇ -2°C</button>' +
      '<button class="btn btn-xs" onclick="iotSetProperty(\'' + device.id + '\', \'temperature\', ' + (currentTemp + 2) + ');refreshIoTDeviceCard(\'' + device.id + '\')">⬆ +2°C</button>';
  }

  actionsHtml +=
    '<button class="btn btn-xs" onclick="iotShowHistory(\'' + device.id + '\')" style="margin-left:auto">📋 历史</button>' +
    '</div>' +
    '<div id="iot-history-' + device.id + '" class="iot-history-panel" style="display:none"></div>';

  return '<div class="iot-device-card ' + (isOn ? 'on' : 'off') + '" id="iot-card-' + device.id + '">' +
    '<div class="iot-device-header">' +
      '<div class="iot-device-name">' +
        '<span style="font-size:24px">' + icon + '</span>' +
        '<div>' +
          '<div>' + escHtml(device.name) + '</div>' +
          '<div class="iot-device-type">' + escHtml(device.type) + ' · ' + escHtml(device.id) + '</div>' +
        '</div>' +
      '</div>' +
      '<div class="iot-device-status">' +
        '<span class="iot-status-dot ' + (isOn ? 'on' : 'off') + '"></span>' +
        '<span style="font-size:12px;font-weight:600;color:' + (isOn ? 'var(--green)' : 'var(--text3)') + '">' + (isOn ? '开启' : '关闭') + '</span>' +
      '</div>' +
    '</div>' +
    (propsHtml ? '<div class="iot-device-props">' + propsHtml + '</div>' : '') +
    actionsHtml +
    '</div>';
}

async function iotToggle(deviceId) {
  console.log('[IoT] 切换设备开关: ' + deviceId);
  var data = await api('/api/iot/devices/' + deviceId + '/toggle', { method: 'POST' });
  if (data.error) {
    showToast('切换失败: ' + data.error, 'error');
  } else {
    var device = data.device || {};
    showToast((device.name || deviceId) + ': ' + (device.status === 'on' ? '已开启' : '已关闭'), 'success');
    renderIoTPanel();
  }
}

async function iotSetProperty(deviceId, field, value) {
  console.log('[IoT] 设置设备属性: ' + deviceId + ' -> ' + field + ' = ' + value);
  var data = await api('/api/iot/devices/' + deviceId + '/set', {
    method: 'POST',
    body: JSON.stringify({ field: field, value: value }),
  });
  if (data.error) {
    showToast('设置失败: ' + data.error, 'error');
  } else {
    var device = data.device || {};
    showToast((device.name || deviceId) + ': ' + field + ' = ' + value, 'success');
  }
}

async function refreshIoTDeviceCard(deviceId) {
  var data = await api('/api/iot/devices/' + deviceId);
  if (data.error) return;
  var device = data.device;
  if (!device) return;
  var card = document.getElementById('iot-card-' + deviceId);
  if (!card) return;
  card.outerHTML = renderIoTDeviceCard(device);
}

async function iotShowHistory(deviceId) {
  var panel = document.getElementById('iot-history-' + deviceId);
  if (!panel) return;
  if (panel.style.display !== 'none') {
    panel.style.display = 'none';
    return;
  }
  console.log('[IoT] 获取设备历史: ' + deviceId);
  var data = await api('/api/iot/devices/' + deviceId + '/history');
  panel.style.display = '';
  if (data.error) {
    panel.innerHTML = '<div style="color:var(--red);font-size:11px;padding:4px">' + escHtml(data.error) + '</div>';
    return;
  }
  var history = data.history || [];
  if (history.length === 0) {
    panel.innerHTML = '<div style="color:var(--text3);font-size:11px;padding:4px">暂无操作历史</div>';
    return;
  }
  panel.innerHTML = history.slice(-20).reverse().map(function(h) {
    var timeStr = h.timestamp ? new Date(h.timestamp).toLocaleTimeString('zh-CN', {hour12: false}) : '—';
    return '<div class="iot-history-item">' +
      '<span class="iot-hist-time">' + timeStr + '</span>' +
      '<span class="iot-hist-action">' + escHtml(h.action || '操作') + '</span>' +
      '<span class="iot-hist-detail">' + escHtml(h.detail || h.value || '') + '</span>' +
      '</div>';
  }).join('');
}