{% extends "journal/base.html" %}
{% block title %}Trades — Setup Log Pro{% endblock %}
{% block content %}
<h1>Trades</h1>

<form class="filters" method="get">
  <input type="hidden" name="sort" value="{{ request.GET.sort }}">
  <input type="hidden" name="dir" value="{{ request.GET.dir }}">
  <input type="hidden" name="pnl_unit" value="{{ pnl_unit }}">
  <input type="hidden" name="commissions" value="{{ commissions }}">

  <div class="top-filter-row">
    <div class="portfolio-bar">
      <label for="portfolio-select">Portfolio</label>
      <select id="portfolio-select" class="chip-picker" data-field="portfolio">
        <option value="">+ Add portfolio…</option>
        <option value="none" data-color="#8FA0BE">Unassigned</option>
        {% for p in portfolio_choices %}
        <option value="{{ p.id }}" data-color="{{ p.display_color }}">{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>

    <div class="date-bar">
      <label for="date-from-input">Date</label>
      <input type="date" name="date_from" id="date-from-input" value="{{ filters.date_from }}" onchange="this.form.submit()">
      <span style="opacity:0.5;">&ndash;</span>
      <input type="date" name="date_to" id="date-to-input" value="{{ filters.date_to }}" onchange="this.form.submit()">
      {% for label, from_date, to_date in date_presets %}
      <button type="button" class="date-preset-chip" onclick="setDateRange('{{ from_date }}', '{{ to_date }}')">{{ label }}</button>
      {% endfor %}
    </div>
  </div>

  <div class="filter-row">
    <label>Symbol
      <select class="chip-picker" data-field="symbol">
        <option value="">+ Add symbol…</option>
        {% for s in all_symbols %}
        <option value="{{ s }}">{{ s }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Direction
      <select name="direction">
        <option value="">All</option>
        <option value="LONG" {% if filters.direction == "LONG" %}selected{% endif %}>Long</option>
        <option value="SHORT" {% if filters.direction == "SHORT" %}selected{% endif %}>Short</option>
      </select>
    </label>
    <label>Outcome
      <select class="chip-picker" data-field="outcome">
        <option value="">+ Add outcome…</option>
        <option value="WIN">Win</option>
        <option value="LOSS">Loss</option>
        <option value="BREAKEVEN">Breakeven</option>
      </select>
    </label>
    <label>Setup
      <select class="chip-picker" data-field="setup_tag">
        <option value="">+ Add setup…</option>
        {% for t, color in setup_tag_rows %}
        <option value="{{ t }}" {% if color %}data-color="{{ color }}"{% endif %}>{{ t }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Mistake
      <select class="chip-picker" data-field="mistake_tag">
        <option value="">+ Add mistake…</option>
        {% for t, color in mistake_tag_rows %}
        <option value="{{ t }}" {% if color %}data-color="{{ color }}"{% endif %}>{{ t }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Custom tag
      <select class="chip-picker" data-field="custom_tag">
        <option value="">+ Add custom tag…</option>
        {% for t, color in custom_tag_rows %}
        <option value="{{ t }}" {% if color %}data-color="{{ color }}"{% endif %}>{{ t }}</option>
        {% endfor %}
      </select>
    </label>
  </div>

  <div class="chip-store" style="display:none" aria-hidden="true">
    {% if "none" in filters.portfolio %}
    <input type="hidden" name="portfolio" value="none" data-field="portfolio" data-label="Unassigned" data-color="#8FA0BE">
    {% endif %}
    {% for p in portfolio_choices %}
    {% if p.id|stringformat:"s" in filters.portfolio %}
    <input type="hidden" name="portfolio" value="{{ p.id }}" data-field="portfolio" data-label="{{ p.name }}" data-color="{{ p.display_color }}">
    {% endif %}
    {% endfor %}
    {% for s in filters.symbol %}
    <input type="hidden" name="symbol" value="{{ s }}" data-field="symbol" data-label="{{ s }}">
    {% endfor %}
    {% for o in filters.outcome %}
    <input type="hidden" name="outcome" value="{{ o }}" data-field="outcome" data-label="{{ o|title }}">
    {% endfor %}
    {% for t in filters.setup_tag %}
    <input type="hidden" name="setup_tag" value="{{ t }}" data-field="setup_tag" data-label="{{ t }}">
    {% endfor %}
    {% for t in filters.mistake_tag %}
    <input type="hidden" name="mistake_tag" value="{{ t }}" data-field="mistake_tag" data-label="{{ t }}">
    {% endfor %}
    {% for t in filters.custom_tag %}
    <input type="hidden" name="custom_tag" value="{{ t }}" data-field="custom_tag" data-label="{{ t }}">
    {% endfor %}
  </div>

  <div class="filter-row">
    <label>Entry time <span class="range"><input type="time" name="entry_time_from" value="{{ filters.entry_time_from }}"><span>&ndash;</span><input type="time" name="entry_time_to" value="{{ filters.entry_time_to }}"></span></label>
    <label>Duration (min) <span class="range"><input type="number" step="5" min="0" name="duration_min" value="{{ filters.duration_min }}"><span>&ndash;</span><input type="number" step="5" min="0" name="duration_max" value="{{ filters.duration_max }}"></span></label>
  </div>

  <div class="filter-row">
    <label>Qty <span class="range"><input type="number" step="0.0001" name="qty_min" value="{{ filters.qty_min }}"><span>&ndash;</span><input type="number" step="0.0001" name="qty_max" value="{{ filters.qty_max }}"></span></label>
    <label>Entry price <span class="range"><input type="number" step="0.0001" name="entry_price_min" value="{{ filters.entry_price_min }}"><span>&ndash;</span><input type="number" step="0.0001" name="entry_price_max" value="{{ filters.entry_price_max }}"></span></label>
    <label>P&amp;L <span class="range"><input type="number" step="0.01" name="pnl_min" value="{{ filters.pnl_min }}"><span>&ndash;</span><input type="number" step="0.01" name="pnl_max" value="{{ filters.pnl_max }}"></span></label>
    <label>R <span class="range"><input type="number" step="0.01" name="r_min" value="{{ filters.r_min }}"><span>&ndash;</span><input type="number" step="0.01" name="r_max" value="{{ filters.r_max }}"></span></label>
    <label>Max move ($) <span class="range"><input type="number" step="0.01" name="max_move_min" value="{{ filters.max_move_min }}"><span>&ndash;</span><input type="number" step="0.01" name="max_move_max" value="{{ filters.max_move_max }}"></span></label>
    <label>Max pullback ($) <span class="range"><input type="number" step="0.01" name="max_pullback_min" value="{{ filters.max_pullback_min }}"><span>&ndash;</span><input type="number" step="0.01" name="max_pullback_max" value="{{ filters.max_pullback_max }}"></span></label>
    <div class="filter-actions">
      <button type="submit">Filter</button>
      <a href="{% url 'trade_list' %}?clear=1">Clear</a>
    </div>
  </div>
</form>
<div class="filter-chips-row"></div>

<div class="summary">
  <div>
    <a href="{{ pnl_unit_toggle_url }}" title="Click to switch between $ and R" style="color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; cursor:pointer;">
      Total P&amp;L ({{ pnl_unit }})
      {% if pnl_unit == "$" %}
      <b class="{% if total_pnl > 0 %}win{% elif total_pnl < 0 %}loss{% endif %}">${{ total_pnl|floatformat:2 }}</b>
      {% else %}
      <b class="{% if total_r > 0 %}win{% elif total_r < 0 %}loss{% endif %}">{{ total_r|floatformat:2 }}R</b>
      {% endif %}
    </a>
  </div>
  <div>Win rate <b>{% if win_rate is not None %}{{ win_rate|floatformat:1 }}%{% else %}—{% endif %}</b></div>
  <div>Average R <b class="{% if avg_r > 0 %}win{% elif avg_r < 0 %}loss{% endif %}">{% if avg_r is not None %}{{ avg_r|floatformat:2 }}R{% else %}—{% endif %}</b></div>
  <div title="Gross profit / gross loss — above 1 means you made more than you lost">Profit factor <b class="{% if profit_factor > 1 %}win{% elif profit_factor < 1 %}loss{% endif %}">{% if profit_factor is not None %}{{ profit_factor|floatformat:2 }}{% else %}—{% endif %}</b></div>
  <div>Trades <b>{{ total_trades }}</b></div>
  <div>
    <a href="{{ commissions_toggle_url }}" title="Click to switch between gross and net of commission" style="color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; cursor:pointer;">
      Total commission ({% if commissions == "net" %}net{% else %}gross{% endif %})
      <b>${{ total_commission|floatformat:2 }}</b>
    </a>
  </div>
</div>

<datalist id="bulk-setup-tag-options">{% for t in setup_tag_choices %}<option value="{{ t }}">{% endfor %}</datalist>
<datalist id="bulk-mistake-tag-options">{% for t in mistake_tag_choices %}<option value="{{ t }}">{% endfor %}</datalist>
<datalist id="bulk-custom-tag-options">{% for t in custom_tag_choices %}<option value="{{ t }}">{% endfor %}</datalist>

<details class="card" style="padding:0.75rem 1rem; margin-bottom:1rem; width:100%; box-sizing:border-box;">
  <summary style="cursor:pointer; font-weight:700;">
    Bulk actions <span style="font-weight:400; opacity:0.7; font-size:0.85rem;">(<span id="selected-count">0 selected</span>)</span>
  </summary>

  <div style="margin-top:0.85rem; display:flex; flex-direction:column; gap:0.75rem;">
    <form id="bulk-edit-form" method="post" action="{% url 'bulk_update_trades' %}" style="display:flex; gap:0.75rem; align-items:flex-end; flex-wrap:wrap; width:100%;">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.get_full_path }}">
      <input type="hidden" name="apply_by_filter" value="0">
      <input type="hidden" name="filter_querystring" value="{{ request.META.QUERY_STRING }}">
      <div class="trade-ids-container"></div>

      <label style="display:flex; flex-direction:column; font-size:0.72rem; opacity:0.8; gap:0.3rem;">Portfolio
        <select name="portfolio_id">
          <option value="__nochange__" selected>— No change —</option>
          <option value="none">Unassigned</option>
          {% for p in portfolio_choices %}<option value="{{ p.id }}">{{ p.name }}</option>{% endfor %}
        </select>
      </label>
      <label style="display:flex; flex-direction:column; font-size:0.72rem; opacity:0.8; gap:0.3rem; flex:1; min-width:10rem;">Setup tag
        <input type="text" name="setup_tag_name" list="bulk-setup-tag-options" autocomplete="off" placeholder="No change">
      </label>
      <label style="display:flex; flex-direction:column; font-size:0.72rem; opacity:0.8; gap:0.3rem; flex:1; min-width:10rem;">Mistake tag
        <input type="text" name="mistake_tag_name" list="bulk-mistake-tag-options" autocomplete="off" placeholder="No change">
      </label>
      <label style="display:flex; flex-direction:column; font-size:0.72rem; opacity:0.8; gap:0.3rem; flex:1; min-width:10rem;">Custom tag
        <input type="text" name="custom_tag_name" list="bulk-custom-tag-options" autocomplete="off" placeholder="No change">
      </label>

      <div style="display:flex; gap:0.5rem;">
        <button type="button" onclick="runBulkEdit('selected')">Apply to selected</button>
        <button type="button" onclick="runBulkEdit('filtered')">Apply to all {{ total_trades }} filtered</button>
      </div>
    </form>

    <div style="border-top:1px solid var(--border); padding-top:0.75rem; display:flex; gap:0.6rem; align-items:center;">
      <button type="submit" form="bulk-delete-form" class="delete-selected-btn" onclick="return confirm('Delete the selected trade(s)? This cannot be undone.');">Delete selected</button>
      <button type="submit" form="delete-filtered-form" class="delete-selected-btn" onclick="return confirm('Delete ALL {{ total_trades }} trade(s) currently matching your filters? This cannot be undone.');">Delete all {{ total_trades }} filtered</button>
    </div>
  </div>
</details>

<form id="bulk-delete-form" method="post" action="{% url 'delete_trades' %}">
  {% csrf_token %}
  <input type="hidden" name="next" value="{{ request.get_full_path }}">
</form>

<form id="delete-filtered-form" method="post" action="{% url 'delete_trades' %}">
  {% csrf_token %}
  <input type="hidden" name="next" value="{{ request.get_full_path }}">
  <input type="hidden" name="apply_by_filter" value="1">
  <input type="hidden" name="filter_querystring" value="{{ request.META.QUERY_STRING }}">
</form>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; font-size:0.85rem; opacity:0.85;">
  <span>Page {{ page_number }} of {{ total_pages }} ({{ total_trades }} trades, {{ trades|length }} shown)</span>
  <span style="display:flex; gap:1rem;">
    {% if prev_page_url %}<a href="{{ prev_page_url }}">&larr; Prev</a>{% else %}<span style="opacity:0.4;">&larr; Prev</span>{% endif %}
    {% if next_page_url %}<a href="{{ next_page_url }}">Next &rarr;</a>{% else %}<span style="opacity:0.4;">Next &rarr;</span>{% endif %}
  </span>
</div>

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="select-all-trades"></th>
      {% for col in columns %}
      <th><a href="{{ col.url }}">{{ col.label }} {{ col.arrow }}</a></th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for trade in trades %}
    <tr>
      <td class="row-select-cell">
        <input type="checkbox" name="trade_ids" value="{{ trade.pk }}" form="bulk-delete-form" class="trade-select">
        <form method="post" action="{% url 'delete_trades' %}" class="delete-x-form" onsubmit="return confirm('Delete this trade? This cannot be undone.');">
          {% csrf_token %}
          <input type="hidden" name="trade_ids" value="{{ trade.pk }}">
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="delete-x" title="Delete trade">&times;</button>
        </form>
      </td>
      <td><a href="{% url 'trade_detail' trade.pk %}?next={{ request.get_full_path|urlencode }}">{{ trade.entry_time|date:"Y-m-d" }}</a></td>
      <td>{{ trade.entry_time|date:"H:i:s" }}</td>
      <td>{% if trade.exit_time %}{{ trade.exit_time|date:"H:i:s" }}{% else %}—{% endif %}</td>
      <td>{{ trade.symbol }}</td>
      <td>{{ trade.direction }}</td>
      <td>{{ trade.qty|floatformat:"-4" }}</td>
      <td>{% if trade.max_move_r is not None %}{{ trade.max_move_r|floatformat:2 }}R{% else %}—{% endif %}</td>
      <td>{% if trade.max_pullback_r is not None %}{{ trade.max_pullback_r|floatformat:2 }}R{% else %}—{% endif %}</td>
      <td>{% if trade.pnl is not None %}<span class="{% if trade.effective_outcome == "WIN" %}win{% elif trade.effective_outcome == "LOSS" %}loss{% else %}breakeven{% endif %}">${{ trade.pnl }}</span>{% else %}—{% endif %}</td>
      <td>{% if trade.commission is not None %}${{ trade.commission }}{% else %}—{% endif %}</td>
      <td>{% if trade.r_value is not None %}<span class="{% if trade.effective_outcome == "WIN" %}win{% elif trade.effective_outcome == "LOSS" %}loss{% else %}breakeven{% endif %}">{{ trade.r_value|floatformat:2 }}R</span>{% else %}—{% endif %}</td>
      <td>
        {% if trade.is_open %}<span class="open">OPEN</span>
        {% elif trade.effective_outcome == "WIN" %}<span class="win">WIN</span>
        {% elif trade.effective_outcome == "LOSS" %}<span class="loss">LOSS</span>
        {% else %}<span class="breakeven">B/E</span>{% endif %}
      </td>
      <td class="tags-cell">{% for tag in trade.setup_tags %}<span{% if tag.color %} style="background-color:{{ tag.color }}; color:#fff;"{% endif %}>{{ tag.name }}</span>{% endfor %}</td>
      <td class="tags-cell">{% for tag in trade.mistake_tags %}<span{% if tag.color %} style="background-color:{{ tag.color }}; color:#fff;"{% endif %}>{{ tag.name }}</span>{% endfor %}</td>
      <td class="tags-cell">{% for tag in trade.custom_tags %}<span{% if tag.color %} style="background-color:{{ tag.color }}; color:#fff;"{% endif %}>{{ tag.name }}</span>{% endfor %}</td>
    </tr>
    {% empty %}
    <tr><td colspan="16">No trades yet. <a href="{% url 'upload_csv' %}">Import a CSV</a> to get started.</td></tr>
    {% endfor %}
  </tbody>
</table>

<div style="display:flex; justify-content:flex-end; align-items:center; margin-top:0.5rem; font-size:0.85rem; opacity:0.85;">
  <span style="display:flex; gap:1rem;">
    {% if prev_page_url %}<a href="{{ prev_page_url }}">&larr; Prev</a>{% else %}<span style="opacity:0.4;">&larr; Prev</span>{% endif %}
    <span>Page {{ page_number }} of {{ total_pages }}</span>
    {% if next_page_url %}<a href="{{ next_page_url }}">Next &rarr;</a>{% else %}<span style="opacity:0.4;">Next &rarr;</span>{% endif %}
  </span>
</div>

<script>
function updateSelectedCount() {
  var n = document.querySelectorAll(".trade-select:checked").length;
  document.getElementById("selected-count").textContent = n + " selected";
}
document.getElementById("select-all-trades").addEventListener("change", function () {
  document.querySelectorAll(".trade-select").forEach((cb) => { cb.checked = this.checked; });
  updateSelectedCount();
});
document.querySelector("table").addEventListener("change", function (e) {
  if (e.target.classList.contains("trade-select")) updateSelectedCount();
});
updateSelectedCount();

// The bulk-edit form doesn't wire its trade_ids up front — checked rows are read at
// click time and injected as hidden fields right before submit. "filtered" mode
// instead flags apply_by_filter so the server re-runs the current filter server-side
// (see _resolve_bulk_trade_ids in views.py) rather than posting one field per row,
// which is what let "select all" on thousands of trades blow past Django's
// DATA_UPLOAD_MAX_NUMBER_FIELDS in the first place.
function runBulkAction(formId, mode) {
  var form = document.getElementById(formId);
  var idsContainer = form.querySelector(".trade-ids-container");
  idsContainer.innerHTML = "";
  var applyByFilterInput = form.querySelector('input[name="apply_by_filter"]');
  if (mode === "filtered") {
    applyByFilterInput.value = "1";
  } else {
    applyByFilterInput.value = "0";
    document.querySelectorAll(".trade-select:checked").forEach(function (cb) {
      var inp = document.createElement("input");
      inp.type = "hidden";
      inp.name = "trade_ids";
      inp.value = cb.value;
      idsContainer.appendChild(inp);
    });
    if (!idsContainer.children.length) {
      alert('No trades selected. Check some rows first, or use "Apply to all filtered".');
      return;
    }
  }
  form.submit();
}

// Describes which fields the combined bulk-edit form will actually change (portfolio
// stays untouched at its "no change" sentinel by default; each tag field is blank —
// i.e. no change — unless typed into), so the confirm dialog says exactly what's about
// to happen instead of a generic "are you sure".
function bulkEditSummary(form) {
  var parts = [];
  var portfolioSelect = form.querySelector('select[name="portfolio_id"]');
  if (portfolioSelect.value !== "__nochange__") {
    parts.push("Portfolio → " + portfolioSelect.options[portfolioSelect.selectedIndex].text);
  }
  [["setup_tag_name", "Setup"], ["mistake_tag_name", "Mistake"], ["custom_tag_name", "Custom"]].forEach(function (pair) {
    var el = form.querySelector('[name="' + pair[0] + '"]');
    if (el.value.trim()) parts.push(pair[1] + " tag → \"" + el.value.trim() + "\"");
  });
  return parts;
}

function runBulkEdit(mode) {
  var form = document.getElementById("bulk-edit-form");
  var parts = bulkEditSummary(form);
  if (!parts.length) {
    alert("Nothing to apply — set at least one field (Portfolio, Setup, Mistake, or Custom tag).");
    return;
  }
  var targetDesc = mode === "filtered"
    ? "ALL {{ total_trades }} trade(s) currently matching your filters"
    : document.querySelectorAll(".trade-select:checked").length + " selected trade(s)";
  if (!confirm("Apply to " + targetDesc + ":\n" + parts.join("\n") + "\n\nContinue?")) return;
  runBulkAction("bulk-edit-form", mode);
}
</script>
{% endblock %}