{% extends "base.html" %}
{% block title %}策略交易 - 国内期货监控系统{% endblock %}
{% block extra_css %}
<style>
.strategy-page .split-grid .card{min-height:420px;display:flex;flex-direction:column}
.strategy-page .split-grid .card-body{flex:1}
.strategy-preview{background:var(--card-inner);border:1px solid var(--card-border);border-radius:8px;padding:.65rem .85rem;font-size:.78rem;line-height:1.5;margin-top:.75rem;white-space:pre-wrap;max-height:200px;overflow:auto}
.strategy-steps{margin:.75rem 0 0;padding-left:1.1rem;font-size:.82rem;color:var(--text-muted);line-height:1.6}
.strategy-steps a{color:var(--accent)}
.strategy-active-roll{margin-top:.65rem;padding:.55rem .75rem;background:var(--card-inner);border-radius:8px;font-size:.8rem;border:1px solid var(--card-border)}
</style>
{% endblock %}
{% block content %}
<div class="strategy-page">
<div class="split-grid">
    <div class="card">
        <h2>趋势回调</h2>
        <div class="card-body">
        {% if active_trend %}
        <p class="hint">运行中 #{{ active_trend.id }} · {{ active_trend.symbol }} · {{ '做多' if active_trend.direction == 'long' else '做空' }}</p>
        <p class="hint">已开 <strong>{{ active_trend.lots_open or 0 }}</strong> / {{ active_trend.target_lots }} 手 · 止损 {{ active_trend.stop_loss }} · 止盈 {{ active_trend.take_profit }}</p>
        <form id="trend-stop-form" class="form-row" style="margin-top:.75rem">
            <input type="hidden" name="plan_id" value="{{ active_trend.id }}">
            <button type="button" class="btn-primary" id="btn-trend-stop">结束计划</button>
        </form>
        <p class="hint" style="margin-top:.75rem;font-size:.75rem">后台按档位自动补仓，触及止盈或手动结束。</p>
        {% else %}
        <p class="hint" style="margin-bottom:.65rem">设置止损/补仓边界/止盈 → 预览 → 确认执行首仓；后续自动分档加仓。</p>
        <form id="trend-form" class="form-compact">
            <div class="form-line line-2">
                <div class="symbol-wrap symbol-mains">
                    <input class="symbol-input" name="symbol" placeholder="品种，输入中文或代码" autocomplete="off" required>
                    <div class="symbol-dropdown"></div>
                </div>
                <select name="direction"><option value="long">做多</option><option value="short">做空</option></select>
            </div>
            <div class="form-line line-3">
                <input name="stop_loss" type="number" step="any" placeholder="止损" required>
                <input name="add_upper" type="number" step="any" placeholder="补仓边界" required>
                <input name="take_profit" type="number" step="any" placeholder="止盈" required>
            </div>
            <div class="form-line line-2">
                <input name="risk_percent" type="number" step="0.1" value="{{ risk_percent }}" placeholder="单笔风险 %" title="单笔风险%">
                <button type="button" class="btn-primary" id="btn-trend-preview">预览计划</button>
            </div>
        </form>
        <div id="trend-preview" class="strategy-preview" hidden></div>
        <button type="button" class="btn-primary" id="btn-trend-exec" hidden style="margin-top:.65rem;width:100%">确认执行首仓</button>
        {% endif %}
        </div>
    </div>

    <div class="card">
        <h2>顺势加仓（滚仓）</h2>
        <div class="card-body">
        <p class="hint" style="margin-bottom:.65rem">在已有持仓上扩大仓位，统一抬高止损；最多 3 腿，止盈锁定首仓。</p>
        {% if roll_groups %}
        {% for g in roll_groups %}
        <div class="strategy-active-roll">
            运行中 · 监控 #{{ g.order_monitor_id }} · {{ g.leg_count or 1 }} 腿 · 止损 {{ g.current_stop_loss }}
        </div>
        {% endfor %}
        {% endif %}
        {% if monitors %}
        <form id="roll-form" class="form-compact">
            <div class="field" style="margin-bottom:.5rem">
                <label class="text-label" style="font-size:.72rem">选择下单监控（开仓后生成）</label>
                <select name="monitor_id" required>
                    {% for m in monitors %}
                    <option value="{{ m.id }}">{{ m.symbol_name or m.symbol }} {{ m.symbol }} · {{ '多' if m.direction == 'long' else '空' }} {{ m.lots }}手 · SL {{ m.stop_loss or '—' }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-line line-2">
                <input name="new_stop_loss" type="number" step="any" placeholder="新统一止损" required>
                <input name="risk_percent" type="number" step="0.1" value="2" placeholder="总风险 %" title="总风险%">
            </div>
            <div class="form-line line-2">
                <input name="add_price" type="number" step="any" placeholder="加仓参考价（可选）">
                <button type="button" class="btn-primary" id="btn-roll-preview">预览滚仓</button>
            </div>
            <div id="roll-preview" class="strategy-preview" hidden></div>
            <button type="button" class="btn-primary" id="btn-roll-exec" hidden style="margin-top:.65rem;width:100%">执行滚仓</button>
        </form>
        {% else %}
        <p class="empty-hint">暂无可用持仓监控</p>
        <ol class="strategy-steps">
            <li>打开 <a href="{{ url_for('positions') }}">持仓监控</a>，连接 CTP</li>
            <li>在「期货下单」填写品种、止损/止盈并<strong>开仓</strong></li>
            <li>开仓成功后会生成本页可选的监控记录，即可滚仓</li>
        </ol>
        {% endif %}
        </div>
    </div>
</div>
<p class="hint" style="margin-top:1rem"><a href="{{ url_for('strategy_records_page') }}">策略交易记录 →</a></p>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/strategy.js') }}"></script>
{% endblock %}