// info-card.js - Unified info card module

let currentType = null;

const CARD_CONFIG = {
  cable: {
    icon: '🛥️',
    title: '电缆详情',
    className: 'cable',
    fields: [
      { key: 'name', label: '名称' },
      { key: 'owner', label: '所有者' },
      { key: 'status', label: '状态' },
      { key: 'length', label: '长度' },
      { key: 'coords', label: '经纬度' },
      { key: 'rfs', label: '投入使用' }
    ]
  },
  satellite: {
    icon: '🛰️',
    title: '卫星详情',
    className: 'satellite',
    fields: [
      { key: 'name', label: '名称' },
      { key: 'norad_id', label: 'NORAD ID' },
      { key: 'inclination', label: '倾角', unit: '°' },
      { key: 'period', label: '周期', unit: '分钟' },
      { key: 'perigee', label: '近地点', unit: 'km' },
      { key: 'apogee', label: '远地点', unit: 'km' }
    ]
  },
  supercomputer: {
    icon: '🖥️',
    title: '超算详情',
    className: 'supercomputer',
    fields: [
      { key: 'name', label: '名称' },
      { key: 'rank', label: '排名' },
      { key: 'r_max', label: 'Rmax', unit: 'GFlops' },
      { key: 'r_peak', label: 'Rpeak', unit: 'GFlops' },
      { key: 'country', label: '国家' },
      { key: 'city', label: '城市' }
    ]
  },
  gpu_cluster: {
    icon: '🎮',
    title: 'GPU集群详情',
    className: 'gpu_cluster',
    fields: [
      { key: 'name', label: '名称' },
      { key: 'country', label: '国家' },
      { key: 'city', label: '城市' }
    ]
  }
};

export function initInfoCard() {
  // Close button removed - now uses external clear button
}

export function setInfoCardNoBorder(noBorder = true) {
  const card = document.getElementById('info-card');
  if (card) {
    card.classList.toggle('no-border', noBorder);
  }
}

export function showInfoCard(type, data) {
  const config = CARD_CONFIG[type];
  if (!config) {
    console.warn('Unknown info card type:', type);
    return;
  }

  currentType = type;
  const card = document.getElementById('info-card');
  const icon = document.getElementById('info-card-icon');
  const title = document.getElementById('info-card-title');
  const content = document.getElementById('info-card-content');

  card.className = 'info-card ' + config.className;
  icon.textContent = config.icon;
  title.textContent = config.title;

  let html = '';
  for (const field of config.fields) {
    let value = data[field.key];
    
    if (value === undefined || value === null || value === '') {
      value = '-';
    } else if (typeof value === 'number') {
      value = value.toLocaleString();
    }
    
    if (field.unit && value !== '-') {
      value = value + ' ' + field.unit;
    }
    
    html += `
      <div class="info-card-property">
        <span class="info-card-label">${field.label}</span>
        <span class="info-card-value">${value}</span>
      </div>
    `;
  }

  content.innerHTML = html;
  card.style.display = 'block';
}

export function hideInfoCard() {
  const card = document.getElementById('info-card');
  if (card) {
    card.style.display = 'none';
  }
  currentType = null;
}

export function getCurrentType() {
  return currentType;
}