{# Inputs: cash_points: list[CashBalancePoint] (each has .on: date, .cash_balance: Decimal,
           .cumulative_contributions: Decimal),
           period_label: str (e.g. "YTD 2026", "2024", "Lifetime") #}

<div class="panel-head">
  <h4>Cash &amp; Contributions</h4>
  <span class="meta">Cash balance + net contributed · {{ period_label }}</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"
       data-series-solid="cash_balance"
       data-series-dashed="net_contributed"
       style="height: 218px;"></div>

    {% if cash_lifetime_extremes %}
      <div class="text-[11px] text-label-3 num mt-1">
        Lifetime min ${{ "{:,.0f}".format(cash_lifetime_extremes[0]|float) }} ({{ cash_lifetime_extremes[1].isoformat() }})
        · max ${{ "{:,.0f}".format(cash_lifetime_extremes[2]|float) }} ({{ cash_lifetime_extremes[3].isoformat() }}).
      </div>
    {% endif %}

  <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,
          // See equity curve — drag-to-zoom stays, but the floating Apex
          // toolbar is hidden so the chart's corner doesn't fight the rest
          // of the dashboard chrome.
          zoom: { enabled: true, type: "x", autoScaleYaxis: true },
          toolbar: { show: false },
        },
        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: {
            // See comment on the equity curve — `format: "MMM"` produces
            // duplicate adjacent labels at YTD scale; datetimeFormatter
            // formats each tick at the picked granularity, e.g. "Feb 04",
            // which is unique per tick.
            datetimeUTC: false,
            // See equity curve: same MMM-d shape across all granularity
            // buckets so ticks never collapse to duplicate month strings.
            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: {
          x: { format: "yyyy-MM-dd" },
          y: { formatter: (v) => v == null ? "—" : "$" + v.toLocaleString(undefined, { maximumFractionDigits: 0 }) },
        },
        annotations: {
          yaxis: [
            {% if cash_lifetime_extremes %}
            { y: {{ cash_lifetime_extremes[0]|float }},
              borderColor: window.netAlphaChartTheme.colors.label3,
              strokeDashArray: 4,
              label: { text: "Lifetime min",
                       position: "right", offsetX: -8, offsetY: -4,
                       borderWidth: 0,
                       style: { color: window.netAlphaChartTheme.colors.label3,
                                background: "transparent",
                                fontSize: "10px" } } },
            { y: {{ cash_lifetime_extremes[2]|float }},
              borderColor: window.netAlphaChartTheme.colors.label3,
              strokeDashArray: 4,
              label: { text: "Lifetime max",
                       position: "right", offsetX: -8, offsetY: -4,
                       borderWidth: 0,
                       style: { color: window.netAlphaChartTheme.colors.label3,
                                background: "transparent",
                                fontSize: "10px" } } },
            {% endif %}
          ],
        },
        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 %}