// ===== ODS信息展示页面 =====
const { useState: useStateODS } = React;

function ODSPage({ device, ods, onBack, onStartLockout }) {
  const [activeTab, setActiveTab] = useStateODS('energy');
  const [expanded, setExpanded] = useStateODS({});

  if (!ods) {
    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>{device?.name || '设备'}</h1>
            <div style={{ width: 40 }} />
          </div>
        </div>
        <div className="page-body">
          <div className="empty-state">
            <svg className="empty-state-icon" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
              <path d="M12 8v4M12 16h.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            </svg>
            <p className="empty-state-text">暂无ODS数据</p>
            <p className="empty-state-desc">该设备的上锁挂牌作业指导书尚未录入</p>
          </div>
        </div>
      </div>
    );
  }

  const energyTypes = {};
  ods['能量信息'].forEach(e => {
    if (!energyTypes[e['类型']]) energyTypes[e['类型']] = [];
    energyTypes[e['类型']].push(e);
  });

  const toggleExpand = (key) => {
    setExpanded(prev => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div className="page">
      <div className="hazard-stripe" />

      <div className="page-header" style={{ paddingTop: 12 }}>
        <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 style={{ fontSize: 17 }}>{ods['设备名称']}</h1>
          <div style={{ width: 40 }} />
        </div>
      </div>

      <div className="page-body">
        {/* 设备概览 */}
        <div className="card" style={{ marginBottom: '16px' }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '10px',
            marginBottom: '14px',
          }}>
            <div style={{
              width: '48px',
              height: '48px',
              borderRadius: '12px',
              background: 'rgba(255,209,0,0.15)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M20 7h-3V3H7v4H4v11h16V7zM9 5h6v2H9V5z" fill="var(--safety-yellow)" />
              </svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: '17px', fontWeight: 700 }}>{ods['设备名称']}</div>
              <div style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '2px' }}>
                {ods['文件编号']} · 版本 {ods['文件版本']}
              </div>
            </div>
            <span className="status-badge status-active">
              <svg width="10" height="10" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" fill="currentColor" />
              </svg>
              {ods['安全等级']}
            </span>
          </div>

          <div className="info-grid">
            <div className="info-item">
              <div className="info-item-label">设备编号</div>
              <div className="info-item-value">{ods['设备编号']}</div>
            </div>
            <div className="info-item">
              <div className="info-item-label">设备位置</div>
              <div className="info-item-value">{ods['设备位置']}</div>
            </div>
            <div className="info-item">
              <div className="info-item-label">能量类型</div>
              <div className="info-item-value">{Object.keys(energyTypes).length} 种</div>
            </div>
            <div className="info-item">
              <div className="info-item-label">锁定点</div>
              <div className="info-item-value">{ods['能量信息'].length} 个</div>
            </div>
          </div>
        </div>

        {/* Tab切换 */}
        <div className="tabs">
          <button
            className={`tab ${activeTab === 'energy' ? 'active' : ''}`}
            onClick={() => setActiveTab('energy')}
          >
            能量信息
          </button>
          <button
            className={`tab ${activeTab === 'signal' ? 'active' : ''}`}
            onClick={() => setActiveTab('signal')}
          >
            信号信息
          </button>
          <button
            className={`tab ${activeTab === 'activity' ? 'active' : ''}`}
            onClick={() => setActiveTab('activity')}
          >
            作业活动
          </button>
        </div>

        {/* 能量信息 */}
        {activeTab === 'energy' && (
          <div>
            {Object.entries(energyTypes).map(([type, points]) => (
              <div key={type} style={{ marginBottom: '16px' }}>
                <div
                  className="collapsible-header"
                  onClick={() => toggleExpand('energy-' + type)}
                >
                  <div className="collapsible-title">
                    <span className={`lock-point-tag ${ENERGY_TYPE_TAGS[type]?.class || ''}`}>
                      {type}
                    </span>
                    <span style={{ color: 'var(--text-primary)' }}>{points.length} 个锁定点</span>
                  </div>
                  <svg
                    className={`collapsible-arrow ${expanded['energy-' + type] ? 'open' : ''}`}
                    width="18" height="18" viewBox="0 0 24 24" fill="none"
                  >
                    <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>

                {expanded['energy-' + type] && (
                  <div className="collapsible-body" style={{ padding: 0 }}>
                    {points.map((p, i) => (
                      <div key={i} className="lock-point-card">
                        <div className="lock-point-header">
                          <span className="lock-point-id">{p['锁定点编号']}</span>
                          <span style={{ fontSize: '12px', color: 'var(--text-muted)' }}>
                            {p['能量等级']}
                          </span>
                        </div>
                        <div className="lock-point-detail">
                          <div>控制范围：{p['控制范围']}</div>
                          <div>锁定装置：{p['锁定装置']}</div>
                        </div>
                        <div className="lock-point-verify">
                          <span style={{ color: 'var(--success-light)', fontWeight: 600 }}>验证手段：</span>
                          {p['验证手段']}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {/* 信号信息 */}
        {activeTab === 'signal' && (
          <div>
            {ods['信号信息'] && ods['信号信息'].length > 0 ? (
              ods['信号信息'].map((s, i) => (
                <div key={i} className="lock-point-card">
                  <div className="lock-point-header">
                    <span className="lock-point-id">{s['安全装置']}</span>
                    <span className="lock-point-tag tag-signal">{s['锁定点编号']}</span>
                  </div>
                  <div className="lock-point-detail">
                    <div>控制范围：{s['控制范围']}</div>
                    <div>能量等级：{s['能量等级']}</div>
                  </div>
                  <div className="lock-point-verify">
                    <span style={{ color: 'var(--success-light)', fontWeight: 600 }}>验证手段：</span>
                    {s['验证手段']}
                  </div>
                </div>
              ))
            ) : (
              <div className="empty-state">
                <svg className="empty-state-icon" viewBox="0 0 24 24" fill="none">
                  <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" stroke="currentColor" strokeWidth="2" />
                  <path d="M12 8v4M12 16h.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
                <p className="empty-state-text">暂无信号锁定点</p>
              </div>
            )}
          </div>
        )}

        {/* 作业活动 */}
        {activeTab === 'activity' && (
          <div>
            {ods['作业活动'] && ods['作业活动'].length > 0 ? (
              ods['作业活动'].map((a, i) => (
                <div key={i} className="lock-point-card">
                  <div className="lock-point-header">
                    <span className="lock-point-id" style={{ fontSize: 14 }}>{a['活动名称']}</span>
                  </div>
                  <div className="lock-point-detail">
                    {a['控制范围'] && <div>控制范围：{a['控制范围']}</div>}
                    {a['能源锁定点'] && a['能源锁定点'] !== 'NA' && (
                      <div>能源锁定点：{a['能源锁定点']}</div>
                    )}
                    {a['信号锁定点'] && a['信号锁定点'] !== 'NA' && (
                      <div>信号锁定点：{a['信号锁定点']}</div>
                    )}
                    {a['锁定方式'] && <div>锁定方式：{a['锁定方式']}</div>}
                  </div>
                </div>
              ))
            ) : (
              <div className="empty-state">
                <p className="empty-state-text">暂无作业活动信息</p>
              </div>
            )}
          </div>
        )}
      </div>

      {/* 底部操作 */}
      <div className="bottom-action">
        <button className="btn btn-primary" onClick={onStartLockout}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M6 10V7a6 6 0 1 1 12 0v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            <rect x="4" y="10" width="16" height="11" rx="2" fill="currentColor" />
          </svg>
          开始锁定作业
        </button>
      </div>
    </div>
  );
}

window.ODSPage = ODSPage;