{% extends "journal/base.html" %}
{% block title %}Simulator — Setup Log Pro{% endblock %}
{% block content %}
<h1>Simulator</h1>
<p style="opacity:0.7; margin-top:-0.5rem;">What-if analysis: for each rule below, simulates a spread of parameter
  values against your filtered trades' actual cached price data, and shows which parameters would have produced
  the best total R. This can run for several seconds on a large filtered set.</p>

<style>
  .trailing-section { border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
  .trailing-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .trailing-section-head h2 { margin: 0; font-size: 1.05rem; }
  .trailing-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
  .trailing-table th, .trailing-table td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); }
  .trailing-table tr.best { font-weight: 700; color: #1a8a4a; }
  .trailing-table tr.best td:first-child::before { content: "★ "; }
  .trailing-table td:first-child a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
  .trailing-table td:first-child a:hover { text-decoration-style: solid; }
  .trailing-table-wrap { overflow-x: auto; }
  .trailing-table th.group-all, .trailing-table td.group-all { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .trailing-table td.group-subset { opacity: 0.7; }
  .trailing-table th.group-subset { opacity: 0.85; }
  .trailing-table thead tr:first-child th.group-all, .trailing-table thead tr:first-child th.group-subset {
    text-align: center; border-bottom: none; padding-bottom: 0.15rem; opacity: 0.7; font-size: 0.85rem; font-weight: 400;
  }
  .trailing-table thead tr:nth-child(2) th { padding-top: 0.15rem; }
  .trailing-table thead tr:first-child th[rowspan] { vertical-align: bottom; }
  .actual-summary {
    border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    padding: 0.75rem 1.25rem; margin-bottom: 1.25rem;
    display: flex; gap: 2rem; align-items: baseline; flex-wrap: wrap;
  }
  .actual-summary strong { font-size: 1.1rem; }
</style>

<form class="filters" method="get">
  <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>
    <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>
  </div>
  <div class="filter-row">
    <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>
  </div>

  <div class="filter-row" style="align-items:flex-start;">
    <div class="filter-actions">
      <button type="submit">Filter</button>
      <a href="{% url 'trailing_view' %}?clear=1">Clear</a>
    </div>
  </div>
</form>
<div class="filter-chips-row"></div>

<p style="opacity:0.7;">{{ trades_count }} trade{{ trades_count|pluralize }} match the current filter.</p>

<div class="trailing-section">
  <p style="opacity:0.8; font-size:0.9rem; margin:0 0 0.75rem;">
    This report only simulates the regular trading session (9:30 AM–4:00 PM ET) — pre-market bars are
    excluded entirely, since there's no real Session VWAP yet before the open, and a pre-market gap can
    be huge in a way no resting order would realistically fill through. A trade whose own entry happens
    before 9:30 AM ET has no bar left to anchor to once pre-market is excluded, so it's skipped below,
    same as a trade with no cached chart data at all (never fetched successfully, or imported before
    the provider had that day's data ready). If your trade count above looks a lot higher than what the
    sections show, this is why. This re-fetches chart data for every trade in the current
    filter that's missing it — trying Yahoo Finance first, then Alpaca for older trades Yahoo no
    longer has (needs an Alpaca API key set on the Settings → Charts page); a fresh fetch won't help a
    trade whose entry the provider simply never covered, only one that was never fetched at all. It
    can take a while on a large filtered set.
  </p>
  <div id="trailing-backfill-progress"></div>
  <form method="post" action="?{{ request.GET.urlencode }}">
    {% csrf_token %}
    <input type="hidden" name="action" value="backfill">
    <button type="submit">Fetch missing chart data for these trades</button>
  </form>
</div>

{% if actual_summary %}
<div class="actual-summary">
  <span>Realized (actual): <strong>{{ actual_summary.total_r|floatformat:2 }} total R</strong></span>
  <span>Avg R: <strong>{{ actual_summary.avg_r|floatformat:3 }}</strong></span>
  <span>Win rate: <strong>{{ actual_summary.win_rate|floatformat:1 }}%</strong></span>
  <span style="opacity:0.6;">({{ actual_summary.count }} trade{{ actual_summary.count|pluralize }} with a known R)</span>
</div>
<p style="opacity:0.6; margin-top:-0.75rem;">This is what actually happened with your real exits, for comparison
  against the simulated trailing-stop results below.</p>
{% endif %}

{% for section in sections %}
<div class="trailing-section" id="section-{{ section.key }}">
  <div class="trailing-section-head">
    <h2>{{ section.label }}</h2>
    <a href="{{ section.url }}#section-{{ section.key }}" class="nav-btn">Simulate</a>
  </div>
  <p style="opacity:0.7; font-size:0.9rem; margin-top:0.35rem;">{{ section.description }}</p>
  {% if section.results is not None %}
    {% if section.results %}
    <p style="opacity:0.6; font-size:0.85rem; margin:0.5rem 0 0;">"All trades" always covers the same trades as
      "Realized (actual)" above, falling back to your real result wherever a combo couldn't apply — that's the fair
      number to compare across rows, and it's what sorts and stars the best one. "This combo only" is just whichever
      trades it could actually simulate, which differs row to row — not safely comparable on its own.</p>
    <div class="trailing-table-wrap">
    <table class="trailing-table">
      <thead>
        <tr>
          <th rowspan="2">Parameters</th>
          <th colspan="4" class="group-all">All trades (fair comparison)</th>
          <th colspan="4" class="group-subset">This combo only</th>
        </tr>
        <tr>
          <th class="group-all">Trades</th><th class="group-all">Total R</th><th class="group-all">Avg R</th><th class="group-all">Win %</th>
          <th class="group-subset">Trades</th><th class="group-subset">Total R</th><th class="group-subset">Avg R</th><th class="group-subset">Win %</th>
        </tr>
      </thead>
      <tbody>
        {% for r in section.results %}
        <tr class="{% if r.is_best %}best{% endif %}">
          <td><a href="{{ r.trades_url }}" title="See the trades behind this row">{{ r.label }}</a></td>
          <td class="group-all">{{ r.full_count }}</td>
          <td class="group-all">{{ r.full_total_r|floatformat:2 }}</td>
          <td class="group-all">{{ r.full_avg_r|floatformat:3 }}</td>
          <td class="group-all">{{ r.full_win_rate|floatformat:1 }}%</td>
          <td class="group-subset">{{ r.count }}</td>
          <td class="group-subset">{{ r.total_r|floatformat:2 }}</td>
          <td class="group-subset">{{ r.avg_r|floatformat:3 }}</td>
          <td class="group-subset">{{ r.win_rate|floatformat:1 }}%</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% else %}
    <p style="opacity:0.6; margin-top:0.75rem;">No trades in the current filter had enough data to simulate this rule.</p>
    {% endif %}
  {% endif %}
</div>
{% endfor %}

{% endblock %}