{% extends "base.html" %}
{% block content %}
<section class="card glass chat-workbench">
  <div class="chat-header">
    <div>
      <h3 data-i18n="chat.title">Web 对话 · 实时控制台</h3>
    </div>
    <div class="chat-header-tags">
      <span class="tag">driver: {{ driver_mode }}</span>
      <span class="tag" id="runtime-live-tag">idle</span>
    </div>
  </div>

  <div class="chat-shell">
    <aside id="chat-history-side" class="chat-history-side auto-fold">
      <div class="fold-head">
        <button type="button" class="fold-toggle" onclick="toggleFold('chat-history-side')" title="会话列表" data-i18n-title="chat.session_list">
          <svg class="fold-icon-svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v2H3V6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
            <path d="M3 10h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
          </svg>
        </button>
        <span class="fold-title" data-i18n="chat.sessions">会话</span>
      </div>
      <div class="fold-content">
        <div class="history-head">
          <h4 data-i18n="chat.session_history">会话历史</h4>
          <div class="muted" data-i18n="chat.session_history_hint">点击直接接管会话</div>
        </div>
        <div id="chat-history-list" class="history-list">
        {% for item in chat_targets %}
        <article
          class="history-item {{ 'pinned' if item.pinned else '' }}"
          data-channel="{{ item.channel }}"
          data-chat-id="{{ item.chat_id }}"
          data-pinned="{{ '1' if item.pinned else '0' }}"
          onclick="selectChatTarget(this, '{{ token }}')"
          role="button"
          tabindex="0"
        >
          <div class="history-item-top">
            <div class="history-item-title">{{ item.channel }} · {{ item.chat_id }}</div>
            <button type="button" class="history-menu-trigger" title="更多操作" data-i18n-title="chat.more_actions" onclick="toggleHistoryMenu(this, event)">⋯</button>
          </div>
          <div class="history-menu hidden" onclick="event.stopPropagation()">
            <button
              type="button"
              class="history-menu-item"
              data-i18n="{{ 'chat.unpin' if item.pinned else 'chat.pin' }}"
              onclick='setTargetPinned({{ item.channel|tojson }}, {{ item.chat_id|tojson }}, {{ 0 if item.pinned else 1 }}, {{ (token or "")|tojson }}, event)'
            >{{ '取消置顶' if item.pinned else '置顶' }}</button>
            <button
              type="button"
              class="history-menu-item danger"
              data-i18n="chat.delete"
              onclick='deleteTargetHistory({{ item.channel|tojson }}, {{ item.chat_id|tojson }}, {{ (token or "")|tojson }}, event)'
            >删除</button>
          </div>
          {% if item.pinned %}
          <span class="history-pin-badge" data-i18n="chat.pinned">置顶</span>
          {% endif %}
          <div class="history-item-preview">{{ item.preview }}</div>
          <div class="history-item-time">{{ item.updated_at }}</div>
        </article>
        {% endfor %}
        </div>
      </div>
    </aside>

    <div class="chat-center">
      <div class="runtime-toolbar">
        <label class="toolbar-item">
          <span data-i18n="chat.model">模型</span>
          <select id="chat-model">
            {% for m in model_options %}
            <option value="{{ m }}" {{ 'selected' if m == default_model else '' }}>{{ m }}</option>
            {% endfor %}
          </select>
        </label>
        <label class="toolbar-item">
          <span data-i18n="chat.model_context">模型上下文</span>
          <div id="chat-model-context" class="context-chip">-</div>
        </label>
        <label class="toolbar-item">
          <span data-i18n="chat.custom_model_id">自定义模型 ID</span>
          <input id="chat-model-custom" placeholder="例如: minimax-m2.5" data-i18n-placeholder="chat.custom_model_placeholder" value="">
        </label>
        <label class="toolbar-item">
          <span data-i18n="chat.runtime_mode">运行模式</span>
          <select id="chat-runtime-mode">
            {% for mode in runtime_modes %}
            <option value="{{ mode }}" {{ 'selected' if mode == default_runtime_mode else '' }}>{{ mode }}</option>
            {% endfor %}
          </select>
        </label>
        <label class="toolbar-item">
          <span data-i18n="chat.think_mode">思考模式</span>
          <select id="chat-think-enabled">
            <option value="0" data-i18n="common.off" {{ '' if default_think_enabled else 'selected' }}>关闭</option>
            <option value="1" data-i18n="common.on" {{ 'selected' if default_think_enabled else '' }}>开启</option>
          </select>
        </label>
      </div>

      <div id="chat-board" class="chat-scroll chat-scroll-pro" data-token="{{ token }}">
        {% for msg in messages %}
        <div class="bubble {{ 'user' if msg.role == 'user' else 'assistant' }}">
          <div class="meta">{{ msg.role }}</div>
          <div class="md-content" data-render-markdown="1">{{ msg.content }}</div>
        </div>
        {% endfor %}
      </div>

      <form id="chat-form" class="chat-composer" onsubmit="return sendWebChat(event, '{{ token }}')">
        <input type="hidden" id="chat-session-id" value="{{ session_id }}">
        <textarea id="chat-input" placeholder="输入消息，Enter 发送 / Shift+Enter 换行" data-i18n-placeholder="chat.input_placeholder" rows="4"></textarea>
        <div class="composer-actions">
          <button type="submit" id="chat-send-btn" data-i18n="common.send">发送</button>
          <button type="button" data-i18n="chat.new_chat" onclick="resetWebChat('{{ token }}')">新对话</button>
          <div id="chat-status" class="validate-result" data-i18n="chat.ready">就绪</div>
        </div>
      </form>
    </div>

    <aside id="chat-runtime-side" class="chat-side chat-side-compact auto-fold">
      <div class="fold-head">
        <button type="button" class="fold-toggle" onclick="toggleFold('chat-runtime-side')" title="运行态面板" data-i18n-title="chat.runtime_panel">
          <svg class="fold-icon-svg" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M5 19V9M12 19V5M19 19v-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
            <rect x="3" y="3" width="18" height="18" rx="3" fill="none" stroke="currentColor" stroke-width="1.4"/>
          </svg>
        </button>
        <span class="fold-title" data-i18n="chat.runtime_state">运行态</span>
      </div>
      <div class="fold-content">
      <div class="stats-grid">
        <div class="metric-card">
          <div data-i18n="chat.elapsed">耗时</div>
          <strong id="metric-elapsed">0.0s</strong>
        </div>
        <div class="metric-card">
          <div data-i18n="chat.text_chunks">文本块</div>
          <strong id="metric-chunks">0</strong>
        </div>
        <div class="metric-card">
          <div data-i18n="chat.tool_calls">工具调用</div>
          <strong id="metric-tools">0</strong>
        </div>
        <div class="metric-card">
          <div data-i18n="chat.thought_chunks">思考块</div>
          <strong id="metric-thoughts">0</strong>
        </div>
        <div class="metric-card">
          <div data-i18n="chat.total_tokens">总 Tokens</div>
          <strong id="metric-tokens">-</strong>
        </div>
      </div>

      <div class="phase-board">
        <h4 data-i18n="chat.phases">阶段</h4>
        <div id="chat-phases" class="phase-list">
          <div class="phase-item" data-phase="preparing" data-i18n="phase.preparing">准备中</div>
          <div class="phase-item" data-phase="runtime_config" data-i18n="phase.runtime_config">应用运行参数</div>
          <div class="phase-item" data-phase="waiting_first_chunk" data-i18n="phase.waiting_first_chunk">等待首包</div>
          <div class="phase-item" data-phase="streaming" data-i18n="phase.streaming">流式输出</div>
          <div class="phase-item" data-phase="finalizing" data-i18n="phase.finalizing">收尾持久化</div>
          <div class="phase-item" data-phase="failed" data-i18n="phase.failed">异常终止</div>
        </div>
      </div>

      <div class="event-board">
        <h4 data-i18n="chat.events">事件</h4>
        <div id="chat-events" class="events-panel"></div>
      </div>
      </div>
    </aside>
  </div>

  <script id="chat-model-context-data" type="application/json">{{ model_context_sizes | tojson }}</script>
</section>
{% endblock %}