{{define "devices"}}
<div class="stats">
  <div class="stat accent-teal">
    <div class="k metric-label">{{icon "devices"}}<span>设备总数</span></div>
    <div class="v">{{.DeviceCount}}</div>
    <div class="hint">当前纳管设备</div>
  </div>
  <div class="stat accent-green">
    <div class="k metric-label">{{icon "online"}}<span>在线设备</span></div>
    <div class="v">{{.OnlineCount}}</div>
    <div class="hint">可接收状态与控制</div>
  </div>
  <div class="stat accent-slate">
    <div class="k">离线设备</div>
    <div class="v">{{.OfflineCount}}</div>
    <div class="hint">需要检查网络或进程</div>
  </div>
  <div class="stat accent-amber">
    <div class="k">失败操作</div>
    <div class="v">{{.FailedTaskCount}}</div>
    <div class="hint">最近任务失败数</div>
  </div>
</div>

<div class="card">
  <div class="section-title">
    <div>
      <h2>设备列表</h2>
    </div>
    <div class="table-tools">
      <input id="device-filter" placeholder="搜索设备名、ID 或 IP" />
    </div>
  </div>

  <form method="post" action="/devices/batch-action">
    <div class="batch-toolbar" id="batch-config"{{if not .SelectedDeviceIDs}} style="display:none"{{end}}>
      <div>
        <div class="batch-toolbar-count">已选 {{len .SelectedDeviceIDs}} 台</div>
      </div>
      <div class="actions">
        <button type="submit" name="action" value="media_restart" class="primary">重启服务</button>
        <button type="submit" name="action" value="media_start" class="secondary">启动服务</button>
        <button type="submit" name="action" value="media_stop" class="danger">停止服务</button>
        <button type="submit" name="action" value="reload" class="secondary" {{if .ReloadSummary}}onclick='return confirm("将重载当前运行配置：{{.ReloadSummary}}")'{{end}}>重载运行配置</button>
        <button type="submit" name="action" value="rollback" class="secondary" {{if .RollbackSummary}}onclick='return confirm("将回滚到上一版运行配置：{{.RollbackSummary}}")'{{end}}>回滚运行配置</button>
        {{$allOffline := true}}{{range .SelectedDevices}}{{if .Online}}{{$allOffline = false}}{{end}}{{end}}
        {{if $allOffline}}
        <button type="submit" id="cleanup-btn" name="action" value="cleanup_offline" class="danger" style="display:none" onclick="var n=document.querySelectorAll('input[name=device_id]:checked').length;return confirm('确认清理选中的 '+n+' 台离线设备及其全部关联数据？此操作不可恢复。')">清理选中离线设备</button>
        {{end}}
        <a class="btn secondary" href="{{.BatchConfigURL}}">下发设备分配</a>
        <a class="btn secondary" href="/devices">清空选择</a>
      </div>
    </div>
    <div class="table-wrap">
      <table id="device-list">
        <thead>
          <tr>
            <th style="width:52px">选中</th>
            <th>设备</th>
            <th>状态</th>
            <th>当前配置</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
           {{range .DeviceRows}}
          {{$rowWarn := and .Device.Online (or (and .ConfigStatus (not .ConfigStatus.MediaServer.Running)) (not .ConfigStatus))}}
          <tr {{if $rowWarn}}class="device-row-warn"{{end}}>
            <td class="select-cell">
              <input type="checkbox" name="device_id" value="{{.Device.DeviceID}}" {{if hasString $.SelectedDeviceIDs .Device.DeviceID}}checked{{end}} />
            </td>
            <td>
              <div class="device-cell">
                <div class="device-avatar">{{icon "device"}}</div>
                <div>
                  <div class="device-name">{{displayDeviceName .Device .ConfigStatus}}</div>
                  <div class="device-meta-line">
                    {{if displayDeviceTechnicalName .Device}}<span>{{displayDeviceTechnicalName .Device}}</span>{{end}}
                    <span class="mono">{{.Device.IP}}</span>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <div class="state-stack">
                <div class="state-row">
                  {{if .Device.Online}}<span class="status-dot ok"></span><span class="status-text">在线</span>{{else}}<span class="status-dot bad"></span><span class="status-text">离线</span>{{end}}
                  {{if .ConfigStatus}}
                    {{if .ConfigStatus.MediaServer.Running}}<span class="pill ok">运行中</span>{{else}}<span class="pill bad">未运行</span>{{end}}
                  {{else if .Device.Online}}
                    <span class="pill warn">待确认</span>
                  {{else}}
                    <span class="pill bad">未知</span>
                  {{end}}
                  {{if .IntegrationStale}}<span class="pill warn">需重新下发</span>{{end}}
                </div>
              </div>
            </td>
            <td>
              <div class="config-inline">
                {{if and .ConfigStatus .ConfigStatus.Metadata.ConfigID}}
                  <div class="mono">{{.ConfigStatus.Metadata.ConfigID}}</div>
                {{else if .ConfigStatusErr}}
                  <div class="muted small">未取到配置摘要</div>
                {{else}}
                  <div class="muted small">暂无配置摘要</div>
                {{end}}
              </div>
            </td>
            <td>
              <div class="actions">
                <a class="btn ghost" href="/devices/{{.Device.DeviceID}}">{{icon "detail"}}<span>详情</span></a>
              </div>
            </td>
          </tr>
          {{else}}
          <tr>
            <td colspan="5">
              <div class="empty-state">
                <div class="empty-title">还没有设备</div>
                <div class="muted">当前后台还没有发现或录入任何设备。</div>
              </div>
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </form>
</div>

<script>
(() => {
  const input = document.getElementById('device-filter');
  const table = document.getElementById('device-list');
  const selectedBoxes = table ? table.querySelectorAll('input[type="checkbox"][name="device_id"]') : [];
  if (!input || !table) return;
  input.addEventListener('input', () => {
    const q = (input.value || '').trim().toLowerCase();
    for (const row of table.tBodies[0].rows) {
      const text = row.innerText.toLowerCase();
      row.style.display = (!q || text.includes(q)) ? '' : 'none';
    }
  });
  const syncSelected = () => {
    const url = new URL(window.location.href);
    url.searchParams.delete('selected');
    for (const box of selectedBoxes) {
      if (box.checked) {
        url.searchParams.append('selected', box.value);
      }
    }
    const next = `${url.pathname}${url.searchParams.toString() ? `?${url.searchParams.toString()}` : ''}`;
    history.replaceState(null, '', next);
    // Toggle batch toolbar visibility without full page reload
    const toolbar = document.getElementById('batch-config');
    const checked = document.querySelectorAll('input[type="checkbox"][name="device_id"]:checked');
    if (toolbar) {
      toolbar.style.display = checked.length > 0 ? '' : 'none';
      const countEl = toolbar.querySelector('.batch-toolbar-count');
      if (countEl) countEl.textContent = `已选 ${checked.length} 台`;
    }
    // Show/hide cleanup button based on whether ALL selected devices are offline
    const cleanupBtn = document.getElementById('cleanup-btn');
    if (cleanupBtn) {
      let allOffline = checked.length > 0;
      checked.forEach(cb => {
        const row = cb.closest('tr');
        if (row) {
          const statusCell = row.querySelector('td:nth-child(3)');
          if (statusCell && !statusCell.textContent.includes('离线')) allOffline = false;
        }
      });
      cleanupBtn.style.display = allOffline ? '' : 'none';
    }
  };
  for (const box of selectedBoxes) {
    box.addEventListener('change', syncSelected);
  }
})();
</script>
{{end}}
