{# Inputs:
   account_points: list[AccountValuePoint]           -- selected-period series
   lifetime_account_points: list[AccountValuePoint]  -- full lifetime series; falsy in Lifetime view
   benchmark_points: list[BenchmarkPoint]
   benchmark_symbol: str
   period_label: str                                  -- e.g. "YTD 2025", "2024", "Lifetime"
   current_year: int                                  -- for ytd snap detection
   available_years: list[int]                         -- snap targets for the brush
#}

{% 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 %}
{% set _lap = lifetime_account_points | default(none) %}
{% set has_brush = _lap and _lap|length >= 2 %}

<div class="panel-head">
  <h4>Equity curve</h4>
  <span class="meta">Account value · {{ period_label }}</span>
  {% if missing_dates_count > 0 %}
    <span class="chip chip-warn" 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" style="height: 218px;"></div>
  {% if has_brush %}
    <div id="equity-chart-lifetime"
         data-testid="equity-brush"
         data-current-year="{{ current_year }}"
         data-available-years='{{ available_years|tojson }}'
         data-period-start="{{ account_points[0].on.isoformat() }}"
         data-period-end="{{ account_points[-1].on.isoformat() }}"
         style="height: 56px; margin-top: 6px;"
         aria-label="Lifetime context — drag to change period. The strip's vertical scale is independent of the main chart.">
    </div>
    <div class="text-[10px] text-label-3 mt-1">Lifetime shape · drag the selection to change period.</div>
  {% endif %}
  <div class="text-label-3 text-[11px] mt-1">
    Option positions are valued at cost basis on this chart; today's mark-to-market shows on the Holdings panel.
  </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 %}
    ];
    {% if has_brush %}
    const lifetimePoints = [
      {% for p in _lap %}
        { on: "{{ p.on.isoformat() }}",
          account: {{ (p.account_value|float) if p.account_value is not none else 'null' }} }{% if not loop.last %},{% endif %}
      {% endfor %}
    ];
    // Selection range tracked in IIFE scope so the brush's `events.selection`
    // (continuous, fires while dragging) and the chart container's pointerup
    // (fires once on release) can read the same value.
    const brushState = { min: null, max: null };
    {% endif %}

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

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

    function buildMainOpts() {
      const colors = [
        window.netAlphaChartTheme.colors.label3,
        window.netAlphaChartTheme.colors.pos,
      ];
      const widths = [2, 2];
      const dashArr = [4, 0];
      const fillTypes = ["solid", "gradient"];
      const fillOps = [1, 1];
      const isLight = document.documentElement.getAttribute("data-theme") === "light";
      return window.netAlphaChartTheme.merge(window.netAlphaChartTheme.defaults, {
        chart: {
          id: "equity-main",
          type: "line",
          height: 218,
          zoom: { enabled: true, type: "x", autoScaleYaxis: true },
          toolbar: { show: false },
        },
        colors: colors,
        stroke: { width: widths, curve: "smooth", lineCap: "round", dashArray: dashArr },
        fill: {
          type: fillTypes,
          gradient: { shade: isLight ? "light" : "dark", type: "vertical", opacityFrom: 0.30, opacityTo: 0, stops: [0, 100] },
          opacity: fillOps,
        },
        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,
      });
    }

    {% if has_brush %}
    function snapPeriodFromRange(minMs, maxMs) {
      const el = document.querySelector("#equity-chart-lifetime");
      const currentYear = parseInt(el.dataset.currentYear, 10);
      const years = JSON.parse(el.dataset.availableYears);
      const mid = new Date((minMs + maxMs) / 2);
      const y = mid.getUTCFullYear();
      if (y === currentYear) return "ytd";
      if (years.indexOf(y) !== -1) return String(y);
      let best = years[0], bestDist = Math.abs(y - years[0]);
      for (const cand of years) {
        const d = Math.abs(y - cand);
        if (d < bestDist) { best = cand; bestDist = d; }
      }
      return best === currentYear ? "ytd" : String(best);
    }

    function dispatchPeriodChange(period) {
      const sel = document.querySelector('form select[name="period"]');
      if (!sel) return;
      if (sel.value === period) return;
      sel.value = period;
      sel.dispatchEvent(new Event("change", { bubbles: true }));
    }

    function buildBrushOpts() {
      const el = document.querySelector("#equity-chart-lifetime");
      const periodStart = new Date(el.dataset.periodStart).getTime();
      const periodEnd   = new Date(el.dataset.periodEnd).getTime();
      brushState.min = periodStart;
      brushState.max = periodEnd;

      return window.netAlphaChartTheme.merge(window.netAlphaChartTheme.defaults, {
        chart: {
          id: "equity-brush",
          type: "line",
          height: 56,
          toolbar: { show: false },
          zoom: { enabled: false },
          selection: {
            enabled: true,
            type: "x",
            xaxis: { min: periodStart, max: periodEnd },
            fill: { color: window.netAlphaChartTheme.colors.pos, opacity: 0.18 },
            stroke: { width: 1, color: window.netAlphaChartTheme.colors.pos },
          },
          events: {
            selection: function (_chartCtx, { xaxis }) {
              brushState.min = xaxis.min;
              brushState.max = xaxis.max;
            },
          },
        },
        colors: [window.netAlphaChartTheme.colors.label3],
        stroke: { width: 1.5, curve: "smooth", lineCap: "round" },
        fill: { type: "solid", opacity: 0 },
        legend: { show: false },
        dataLabels: { enabled: false },
        xaxis: {
          type: "datetime",
          labels: { show: false },
          axisTicks: { show: false },
          axisBorder: { show: false },
        },
        yaxis: { labels: { show: false }, axisTicks: { show: false }, axisBorder: { show: false } },
        grid: { show: false, padding: { top: 0, right: 0, bottom: 0, left: 0 } },
        tooltip: { enabled: false },
        series: [{
          name: "Lifetime",
          data: lifetimePoints.map(p => ({ x: p.on, y: p.account })),
        }],
        states: { active: { allowMultipleDataPointsSelection: false } },
      });
    }
    {% endif %}

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

      {% if has_brush %}
      const brush = document.querySelector("#equity-chart-lifetime");
      if (!brush) return;
      brush.innerHTML = "";
      const brushChart = new ApexCharts(brush, buildBrushOpts());
      brushChart.render();

      let releaseTimer = null;
      brush.addEventListener("pointerup", () => {
        clearTimeout(releaseTimer);
        releaseTimer = setTimeout(() => {
          if (brushState.min == null || brushState.max == null) return;
          const period = snapPeriodFromRange(brushState.min, brushState.max);
          dispatchPeriodChange(period);
        }, 80);
      });
      {% endif %}
    }

    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 %}