{% extends "base.html" %}

{% block title %}创建策略 - AgomTradePro{% endblock %}

{% block content %}
<style>
.strategy-create-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.page-header { margin-bottom: 24px; }
.page-title { font-size: 28px; margin: 0 0 8px 0; }
.page-subtitle { color: #64748b; font-size: 14px; }

.form-section { background: white; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 20px; overflow: hidden; }
.section-header { padding: 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.section-title { font-size: 18px; font-weight: 600; margin: 0; }
.section-body { padding: 24px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-group { margin-bottom: 16px; }
.form-group.full { grid-column: span 2; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: #334155; margin-bottom: 8px; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-hint { font-size: 12px; color: #94a3b8; margin-top: 4px; }

.type-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.type-card {
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.type-card:hover { border-color: #667eea; background: #f8fafc; }
.type-card.selected { border-color: #667eea; background: #eff6ff; }
.type-card input { display: none; }
.type-icon { font-size: 32px; margin-bottom: 8px; }
.type-name { font-size: 14px; font-weight: 600; color: #334155; }
.type-desc { font-size: 11px; color: #94a3b8; margin-top: 4px; }

.risk-params { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.btn-primary {
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }

.btn-secondary {
    padding: 12px 32px;
    background: white;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}
.btn-secondary:hover { background: #f8fafc; }

.actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }

/* 规则编辑器（将在下一步实现） */
#rulesEditor { display: none; }
#scriptEditor { display: none; }
#aiEditor { display: none; }
</style>

<div class="strategy-create-container">
    <!-- 页面头部 -->
    <div class="page-header">
        <h1 class="page-title">创建新策略</h1>
        <div class="page-subtitle">配置投资组合的自动交易策略</div>
    </div>

    <form id="strategyForm" onsubmit="return false;">
        <!-- 基本信息 -->
        <div class="form-section">
            <div class="section-header">
                <h2 class="section-title">📋 基本信息</h2>
            </div>
            <div class="section-body">
                <div class="form-grid">
                    <div class="form-group full">
                        <label class="form-label">策略名称</label>
                        <input type="text" name="name" class="form-input" placeholder="例如：PMI扩张策略" required>
                    </div>

                    <div class="form-group full">
                        <label class="form-label">策略类型</label>
                        <div class="type-selector">
                            <label class="type-card" onclick="selectType('rule_based')">
                                <input type="radio" name="strategy_type" value="rule_based">
                                <div class="type-icon">📜</div>
                                <div class="type-name">规则驱动</div>
                                <div class="type-desc">基于JSON规则</div>
                            </label>
                            <label class="type-card" onclick="selectType('script_based')">
                                <input type="radio" name="strategy_type" value="script_based">
                                <div class="type-icon">💻</div>
                                <div class="type-name">脚本驱动</div>
                                <div class="type-desc">Python脚本</div>
                            </label>
                            <label class="type-card" onclick="selectType('hybrid')">
                                <input type="radio" name="strategy_type" value="hybrid">
                                <div class="type-icon">🔧</div>
                                <div class="type-name">混合模式</div>
                                <div class="type-desc">规则+脚本</div>
                            </label>
                            <label class="type-card" onclick="selectType('ai_driven')">
                                <input type="radio" name="strategy_type" value="ai_driven">
                                <div class="type-icon">🤖</div>
                                <div class="type-name">AI驱动</div>
                                <div class="type-desc">AI智能决策</div>
                            </label>
                        </div>
                    </div>

                    <div class="form-group full">
                        <label class="form-label">策略描述</label>
                        <textarea name="description" class="form-textarea" placeholder="描述策略的投资逻辑、适用场景等..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- 风控参数 -->
        <div class="form-section">
            <div class="section-header">
                <h2 class="section-title">🛡️ 风控参数</h2>
            </div>
            <div class="section-body">
                <div class="risk-params">
                    <div class="form-group">
                        <label class="form-label">单资产最大持仓</label>
                        <input type="number" name="max_position_pct" class="form-input" value="20" min="0" max="100" step="1">
                        <div class="form-hint">%</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">总持仓上限</label>
                        <input type="number" name="max_total_position_pct" class="form-input" value="95" min="0" max="100" step="1">
                        <div class="form-hint">%</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">止损比例</label>
                        <input type="number" name="stop_loss_pct" class="form-input" value="10" min="0" max="100" step="1">
                        <div class="form-hint">%（可选）</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">版本号</label>
                        <input type="number" name="version" class="form-input" value="1" min="1">
                    </div>
                </div>
            </div>
        </div>

        <!-- 仓位规则 -->
        <div class="form-section">
            <div class="section-header">
                <h2 class="section-title">🎯 仓位规则</h2>
            </div>
            <div class="section-body">
                {% include "strategy/components/position_rule_editor.html" %}
            </div>
        </div>

        <!-- 策略配置区域（根据类型动态显示） -->
        <div id="rulesEditor" class="form-section">
            <div class="section-header">
                <h2 class="section-title">📐 规则配置</h2>
            </div>
            <div class="section-body">
                {% include "strategy/components/rule_editor.html" %}
            </div>
        </div>

        <div id="scriptEditor" class="form-section">
            <div class="section-header">
                <h2 class="section-title">💻 脚本配置</h2>
            </div>
            <div class="section-body">
                {% include "strategy/components/script_editor.html" %}
            </div>
        </div>

        <div id="aiEditor" class="form-section">
            <div class="section-header">
                <h2 class="section-title">🤖 AI配置</h2>
            </div>
            <div class="section-body">
                {% include "strategy/components/ai_config_editor.html" %}
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
            <button type="button" class="btn-secondary" onclick="history.back()">取消</button>
            <button type="submit" class="btn-primary" onclick="createStrategy()">创建策略</button>
        </div>
    </form>
</div>

<script>
// 选择策略类型
function selectType(type) {
    // 更新选中状态
    document.querySelectorAll('.type-card').forEach(card => {
        card.classList.remove('selected');
    });
    event.currentTarget.classList.add('selected');

    // 选中对应的radio
    const radio = document.querySelector(`input[value="${type}"]`);
    radio.checked = true;

    // 显示对应的编辑器
    document.getElementById('rulesEditor').style.display = 'none';
    document.getElementById('scriptEditor').style.display = 'none';
    document.getElementById('aiEditor').style.display = 'none';

    if (type === 'rule_based' || type === 'hybrid') {
        document.getElementById('rulesEditor').style.display = 'block';
    }
    if (type === 'script_based' || type === 'hybrid') {
        document.getElementById('scriptEditor').style.display = 'block';
    }
    if (type === 'ai_driven') {
        document.getElementById('aiEditor').style.display = 'block';
    }
}

// 创建策略
async function createStrategy() {
    const form = document.getElementById('strategyForm');
    const formData = new FormData(form);

    // 验证
    const name = formData.get('name');
    const type = formData.get('strategy_type');

    if (!name) {
        showToast('请输入策略名称', 'error');
        return;
    }
    if (!type) {
        showToast('请选择策略类型', 'error');
        return;
    }

    try {
        const res = await fetch('{% url "strategy:create" %}', {
            method: 'POST',
            headers: {'X-CSRFToken': getCookie('csrftoken')},
            body: formData
        });
        const data = await res.json();

        if (data.success || data.id) {
            showToast('策略创建成功');
            location.href = `/strategy/${data.id}/`;
        } else {
            showToast('创建失败: ' + (data.error || '未知错误'), 'error');
        }
    } catch (e) {
        showToast('创建失败: ' + e.message, 'error');
    }
}

// Toast 提示
function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    toast.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        background: ${type === 'success' ? '#10b981' : '#ef4444'};
        color: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 9999;
    `;
    document.body.appendChild(toast);

    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateY(10px)';
        toast.style.transition = 'all 0.3s';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}
</script>
{% endblock %}