{# _stripe_fees.html -- Stripe Processing Fee Estimate chart (canvas) #}
{# Usage: {% include ".../_stripe_fees.html" with chart_data=chart_stripe_json %} #}

<div class="card card--static" style="padding: 1.25rem 1.5rem;">
  <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
    <div>
      <strong style="font-size: 0.95rem;">Stripe Processing Fees</strong><br>
      <small style="color: var(--color-text-muted); font-size: 0.78rem;">Estimated fees (2.9% + $0.30 per txn)</small>
    </div>
    <div style="display: flex; align-items: center; gap: 0.75rem;">
      <span style="display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--color-text-muted);"><span style="width: 10px; height: 10px; border-radius: 2px; background: #4338ca; display: inline-block;"></span> Gross</span>
      <span style="display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--color-text-muted);"><span style="width: 10px; height: 10px; border-radius: 2px; background: #dc2626; display: inline-block;"></span> Fees</span>
      <span style="display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--color-text-muted);"><span style="width: 10px; height: 10px; border-radius: 2px; background: #059669; display: inline-block;"></span> Net</span>
    </div>
  </div>
  <canvas id="chart-stripe-fees" style="width: 100%; height: 180px; display: block;"></canvas>
  <div id="chart-stripe-stats" style="margin-top: 1rem;"></div>
  <div id="chart-stripe-status" style="margin-top: 0.75rem;"></div>
</div>

<script>
(function() {
  var canvas = document.getElementById('chart-stripe-fees');
  var statsEl = document.getElementById('chart-stripe-stats');
  var statusEl = document.getElementById('chart-stripe-status');
  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;

    if (!data || !data.stripe_total) {
      u.drawEmpty(ctx, w, h, 'No Stripe payment data available');
      if (statsEl) statsEl.innerHTML = '';
      if (statusEl) statusEl.innerHTML = '';
      return;
    }

    var gross = data.stripe_total || 0;
    var fees = data.estimated_fees || 0;
    var net = data.net_after_fees || (gross - fees);

    var padL = 90, padR = 24, padT = 12, padB = 12;
    var chartW = w - padL - padR;
    var barH = 28;
    var rowGap = 18;
    var rows = [
      { label: 'Gross', value: gross, color: u.COLORS.indigo, gradEnd: u.COLORS.indigoLight },
      { label: 'Fees', value: fees, color: u.COLORS.red, gradEnd: '#f87171' },
      { label: 'Net', value: net, color: u.COLORS.emerald, gradEnd: '#34d399' }
    ];

    var maxVal = gross || 1;

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

      for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var y = padT + i * (barH + rowGap);
        var barWidth = (row.value / maxVal) * chartW * progress;

        // Label
        ctx.save();
        ctx.fillStyle = u.COLORS.textMuted;
        ctx.font = '600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText(row.label, padL - 12, y + barH / 2);
        ctx.restore();

        // Track
        ctx.save();
        ctx.fillStyle = '#f0f1f4';
        u.roundRect(ctx, padL, y, chartW, barH, 6);
        ctx.fill();
        ctx.restore();

        // Fill
        if (barWidth > 0) {
          ctx.save();
          var grad = ctx.createLinearGradient(padL, 0, padL + barWidth, 0);
          grad.addColorStop(0, row.color);
          grad.addColorStop(1, row.gradEnd);
          ctx.fillStyle = grad;
          var r = Math.min(6, barWidth / 2);
          u.roundRect(ctx, padL, y, Math.max(barWidth, 1), barH, [r, barWidth >= chartW - 2 ? 6 : r, barWidth >= chartW - 2 ? 6 : r, r]);
          ctx.fill();
          ctx.restore();
        }

        // Value label on bar
        if (progress > 0.4) {
          var alpha = Math.min(1, (progress - 0.4) / 0.3);
          ctx.save();
          ctx.globalAlpha = alpha;
          var valStr = u.formatCurrencyFull(row.value);
          ctx.font = '700 11px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
          var textW = ctx.measureText(valStr).width;

          // Place text inside bar if it fits, otherwise outside
          if (barWidth > textW + 16) {
            ctx.fillStyle = '#ffffff';
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            ctx.fillText(valStr, padL + barWidth - 10, y + barH / 2);
          } else {
            ctx.fillStyle = u.COLORS.text;
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';
            ctx.fillText(valStr, padL + barWidth + 8, y + barH / 2);
          }
          ctx.restore();
        }
      }

      // Fee callout line connecting gross to net
      if (progress > 0.6 && fees > 0) {
        var alpha = Math.min(1, (progress - 0.6) / 0.3);
        var grossBarEnd = padL + (gross / maxVal) * chartW;
        var netBarEnd = padL + (net / maxVal) * chartW;
        var feesY = padT + barH + rowGap / 2;
        var netY = padT + 2 * (barH + rowGap) - rowGap / 2;

        ctx.save();
        ctx.globalAlpha = alpha * 0.4;
        ctx.setLineDash([3, 3]);
        ctx.strokeStyle = u.COLORS.red;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(netBarEnd, padT + barH);
        ctx.lineTo(netBarEnd, padT + 2 * (barH + rowGap));
        ctx.stroke();
        ctx.restore();
      }
    }

    u.animate(800, draw, function() {
      canvas.addEventListener('mousemove', function(e) {
        var rect = canvas.getBoundingClientRect();
        var mx = e.clientX - rect.left;
        var my = e.clientY - rect.top;
        var hit = null;

        for (var i = 0; i < rows.length; i++) {
          var y = padT + i * (barH + rowGap);
          if (my >= y && my <= y + barH && mx >= padL && mx <= padL + chartW) {
            hit = i;
            break;
          }
        }

        if (hit !== null) {
          canvas.style.cursor = 'pointer';
          var row = rows[hit];
          var pctOfGross = gross > 0 ? (row.value / gross * 100).toFixed(1) : '0';
          var tip = '<div style="font-weight:700;margin-bottom:2px;">' + row.label + '</div>' +
            '<div>Amount: <strong>' + u.formatCurrencyFull(row.value) + '</strong></div>' +
            '<div>% of Gross: <strong>' + pctOfGross + '%</strong></div>';
          if (hit === 1) {
            tip += '<div style="margin-top:4px;font-size:11px;color:#ccc;">' + u.formatNumber(data.stripe_count || 0) + ' transactions</div>';
          }
          u.showTooltip(e, tip);
        } else {
          canvas.style.cursor = 'default';
          u.hideTooltip();
        }
      });
      canvas.addEventListener('mouseleave', function() {
        u.hideTooltip();
        canvas.style.cursor = 'default';
      });
    });

    // Stats row below chart
    if (statsEl) {
      var effectiveRate = data.effective_rate || (gross > 0 ? (fees / gross * 100) : 0);
      statsEl.innerHTML =
        '<div style="display: flex; gap: 1.5rem; flex-wrap: wrap;">' +
        '  <div style="flex: 1; min-width: 6rem; text-align: center; padding: 0.6rem 0.5rem; background: #f8f9fa; border-radius: 8px;">' +
        '    <div style="font-family: \'SF Mono\', SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; font-weight: 800; color: #dc2626;">' + effectiveRate.toFixed(2) + '%</div>' +
        '    <div style="font-size: 0.72rem; color: #8889a0; margin-top: 0.15rem;">Effective Rate</div>' +
        '  </div>' +
        '  <div style="flex: 1; min-width: 6rem; text-align: center; padding: 0.6rem 0.5rem; background: #f8f9fa; border-radius: 8px;">' +
        '    <div style="font-family: \'SF Mono\', SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; font-weight: 800; color: #dc2626;">' + u.formatCurrencyFull(fees) + '</div>' +
        '    <div style="font-size: 0.72rem; color: #8889a0; margin-top: 0.15rem;">Total Fees</div>' +
        '  </div>' +
        '  <div style="flex: 1; min-width: 6rem; text-align: center; padding: 0.6rem 0.5rem; background: #f8f9fa; border-radius: 8px;">' +
        '    <div style="font-family: \'SF Mono\', SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; font-weight: 800; color: #059669;">' + u.formatCurrencyFull(net) + '</div>' +
        '    <div style="font-size: 0.72rem; color: #8889a0; margin-top: 0.15rem;">Net Received</div>' +
        '  </div>' +
        '</div>';
    }

    // Payment status breakdown
    if (statusEl && data.by_status) {
      var statuses = data.by_status;
      var statusItems = [
        { key: 'succeeded', label: 'Succeeded', color: u.COLORS.emerald },
        { key: 'failed', label: 'Failed', color: u.COLORS.red },
        { key: 'pending', label: 'Pending', color: u.COLORS.amber }
      ];
      var statusTotal = 0;
      for (var k in statuses) { if (statuses.hasOwnProperty(k)) statusTotal += (statuses[k] || 0); }

      if (statusTotal > 0) {
        var html = '<div style="font-size: 0.72rem; color: #8889a0; margin-bottom: 0.3rem;">Payment Status</div>';
        html += '<div style="display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #f0f1f4;">';
        for (var i = 0; i < statusItems.length; i++) {
          var count = statuses[statusItems[i].key] || 0;
          if (count > 0) {
            var pct = (count / statusTotal) * 100;
            html += '<div style="width: ' + pct + '%; background: ' + statusItems[i].color + '; transition: width 0.6s ease;"></div>';
          }
        }
        html += '</div>';
        html += '<div style="display: flex; gap: 1rem; margin-top: 0.3rem; flex-wrap: wrap;">';
        for (var i = 0; i < statusItems.length; i++) {
          var count = statuses[statusItems[i].key] || 0;
          if (count > 0) {
            html += '<span style="display: flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: #8889a0;">' +
              '<span style="width: 8px; height: 8px; border-radius: 2px; background: ' + statusItems[i].color + '; display: inline-block;"></span>' +
              statusItems[i].label + ' (' + count + ')' +
              '</span>';
          }
        }
        html += '</div>';
        statusEl.innerHTML = html;
      } else {
        statusEl.innerHTML = '';
      }
    }
  }

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