{# _waterfall.html -- Cash Flow Waterfall bar chart #}
{# Usage: {% include "django_program/manage/charts/_waterfall.html" with chart_data=chart_waterfall_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;">Cash Flow Waterfall</strong><br>
      <small style="color: var(--color-text-muted); font-size: 0.78rem;">From gross sales to net revenue</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> Total</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> Decrease</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: #0d9488; display: inline-block;"></span> Increase</span>
    </div>
  </div>
  <canvas id="chart-waterfall" width="400" height="220" style="width: 100%; height: 220px;"></canvas>
</div>

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

  var TYPE_COLORS = {
    'total': u.COLORS.indigo,
    'decrease': u.COLORS.red,
    'increase': u.COLORS.teal
  };

  function drawChart() {
    var s = u.setupCanvas(canvas);
    var ctx = s.ctx, w = s.w, h = s.h;
    if (!data || !data.length) { u.drawEmpty(ctx, w, h, 'No cash flow data available'); return; }

    var padL = 60, padR = 16, padT = 24, padB = 52;
    var chartW = w - padL - padR;
    var chartH = h - padT - padB;

    var runningTop = 0;
    var bars = [];
    var allValues = [];

    for (var i = 0; i < data.length; i++) {
      var d = data[i];
      var bar = { label: d.label, value: d.value, type: d.type };
      if (d.type === 'total') {
        bar.top = Math.max(d.value, 0);
        bar.bottom = Math.min(d.value, 0);
        runningTop = d.value;
      } else if (d.type === 'decrease') {
        bar.top = runningTop;
        bar.bottom = runningTop + d.value;
        runningTop = bar.bottom;
      } else {
        bar.bottom = runningTop;
        bar.top = runningTop + d.value;
        runningTop = bar.top;
      }
      allValues.push(bar.top, bar.bottom);
      bars.push(bar);
    }

    var maxVal = Math.max.apply(null, allValues);
    var minVal = Math.min.apply(null, allValues.concat([0]));
    var range = maxVal - minVal;
    if (range === 0) range = 1;
    var niceRange = Math.ceil(range / Math.pow(10, Math.floor(Math.log10(range)))) * Math.pow(10, Math.floor(Math.log10(range)));
    var niceMin = Math.floor(minVal / (niceRange / 5)) * (niceRange / 5);
    var niceMax = niceMin + niceRange;
    if (niceMax < maxVal) niceMax = maxVal;
    var gridLines = 5;
    var barW = Math.min(60, Math.max(20, (chartW / data.length) * 0.55));

    function valToY(v) {
      return padT + chartH - ((v - niceMin) / (niceMax - niceMin)) * chartH;
    }

    var barRects = [];

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

      ctx.save();
      ctx.setLineDash([3, 3]);
      ctx.strokeStyle = 'rgba(0,0,0,0.06)';
      ctx.lineWidth = 1;
      for (var i = 0; i <= gridLines; i++) {
        var val = niceMin + (niceMax - niceMin) * i / gridLines;
        var gy = valToY(val);
        ctx.beginPath();
        ctx.moveTo(padL, gy);
        ctx.lineTo(w - padR, gy);
        ctx.stroke();
        ctx.fillStyle = u.COLORS.textMuted;
        ctx.font = '500 10px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText(u.formatCurrency(val), padL - 8, gy);
      }
      ctx.restore();

      barRects = [];
      for (var i = 0; i < bars.length; i++) {
        var bar = bars[i];
        var cx = padL + (i + 0.5) * (chartW / data.length);
        var x = cx - barW / 2;
        var yTop = valToY(bar.top);
        var yBot = valToY(bar.bottom);
        var barH = Math.abs(yBot - yTop) * progress;
        var drawY;

        if (bar.type === 'total') {
          drawY = valToY(0) - barH;
          if (bar.value < 0) drawY = valToY(0);
        } else if (bar.type === 'decrease') {
          drawY = yTop;
          barH = (yBot - yTop) * progress;
        } else {
          drawY = yTop + (yBot - yTop) * (1 - progress);
          barH = (yBot - yTop) * progress;
        }

        var color = TYPE_COLORS[bar.type] || u.COLORS.indigo;
        var grad = ctx.createLinearGradient(0, drawY, 0, drawY + barH);
        grad.addColorStop(0, color);
        grad.addColorStop(1, u.hexToRgba(color, 0.7));

        ctx.save();
        var r = Math.min(3, barW / 2);
        ctx.fillStyle = grad;
        u.roundRect(ctx, x, drawY, barW, Math.abs(barH), r);
        ctx.fill();
        ctx.restore();

        barRects.push({ x: x, y: drawY, w: barW, h: Math.abs(barH), idx: i });

        if (i > 0 && bars[i - 1].type !== 'total' && bar.type !== 'total') {
          var prevCx = padL + (i - 0.5) * (chartW / data.length);
          var connY = (bar.type === 'decrease') ? yTop : yBot + (yTop - yBot) * (1 - progress);
          ctx.save();
          ctx.setLineDash([2, 2]);
          ctx.strokeStyle = 'rgba(0,0,0,0.12)';
          ctx.lineWidth = 1;
          ctx.beginPath();
          ctx.moveTo(prevCx + barW / 2 + 2, connY);
          ctx.lineTo(x - 2, connY);
          ctx.stroke();
          ctx.restore();
        } else if (i > 0 && bar.type !== 'total') {
          var prevBar = bars[i - 1];
          var prevCx = padL + (i - 0.5) * (chartW / data.length);
          var connY = valToY(prevBar.type === 'total' ? prevBar.value : (prevBar.type === 'decrease' ? prevBar.bottom : prevBar.top));
          ctx.save();
          ctx.setLineDash([2, 2]);
          ctx.strokeStyle = 'rgba(0,0,0,0.12)';
          ctx.lineWidth = 1;
          ctx.beginPath();
          ctx.moveTo(prevCx + barW / 2 + 2, connY);
          ctx.lineTo(x - 2, connY);
          ctx.stroke();
          ctx.restore();
        }

        if (progress > 0.7) {
          ctx.save();
          ctx.fillStyle = u.COLORS.text;
          ctx.font = '700 10px "SF Mono", SFMono-Regular, Menlo, Consolas, monospace';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';
          var displayVal = bar.type === 'total' ? u.formatCurrency(bar.value) :
            (bar.value < 0 ? '-' + u.formatCurrency(Math.abs(bar.value)) : '+' + u.formatCurrency(bar.value));
          ctx.fillText(displayVal, cx, drawY - 4);
          ctx.restore();
        }

        ctx.save();
        ctx.fillStyle = u.COLORS.textMuted;
        ctx.font = '500 9px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        var labelLines = bar.label.split(' ');
        for (var li = 0; li < labelLines.length; li++) {
          ctx.fillText(labelLines[li], cx, padT + chartH + 6 + li * 12);
        }
        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 < barRects.length; i++) {
          var br = barRects[i];
          if (mx >= br.x - 4 && mx <= br.x + br.w + 4 && my >= padT && my <= padT + chartH) {
            hit = i; break;
          }
        }
        if (hit !== null) {
          canvas.style.cursor = 'pointer';
          var bar = bars[hit];
          var typeLabel = bar.type === 'total' ? 'Total' : (bar.type === 'decrease' ? 'Decrease' : 'Increase');
          u.showTooltip(e,
            '<div style="font-weight:700;margin-bottom:2px;">' + bar.label + '</div>' +
            '<div>Type: <strong>' + typeLabel + '</strong></div>' +
            '<div>Amount: <strong>' + u.formatCurrencyFull(Math.abs(bar.value)) + '</strong></div>'
          );
          draw(1);
          ctx.save();
          ctx.fillStyle = u.hexToRgba(TYPE_COLORS[bar.type] || u.COLORS.indigo, 0.12);
          var br = barRects[hit];
          ctx.fillRect(br.x - 4, padT, br.w + 8, chartH);
          ctx.restore();
        } else {
          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>