{% extends "base.html" %}

{% block title %}{{ category.name }} - 生成向导{% endblock %}
{% block page_title %}{{ ui_config.page_title or (category.name + ' 题目生成向导') }}{% endblock %}

{% block styles %}
<link href="{{ url_for('static', filename='css/pages/generate/wizard/dynamic.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="wizard-container">
    <div class="wizard-header">
        <div class="wizard-title">
            <h1>
                <i class="{{ (category.icon or 'magic') | icon_class }} me-2"></i>
                {{ ui_config.page_title or (category.name + ' 题目生成向导') }}
            </h1>
            <p>{{ ui_config.page_description or '按顺序完成配置，快速生成高质量 CTF 题目' }}</p>
        </div>
        <div class="wizard-steps">
            {% set visible_index = namespace(value=0) %}
            {% for field in form_fields %}
            {% if not field.hidden %}
            {% set visible_index.value = visible_index.value + 1 %}
            <div class="wizard-step {% if visible_index.value == 1 %}active{% else %}locked{% endif %}" id="step-{{ visible_index.value }}" data-field-id="{{ field.id }}">
                <span class="wizard-step-num">{{ visible_index.value }}</span>
                <span>{{ field.label }}</span>
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>

    <form method="POST" id="wizardForm">
        <!-- AI 配置选择器 -->
        <div class="ai-config-selector mb-4" id="aiConfigSelector">
            <label class="ai-config-label">
                <i class="fas fa-robot"></i>
                <span>AI 配置</span>
            </label>
            <div class="ai-config-dropdown">
                <div class="ai-config-select" id="aiConfigSelect" onclick="window.WizardAIConfig.toggleDropdown()">
                    <span class="ai-config-selected" id="currentAIConfig">加载中...</span>
                    <i class="fas fa-chevron-down ai-config-arrow"></i>
                </div>
                <div class="ai-config-dropdown-menu" id="aiConfigDropdownMenu" style="display: none;" onclick="event.stopPropagation()">
                    <div class="ai-config-search">
                        <input type="text" 
                               id="aiConfigSearch" 
                               placeholder="搜索配置..." 
                               oninput="window.WizardAIConfig.filter(this.value)"
                               onclick="event.stopPropagation()"
                               onkeydown="if(event.key === 'Escape') { window.WizardAIConfig.toggleDropdown(false); }">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="ai-config-options" id="aiConfigList">
                        <!-- AI 配置选项将在这里动态生成 -->
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="ai_config_id" id="selectedAIConfigId" value="">

        <div class="wizard-form">
            {% set panel_index = namespace(value=0) %}
            {% for field in form_fields %}
            {% if not field.hidden %}
            {% set panel_index.value = panel_index.value + 1 %}
            <div class="wizard-panel {% if panel_index.value > 1 %}locked{% endif %}" id="panel-{{ field.id }}" data-field-id="{{ field.id }}" data-panel-index="{{ panel_index.value }}">
                <div class="panel-header">
                    <i class="{{ (field.icon or 'circle') | icon_class }}"></i>
                    <span>{{ loop.index }}. {{ field.label }}</span>
                    {% if field.type in ['multi_select', 'multi_select_categorized'] %}
                    <span class="badge bg-light text-dark ms-auto" id="count-{{ field.id }}" style="display: none;">
                        <span id="count-val-{{ field.id }}">0</span>/<span id="count-max-{{ field.id }}">5</span>
                    </span>
                    {% endif %}
                </div>
                <div class="panel-body">
                    {% if loop.first %}
                        {% if field.type == 'select' and field.options %}
                            {% for opt in field.options %}
                            <div class="option-item" data-type="{{ field.id }}" data-value="{{ opt.value or opt.label }}">
                                {% if opt.icon %}
                                    <i class="{{ opt.icon | icon_class }}"></i>
                                {% else %}
                                    <i class="fas fa-circle"></i>
                                {% endif %}
                                <div class="option-text">
                                    <div class="option-name">{{ opt.label or opt.value }}</div>
                                    {% if opt.description %}
                                    <div class="option-desc">{{ opt.description }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endfor %}
                        {% elif field.type == 'text' %}
                            <div class="input-field-wrapper">
                                <input type="text" 
                                       class="form-control" 
                                       id="input-{{ field.id }}"
                                       name="{{ field.id }}"
                                       placeholder="{{ field.placeholder or '请输入' + field.label }}"
                                       {% if field.required %}required{% endif %}
                                       oninput="handleInputChange('{{ field.id }}', this.value)">
                                {% if field.description %}
                                <small class="text-muted">{{ field.description }}</small>
                                {% endif %}
                            </div>
                        {% elif field.type == 'textarea' %}
                            <div class="input-field-wrapper">
                                <textarea class="form-control" 
                                          id="input-{{ field.id }}"
                                          name="{{ field.id }}"
                                          rows="{{ field.rows or 3 }}"
                                          placeholder="{{ field.placeholder or '请输入' + field.label }}"
                                          {% if field.required %}required{% endif %}
                                          oninput="handleInputChange('{{ field.id }}', this.value)"></textarea>
                                {% if field.description %}
                                <small class="text-muted">{{ field.description }}</small>
                                {% endif %}
                            </div>
                        {% elif field.type == 'number' %}
                            <div class="input-field-wrapper">
                                <input type="number" 
                                       class="form-control" 
                                       id="input-{{ field.id }}"
                                       name="{{ field.id }}"
                                       placeholder="{{ field.placeholder or '请输入数字' }}"
                                       {% if field.min is defined %}min="{{ field.min }}"{% endif %}
                                       {% if field.max is defined %}max="{{ field.max }}"{% endif %}
                                       {% if field.step is defined %}step="{{ field.step }}"{% endif %}
                                       {% if field.required %}required{% endif %}
                                       oninput="handleInputChange('{{ field.id }}', this.value)">
                                {% if field.description %}
                                <small class="text-muted">{{ field.description }}</small>
                                {% endif %}
                            </div>
                        {% elif field.type in ['multi_select', 'multi_select_categorized'] %}
                            {# 多选类型由 JS 动态加载 #}
                            <div id="options-{{ field.id }}"></div>
                        {% else %}
                            <div id="options-{{ field.id }}"></div>
                        {% endif %}
                    {% else %}
                        <div class="lock-hint" id="lock-{{ field.id }}">
                            <i class="fas fa-lock"></i>
                            <span>请先完成上一步</span>
                        </div>
                        <div id="options-{{ field.id }}" style="display: none;"></div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>

        <div class="wizard-actions">
            <div class="selection-summary" id="selectionSummary">
                请按顺序完成所有配置
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn-reset" onclick="resetWizard()">
                    <i class="fas fa-undo me-1"></i>{{ ui_config.reset_button or '重置' }}
                </button>
                <button type="submit" class="btn-generate" id="btnGenerate" disabled>
                    <i class="fas fa-magic"></i>
                    <span>{{ ui_config.generate_button or '开始生成' }}</span>
                </button>
            </div>
        </div>

        <!-- Hidden inputs for form submission -->
        <div id="hiddenInputs"></div>
    </form>
</div>
{% endblock %}

{% block scripts %}
{# 使用单独的 script 标签存储 JSON，避免在 JavaScript 代码中直接嵌入 #}
{# 不需要 HTML 转义，因为 JSON 本身是安全的文本内容 #}
{# 但要确保 JSON 中不包含 </script> 标签（如果包含，需要转义） #}
<script type="application/json" id="form-fields-data">{{ form_fields_json | safe }}</script>
<script type="application/json" id="difficulty-rules-data">{{ difficulty_rules_json | safe }}</script>
<script>
    window.categoryId = {{ category.id | tojson | safe }};
</script>
<!-- 向导模块 -->
<script src="{{ url_for('static', filename='js/pages/generate/wizard/wizard-state.js') }}"></script>
<script src="{{ url_for('static', filename='js/pages/generate/wizard/wizard-options.js') }}"></script>
<script src="{{ url_for('static', filename='js/pages/generate/wizard/wizard-ui.js') }}"></script>
<script src="{{ url_for('static', filename='js/pages/generate/wizard/wizard-ai-config.js') }}"></script>
<!-- 主入口文件 -->
<script src="{{ url_for('static', filename='js/pages/generate/wizard/dynamic.js') }}"></script>
{% endblock %}