import {
  capChips, doneStats, backlogSeries, areaPath, laneChips, dayStart,
} from './viewmodel.js';

/** Static skeleton: four KPI cards; values are filled client-side. */
export function kpiSkeletonHtml(): string {
  return `
<section class="b2-kpis" aria-label="Kennzahlen">
  <div class="b2-kpi b2-glass" id="kpiOpen">
    <div class="b2-lbl">Open</div>
    <div class="b2-val"><span data-k="count">–</span> <small data-k="total"></small></div>
    <div class="b2-miniarea" data-k="area"></div>
  </div>
  <div class="b2-kpi b2-glass" id="kpiInProgress">
    <div class="b2-lbl">In Progress</div>
    <div class="b2-val"><span data-k="count">–</span></div>
    <div class="b2-chips" data-k="chips"></div>
  </div>
  <div class="b2-kpi b2-glass" id="kpiReview">
    <div class="b2-lbl">Review</div>
    <div class="b2-val"><span data-k="count">–</span></div>
    <div class="b2-chips" data-k="chips"></div>
  </div>
  <div class="b2-kpi b2-glass" id="kpiDone">
    <div class="b2-lbl">Done</div>
    <div class="b2-val"><span data-k="count">–</span> <small data-k="total"></small></div>
    <div class="b2-cap-r" data-k="cap"></div>
    <div class="b2-pbar"><i data-k="bar"></i></div>
  </div>
</section>`;
}

/**
 * Inline script: injects the pure viewmodel helpers (toString) plus the shared
 * DAY_MS/dayStart they reference, and defines window.__b2UpdateKpis(tasks,
 * agentColor), called by the data layer on every refresh. agentColor(name)
 * comes from the columns module (existing per-agent palette).
 */
export function kpiJs(): string {
  return `
var DAY_MS = 24 * 3600 * 1000;
${dayStart.toString()}
${capChips.toString()}
${doneStats.toString()}
${backlogSeries.toString()}
${areaPath.toString()}
${laneChips.toString()}
window.__b2UpdateKpis = function (tasks, agentColor) {
  var kpiPrev = window.__b2KpiPrev || (window.__b2KpiPrev = {});
  function flashKpi(card, value) {
    if (kpiPrev[card] !== undefined && kpiPrev[card] !== value) {
      var cardEl = document.getElementById(card);
      if (cardEl) { cardEl.classList.remove('metric-flash'); void cardEl.offsetWidth; cardEl.classList.add('metric-flash'); }
    }
    kpiPrev[card] = value;
  }
  function setK(card, key, fn) {
    var el = document.querySelector('#' + card + ' [data-k="' + key + '"]');
    if (el) fn(el);
  }
  // Open
  var open = tasks.filter(function (t) { return t.status === 'open'; });
  setK('kpiOpen', 'count', function (el) { el.textContent = String(open.length); });
  flashKpi('kpiOpen', String(open.length));
  setK('kpiOpen', 'total', function (el) {
    el.textContent = '/ ' + tasks.filter(function (t) { return t.status !== 'cancelled'; }).length;
  });
  setK('kpiOpen', 'area', function (el) {
    var p = areaPath(backlogSeries(tasks, 14), 120, 26);
    el.innerHTML = '<svg width="100%" height="26" viewBox="0 0 120 26" preserveAspectRatio="none">'
      + '<path fill="rgba(148,163,184,.18)" d="' + p.area + '"/>'
      + '<path class="b2-spark" fill="none" stroke="#94a3b8" stroke-width="1.5" d="' + p.line + '"/></svg>';
  });
  // In Progress + Review chips (max 3, then +n)
  ['in_progress', 'review'].forEach(function (status) {
    var card = status === 'review' ? 'kpiReview' : 'kpiInProgress';
    var chips = laneChips(tasks, status);
    var capped = capChips(chips, 3);
    setK(card, 'count', function (el) { el.textContent = String(chips.length); });
    flashKpi(card, String(chips.length));
    setK(card, 'chips', function (el) {
      el.innerHTML = capped.visible.map(function (c) {
        var color = agentColor ? agentColor(c.name) : '#a5b4fc';
        var initial = c.name.charAt(0).toUpperCase();
        var time = c.minutes == null ? '' : (status === 'review' ? 'prüft ' : '') + c.minutes + 'm';
        var dot = status === 'in_progress' ? '<span class="b2-cdot"></span>' : '';
        return '<span class="b2-achip"><i style="background:' + color + '">' + initial + '</i>' + dot + time + '</span>';
      }).join('') + (capped.hidden > 0 ? '<span class="b2-achip b2-more">+' + capped.hidden + '</span>' : '');
    });
  });
  // Done
  var ds = doneStats(tasks);
  setK('kpiDone', 'count', function (el) { el.textContent = String(ds.done); });
  flashKpi('kpiDone', String(ds.done));
  setK('kpiDone', 'total', function (el) { el.textContent = '/ ' + ds.total; });
  setK('kpiDone', 'cap', function (el) {
    el.textContent = ds.pct + '% · +' + ds.doneThisWeek + ' diese Woche';
  });
  setK('kpiDone', 'bar', function (el) { el.style.width = ds.pct + '%'; });
};`;
}