{# _revenue_breakdown.html -- Revenue split donut (ticket vs addon vs sponsor) #}
{# Usage: {% include ".../_revenue_breakdown.html" with chart_data=chart_revenue_bkdn_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);">Revenue Breakdown</div>
    <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.1rem;">Revenue sources by category</div>
  </div>
  <div style="padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: center;">
    <canvas id="chart-revenue-breakdown" style="width: 220px; height: 220px; display: block;"></canvas>
    <div id="chart-revenue-breakdown-legend" style="margin-left: 1.5rem;"></div>
  </div>
</div>

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

  var REV_COLORS = {
    ticket: u.COLORS.indigo,
    addon: u.COLORS.teal,
    sponsor: u.COLORS.violet
  };

  var slices = [];
  if ((data.ticket_revenue || 0) > 0) slices.push({ label: 'Tickets', value: data.ticket_revenue, pct: data.ticket_pct || 0, color: REV_COLORS.ticket });
  if ((data.addon_revenue || 0) > 0) slices.push({ label: 'Add-ons', value: data.addon_revenue, pct: data.addon_pct || 0, color: REV_COLORS.addon });
  if ((data.sponsor_revenue || 0) > 0) slices.push({ label: 'Sponsors', value: data.sponsor_revenue, pct: data.sponsor_pct || 0, color: REV_COLORS.sponsor });

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

    var total = slices.reduce(function(acc, d) { return acc + d.value; }, 0);
    if (!slices.length || total === 0) {
      u.drawEmpty(ctx, w, h, 'No revenue data');
      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 segments = [];
    var cumAngle = -Math.PI / 2;
    for (var i = 0; i < slices.length; i++) {
      var sweep = (slices[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 = slices[i].color;
        ctx.fill();
        ctx.restore();
      }

      if (progress > 0.5) {
        var a = Math.min(1, (progress - 0.5) / 0.3);
        ctx.save();
        ctx.globalAlpha = a;
        ctx.fillStyle = '#1a1a2e';
        ctx.font = '800 18px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(u.formatCurrency(total), cx, cy - 6);
        ctx.fillStyle = '#8889a0';
        ctx.font = '600 9px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        ctx.fillText('TOTAL REVENUE', cx, cy + 12);
        ctx.restore();
      }
    }

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

      var DRILLDOWN_MAP = {
        'Tickets': (window._drilldownUrls || {}).orderList,
        'Sponsors': (window._drilldownUrls || {}).sponsorList,
        'Add-ons': (window._drilldownUrls || {}).addonList
      };

      function findSliceAt(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) return i;
          }
        }
        return -1;
      }

      canvas.addEventListener('mousemove', function(e) {
        var idx = findSliceAt(e);
        if (idx >= 0) {
          canvas.style.cursor = 'pointer';
          var pct = total > 0 ? (slices[idx].value / total * 100).toFixed(1) : '0';
          u.showTooltip(e,
            '<div style="font-weight:700;margin-bottom:2px;">' + slices[idx].label + '</div>' +
            '<div>Revenue: <strong>' + u.formatCurrencyFull(slices[idx].value) + '</strong></div>' +
            '<div>Share: <strong>' + pct + '%</strong></div>' +
            '<div style="font-size:10px;color:#aaa;margin-top:3px;">Click to view details</div>'
          );
        } else {
          canvas.style.cursor = 'default';
          u.hideTooltip();
        }
      });
      canvas.addEventListener('click', function(e) {
        var idx = findSliceAt(e);
        if (idx >= 0) {
          var url = DRILLDOWN_MAP[slices[idx].label];
          if (url) window.location.href = url;
        }
      });
      canvas.addEventListener('mouseleave', function() { u.hideTooltip(); canvas.style.cursor = 'default'; });
    });
  }

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