/** Awareness panel: memorizer state, sensor readings, node meters. */

import { esc, truncate } from './util.js';

let _sensorReadings = {};

export function updateAwarenessState(state) {
  const body = document.getElementById('aw-state-body');
  if (!body) return;
  const display = [
    ['user', state.user_name],
    ['mood', state.user_mood],
    ['topic', state.topic],
    ['lang', state.language],
    ['style', state.style_hint],
    ['situation', state.situation],
  ];
  const facts = state.facts || [];
  const history = state.topic_history || [];

  let html = display.map(([k, v]) =>
    `<div class="aw-row"><span class="aw-key">${esc(k)}</span><span class="aw-val">${esc(v || 'null')}</span></div>`
  ).join('');

  if (facts.length) {
    html += '<div class="aw-row"><span class="aw-key">facts</span><span class="aw-val">'
      + facts.map(f => esc(truncate(f, 40))).join('<br>') + '</span></div>';
  }
  if (history.length) {
    html += '<div class="aw-row"><span class="aw-key">topics</span><span class="aw-val">'
      + history.map(t => esc(truncate(t, 25))).join(', ') + '</span></div>';
  }
  body.innerHTML = html;
}

export function updateAwarenessSensors(tick, deltas) {
  const body = document.getElementById('aw-sensor-body');
  if (!body) return;

  for (const [k, v] of Object.entries(deltas)) {
    _sensorReadings[k] = v;
  }
  let html = `<div class="aw-row"><span class="aw-key">tick</span><span class="aw-val">#${tick}</span></div>`;
  for (const [k, v] of Object.entries(_sensorReadings)) {
    html += `<div class="aw-row"><span class="aw-key">${esc(k)}</span><span class="aw-val">${esc(String(v))}</span></div>`;
  }
  body.innerHTML = html;
}

export function updateMeter(node, tokens, maxTokens, fillPct) {
  const meter = document.getElementById('meter-' + node);
  if (!meter) return;
  const bar = meter.querySelector('.nm-bar');
  const text = meter.querySelector('.nm-text');
  if (bar) bar.style.width = fillPct + '%';
  if (text) text.textContent = `${tokens}/${maxTokens}t`;
}