<div class="row">
  <div class="col-12">
    {% if data.hours %}
    {{ data.hours|json_script:"peak-hours-data" }}
    <div class="d-flex flex-wrap align-items-start justify-content-center gap-4">
      <div>
        <canvas id="peakHoursChart" width="300" height="300" style="max-width:100%;"></canvas>
      </div>
      <div class="table-responsive" style="max-height:360px; overflow-y:auto;">
        <table class="table table-sm table-borderless mb-0" id="peakHoursLegend">
          <thead>
            <tr>
              <th style="width:14px; padding-right:0;"></th>
              <th>Hour</th>
              <th class="text-end">Scrobbles</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in data.hours %}
            <tr>
              <td class="p-1 text-center">
                <span class="legend-swatch" data-idx="{{ forloop.counter0 }}" style="display:inline-block; width:12px; height:12px; border-radius:2px;"></span>
              </td>
              <td>
                {% if entry.hour == 0 %}
                  12 AM
                {% elif entry.hour < 12 %}
                  {{ entry.hour }} AM
                {% elif entry.hour == 12 %}
                  12 PM
                {% else %}
                  {{ entry.hour|add:"-12" }} PM
                {% endif %}
              </td>
              <td class="text-end">{{ entry.count }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    <script>
    (function() {
      var dataEl = document.getElementById('peak-hours-data');
      if (!dataEl) return;
      var data = JSON.parse(dataEl.textContent);
      var total = data.reduce(function(s, h) { return s + h.count; }, 0) || 1;
      var canvas = document.getElementById('peakHoursChart');
      if (!canvas) return;
      var ctx = canvas.getContext('2d');
      var cx = canvas.width / 2;
      var cy = canvas.height / 2;
      var radius = Math.min(cx, cy) - 10;
      var startAngle = -Math.PI / 2;

      var minCount = data.reduce(function(m, h) { return Math.min(m, h.count); }, Infinity);
      var maxCount = data.reduce(function(m, h) { return Math.max(m, h.count); }, 0);
      var range = maxCount - minCount || 1;

      function countToHue(count) {
        var t = (count - minCount) / range;
        return 120 * t;
      }

      data.forEach(function(entry, i) {
        var sliceAngle = (entry.count / total) * 2 * Math.PI;
        var hue = countToHue(entry.count);
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, radius, startAngle, startAngle + sliceAngle);
        ctx.closePath();
        ctx.fillStyle = 'hsl(' + hue + ', 70%, 50%)';
        ctx.fill();
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 1.5;
        ctx.stroke();
        startAngle += sliceAngle;
      });

      document.querySelectorAll('.legend-swatch').forEach(function(el) {
        var idx = parseInt(el.getAttribute('data-idx'), 10);
        var entry = data[idx];
        var hue = countToHue(entry.count);
        el.style.backgroundColor = 'hsl(' + hue + ', 70%, 50%)';
      });
    })();
    </script>
    {% else %}
    <p class="text-muted">No activity data found.</p>
    {% endif %}
  </div>
</div>
