{% extends "base.html" %}
{% block title %}复盘 #{{ trade.id }} · {{ app_name }}{% endblock %}
{% block content %}
{% set side_cn = '买入（多）' if trade.side == 'buy' else ('卖出（空）' if trade.side == 'sell' else (trade.side or '—')) %}
{% set side_cls = 'green' if trade.side == 'buy' else ('red' if trade.side == 'sell' else 'gray') %}
<p><a href="{{ url_for('records_page') }}">← 返回列表</a></p>
<h2 style="margin:8px 0 14px">
  复盘 #{{ trade.id }} · {{ trade.symbol }} ·
  <span class="tag {{ side_cls }}" style="font-size:15px;vertical-align:middle">{{ side_cn }}</span>
</h2>

<div class="grid cols-2">
  <div class="card">
    <h3>成交信息</h3>
    <table>
      <tr><th>方向</th><td><span class="tag {{ side_cls }}">{{ side_cn }}</span></td></tr>
      <tr><th>账户</th><td>{{ trade.account_name or '—' }}</td></tr>
      <tr><th>机器</th><td>{{ trade.machine_name or '—' }}</td></tr>
      <tr><th>手数</th><td>{{ trade.volume }}</td></tr>
      <tr><th>开仓价</th><td>{{ trade.open_price|fmt_price }}</td></tr>
      <tr><th>平仓价</th><td>{{ trade.close_price|fmt_price }}</td></tr>
      <tr><th>开仓时间</th><td>{{ trade.open_time_fmt }} <span class="muted">北京时间</span></td></tr>
      <tr><th>平仓时间</th><td>{{ trade.close_time_fmt }} <span class="muted">北京时间</span></td></tr>
      <tr><th>持仓时间</th><td style="font-weight:700;color:var(--accent)">{{ trade.hold_duration }}</td></tr>
      <tr><th>盈亏</th><td>{{ trade.profit|fmt_money }}</td></tr>
      <tr><th>SL / TP</th><td>{{ trade.sl|fmt_price }} / {{ trade.tp|fmt_price }}</td></tr>
      <tr><th>单号</th><td>{{ trade.ticket or '—' }}</td></tr>
    </table>
  </div>
  <div class="card">
    <h3>复盘标注</h3>
    <form method="post" action="{{ url_for('record_annotate', tid=trade.id) }}" id="annotate-form">
      <div class="form-row">
        <label>入场形式</label>
        <select name="entry_style">
          <option value="" {% if not trade.entry_style %}selected{% endif %}>（未选）</option>
          <optgroup label="顺势">
            {% for p in entry_patterns %}
            {% set s = '顺势 · ' ~ p %}
            <option value="{{ s }}" {% if trade.entry_style==s %}selected{% endif %}>{{ p }}</option>
            {% endfor %}
          </optgroup>
          <optgroup label="反转">
            {% for p in entry_patterns %}
            {% set s = '反转 · ' ~ p %}
            <option value="{{ s }}" {% if trade.entry_style==s %}selected{% endif %}>{{ p }}</option>
            {% endfor %}
          </optgroup>
          <optgroup label="其他">
            <option value="其他 · 乱作" {% if trade.entry_style=='其他 · 乱作' %}selected{% endif %}>乱作</option>
          </optgroup>
          {% if trade.entry_style and trade.entry_style not in entry_styles %}
          <optgroup label="历史标注">
            <option value="{{ trade.entry_style }}" selected>{{ trade.entry_style }}（旧）</option>
          </optgroup>
          {% endif %}
        </select>
        <p class="muted" style="margin:8px 0 0">管「按什么形进的」；对不上选乱作。</p>
      </div>
      <div class="form-row">
        <label>主要问题 <span class="muted">（最多 {{ review_issues_max }} 个，做对可不勾）</span></label>
        <div class="issue-checks" id="issue-checks" data-max="{{ review_issues_max }}">
          {% for iss in review_issues %}
          <label class="issue-chip">
            <input type="checkbox" name="review_issues" value="{{ iss }}"
              {% if iss in trade.review_issues_list %}checked{% endif %}>
            <span>{{ iss }}</span>
          </label>
          {% endfor %}
        </div>
      </div>
      <div class="form-row">
        <label>短备注</label>
        <textarea name="review_note" rows="3" placeholder="补一句细节即可，如「假突破没等回踩」">{{ trade.review_note or '' }}</textarea>
      </div>
      <button class="btn" type="submit">保存标注</button>
    </form>
  </div>
</div>

<div class="card" style="margin-top:14px">
  <h3>四周期 K 线（M1 / M5 / M15 / H1）</h3>
  <p class="muted">
    方向 <span class="tag {{ side_cls }}">{{ side_cn }}</span> ·
    入/出落在<strong>包含成交时刻</strong>的 K 线 · <strong>点击图可放大</strong>（同窗口放大看清）。
    <span style="color:#4cc2ff">● 入场 {{ trade.open_price|fmt_price }}{% if trade.open_time_fmt %} · {{ trade.open_time_fmt }}{% endif %}</span>
    {% if trade.close_price is not none %}
    · <span style="color:#f0b429">● 出场 {{ trade.close_price|fmt_price }}{% if trade.close_time_fmt %} · {{ trade.close_time_fmt }}{% endif %}</span>
    {% endif %}
  </p>
  <div class="chart-grid" style="margin-top:10px">
    {% for tf in ['M1','M5','M15','H1'] %}
    <div class="chart-box">
      <h4>{{ tf }} <span class="chart-meta muted" style="font-weight:400"></span>
        {% if charts[tf] %}<span class="chart-zoom-hint muted">点击放大</span>{% endif %}
      </h4>
      {% if charts[tf] %}
      <canvas class="chart-canvas" id="chart-{{ tf }}"
              title="点击放大"
              data-tf="{{ tf }}"
              data-bars='{{ charts[tf]|tojson }}'
              data-open-ts="{{ trade.open_time or '' }}"
              data-close-ts="{{ trade.close_time or '' }}"
              data-open-price="{{ trade.open_price if trade.open_price is not none else '' }}"
              data-close-price="{{ trade.close_price if trade.close_price is not none else '' }}"
              data-side="{{ trade.side or '' }}"></canvas>
      {% else %}
      <div class="empty-chart">暂无 {{ tf }} K 线（需客户端上报后才有缓存）</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
<script>
(function () {
  var box = document.getElementById("issue-checks");
  if (!box) return;
  var maxN = parseInt(box.dataset.max || "2", 10) || 2;
  box.addEventListener("change", function (e) {
    var t = e.target;
    if (!t || t.type !== "checkbox") return;
    var checked = box.querySelectorAll('input[type="checkbox"]:checked');
    if (checked.length <= maxN) return;
    t.checked = false;
    alert("主要问题最多选 " + maxN + " 个");
  });
})();
</script>
{% endblock %}