// ===== 设备列表页面 =====
const { useState: useStateDL, useMemo: useMemoDL } = React;

function DeviceList({ onSelectDevice, onBack }) {
  const [search, setSearch] = useStateDL('');
  const [filterType, setFilterType] = useStateDL('all');

  const filtered = useMemoDL(() => {
    return appData.devices.filter(d => {
      if (search && !d.name.includes(search)) return false;
      if (filterType === 'hasODS' && !d.hasODS) return false;
      if (filterType === 'noODS' && d.hasODS) return false;
      return true;
    });
  }, [search, filterType]);

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-header-content">
          <button className="back-btn" onClick={onBack}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
          <h1>设备列表</h1>
          <div style={{ width: 40 }} />
        </div>
      </div>

      <div className="page-body">
        <div className="search-box">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" stroke="currentColor" strokeWidth="2" opacity="0.5" />
            <path d="M21 21l-4.35-4.35" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
          </svg>
          <input
            type="text"
            placeholder="搜索设备名称..."
            value={search}
            onChange={e => setSearch(e.target.value)}
          />
        </div>

        <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
          {[
            { id: 'all', label: '全部' },
            { id: 'hasODS', label: '有ODS' },
            { id: 'noODS', label: '无ODS' },
          ].map(f => (
            <button
              key={f.id}
              onClick={() => setFilterType(f.id)}
              style={{
                padding: '6px 14px',
                background: filterType === f.id ? 'var(--safety-yellow)' : 'var(--industrial-gray)',
                color: filterType === f.id ? 'var(--industrial-darker)' : 'var(--text-secondary)',
                border: 'none',
                borderRadius: '8px',
                fontSize: '13px',
                fontWeight: filterType === f.id ? 700 : 500,
                cursor: 'pointer',
                fontFamily: 'inherit',
              }}
            >
              {f.label}
            </button>
          ))}
          <div style={{
            marginLeft: 'auto',
            padding: '6px 12px',
            color: 'var(--text-muted)',
            fontSize: '13px',
            fontWeight: 500,
          }}>
            共 {filtered.length} 台
          </div>
        </div>

        <div>
          {filtered.map(device => (
            <div
              key={device.id}
              className="list-item"
              onClick={() => onSelectDevice(device.id)}
            >
              <div className="list-item-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M20 7h-3V3H7v4H4v11h16V7zM9 5h6v2H9V5z" fill="var(--safety-yellow)" opacity="0.9" />
                  <path d="M12 11v4M10 13h4" stroke="var(--industrial-darker)" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </div>
              <div className="list-item-content">
                <div className="list-item-title">{device.name}</div>
                <div className="list-item-subtitle">
                  {device.id} · {device.hasODS ? device.odsId : '暂无ODS数据'}
                </div>
              </div>
              <div className="list-item-arrow">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M9 18l6-6-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            </div>
          ))}
        </div>

        {filtered.length === 0 && (
          <div className="empty-state">
            <svg className="empty-state-icon" viewBox="0 0 24 24" fill="none">
              <path d="M10 16l4-4-4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="2" />
            </svg>
            <p className="empty-state-text">未找到匹配的设备</p>
            <p className="empty-state-desc">试试其他关键词</p>
          </div>
        )}
      </div>
    </div>
  );
}

window.DeviceList = DeviceList;