{# Inputs: cash_points: list[CashBalancePoint] (each has .on: date, .cash_balance: Decimal,
           .cumulative_contributions: Decimal),
           year: int #}

<div class="panel-head">
  <h4>Cash &amp; Contributions</h4>
  <span class="meta">Cash balance + net contributed · {{ year }}</span>
</div>

{% if cash_points|length == 0 %}
  <div class="text-label-2 text-[13px] py-4">No cash events yet — import a Schwab Transactions CSV to populate this chart.</div>
{% else %}
  {# data-series-solid / data-series-dashed: stable hooks for tests + future JS
     readers (§5.12 P7). Solid line = cash balance; dashed = net contributed. #}
  <div id="cash-chart-{{ year }}"
       data-series-solid="cash_balance"
       data-series-dashed="net_contributed"
       style="height: 218px;"></div>

  <script>
  (function () {
    const series = [
      {
        name: "Cash balance",
        type: "line",
        data: [
          {% for p in cash_points %}
            { x: "{{ p.on.isoformat() }}", y: {{ p.cash_balance|float }} }{% if not loop.last %},{% endif %}
          {% endfor %}
        ],
      },
      {
        name: "Net contributed",
        type: "line",
        data: [
          {% for p in cash_points %}
            { x: "{{ p.on.isoformat() }}", y: {{ p.cumulative_contributions|float }} }{% if not loop.last %},{% endif %}
          {% endfor %}
        ],
      },
    ];

    function buildOpts() {
      return window.netAlphaChartTheme.merge(window.netAlphaChartTheme.defaults, {
        chart: {
          type: "line",
          height: 218,
          zoom: { enabled: true, type: "x", autoScaleYaxis: true },
          toolbar: {
            show: true,
            tools: {
              download: false,
              selection: true,
              zoom: true,
              zoomin: true,
              zoomout: true,
              pan: true,
              reset: true,
            },
            autoSelected: "zoom",
          },
        },
        colors: [
          window.netAlphaChartTheme.colors.info,
          window.netAlphaChartTheme.colors.warn,
        ],
        stroke: {
          width: [2, 2],
          curve: "smooth",
          lineCap: "round",
          dashArray: [0, 5],
        },
        fill: {
          type: "solid",
          opacity: 1,
        },
        legend: { show: true },
        xaxis: {
          type: "datetime",
          labels: { format: "MMM" },
        },
        yaxis: {
          labels: {
            formatter: (v) => {
              const n = Math.round(v);
              const sign = n >= 0 ? "+" : "−";
              const abs = Math.abs(n);
              if (abs >= 1000) return sign + "$" + (abs / 1000).toFixed(0) + "k";
              return sign + "$" + abs;
            },
          },
        },
        tooltip: {
          x: { format: "yyyy-MM-dd" },
          y: { formatter: (v) => v == null ? "—" : "$" + v.toLocaleString(undefined, { maximumFractionDigits: 0 }) },
        },
        series: series,
      });
    }

    function render() {
      const el = document.querySelector("#cash-chart-{{ year }}");
      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 %}