{% extends "base.html" %}
{% block content %}
<div class="app-shell">

  <!-- ===== Minimal top bar ===== -->
  <div class="app-top">
    <div class="logo">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
      </svg>
      mangopi-web
    </div>
    <div class="top-actions">
      <button class="top-btn" onclick="window.location='/'">&#8592; Back</button>
    </div>
  </div>

  <div style="padding: 20px 0;">

    <div class="task-header" style="border-bottom: 1px solid var(--border); margin-bottom: 16px;">
      <div class="task-header-top">
        <div>
          <div class="task-header-title">{{ task.name }}</div>
          <div class="task-header-meta">
            <code style="font-size: 11px;">{{ task.id }}</code>
            <span>·</span>
            <span class="task-status-pill {{ task.status }}">{{ task.status }}</span>
            {% if task.current_phase %}<span>·</span><span>phase <b style="color: var(--text);">{{ task.current_phase }}</b></span>{% endif %}
            {% if task.current_iter %}<span>·</span><span>iter {{ task.current_iter }}/{{ task.max_iter }}</span>{% endif %}
          </div>
        </div>
        <div class="task-header-actions">
          <button class="icon-btn" title="back to tasks"
                  onclick="window.location='/'">&#8592;</button>
        </div>
      </div>
      <div class="phase-timeline" data-current-phase="{{ task.current_phase or '' }}">
        {% include "partials/phase_pipeline.html" %}
      </div>
    </div>

    <div class="phase-content scrollbar" style="max-height: calc(100vh - 280px); overflow-y: auto;">

      <div class="phase-header-card">
        <div class="phase-header-card-top">
          <span class="phase-tag {{ task.status }}">{{ task.status }}</span>
          <span style="color: var(--text-muted); font-size: 11px;">
            {{ events|length }} events recorded
          </span>
        </div>
        <div class="phase-goal-label">Goal</div>
        <div class="phase-goal">{{ task.goal }}</div>
      </div>

      {% set _stage_map = {"research":"Researcher", "plan":"Implementer", "develop":"Implementer",
                            "review":"Verifier", "test":"Verifier",
                            "push":"Push"} %}
      {% set ns = namespace(current_stage='') %}
      {% for ev in events %}
        {% set p = ev.payload|from_json %}

        {% if ev.type == 'iter' %}
          {% set _stage = 'Updater' if p.agent == 'updater' else _stage_map.get(p.phase, '') %}
          {% if _stage and _stage != ns.current_stage %}
            {% set ns.current_stage = _stage %}
            <div class="stage-header" data-event-seq="{{ ev.seq }}">
              <div class="stage-header-line"></div>
              <span class="stage-header-label">{{ _stage }}</span>
              <div class="stage-header-line"></div>
              <span class="stage-header-detail">
                {% if _stage == 'Researcher' %}web search + synthesis
                {% elif _stage == 'Implementer' %}plan + develop
                {% elif _stage == 'Verifier' %}review + test
                {% elif _stage == 'Push' %}finalize
                {% elif _stage == 'Updater' %}correction
                {% endif %}
              </span>
            </div>
          {% endif %}

        {% elif ev.type == 'tool' %}
          <div class="tool-card" data-event-seq="{{ ev.seq }}">
            <div class="tool-header">
              <span class="tool-name">{{ p.name|default('?') }}</span>
              <span class="tool-args">{{ p.args_preview|default('') }}</span>
              <span class="tool-status call">call</span>
            </div>
          </div>

        {% elif ev.type == 'tool_result' %}
          <div class="tool-card result" data-event-seq="{{ ev.seq }}">
            <div class="tool-header">
              <span class="tool-name">{{ p.name|default('?') }}</span>
              <span class="tool-status {{ 'success' if p.ok else 'fail' }}">
                {{ 'ok' if p.ok else 'fail' }}
              </span>
            </div>
            {% if p.snippet is defined and p.snippet %}
              <div class="tool-content">{{ p.snippet }}</div>
            {% endif %}
          </div>

        {% elif ev.type == 'thinking' %}
          <div class="thinking-block collapsed" data-event-seq="{{ ev.seq }}">
            <div class="thinking-label" onclick="this.closest('.thinking-block').classList.toggle('collapsed')">Thinking</div>
            <div class="thinking-text">{{ p.content|default('') }}</div>
          </div>

        {% elif ev.type == 'output' %}
          <div class="output-block" data-event-seq="{{ ev.seq }}">
            <div class="output-content">{{ p.content|default('') }}</div>
          </div>

        {% elif ev.type == 'verdict' %}
          {% set v = p.verdict|default('') %}
          <div class="verdict-slim {{ 'fail' if 'FAIL' in v else 'pass' }}"
               data-event-seq="{{ ev.seq }}">
            {{ '✗' if 'FAIL' in v else '✔' }} {{ v }}
          </div>

        {% elif ev.type == 'complete' %}
          <div class="verdict-slim pass" data-event-seq="{{ ev.seq }}">✔ Complete</div>
        {% elif ev.type == 'exit' %}
          <div class="exit-code" data-event-seq="{{ ev.seq }}">⏹ exit {{ p.code|default('?') }}</div>

        {% elif ev.type == 'error' %}
          <div class="verdict-slim fail" data-event-seq="{{ ev.seq }}">
            ✗ {{ p.message|default('error') }}
          </div>

        {% elif ev.type == 'usage' %}
          <div class="usage-line" data-event-seq="{{ ev.seq }}">
            <span class="usage-label">Tokens</span>
            <span class="usage-value">{{ p.total|default(0) }}</span>
            <span class="usage-detail">prompt {{ p.prompt_tokens|default(0) }} + completion {{ p.completion_tokens|default(0) }}</span>
          </div>

        {% endif %}
      {% endfor %}

    </div>
  </div>
</div>
{% endblock %}