{% extends "journal/base.html" %}
{% block title %}{{ month_name }} {{ year }} — Setup Log Pro{% endblock %}
{% block content %}
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:0.75rem;">
  <h1 style="margin:0;">{{ month_name }} {{ year }}</h1>
  <div style="display:flex; gap:0.75rem; align-items:center;">
    <a href="{% url 'calendar_view_month' prev_year prev_month %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}">&larr; Prev</a>
    <a href="{% url 'calendar_view' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}">Today</a>
    <a href="{% url 'calendar_view_month' next_year next_month %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}">Next &rarr;</a>
  </div>
</div>

<form class="filters" method="get" action="{% url 'calendar_view' %}">
  <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>
    <div class="filter-actions">
      <button type="submit">Filter</button>
      <a href="?clear=1">Clear</a>
    </div>
  </div>
</form>
<div class="filter-chips-row"></div>

<div class="summary" style="margin-bottom:1.25rem;">
  <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;">
      {{ period_label }} 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>{{ trades_count }}</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>

<h3 style="display:grid; grid-template-columns:repeat(6, 1fr); align-items:baseline; margin-bottom:0.35rem;">
  <span style="grid-column:1 / 6;">{{ month_name }} {{ year }}</span>
  {% if pnl_unit == "$" %}
  <span class="{% if current_month_total_pnl > 0 %}win{% elif current_month_total_pnl < 0 %}loss{% endif %}" style="grid-column:6; text-align:center; font-size:0.8rem; font-weight:700;">${{ current_month_total_pnl|floatformat:0 }}</span>
  {% else %}
  <span class="{% if current_month_total_r > 0 %}win{% elif current_month_total_r < 0 %}loss{% endif %}" style="grid-column:6; text-align:center; font-size:0.8rem; font-weight:700;">{{ current_month_total_r|floatformat:1 }}R</span>
  {% endif %}
</h3>
<table class="calendar-table">
  <thead>
    <tr>
      <th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Week ({{ pnl_unit }})</th>
    </tr>
  </thead>
  <tbody>
    {% for week in grid %}
    <tr>
      {% for day in week.days %}
      <td class="calendar-cell {% if not day.in_month %}calendar-cell-out{% endif %} {% if day.is_today %}calendar-cell-today{% endif %} {% if pnl_unit == "$" %}{% if day.pnl > 0 %}calendar-cell-win{% elif day.pnl < 0 %}calendar-cell-loss{% endif %}{% else %}{% if day.r > 0 %}calendar-cell-win{% elif day.r < 0 %}calendar-cell-loss{% endif %}{% endif %}">
        <a href="{% url 'day_view' day.date|date:'Y-m-d' %}{% if filters.portfolio|length == 1 %}?portfolio={{ filters.portfolio.0 }}{% endif %}">
          <div class="calendar-daynum">
            <span>{{ day.date.day }}</span>
            {% if day.has_note %}<span class="calendar-note-badge">&#128221;</span>{% endif %}
          </div>
          {% if pnl_unit == "$" %}
            {% if day.pnl is not None %}
            <div class="calendar-pnl {% if day.pnl > 0 %}win{% elif day.pnl < 0 %}loss{% endif %}">${{ day.pnl|floatformat:0 }}</div>
            {% endif %}
          {% else %}
            {% if day.r is not None %}
            <div class="calendar-pnl {% if day.r > 0 %}win{% elif day.r < 0 %}loss{% endif %}">{{ day.r|floatformat:1 }}R</div>
            {% endif %}
          {% endif %}
          {% if day.trades_count %}
          <div class="calendar-trades-count">{{ day.trades_count }} trade{{ day.trades_count|pluralize }}</div>
          {% endif %}
        </a>
      </td>
      {% endfor %}
      {% if pnl_unit == "$" %}
      <td class="calendar-cell calendar-week-total {% if week.total_pnl > 0 %}win{% elif week.total_pnl < 0 %}loss{% endif %}">
        {% if week.total_pnl %}${{ week.total_pnl|floatformat:0 }}{% else %}—{% endif %}
      </td>
      {% else %}
      <td class="calendar-cell calendar-week-total {% if week.total_r > 0 %}win{% elif week.total_r < 0 %}loss{% endif %}">
        {% if week.total_r %}{{ week.total_r|floatformat:1 }}R{% else %}—{% endif %}
      </td>
      {% endif %}
    </tr>
    {% endfor %}
  </tbody>
