{% extends "base.html" %}
{% block app_nav %}
<nav class="app-tabs">
  <a href="/" class="app-tab">新建任务</a>
  <a href="/?tab=job-history" class="app-tab">任务历史</a>
  <span class="app-tab is-active">编辑配置</span>
</nav>
{% endblock %}
{% block content %}
<form id="config-editor-form" class="config-editor-page" method="post" action="/api/config">
  <input type="hidden" name="editor_mode" id="editor-mode-input" value="{{ editor_state.editor_mode }}">
  <input type="hidden" name="active_section" id="active-section-input" value="{{ editor_state.active_section }}">

  <div class="config-toolbar">
    <label class="field config-path-field">
      <span>配置文件路径</span>
      <input type="text" name="config_path" value="{{ editor_state.config_path }}">
    </label>
    <div class="config-toolbar-actions">
      <div class="button-group" id="config-editor-mode-switch">
        <button type="button" class="button-secondary{% if editor_state.editor_mode == 'visual' %} is-active{% endif %}" data-editor-mode="visual">可视化编辑</button>
        <button type="button" class="button-secondary{% if editor_state.editor_mode == 'source' %} is-active{% endif %}" data-editor-mode="source">源码编辑</button>
      </div>
      <div class="form-actions">
        <button type="submit" class="button-primary">保存配置</button>
        <button type="button" id="config-reload" class="button-secondary">重新加载</button>
      </div>
    </div>
  </div>

  <div id="config-status" class="notice{% if editor_state.status_message %} notice-success{% endif %}{% if editor_state.errors or editor_state.load_errors or editor_state.runtime_errors %} notice-error{% endif %}{% if not editor_state.status_message and not editor_state.errors and not editor_state.load_errors and not editor_state.runtime_errors %} hidden{% endif %}">
    {% if editor_state.status_message %}
    <p>{{ editor_state.status_message }}</p>
    {% elif editor_state.errors or editor_state.load_errors or editor_state.runtime_errors %}
    <p>当前配置存在校验问题，请修正后再保存。</p>
    {% endif %}
  </div>

  {% if editor_state.load_errors or editor_state.errors or editor_state.runtime_errors or editor_state.source_errors %}
  <ul id="config-error-list" class="meta-list config-error-list">
    {% for error in editor_state.load_errors %}
    <li>{{ error.path }} — {{ error.message }}</li>
    {% endfor %}
    {% for error in editor_state.errors %}
    <li>{{ error.path }} — {{ error.message }}</li>
    {% endfor %}
    {% for error in editor_state.runtime_errors %}
    <li>{{ error.path }} — {{ error.message }}</li>
    {% endfor %}
    {% for error in editor_state.source_errors %}
    <li>{{ error.path }} — {{ error.message }}</li>
    {% endfor %}
  </ul>
  {% else %}
  <ul id="config-error-list" class="meta-list config-error-list hidden"></ul>
  {% endif %}

  <div class="config-layout{% if editor_state.editor_mode == 'source' %} config-layout-source{% endif %}">
    <aside id="config-sidebar" class="config-sidebar{% if editor_state.editor_mode != 'visual' %} hidden{% endif %}">
      <nav class="config-nav" aria-label="配置分组导航">
        <button type="button" class="config-nav-item{% if editor_state.active_section == 'prompt_overrides' %} is-active{% endif %}" data-config-section-target="prompt_overrides">
          Prompt 覆盖
        </button>
        {% for section in editor_state.sections %}
        <button type="button" class="config-nav-item{% if editor_state.active_section == section.id %} is-active{% endif %}" data-config-section-target="{{ section.id }}">
          {{ section.title }}
        </button>
        {% endfor %}
      </nav>
    </aside>

    <div class="config-content">
      <section class="config-section-panel{% if editor_state.editor_mode != 'source' %} hidden{% endif %}" id="config-source-editor">
        <div class="config-panel-header">
          <h2>源码编辑</h2>
        </div>
        <label class="field field-wide">
          <span>YAML 源文件</span>
          <textarea name="source_text" id="config-source-text" rows="24">{{ editor_state.source_text }}</textarea>
        </label>
      </section>

      <div id="config-visual-editor"{% if editor_state.editor_mode != 'visual' %} class="hidden"{% endif %}>
        <section class="config-section-panel{% if editor_state.active_section != 'prompt_overrides' %} hidden{% endif %}" data-config-section-panel="prompt_overrides">
          <div class="config-panel-header config-panel-header-actions">
            <h2>Prompt 覆盖</h2>
            <button type="button" id="{{ editor_state.prompt_override_restore_all_button_id }}" class="button-secondary">全部恢复默认</button>
          </div>
          <div class="form-grid form-grid-single">
            {% for field in editor_state.prompt_override_fields %}
            <label class="field field-wide">
              <span>{{ field.label }}</span>
              <textarea name="{{ field.path }}" rows="6">{{ field.value_text }}</textarea>
              <div class="button-group">
                <button type="button" id="{{ field.restore_button_id }}" class="button-secondary" data-restore-prompt-field="{{ field.path }}">恢复默认</button>
              </div>
              <small class="field-help">{{ field.help_text }}</small>
            </label>
            {% endfor %}
          </div>
        </section>

        {% for section in editor_state.sections %}
        <section class="config-section-panel{% if editor_state.active_section != section.id %} hidden{% endif %}" data-config-section-panel="{{ section.id }}">
          <div class="config-panel-header">
            <h2>{{ section.title }}</h2>
          </div>
          <div class="form-grid" data-config-section="{{ section.id }}">
            {% for field in section.fields %}
            {% if field.control == 'multi_select' %}
            <div class="field field-wide field-multi-select">
              <span>{{ field.label }}</span>
              <input type="hidden" name="{{ field.path }}" value="">
              <div class="checkbox-option-list" role="group" aria-label="{{ field.label }}">
                {% for option in field.options %}
                <label class="checkbox-option">
                  <input type="checkbox" name="{{ field.path }}" value="{{ option }}" {% if option in field.selected_values %}checked{% endif %}>
                  <span class="checkbox-option-text">{{ option }}</span>
                </label>
                {% endfor %}
              </div>
              {% if field.help_text %}
              <small class="field-help">{{ field.help_text }}</small>
              {% endif %}
              {% if field.env_override %}
              <small class="field-note">运行时被 {{ field.env_var }} 覆盖{% if field.show_effective %}，当前实际值：{{ field.effective_value }}{% endif %}</small>
              {% elif field.show_effective %}
              <small class="field-note">当前实际值：{{ field.effective_value }}</small>
              {% endif %}
            </div>
            {% else %}
            <label class="field">
              <span>{{ field.label }}</span>
              {% if field.control == 'checkbox' %}
              <input type="checkbox" name="{{ field.path }}" value="true" {% if field.checked %}checked{% endif %}>
              {% elif field.control == 'select' %}
              <select name="{{ field.path }}">
                {% for option in field.options %}
                <option value="{{ option }}" {% if field.value_text == option %}selected{% endif %}>{{ option }}</option>
                {% endfor %}
              </select>
              {% else %}
              <input type="{{ field.input_type }}" name="{{ field.path }}" value="{{ field.value_text }}" {% if field.input_type == 'number' %}step="{{ field.step }}"{% endif %}>
              {% endif %}
              {% if field.help_text %}
              <small class="field-help">{{ field.help_text }}</small>
              {% endif %}
              {% if field.env_override %}
              <small class="field-note">运行时被 {{ field.env_var }} 覆盖{% if field.show_effective %}，当前实际值：{{ field.effective_value }}{% endif %}</small>
              {% elif field.show_effective %}
              <small class="field-note">当前实际值：{{ field.effective_value }}</small>
              {% endif %}
            </label>
            {% endif %}
            {% endfor %}
          </div>
        </section>
        {% endfor %}
      </div>
    </div>
  </div>
</form>

<script src="/static/config.js?v=2"></script>
{% endblock %}