{# _checkin_progress.html -- Check-in Progress radial ring component #}
{# Usage: {% include "django_program/manage/charts/_checkin_progress.html" with chart_data=chart_checkin_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);">Check-in Progress</div>
    <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Attendees checked in at the venue</div>
  </div>
  <div style="padding: 1.5rem; display: flex; align-items: center; justify-content: center;">
    <canvas id="chart-checkin-progress" style="width: 200px; height: 200px; display: block;"></canvas>
  </div>
</div>

<script>
(function() {
  var canvas = document.getElementById('chart-checkin-progress');
  if (!canvas) return;
  var u = window._chartUtils;
  if (!u) return;
  var data = JSON.parse('{{ chart_data|escapejs }}');

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

    var value = data.checked_in || 0;
    var total = data.total || 0;
    var cx = w / 2, cy = h / 2;
    var outerR = Math.min(w, h) / 2 - 12;
    var lineW = 14;
    var pct = total > 0 ? value / total : 0;

    var color1 = u.COLORS.indigo;
    var color2 = u.COLORS.teal;

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

      ctx.save();
      ctx.beginPath();
      ctx.arc(cx, cy, outerR, 0, Math.PI * 2);
      ctx.strokeStyle = '#f0f1f4';
      ctx.lineWidth = lineW;
      ctx.lineCap = 'round';
      ctx.stroke();
      ctx.restore();

      var sweepAngle = pct * Math.PI * 2 * progress;
      if (sweepAngle > 0.01) {
        ctx.save();
        var grad = ctx.createConicGradient(-Math.PI / 2, cx, cy);
        grad.addColorStop(0, color1);
        grad.addColorStop(pct * 0.5, color2);
        grad.addColorStop(pct, color1);
        grad.addColorStop(1, color1);

        ctx.beginPath();
        ctx.arc(cx, cy, outerR, -Math.PI / 2, -Math.PI / 2 + sweepAngle);
        ctx.strokeStyle = grad;
        ctx.lineWidth = lineW;
        ctx.lineCap = 'round';
        ctx.stroke();

        ctx.shadowColor = u.hexToRgba(color1, 0.3);
        ctx.shadowBlur = 12;
        ctx.beginPath();
        ctx.arc(cx, cy, outerR, -Math.PI / 2 + sweepAngle - 0.1, -Math.PI / 2 + sweepAngle);
        ctx.strokeStyle = color2;
        ctx.lineWidth = lineW;
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.restore();
      }

      var displayPct = Math.round(pct * 100 * progress);
      ctx.save();
      ctx.fillStyle = u.COLORS.text;
      ctx.font = '800 28px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(displayPct + '%', cx, cy - 8);

      ctx.fillStyle = u.COLORS.textMuted;
      ctx.font = '600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
      ctx.fillText(u.formatNumber(value) + ' / ' + u.formatNumber(total), cx, cy + 16);

      ctx.fillStyle = u.COLORS.textMuted;
      ctx.font = '700 9px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
      ctx.fillText('CHECKED IN', cx, cy + 32);
      ctx.restore();
    }

    u.animate(1000, draw);
  }

  requestAnimationFrame(drawChart);
  window.addEventListener('resize', (function() {
    var timer;
    return function() { clearTimeout(timer); timer = setTimeout(drawChart, 200); };
  })());
})();
</script>