</table>

{% include "journal/_week_summaries.html" with grid=grid %}

{% if preceding_months %}
<h2 style="margin-top:2rem;">Earlier months</h2>
<div class="preceding-months-grid">
  {% for pm in preceding_months %}
  <div class="calendar-mini">
    <h3 style="display:grid; grid-template-columns:repeat(6, 1fr); align-items:baseline;">
      <a href="{% url 'calendar_view_month' pm.year pm.month %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" style="grid-column:1 / 6;">{{ pm.month_name }} {{ pm.year }}</a>
      {% if pnl_unit == "$" %}
      <span class="{% if pm.total_pnl > 0 %}win{% elif pm.total_pnl < 0 %}loss{% endif %}" style="grid-column:6; text-align:center; font-size:0.8rem; font-weight:700;">${{ pm.total_pnl|floatformat:0 }}</span>
      {% else %}
      <span class="{% if pm.total_r > 0 %}win{% elif pm.total_r < 0 %}loss{% endif %}" style="grid-column:6; text-align:center; font-size:0.8rem; font-weight:700;">{{ pm.total_r|floatformat:1 }}R</span>
      {% endif %}
    </h3>
    <table class="calendar-table">
      <thead>
        <tr><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>Wk</th></tr>
      </thead>
      <tbody>
        {% for week in pm.grid %}
        <tr>
          {% for day in week.days %}
          <td class="calendar-cell {% if not day.in_month %}calendar-cell-out{% endif %} {% if day.is_today %}calendar-cell-today{% endif %} {% if pnl_unit == "$" %}{% if day.pnl > 0 %}calendar-cell-win{% elif day.pnl < 0 %}calendar-cell-loss{% endif %}{% else %}{% if day.r > 0 %}calendar-cell-win{% elif day.r < 0 %}calendar-cell-loss{% endif %}{% endif %}">
            <a href="{% url 'day_view' day.date|date:'Y-m-d' %}{% if filters.portfolio|length == 1 %}?portfolio={{ filters.portfolio.0 }}{% endif %}">
              <div class="calendar-daynum">
                <span>{{ day.date.day }}</span>
                {% if day.has_note %}<span class="calendar-note-badge">&#128221;</span>{% endif %}
              </div>
              {% if pnl_unit == "$" %}
                {% if day.pnl is not None %}
                <div class="calendar-pnl {% if day.pnl > 0 %}win{% elif day.pnl < 0 %}loss{% endif %}">${{ day.pnl|floatformat:0 }}</div>
                {% endif %}
              {% else %}
                {% if day.r is not None %}
                <div class="calendar-pnl {% if day.r > 0 %}win{% elif day.r < 0 %}loss{% endif %}">{{ day.r|floatformat:1 }}R</div>
                {% endif %}
              {% endif %}
            </a>
          </td>
          {% endfor %}
          {% if pnl_unit == "$" %}
          <td class="calendar-cell calendar-week-total {% if week.total_pnl > 0 %}win{% elif week.total_pnl < 0 %}loss{% endif %}">
            {% if week.total_pnl %}${{ week.total_pnl|floatformat:0 }}{% else %}&mdash;{% endif %}
          </td>
          {% else %}
          <td class="calendar-cell calendar-week-total {% if week.total_r > 0 %}win{% elif week.total_r < 0 %}loss{% endif %}">
            {% if week.total_r %}{{ week.total_r|floatformat:1 }}R{% else %}&mdash;{% endif %}
          </td>
          {% endif %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>
{% endif %}
{% endblock %}