{# _payment_methods.html -- Payment Methods donut chart component #}
{# Usage: {% include "django_program/manage/charts/_payment_methods.html" with chart_data=chart_payments_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);">Payment Methods</div>
    <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Breakdown of successful payments</div>
  </div>
  <div style="padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center;">
    <canvas id="chart-payment-methods" style="width: 240px; height: 240px; display: block;"></canvas>
    <div id="chart-payment-methods-legend" style="margin-left: 1.5rem;"></div>
  </div>
</div>

<script>
(function() {
  var canvas = document.getElementById('chart-payment-methods');
  var legendEl = document.getElementById('chart-payment-methods-legend');
  if (!canvas) return;
  var u = window._chartUtils;
  if (!u) return;
  var rawData = JSON.parse('{{ chart_data|escapejs }}');

  var chartData = rawData.map(function(d) {
    return { label: u.capitalize(d.method), value: d.count, total: d.total };
  });
  var colors = rawData.map(function(d) { return u.METHOD_COLORS[d.method] || u.COLORS.grayDark; });

  function drawChart() {
    var s = u.setupCanvas(canvas);
    var ctx = s.ctx, w = s.w, h = s.h;
    if (!chartData || !chartData.length || chartData.every(function(d) { return d.value === 0; })) {
      u.drawEmpty(ctx, w, h, 'No payments recorded');
      if (legendEl) legendEl.innerHTML = '';
      return;
    }

    var cx = w / 2, cy = h / 2;
    var outerR = Math.min(w, h) / 2 - 8;
    var innerR = outerR * 0.62;
    var total = chartData.reduce(function(acc, d) { return acc + d.value; }, 0);

    var segments = [];
    var cumAngle = -Math.PI / 2;
    for (var i = 0; i < chartData.length; i++) {
      var sweep = (chartData[i].value / total) * Math.PI * 2;
      segments.push({ start: cumAngle, end: cumAngle + sweep, idx: i });
      cumAngle += sweep;
    }

    function draw(t) {
      var progress = u.easeOutQuart(t);
      var maxAngle = -Math.PI / 2 + Math.PI * 2 * progress;
      ctx.clearRect(0, 0, w, h);

      ctx.save();
      ctx.beginPath();
      ctx.arc(cx, cy, outerR, 0, Math.PI * 2);
      ctx.arc(cx, cy, innerR, 0, Math.PI * 2, true);
      ctx.fillStyle = '#f0f1f4';
      ctx.fill();
      ctx.restore();

      for (var i = 0; i < segments.length; i++) {
        var seg = segments[i];
        var drawEnd = Math.min(seg.end, maxAngle);
        if (drawEnd <= seg.start) continue;

        ctx.save();
        ctx.beginPath();
        ctx.arc(cx, cy, outerR, seg.start, drawEnd);
        ctx.arc(cx, cy, innerR, drawEnd, seg.start, true);
        ctx.closePath();
        ctx.fillStyle = colors[i % colors.length];
        ctx.fill();
        ctx.restore();
      }

      if (progress > 0.5) {
        var centerAlpha = Math.min(1, (progress - 0.5) / 0.3);
        ctx.save();
        ctx.globalAlpha = centerAlpha;
        ctx.fillStyle = u.COLORS.text;
        ctx.font = '800 22px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(u.formatNumber(total), cx, cy - 6);
        ctx.fillStyle = u.COLORS.textMuted;
        ctx.font = '600 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        ctx.fillText('PAYMENTS', cx, cy + 14);
        ctx.restore();
      }
    }

    u.animate(900, draw, function() {
      if (legendEl) {
        var html = '';
        for (var i = 0; i < chartData.length; i++) {
          var pct = total > 0 ? Math.round(chartData[i].value / total * 100) : 0;
          html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">' +
            '<span style="width:10px;height:10px;border-radius:3px;background:' + colors[i % colors.length] + ';flex-shrink:0;"></span>' +
            '<span style="font-size:12px;color:#555770;min-width:80px;">' + chartData[i].label + '</span>' +
            '<span style="font-family:\'SF Mono\',SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;color:#1a1a2e;">' + u.formatNumber(chartData[i].value) + '</span>' +
            '<span style="font-size:10px;color:#8889a0;">(' + pct + '%)</span>' +
            '</div>';
        }
        legendEl.innerHTML = html;
      }

      canvas.addEventListener('mousemove', function(e) {
        var rect = canvas.getBoundingClientRect();
        var mx = e.clientX - rect.left - cx;
        var my = e.clientY - rect.top - cy;
        var dist = Math.sqrt(mx * mx + my * my);
        var angle = Math.atan2(my, mx);
        if (angle < -Math.PI / 2) angle += Math.PI * 2;

        if (dist >= innerR && dist <= outerR) {
          for (var i = 0; i < segments.length; i++) {
            if (angle >= segments[i].start && angle < segments[i].end) {
              canvas.style.cursor = 'pointer';
              var d = chartData[i];
              var pct = total > 0 ? (d.value / total * 100).toFixed(1) : '0';
              u.showTooltip(e,
                '<div style="font-weight:700;margin-bottom:2px;">' + d.label + '</div>' +
                '<div>Count: <strong>' + u.formatNumber(d.value) + '</strong></div>' +
                (d.total !== undefined ? '<div>Amount: <strong>' + u.formatCurrencyFull(d.total) + '</strong></div>' : '') +
                '<div>' + pct + '% of total</div>'
              );
              draw(1);
              ctx.save();
              ctx.beginPath();
              ctx.arc(cx, cy, outerR + 3, segments[i].start, segments[i].end);
              ctx.arc(cx, cy, innerR - 2, segments[i].end, segments[i].start, true);
              ctx.closePath();
              ctx.fillStyle = u.hexToRgba(colors[i % colors.length], 0.2);
              ctx.fill();
              ctx.restore();
              return;
            }
          }
        }
        canvas.style.cursor = 'default';
        u.hideTooltip();
        draw(1);
      });
      canvas.addEventListener('mouseleave', function() {
        u.hideTooltip();
        canvas.style.cursor = 'default';
        draw(1);
      });
    });
  }

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