{# _content_analytics.html -- Talk counts by state and submission type as small bar charts #}
{# Usage: {% include ".../_content_analytics.html" with chart_data=chart_content_json %} #}

<div class="card card--static">
  <div style="padding: 1.25rem 1.5rem 0.75rem; border-bottom: 1px solid var(--color-border-light);">
    <div style="font-weight: 700; font-size: 0.95rem; color: var(--color-text);">Content Analytics</div>
    <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Talks, sessions, and schedule coverage</div>
  </div>
  <div style="padding: 1rem 1.5rem 1.25rem;">
    <div id="chart-content-summary" style="display: flex; gap: 1.5rem; margin-bottom: 1rem;"></div>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
      <canvas id="chart-content-by-state" style="width: 100%; height: 180px; display: block;"></canvas>
      <canvas id="chart-content-by-type" style="width: 100%; height: 180px; display: block;"></canvas>
    </div>
  </div>
</div>

<script>
(function() {
  var u = window._chartUtils;
  if (!u) return;
  var data = JSON.parse('{{ chart_data|escapejs }}');

  var summaryEl = document.getElementById('chart-content-summary');
  if (summaryEl) {
    var items = [
      { value: data.total_talks || 0, label: 'Talks' },
      { value: data.total_rooms || 0, label: 'Rooms' },
      { value: data.total_schedule_slots || 0, label: 'Schedule Slots' }
    ];
    var html = '';
    for (var i = 0; i < items.length; i++) {
      html += '<div style="text-align:center;flex:1;">' +
        '<div style="font-family:\'SF Mono\',SFMono-Regular,Menlo,monospace;font-size:1.4rem;font-weight:800;color:var(--color-text);">' + u.formatNumber(items[i].value) + '</div>' +
        '<div style="font-size:0.72rem;font-weight:600;color:' + u.COLORS.textMuted + ';text-transform:uppercase;letter-spacing:0.05em;">' + items[i].label + '</div>' +
        '</div>';
    }
    summaryEl.innerHTML = html;
  }

  function drawBarChart(canvasId, dataMap, title, palette, filterParam) {
    var canvas = document.getElementById(canvasId);
    if (!canvas) return;

    var entries = [];
    var keys = Object.keys(dataMap || {});
    for (var i = 0; i < keys.length; i++) {
      if (dataMap[keys[i]] > 0) {
        entries.push({ key: keys[i], label: u.capitalize(keys[i]), value: dataMap[keys[i]] });
      }
    }

    function drawFn() {
      var s = u.setupCanvas(canvas);
      var ctx = s.ctx, w = s.w, h = s.h;

      if (!entries.length) { u.drawEmpty(ctx, w, h, 'No data'); return; }

      var padL = 10, padR = 10, padT = 24, padB = 10;
      var labelW = 80;
      var barAreaW = w - padL - labelW - padR - 40;
      var maxItems = Math.min(entries.length, 8);
      var rowH = Math.min(28, (h - padT - padB) / maxItems);
      var maxVal = Math.max.apply(null, entries.map(function(d) { return d.value; })) || 1;

      var rowRects = [];

      function draw(t) {
        var progress = u.easeOutCubic(t);
        ctx.clearRect(0, 0, w, h);

        ctx.save();
        ctx.fillStyle = u.COLORS.text;
        ctx.font = '700 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.fillText(title, padL, 6);
        ctx.restore();

        rowRects = [];

        for (var i = 0; i < maxItems; i++) {
          var d = entries[i];
          var rowY = padT + i * rowH;
          var barY = rowY + 4;
          var barH = rowH - 10;

          ctx.save();
          ctx.fillStyle = u.COLORS.textMuted;
          ctx.font = '500 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
          ctx.textAlign = 'right';
          ctx.textBaseline = 'middle';
          var label = d.label.length > 12 ? d.label.substring(0, 11) + '\u2026' : d.label;
          ctx.fillText(label, padL + labelW - 6, barY + barH / 2);
          ctx.restore();

          var barX = padL + labelW;

          ctx.fillStyle = '#f0f1f4';
          u.roundRect(ctx, barX, barY, barAreaW, barH, 3);
          ctx.fill();

          var fillW = (d.value / maxVal) * barAreaW * progress;
          if (fillW > 0) {
            var color = palette[i % palette.length];
            ctx.fillStyle = color;
            u.roundRect(ctx, barX, barY, fillW, barH, fillW >= barAreaW - 1 ? 3 : [3, 0, 0, 3]);
            ctx.fill();
          }

          if (progress > 0.8) {
            ctx.save();
            ctx.fillStyle = u.COLORS.text;
            ctx.font = '700 9px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            ctx.fillText(d.value, barX + barAreaW + 6, barY + barH / 2);
            ctx.restore();
          }

          rowRects.push({ y: rowY, h: rowH, idx: i });
        }
      }

      function findHitRow(e) {
        var rect = canvas.getBoundingClientRect();
        var my = e.clientY - rect.top;
        for (var i = 0; i < rowRects.length; i++) {
          if (my >= rowRects[i].y && my < rowRects[i].y + rowRects[i].h) {
            return entries[rowRects[i].idx];
          }
        }
        return null;
      }

      u.animate(600, draw, function() {
        canvas.addEventListener('mousemove', function(e) {
          var hit = findHitRow(e);
          if (hit) {
            canvas.style.cursor = 'pointer';
            u.showTooltip(e,
              '<div style="font-weight:700;margin-bottom:2px;">' + hit.label + '</div>' +
              '<div>Count: <strong>' + u.formatNumber(hit.value) + '</strong></div>' +
              '<div style="font-size:0.7rem;color:#888;margin-top:3px;">Click to view talks</div>'
            );
          } else {
            canvas.style.cursor = 'default';
            u.hideTooltip();
          }
        });
        canvas.addEventListener('click', function(e) {
          var hit = findHitRow(e);
          if (hit && window._drilldownUrls && window._drilldownUrls.talkList) {
            var url = window._drilldownUrls.talkList;
            if (filterParam && hit.key) url += '?' + filterParam + '=' + encodeURIComponent(hit.key);
            window.location.href = url;
          }
        });
        canvas.addEventListener('mouseleave', function() { u.hideTooltip(); canvas.style.cursor = 'default'; });
      });
    }

    requestAnimationFrame(drawFn);
    window.addEventListener('resize', (function() {
      var timer;
      return function() { clearTimeout(timer); timer = setTimeout(drawFn, 200); };
    })());
  }

  drawBarChart('chart-content-by-state', data.by_state || {},  'By State',
    [u.COLORS.indigo, u.COLORS.emerald, u.COLORS.amber, u.COLORS.violet, u.COLORS.red, u.COLORS.teal, u.COLORS.blue],
    'state');
  drawBarChart('chart-content-by-type', data.by_type || {}, 'By Type',
    [u.COLORS.teal, u.COLORS.violet, u.COLORS.amber, u.COLORS.indigo, u.COLORS.emerald, u.COLORS.fuchsia, u.COLORS.red],
    'state');
})();
</script>