{# _chart_utils.html -- Shared chart utilities, palette, tooltip, and helpers #}
{# Usage: {% include "django_program/manage/charts/_chart_utils.html" %} (once per page, before chart partials) #}

<script>
(function() {
  'use strict';

  if (window._chartUtils) return;

  var COLORS = {
    indigo:  '#4338ca',
    indigoLight: '#6366f1',
    teal:    '#0d9488',
    tealLight: '#5eead4',
    violet:  '#7c3aed',
    amber:   '#d97706',
    emerald: '#059669',
    red:     '#dc2626',
    blue:    '#2563eb',
    fuchsia: '#c026d3',
    gray:    '#e2e4e9',
    grayDark:'#8889a0',
    bg:      '#f8f9fa',
    text:    '#1a1a2e',
    textMuted: '#8889a0',
    surface: '#ffffff'
  };

  var CHART_PALETTE = [
    COLORS.indigo, COLORS.teal, COLORS.violet, COLORS.amber,
    COLORS.emerald, COLORS.red, COLORS.blue, COLORS.fuchsia
  ];

  var STATUS_COLORS = {
    'paid':       COLORS.emerald,
    'pending':    COLORS.amber,
    'cancelled':  COLORS.red,
    'refunded':   COLORS.violet,
    'partially_refunded': COLORS.blue
  };

  var METHOD_COLORS = {
    'stripe':  COLORS.indigo,
    'comp':    COLORS.teal,
    'credit':  COLORS.violet,
    'manual':  COLORS.amber
  };

  var DPR = window.devicePixelRatio || 1;

  function setupCanvas(canvas) {
    var rect = canvas.getBoundingClientRect();
    var w = rect.width;
    var h = rect.height;
    canvas.width = w * DPR;
    canvas.height = h * DPR;
    var ctx = canvas.getContext('2d');
    ctx.scale(DPR, DPR);
    return { ctx: ctx, w: w, h: h };
  }

  function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }
  function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }

  function formatCurrency(n) {
    if (Math.abs(n) >= 1000) {
      return '$' + (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
    }
    return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
  }

  function formatCurrencyFull(n) {
    return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  }

  function formatNumber(n) {
    return n.toLocaleString('en-US');
  }

  function formatDateShort(iso) {
    var d = new Date(iso + 'T00:00:00');
    return (d.getMonth() + 1) + '/' + d.getDate();
  }

  function capitalize(s) {
    return s.charAt(0).toUpperCase() + s.slice(1).replace(/_/g, ' ');
  }

  function hexToRgba(hex, a) {
    var r = parseInt(hex.slice(1, 3), 16);
    var g = parseInt(hex.slice(3, 5), 16);
    var b = parseInt(hex.slice(5, 7), 16);
    return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
  }

  var tooltip = document.createElement('div');
  tooltip.style.cssText = 'position:fixed;pointer-events:none;z-index:9999;padding:8px 12px;border-radius:8px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;color:#fff;background:rgba(26,26,46,0.92);backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,0.25);opacity:0;transition:opacity 0.15s ease;white-space:nowrap;';
  document.body.appendChild(tooltip);

  function showTooltip(e, html) {
    tooltip.innerHTML = html;
    tooltip.style.opacity = '1';
    var x = e.clientX + 14;
    var y = e.clientY - 10;
    if (x + tooltip.offsetWidth > window.innerWidth - 12) {
      x = e.clientX - tooltip.offsetWidth - 14;
    }
    if (y + tooltip.offsetHeight > window.innerHeight - 12) {
      y = e.clientY - tooltip.offsetHeight - 10;
    }
    if (y < 4) y = 4;
    tooltip.style.left = x + 'px';
    tooltip.style.top = y + 'px';
  }

  function hideTooltip() {
    tooltip.style.opacity = '0';
  }

  function drawEmpty(ctx, w, h, msg) {
    ctx.save();
    ctx.fillStyle = COLORS.textMuted;
    ctx.font = '500 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(msg || 'No data available', w / 2, h / 2);
    ctx.restore();
  }

  function animate(duration, drawFn, doneFn) {
    var start = null;
    function step(ts) {
      if (!start) start = ts;
      var elapsed = ts - start;
      var t = Math.min(elapsed / duration, 1);
      drawFn(t);
      if (t < 1) {
        requestAnimationFrame(step);
      } else if (doneFn) {
        doneFn();
      }
    }
    requestAnimationFrame(step);
  }

  function roundRect(ctx, x, y, w, h, r) {
    var tl, tr, br, bl;
    if (typeof r === 'number') {
      tl = tr = br = bl = r;
    } else if (Array.isArray(r)) {
      tl = r[0]; tr = r[1]; br = r[2]; bl = r[3];
    } else {
      tl = tr = br = bl = 0;
    }
    ctx.beginPath();
    ctx.moveTo(x + tl, y);
    ctx.lineTo(x + w - tr, y);
    ctx.quadraticCurveTo(x + w, y, x + w, y + tr);
    ctx.lineTo(x + w, y + h - br);
    ctx.quadraticCurveTo(x + w, y + h, x + w - br, y + h);
    ctx.lineTo(x + bl, y + h);
    ctx.quadraticCurveTo(x, y + h, x, y + h - bl);
    ctx.lineTo(x, y + tl);
    ctx.quadraticCurveTo(x, y, x + tl, y);
    ctx.closePath();
  }

  window._chartUtils = {
    COLORS: COLORS,
    CHART_PALETTE: CHART_PALETTE,
    STATUS_COLORS: STATUS_COLORS,
    METHOD_COLORS: METHOD_COLORS,
    setupCanvas: setupCanvas,
    easeOutCubic: easeOutCubic,
    easeOutQuart: easeOutQuart,
    formatCurrency: formatCurrency,
    formatCurrencyFull: formatCurrencyFull,
    formatNumber: formatNumber,
    formatDateShort: formatDateShort,
    capitalize: capitalize,
    hexToRgba: hexToRgba,
    showTooltip: showTooltip,
    hideTooltip: hideTooltip,
    drawEmpty: drawEmpty,
    animate: animate,
    roundRect: roundRect
  };

})();
</script>