{# Inputs:
   account_points: list[AccountValuePoint]           -- selected-period series
   period_label: str                                  -- e.g. "YTD 2025", "2024", "Lifetime"

   The lifetime "brush strip" that previously sat below this chart was
   removed: the Period dropdown in the toolbar already handles the same
   re-period intent more clearly, and the strip's lifetime account-value
   compute dominated cold body-load latency. #}

{% set has_data = account_points and account_points|length >= 2 %}
{% set missing_dates_count = account_points|selectattr('account_value', 'none')|list|length if account_points else 0 %}

<div class="panel-head">
  <h4 class="flex items-center gap-1.5">
    Equity curve
    <span class="text-label-3 text-[11px] cursor-help"
          title="Option positions are valued at cost basis on this chart; today's mark-to-market shows on the Holdings panel.">ⓘ</span>
  </h4>
  <span class="meta">{{ period_label }}</span>
  {% if chart_head_kpis and chart_head_kpis.end_account_value is not none %}
    <span class="num text-[13px] ml-2">
      ${{ "{:,.0f}".format(chart_head_kpis.end_account_value|float) }}
    </span>
    {% if chart_head_kpis.period_growth is not none %}
      {% set up = chart_head_kpis.period_growth >= 0 %}
      <span class="num text-[12px] ml-2 {{ 'text-pos' if up else 'text-neg' }}">
        {{ '+' if up else '−' }}${{ "{:,.0f}".format(chart_head_kpis.period_growth|abs|float) }}
        {% if chart_head_kpis.period_growth_pct is not none %}
          ({{ '+' if up else '−' }}{{ "{:.1f}".format((chart_head_kpis.period_growth_pct|abs|float)*100) }}%)
        {% endif %}
      </span>
    {% endif %}
  {% endif %}
  {% if benchmark_points %}
    <button type="button"
            class="ml-2 text-[11px] px-2 py-[2px] rounded-full border border-hairline text-label-2 hover:text-label-1"
            x-data="{ on: false }"
            x-on:click="on = !on; window.dispatchEvent(new CustomEvent('equity-spy-toggle', { detail: { on } }))"
            :class="on ? 'bg-info-tint text-info border-info' : ''">
      <span x-text="on ? 'Hide SPY' : 'Show SPY'"></span>
    </button>
  {% endif %}
  {% if missing_dates_count > 0 %}
    <span class="chip chip-warn ml-auto" title="Some held tickers have no historical close on these dates; the line shows a gap.">
      ⚠ {{ missing_dates_count }} date{{ 's' if missing_dates_count != 1 else '' }} missing prices
    </span>
  {% endif %}
</div>

{% if not has_data %}
  <div class="text-label-2 text-[13px] py-4">No deposits yet in {{ period_label }}.</div>
{% else %}
  <div id="equity-chart"
       data-period="{{ selected_period|default('ytd') }}"
       data-accounts='{{ (selected_accounts if selected_accounts is defined else [])|tojson }}'
       style="height: 280px;"></div>
  <div id="explain-equity-point"></div>

  <script>
  (function () {
    const points = [
      {% for p in account_points %}
        {
          on: "{{ p.on.isoformat() }}",
          contrib: {{ p.contributions|float }},
          account: {{ (p.account_value|float) if p.account_value is not none else 'null' }},
          netPl: {{ (p.net_pl|float) if p.net_pl is not none else 'null' }},
        }{% if not loop.last %},{% endif %}
      {% endfor %}
    ];

    const spyPoints = [
      {% for p in (benchmark_points or []) %}
        { x: "{{ p.on.isoformat() }}", y: {{ (p.value|float) if p.value is not none else 'null' }} }{% if not loop.last %},{% endif %}
      {% endfor %}
    ];

    const contribSeries = points.map(p => ({ x: p.on, y: p.contrib }));
    const accountSeries = points.map(p => ({ x: p.on, y: p.account }));

    // P&L fill: single sign-aware area under the account-value line, with
    // the dotted contributions baseline drawn on top. We tried the literal
    // "band between the two lines" pattern with stacked-area+delta math but
    // ApexCharts renders each area series from y=0 independently even with
    // chart.stacked enabled, producing a fill at the bottom of the chart
    // rather than between the lines. The spec explicitly permits this
    // single-color fallback (see 2026-05-17 design doc + 2026-05-02
    // shipped pattern). Color is picked by the latest point's sign — green
    // when account ≥ contrib, red when below. The contributions line still
    // marks the break-even baseline visually.
    const lastPriced = [...points].reverse().find(p => p.account != null);
    const isUp = !lastPriced || lastPriced.account >= lastPriced.contrib;
    const fillColor = isUp
      ? window.netAlphaChartTheme.colors.pos
      : window.netAlphaChartTheme.colors.neg;

    const series = [
      { name: "Contributions", type: "line", data: contribSeries },
      { name: "Account value", type: "area", data: accountSeries },
    ];

    function buildMainOpts() {
      const colors = [
        window.netAlphaChartTheme.colors.label3,
        fillColor,
      ];
      const isLight = document.documentElement.getAttribute("data-theme") === "light";
      return window.netAlphaChartTheme.merge(window.netAlphaChartTheme.defaults, {
        chart: {
          id: "equity-main",
          type: "line",
          height: 280,
          zoom: { enabled: true, type: "x", autoScaleYaxis: true },
          toolbar: { show: false },
          events: {
            dataPointSelection: function (event, chartContext, config) {
              const idx = config.dataPointIndex;
              const p = points[idx];
              if (!p || !p.on) return;
              const el = document.querySelector("#equity-chart");
              const period = (el && el.dataset.period) || "ytd";
              let accounts;
              try {
                accounts = JSON.parse((el && el.dataset.accounts) || "[]");
              } catch (e) {
                accounts = [];
              }
              let url = "/portfolio/explain/equity-point"
                      + "?on=" + encodeURIComponent(p.on)
                      + "&period=" + encodeURIComponent(period);
              for (const a of accounts) {
                url += "&account=" + encodeURIComponent(a);
              }
              if (window.htmx) {
                window.htmx.ajax("GET", url, "#explain-equity-point");
              }
            },
          },
        },
        colors: colors,
        markers: {
          // Subtle 2px markers only on the Account value line. Size 0 broke
          // ApexCharts dataPointSelection (the explain-point click flow
          // depends on it); 2px keeps the chart clean while preserving
          // clickability.
          size: [0, 2],
          strokeWidth: 0,
          hover: { size: 5 },
        },
        stroke: {
          // Contributions = stepline (jumps at deposit events — honest about
          // discrete cash flow). Account value = straight (no smoothing).
          width: [1.5, 2],
          curve: ["stepline", "straight"],
          lineCap: "round",
          dashArray: [4, 0],
        },
        fill: {
          type: ["solid", "gradient"],
          gradient: {
            shade: isLight ? "light" : "dark",
            type: "vertical",
            opacityFrom: 0.30,
            opacityTo: 0,
            stops: [0, 100],
          },
          opacity: [1, 1],
        },
        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 fmtSigned = (n) => {
              if (n == null) return "—";
              const sign = n >= 0 ? "+" : "−";
              return sign + "$" + Math.abs(n).toLocaleString(undefined, { maximumFractionDigits: 0 });
            };
            const pct = (n, base) => {
              if (n == null || !base) return "";
              return " (" + (n / base * 100).toFixed(1) + "%)";
            };
            return `
              <div class="apex-tt">
                <div class="apex-tt-date">${p.on}</div>
                <div class="apex-tt-row"><span>Account value</span><span>${fmt(p.account)}</span></div>
                <div class="apex-tt-row"><span>Contributions</span><span>${fmt(p.contrib)}</span></div>
                <div class="apex-tt-row"><span>Net P&amp;L</span><span>${fmtSigned(p.netPl)}${pct(p.netPl, p.contrib)}</span></div>
              </div>
            `;
          },
        },
        series: series,
      });
    }

    function render() {
      const main = document.querySelector("#equity-chart");
      if (!main) return;
      main.innerHTML = "";
      const mainChart = new ApexCharts(main, buildMainOpts());
      mainChart.render();

      window.addEventListener("equity-spy-toggle", (e) => {
        if (e.detail.on) {
          mainChart.appendSeries({
            name: "SPY",
            type: "line",
            data: spyPoints,
            color: window.netAlphaChartTheme.colors.label2,
          });
          // Extend each per-series array by one slot for the appended SPY
          // series so Apex doesn't fall back to scalar defaults mid-config.
          mainChart.updateOptions({
            markers: { size: [0, 2, 0] },
            stroke:  { width: [1.5, 2, 1.5], curve: ["stepline", "straight", "straight"], dashArray: [4, 0, 3] },
            fill:    { type: ["solid", "gradient", "solid"], opacity: [1, 1, 1] },
          });
        } else {
          // Apex doesn't expose remove-by-name; cleanest path is a full re-render.
          mainChart.destroy();
          const fresh = new ApexCharts(document.querySelector("#equity-chart"), buildMainOpts());
          fresh.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 %}