// inspector.js — cell details from /api/cell, in the server's groups
import { api, el } from './ui.js';
import { fmtLatLon } from './units.js';

export function groupFields(fields) {
  const groups = new Map();
  for (const f of fields) {
    if (!groups.has(f.group)) groups.set(f.group, []);
    groups.get(f.group).push(f);
  }
  return groups;
}

export function fmtValue(f) {
  if (f.text !== undefined) return f.text;
  const v = Math.abs(f.value) >= 100 ? Math.round(f.value).toLocaleString('en-US') : String(+f.value.toFixed(2));
  return f.unit ? `${v} ${f.unit}` : v;
}

let latest = 0;

export async function inspect(box, p, era = '') {
  const mine = ++latest;
  box.replaceChildren(el('p', { class: 'muted' }, `Loading ${fmtLatLon(p.lat, p.lon)}…`));
  let c;
  try {
    c = await api(`api/cell?lat=${p.lat}&lon=${p.lon}${era ? `&era=${encodeURIComponent(era)}` : ''}`);
  } catch (e) {
    if (mine === latest) box.replaceChildren(el('p', { class: 'warn' }, `Could not load the cell: ${e.message}`));
    throw e;
  }
  if (mine !== latest) return;   // a newer click won
  box.replaceChildren(
    el('p', {}, el('b', {}, fmtLatLon(c.lat, c.lon)), el('br'), el('span', { class: 'muted' }, `H3 cell ${c.cell}`),
      c.era ? el('br') : null, c.era ? el('span', { class: 'muted' }, c.era.label) : null),
    ...[...groupFields(c.fields)].map(([group, fs]) => el('div', { class: 'fields' }, el('h4', {}, group),
      fs.map(f => el('div', {}, el('span', {}, f.label),
        el('span', {}, fmtValue(f), f.alt ? el('span', { class: 'alt' }, ` · ${f.alt}`) : null))))));
}