// 美团基站测试组件
Router.register('/test/meituan', async () => {
  const currentUser = await API.me().catch(() => null);
  if (!currentUser) {
    window.location.href = './login.html';
    return '';
  }

  return `
    <div class="page-container meituan-test-page">
      <div class="page-header">
        <h2 class="page-title">美团基站测试</h2>
        <div class="page-actions">
          <button class="btn btn-primary" id="connect-server-btn">
            连接服务器
          </button>
          <button class="btn btn-secondary" id="refresh-btn">
            刷新
          </button>
        </div>
      </div>

      <div class="meituan-test-content">
        <!-- 服务器状态 -->
        <div class="card server-status-card compact">
          <div class="card-header">
            <h3>服务器状态</h3>
            <span class="status-indicator" id="server-status">
              <span class="status-dot offline"></span>
              离线
            </span>
          </div>
          <div class="card-body">
            <div class="info-row">
              <span class="info-label">服务器地址:</span>
              <span class="info-value">180.163.74.83:8888</span>
            </div>
          </div>
        </div>

        <!-- 基站控制面板 -->
        <div class="card control-panel-card">
          <div class="card-header">
            <h3>基站控制</h3>
            <div class="card-actions">
              <label class="checkbox-label">
                <input type="checkbox" id="hide-offline" checked>
                <span>隐藏离线基站</span>
              </label>
            </div>
          </div>
          <div class="card-body">
            <div class="control-row">
              <select class="form-control" id="station-select">
                <option value="">请选择在线基站</option>
              </select>
              <button class="btn btn-primary" id="self-test-btn">
                开始自检
              </button>
            </div>
          </div>
        </div>

        <!-- 自检结果 -->
        <div class="card self-test-card" id="self-test-card" style="display: none;">
          <div class="card-header">
            <h3>自检结果</h3>
            <div class="card-actions">
              <span class="test-status" id="test-status">检测中...</span>
            </div>
          </div>
          <div class="card-body">
            <div class="test-results">
              <div class="test-module" id="test-g">
                <div class="module-header">
                  <span class="module-name">G模块</span>
                  <span class="module-status" id="g-status">待检测</span>
                </div>
                <div class="module-result" id="g-result"></div>
              </div>
              <div class="test-module" id="test-d">
                <div class="module-header">
                  <span class="module-name">D模块</span>
                  <span class="module-status" id="d-status">待检测</span>
                </div>
                <div class="module-result" id="d-result"></div>
              </div>
              <div class="test-module" id="test-h">
                <div class="module-header">
                  <span class="module-name">H模块</span>
                  <span class="module-status" id="h-status">待检测</span>
                </div>
                <div class="module-result" id="h-result"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 基站列表 -->
        <div class="card stations-card">
          <div class="card-header">
            <h3>在线基站列表</h3>
            <div class="card-actions">
              <input type="text" class="form-control" id="search-station" placeholder="搜索基站...">
            </div>
          </div>
          <div class="card-body">
            <div class="stations-table-container">
              <table class="table stations-table">
                <thead>
                  <tr>
                    <th>基站SN</th>
                    <th>连接时间</th>
                    <th>状态</th>
                    <th>最后心跳</th>
                  </tr>
                </thead>
                <tbody id="stations-tbody">
                  <tr>
                    <td colspan="4" class="text-center">暂无基站连接</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
});

// 美团基站测试逻辑
(() => {
  let ws = null;
  let connected = false;
  let stations = new Map();
  let isInitialized = false;

  // 初始化
  function initMeituanTest() {
    if (isInitialized) return;
    
    // 等待DOM渲染完成
    const checkElements = () => {
      const statusEl = document.getElementById('server-status');
      if (statusEl) {
        isInitialized = true;
        setupEventListeners();
        connectServer();
      } else {
        setTimeout(checkElements, 50);
      }
    };
    
    checkElements();
  }

  function cleanup() {
    isInitialized = false;
    if (ws) {
      ws.close();
      ws = null;
    }
    connected = false;
  }

  // 监听路由变化
  Router.onAfterEach(async (path) => {
    if (path === '/test/meituan') {
      initMeituanTest();
    } else {
      cleanup();
    }
  });

  function setupEventListeners() {
    // 连接服务器按钮
    const connectBtn = document.getElementById('connect-server-btn');
    if (connectBtn) {
      connectBtn.addEventListener('click', connectServer);
    }

    // 刷新按钮
    const refreshBtn = document.getElementById('refresh-btn');
    if (refreshBtn) {
      refreshBtn.addEventListener('click', () => {
        if (ws) {
          ws.close();
        }
        connectServer();
      });
    }

    // 搜索基站
    const searchInput = document.getElementById('search-station');
    if (searchInput) {
      searchInput.addEventListener('input', (e) => {
        filterStations(e.target.value);
      });
    }

    // 隐藏离线基站
    const hideOfflineCheckbox = document.getElementById('hide-offline');
    if (hideOfflineCheckbox) {
      hideOfflineCheckbox.addEventListener('change', () => {
        updateStationsList();
        updateStationSelect();
      });
    }

    // 自检按钮
    const selfTestBtn = document.getElementById('self-test-btn');
    if (selfTestBtn) {
      selfTestBtn.addEventListener('click', startSelfTest);
    }
  }

  function connectServer() {
    const statusEl = document.getElementById('server-status');
    
    // 更新状态为连接中
    statusEl.innerHTML = '<span class="status-dot connecting"></span>连接中...';
    
    // 获取服务器状态
    fetch('/api/meituan/server-status')
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          connected = true;
          statusEl.innerHTML = `<span class="status-dot ${data.status}"></span>${data.status === 'online' ? '在线' : '离线'}`;
          
          // 获取基站列表
          loadStations();
          
          // 定期刷新
          setInterval(() => {
            loadStations();
          }, 5000);
        } else {
          statusEl.innerHTML = '<span class="status-dot offline"></span>连接失败';
        }
      })
      .catch(error => {
        console.error('连接失败:', error);
        statusEl.innerHTML = '<span class="status-dot offline"></span>连接失败';
      });
  }

  function startLogPolling() {
    // 轮询获取服务器日志
    setInterval(async () => {
      try {
        // 这里应该调用实际的API获取日志
        // const logs = await API.getServerLogs();
        // updateLogs(logs);
      } catch (e) {
        console.error('获取日志失败:', e);
      }
    }, 2000);
  }

  function loadStations() {
    fetch('/api/meituan/stations')
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          stations.clear();
          data.stations.forEach(station => {
            stations.set(station.id, station);
          });
          updateStationsList();
          updateStationSelect();
        }
      })
      .catch(error => {
        console.error('获取基站列表失败:', error);
      });
  }

  function updateStationsList() {
    const tbody = document.getElementById('stations-tbody');
    const hideOffline = document.getElementById('hide-offline')?.checked ?? true;
    
    if (!tbody) return;

    // 过滤基站
    let filteredStations = Array.from(stations.values());
    if (hideOffline) {
      filteredStations = filteredStations.filter(s => s.status === 'online');
    }

    if (filteredStations.length === 0) {
      tbody.innerHTML = `<tr><td colspan="4" class="text-center">${hideOffline ? '暂无在线基站' : '暂无基站连接'}</td></tr>`;
      return;
    }

    tbody.innerHTML = filteredStations.map(station => {
      // 处理可能缺失的字段，适配实际数据格式
      const lastSeen = station.last_seen || station.lastHeartbeat || new Date();
      const connectTime = station.connect_time || station.connectTime || station.last_seen || new Date();
      const ip = station.ip || '10.8.0.x'; // 基站通常在内网
      const status = station.status || 'offline';
      
      // 转换为Date对象
      const connectTimeDate = connectTime instanceof Date ? connectTime : new Date(connectTime);
      const lastSeenDate = lastSeen instanceof Date ? lastSeen : new Date(lastSeen);
      
      return `
      <tr>
        <td>${station.id || '未知'}</td>
        <td>${connectTimeDate.toLocaleString()}</td>
        <td><span class="status-badge ${status}">${status === 'online' ? '在线' : '离线'}</span></td>
        <td>${lastSeenDate.toLocaleString()}</td>
      </tr>
    `;
    }).join('');
  }

  function updateStationSelect() {
    const select = document.getElementById('station-select');
    const hideOffline = document.getElementById('hide-offline')?.checked ?? true;
    
    if (!select) return;

    // 保存当前选中的值
    const currentValue = select.value;

    // 过滤基站
    let filteredStations = Array.from(stations.values());
    if (hideOffline) {
      filteredStations = filteredStations.filter(s => s.status === 'online');
    }

    select.innerHTML = '<option value="">请选择在线基站</option>' + 
      filteredStations.map(station => {
        const ip = station.ip || '未知';
        return `<option value="${station.id}">${station.id}</option>`;
      }).join('');
    
    // 恢复之前选中的值（如果仍然存在）
    if (currentValue && filteredStations.some(s => s.id === currentValue)) {
      select.value = currentValue;
    }
  }

  function filterStations(keyword) {
    const rows = document.querySelectorAll('#stations-tbody tr');
    rows.forEach(row => {
      const text = row.textContent.toLowerCase();
      row.style.display = text.includes(keyword.toLowerCase()) ? '' : 'none';
    });
  }

  function startSelfTest() {
    const stationId = document.getElementById('station-select').value;
    
    if (!stationId) {
      API.toast('请先选择基站', 'warning');
      return;
    }

    // 显示自检卡片
    const selfTestCard = document.getElementById('self-test-card');
    selfTestCard.style.display = 'block';

    // 重置状态
    resetTestStatus();

    // 更新状态
    document.getElementById('test-status').textContent = `正在检测基站 ${stationId}...`;

    // 模拟自检过程
    simulateSelfTest(stationId);
  }

  function resetTestStatus() {
    // 重置所有模块状态
    ['g', 'd', 'h'].forEach(module => {
      document.getElementById(`${module}-status`).textContent = '待检测';
      document.getElementById(`${module}-status`).className = 'module-status';
      document.getElementById(`${module}-result`).textContent = '';
      document.getElementById(`${module}-result`).className = 'module-result';
    });
  }

  function simulateSelfTest(stationId) {
    // 模拟G模块检测
    updateModuleStatus('g', 'testing', '检测中...');
    setTimeout(() => {
      const gResult = Math.random() > 0.2 ? '正常' : '异常';
      updateModuleStatus('g', gResult === '正常' ? 'success' : 'error', gResult === '正常' ? '正常' : '异常');
      
      // 模拟D模块检测
      updateModuleStatus('d', 'testing', '检测中...');
      setTimeout(() => {
        const dResult = Math.random() > 0.2 ? '正常' : '异常';
        updateModuleStatus('d', dResult === '正常' ? 'success' : 'error', dResult === '正常' ? '正常' : '异常');
        
        // 模拟H模块检测
        updateModuleStatus('h', 'testing', '检测中...');
        setTimeout(() => {
          const hResult = Math.random() > 0.2 ? '正常' : '异常';
          updateModuleStatus('h', hResult === '正常' ? 'success' : 'error', hResult === '正常' ? '正常' : '异常');
          
          // 更新总体状态
          document.getElementById('test-status').textContent = '检测完成';
        }, 2000);
      }, 2000);
    }, 2000);
  }

  function updateModuleStatus(module, status, result) {
    const statusEl = document.getElementById(`${module}-status`);
    const resultEl = document.getElementById(`${module}-result`);
    
    statusEl.textContent = status === 'testing' ? '检测中' : (status === 'success' ? '正常' : '异常');
    statusEl.className = `module-status ${status}`;
    
    if (result) {
      resultEl.textContent = result;
      resultEl.className = `module-result ${status}`;
    }
  }
})();