{# Inputs:
   cash_deployment_points: list[CashDeploymentPoint]   -- period-scoped (free / pledged / invested)
   chart_head_kpis: ChartHeadKPIs                       -- inline panel-head numbers
   period_label: str                                    -- "YTD 2026", "2024", "Lifetime"

   Renders a stacked-area chart of free cash + pledged cash + invested MTM.
   The total stack at any date equals total account value. Replaces the
   previous "cash balance + net contributed" two-line chart whose purpose
   was unclear. #}

{% set has_data = cash_deployment_points and cash_deployment_points|length >= 2 %}
{% set kpis = chart_head_kpis %}

<div class="panel-head">
  <h4>Cash deployment</h4>
  <span class="meta">{{ period_label }}</span>
  {% if kpis %}
    <span class="num text-[12px] ml-2">
      ${{ "{:,.0f}".format((kpis.end_free_cash + kpis.end_pledged)|float) }} cash
      {% if kpis.end_cash_share_pct is not none %}
        · {{ "{:.1f}".format(kpis.end_cash_share_pct|float * 100) }}%
      {% endif %}
      {% if kpis.end_pledged > 0 %}
        · <span class="text-label-2">${{ "{:,.0f}".format(kpis.end_pledged|float) }} pledged</span>
      {% endif %}
      {% if kpis.end_invested is not none %}
        · ${{ "{:,.0f}".format(kpis.end_invested|float) }} invested
      {% endif %}
    </span>
    {% if kpis.lifetime_min is not none and kpis.lifetime_max is not none %}
      <span class="text-label-3 text-[11px] num ml-auto">
        min ${{ "{:,.0f}".format(kpis.lifetime_min|float) }} {{ kpis.lifetime_min_on.strftime("%b '%y") }}
        · max ${{ "{:,.0f}".format(kpis.lifetime_max|float) }} {{ kpis.lifetime_max_on.strftime("%b '%y") }}
      </span>
    {% endif %}
  {% endif %}
</div>

{% if not has_data %}
  <div class="text-label-2 text-[13px] py-4">No cash events yet — import a Schwab Transactions CSV to populate this chart.</div>
{% else %}
  <div id="cash-chart"
       data-series-free="free_cash"
       data-series-pledged="pledged"
       data-series-invested="invested"
       style="height: 140px;"></div>

  <script>
  (function () {
    const points = [
      {% for p in cash_deployment_points %}
        {
          on: "{{ p.on.isoformat() }}",
          free: {{ p.free_cash|float }},
          pledged: {{ (p.pledged|float) if p.pledged is not none else 'null' }},
          invested: {{ (p.invested|float) if p.invested is not none else 'null' }},
        }{% if not loop.last %},{% endif %}
      {% endfor %}
    ];

    const freeSeries     = points.map(p => ({ x: p.on, y: p.free }));
    const pledgedSeries  = points.map(p => ({ x: p.on, y: p.pledged }));
    const investedSeries = points.map(p => ({ x: p.on, y: p.invested }));

    // 2-region fallback when pledged is null for every point.
    const hasPledged = points.some(p => p.pledged != null && p.pledged > 0);

    function buildOpts() {
      const isLight = document.documentElement.getAttribute("data-theme") === "light";
      const series = hasPledged
        ? [
            { name: "Free cash", type: "area", data: freeSeries },
            { name: "Pledged",   type: "area", data: pledgedSeries },
            { name: "Invested",  type: "area", data: investedSeries },
          ]
        : [
            { name: "Free cash", type: "area", data: freeSeries },
            { name: "Invested",  type: "area", data: investedSeries },
          ];
      // Free cash = bright info-blue; Pledged = indigo (cool-family but a
      // distinct hue so the two cash regions read separately even when one
      // dominates — info+info-low-opacity blends into a single thin strip).
      // Invested = label-2 gray.
      const colors = hasPledged
        ? [
            window.netAlphaChartTheme.colors.info,
            window.netAlphaChartTheme.colors.indigo,
            window.netAlphaChartTheme.colors.label2,
          ]
        : [
            window.netAlphaChartTheme.colors.info,
            window.netAlphaChartTheme.colors.label2,
          ];
      const fillOpacity = hasPledged ? [0.60, 0.55, 0.35] : [0.60, 0.35];

      return window.netAlphaChartTheme.merge(window.netAlphaChartTheme.defaults, {
        chart: {
          type: "area",
          height: 140,
          stacked: true,
          zoom: { enabled: true, type: "x", autoScaleYaxis: true },
          toolbar: { show: false },
        },
        colors: colors,
        stroke: {
          width: hasPledged ? [0, 0, 1.5] : [0, 1.5],
          curve: "straight",
          lineCap: "round",
        },
        fill: {
          type: "solid",
          opacity: fillOpacity,
        },
        markers: { size: 0, hover: { size: 4 } },
        legend: { show: true },
        xaxis: {
          type: "datetime",
          labels: {
            datetimeUTC: false,
            datetimeFormatter: {
              year: "MMM d, yyyy",
              month: "MMM d",
              day: "MMM d",
              hour: "MMM d",
            },
            hideOverlappingLabels: true,
            rotate: 0,
          },
        },
        yaxis: {
          labels: {
            formatter: (v) => {
              if (v == null) return "—";
              const n = Math.round(v);
              const abs = Math.abs(n);
              const sign = n < 0 ? "−" : "";
              if (abs >= 1000) return sign + "$" + (abs / 1000).toFixed(0) + "k";
              return sign + "$" + abs;
            },
          },
        },
        tooltip: {
          shared: true,
          x: { format: "yyyy-MM-dd" },
          custom: function ({ dataPointIndex }) {
            const p = points[dataPointIndex];
            if (!p) return "";
            const fmt = (n) => n == null ? "—" : "$" + n.toLocaleString(undefined, { maximumFractionDigits: 0 });
            const total = (p.free || 0) + (p.pledged || 0) + (p.invested || 0);
            return `
              <div class="apex-tt">
                <div class="apex-tt-date">${p.on}</div>
                <div class="apex-tt-row"><span>Free cash</span><span>${fmt(p.free)}</span></div>
                ${hasPledged ? `<div class="apex-tt-row"><span>Pledged</span><span>${fmt(p.pledged)}</span></div>` : ""}
                <div class="apex-tt-row"><span>Invested</span><span>${fmt(p.invested)}</span></div>
                <div class="apex-tt-row" style="border-top:1px solid rgba(255,255,255,0.1);padding-top:2px;margin-top:2px;">
                  <span>Total</span><span>${fmt(total)}</span>
                </div>
              </div>
            `;
          },
        },
        series: series,
      });
    }

    function render() {
      const el = document.querySelector("#cash-chart");
      if (!el) return;
      el.innerHTML = "";
      const chart = new ApexCharts(el, buildOpts());
      chart.render();
    }

    if (window.ApexCharts && window.netAlphaChartTheme) {
      window.netAlphaChartTheme.register(render);
    } else {
      const iv = setInterval(() => {
        if (window.ApexCharts && window.netAlphaChartTheme) {
          clearInterval(iv);
          window.netAlphaChartTheme.register(render);
        }
      }, 50);
    }
  })();
  </script>
{% endif %}