{% extends "base.html" %}

{% block title %}Flow — Team Architecture{% endblock %}
{# ── Macro definitions (must precede use) ──────────────────────────────── #}
{% macro tier_for_status(status) -%}
  {%- if status == "running" %}tier-running
  {%- elif status == "waiting" %}tier-waiting
  {%- elif status == "error" %}tier-error
  {%- elif status == "idle" %}tier-idle
  {%- elif status == "stopped" %}tier-stopped
  {%- else %}tier-unknown
  {%- endif -%}
{%- endmacro %}

{% macro flow_node(node, depth) %}
  {% set has_children = node.children|length > 0 %}
  {% set is_collapsed = depth > 2 %}
  <div class="flow-node-wrapper" style="margin-left: {{ depth * 24 }}px;">
    {% if has_children %}
    <button class="flow-branch-toggle{{ ' flow-branch-collapsed' if is_collapsed else '' }}"
      onclick="this.nextElementSibling.classList.toggle('flow-children-hidden'); this.textContent = this.textContent === '▾' ? '▸' : '▾';"
      title="Toggle children"
    >▾</button>
    {% else %}
    <span class="flow-leaf-marker">└</span>
    {% endif %}
    <a class="flow-node" href="/ui/sessions/{{ node.id }}">
      <span class="flow-node-icon">{{ node.tool_icon }}</span>
      <span class="flow-node-name">{{ node.name }}</span>
      <span class="card-status-badge {{ tier_for_status(node.status) }}">{{ node.status }}</span>
      {% if node.parent_id %}<span class="flow-parent-tag">↳ {{ node.parent_id[:8] }}</span>{% endif %}
    </a>
  </div>
  {% if has_children %}
  <div class="flow-children{{ ' flow-children-hidden' if is_collapsed else '' }}">
    {% for child in node.children %}
      {{ flow_node(child, depth + 1) }}
    {% endfor %}
  </div>
  {% endif %}
{% endmacro %}

{# ── Page content ─────────────────────────────────────────────────────── #}
{% block content %}
<div class="page-header">
  <span class="page-title-icon">◈</span>
  <h1 class="page-title">Team Architecture</h1>
  <span class="header-badge">{{ nodes|length }} sessions</span>
</div>

<p class="flow-intro">
  Parent-child relationships between sessions, showing supervisor-worker
  topologies. Click any session to view its detail.
</p>

{% if nodes %}
<div class="flow-tree">
  {# Root nodes (sessions with no parent) rendered as top-level tree entries #}
  {% for root in roots %}
    {{ flow_node(root, 0) }}
  {% endfor %}

  {# Orphan nodes — root nodes that have no children and no parent context #}
  {% for node in nodes %}
    {% if not node.parent_id and node.children|length == 0 and node not in roots %}
      <div class="flow-orphan">
        <div class="flow-node-wrapper">
          <span class="flow-leaf-marker">└</span>
          <a class="flow-node" href="/ui/sessions/{{ node.id }}">
            <span class="flow-node-icon">{{ node.tool_icon }}</span>
            <span class="flow-node-name">{{ node.name }}</span>
            <span class="card-status-badge {{ tier_for_status(node.status) }}">{{ node.status }}</span>
          </a>
        </div>
      </div>
    {% endif %}
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <div class="empty-icon">◈</div>
  <p>No sessions found.</p>
</div>
{% endif %}

<style>
.flow-intro {
  color: var(--color-text-muted);
  margin-bottom: 20px;
  font-size: 13px;
}
.header-badge {
  background: var(--color-surface-2);
  color: var(--color-text-dim);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--color-border);
}
.flow-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.flow-node-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}
.flow-branch-toggle,
.flow-leaf-marker {
  color: var(--color-text-dim);
  font-size: 12px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
}
.flow-leaf-marker { cursor: default; }
.flow-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex: 1;
  transition: border-color 0.15s;
  text-decoration: none;
  color: var(--color-text);
}
.flow-node:hover {
  border-color: var(--shoal-deep);
}
.flow-node-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.flow-node-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}
.flow-parent-tag {
  font-size: 10px;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
}
.flow-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.flow-children-hidden { display: none; }
.flow-orphan {
  padding: 2px 0;
}
.empty-state {
  text-align: center;
  padding: 60px;
  color: var(--color-text-dim);
}
.empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
}
</style>
{% endblock %}