{# Lot ladder. Consumes `lot_rows` from _pane_lot_info() (Task 2).

   Layout: sorted by date desc by default; client-side Alpine sort on column
   headers lets the user flip by date / qty / basis / unrealized / status.
   Collapses to "N lots" toggle when N > 5.
   Each row: date · qty · adj basis · unrealized · status pill.
   Click on a lot opens the ticker lots view in a new tab.

   Status values: "ST" (short-term), "LT" (long-term), "TACKED" (IRC §1223(4)),
   "WS" (lot cost basis inflated by §1091(d) disallowed-loss roll-in).

   Status precedence: TACKED > WS > LT > ST. When a lot is both TACKED and
   WS-implicated, TACKED wins (holding-period concern is more material).

   Cross-account mode (cross_account=True): lot rows are grouped by account with
   a small section header per account. The per-row HTML is factored into the
   `lot_row` macro to avoid duplication between the flat-list and grouped branches.
#}
{% macro lot_row(row, sym) %}
<a href="/ticker/{{ sym }}?view=lots" target="_blank"
   data-testid="lot-row"
   data-pill="{{ row.status }}"
   data-row-date="{{ row.date.isoformat() }}"
   data-row-qty="{{ row.qty }}"
   data-row-basis="{{ row.adj_basis }}"
   data-row-unrealized="{{ row.unrealized if row.unrealized is not none else '' }}"
   {% if row.is_tacked %}title="Holding period tacked from a prior wash sale (IRC §1223(4))"
   {% elif row.is_ws_implicated %}title="This lot's cost basis was inflated by a disallowed wash-sale loss (IRC §1091(d))"
   {% endif %}
   class="flex items-center justify-between gap-2 px-2 py-1.5 rounded text-[12px] hover:bg-surface-2 no-underline text-text">
  <span class="font-mono text-label-2 shrink-0">{{ row.date.isoformat() }}</span>
  <span class="font-mono shrink-0">{{ fmt_quantity(row.qty) }} sh</span>
  <span class="font-mono shrink-0">{{ fmt_currency(row.adj_basis) }}</span>
  {% if row.unrealized is not none %}
    <span class="font-mono shrink-0 {{ 'text-neg' if row.unrealized < 0 else 'text-pos' }}">{{ fmt_currency(row.unrealized) }}</span>
  {% else %}
    <span class="font-mono shrink-0 text-label-3">—</span>
  {% endif %}
  <span class="text-[10px] font-medium px-1.5 py-[1px] rounded shrink-0
        {% if row.status == 'ST' %}bg-warn-tint text-warn
        {% elif row.status == 'LT' %}bg-pos-tint text-pos
        {% elif row.status == 'TACKED' %}bg-info-tint text-info
        {% elif row.status == 'WS' %}bg-neg-tint text-neg
        {% else %}bg-surface-2 text-label-2
        {% endif %}">{{ row.status }}</span>
</a>
{% endmacro %}
{% if lot_rows %}
{% set _sorted = lot_rows | sort(attribute='date', reverse=True) %}
{% set _collapsed = _sorted | length > 5 %}
<div class="mt-4" x-data="{
  expanded: {{ 'false' if _collapsed else 'true' }},
  sortCol: 'date',
  sortDesc: true,
  sortBy(col) {
    if (this.sortCol === col) {
      this.sortDesc = !this.sortDesc;
    } else {
      this.sortCol = col;
      this.sortDesc = col !== 'qty';
    }
    this.applySort();
  },
  applySort() {
    const containers = this.$el.querySelectorAll('[data-row-group], [data-row-flat]');
    containers.forEach((container) => {
      const rows = Array.from(container.querySelectorAll('[data-testid=\'lot-row\']'));
      rows.sort((a, b) => {
        // Status reads `data-pill` (set by the row macro); other columns
        // read `data-row-{col}` set alongside it.
        const attr = this.sortCol === 'status' ? 'data-pill' : 'data-row-' + this.sortCol;
        const av = a.getAttribute(attr) || '';
        const bv = b.getAttribute(attr) || '';
        // ISO dates like "2025-06-15" must NOT be parsed as numeric:
        // parseFloat would strip everything after the year and collapse
        // all same-year dates to equal. Exclude the date column from the
        // numeric path; date sorts lexicographically on the ISO string.
        const an = Number(av);
        const bn = Number(bv);
        const numeric = this.sortCol !== 'date' && av !== '' && bv !== '' && !isNaN(an) && !isNaN(bn);
        if (numeric) {
          return this.sortDesc ? bn - an : an - bn;
        }
        return this.sortDesc ? bv.localeCompare(av) : av.localeCompare(bv);
      });
      rows.forEach(row => container.appendChild(row));
    });
  }
}">
  {% if _collapsed %}
    <button type="button"
            data-testid="lot-ladder-collapsed"
            class="text-[12px] text-label-2 hover:text-text mb-2 inline-flex items-center gap-1"
            @click="expanded = !expanded"
            x-text="(expanded ? '▾ ' : '▸ ') + '{{ _sorted | length }} lots'">▸ {{ _sorted | length }} lots</button>
  {% else %}
    <div class="text-[10px] uppercase tracking-wide text-label-2 mb-2">{{ _sorted | length }} lot{{ 's' if _sorted | length != 1 else '' }}</div>
  {% endif %}
  <div x-show="expanded" {% if _collapsed %}style="display:none"{% endif %} class="space-y-1">
    {# Column header row with click-to-sort #}
    <div class="flex items-center justify-between gap-2 px-2 py-1.5 text-[10px] uppercase tracking-wide text-label-3 select-none" data-testid="lot-ladder-header">
      {% set _columns = [
        ('date', 'Date'),
        ('qty', 'Qty'),
        ('basis', 'Basis'),
        ('unrealized', 'Unrealized'),
        ('status', 'Status'),
      ] %}
      {% for key, label in _columns %}
        <button type="button"
                class="hover:text-text"
                data-sort-col="{{ key }}"
                @click="sortBy('{{ key }}')"
                x-text="'{{ label }}' + (sortCol === '{{ key }}' ? (sortDesc ? ' ▾' : ' ▴') : '')">{{ label }}</button>
      {% endfor %}
    </div>
    {% if cross_account %}
      {# Group by account: render a small section header per account, then the
         rows for that account, preserving the date-desc sort within each group.
         distinct_account_displays is pre-sorted by the route so iteration order
         is deterministic. #}
      {% for account_display in distinct_account_displays %}
        {% set account_rows = _sorted | selectattr('account', 'equalto', account_display) | list %}
        {% if account_rows %}
          <div data-testid="lot-ladder-group" data-row-group class="mt-2 first:mt-0">
            <div class="text-[10px] uppercase tracking-wide text-label-3 mb-1">{{ account_display }}</div>
            {% for row in account_rows %}
              {{ lot_row(row, sym) }}
            {% endfor %}
          </div>
        {% endif %}
      {% endfor %}
    {% else %}
      <div data-row-flat>
        {% for row in _sorted %}
          {{ lot_row(row, sym) }}
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>
{% endif %}