// Generated, do not edit. sha256:1196ce67207fc0b54b2fc602d2f16cc37c4414638c2f9a09a7c16d83c58acd2f
import { apiMetricsGlobal } from '../data/api-metrics.js';
import { getSettings } from '../data/preferences.js';
import { t } from '../i18n/index.js';
import { esc } from '../ui/escape.js';
import { fmtInt } from '../ui/format.js';
import { CONFIG, METRICS } from '../../shared/config.js';

function sinceBucket(minutes) {
  return new Date(Date.now() - minutes * 60000).toISOString().slice(0, 16);
}

function failState(calls, fail) {
  if (!calls) return 'ok';
  const ratio = fail / calls;
  if (ratio >= METRICS.FAIL_BAD) return 'bad';
  if (ratio >= METRICS.FAIL_WARN) return 'warn';
  return 'ok';
}

function tileHtml(label, value, state) {
  return `<div class="metric-tile">
      <span class="metric-dot is-${state}"></span>
      <div class="metric-meta"><div class="t-value">${value}</div><div class="t-label t-label--ter">${label}</div></div>
    </div>`;
}

export async function renderMetricsWidget(host) {
  try {
    const settings = await getSettings();
    const schema = settings ? settings.version : null;
    const dbState = schema === CONFIG.SCHEMA_VERSION ? 'ok' : 'warn';

    const m = await apiMetricsGlobal(sinceBucket(METRICS.WINDOW_MINUTES));
    const errState = failState(m.calls, m.fail);
    const errPct = m.calls ? Math.round((m.fail / m.calls) * 100) : 0;

    const tiles = [
      tileHtml(t('sysmetrics.db'), `v${schema != null ? schema : '?'}`, dbState),
      tileHtml(t('sysmetrics.calls'), fmtInt(m.calls), m.calls ? 'ok' : 'warn'),
      tileHtml(t('sysmetrics.errors'), `${errPct}%`, errState),
    ];

    host.innerHTML = `<div class="card metrics-card">
        <div class="t-label">${t('dashboard.widget.metrics')}</div>
        <div class="metrics-strip" style="margin-top:0.6rem">${tiles.join('')}</div>
        <div class="t-muted-cell" style="margin-top:0.5rem">${t('sysmetrics.window')} ${METRICS.WINDOW_MINUTES} min</div>
      </div>`;
  } catch (err) {
    console.error('[metrics-widget]', err);
    host.innerHTML = `<div class="card"><div class="t-label">${t('dashboard.widget.metrics')}</div><div class="t-body-sm t-muted">⚠ ${esc(err.message)}</div></div>`;
  }
}