{% extends "base.html" %}
{% import "macros/ui.html" as m %}
{% block title %}{{ ws_name }}{% endblock %}
{% block nav_workspaces %}btn-active{% endblock %}

{% block content %}
{{ m::ws_tabs(ws_name=ws_name, active=ws_active_tab, ws_envs=ws_envs, ws_has_clusters=ws_has_clusters, ws_has_workflows=ws_has_workflows, current_env=current_env) }}

{% if ws %}

{# ── Workspace info header — collapsible single-line summary ─ #}
<details class="mb-5 group">
  <summary class="cursor-pointer list-none">
    <div class="flex items-center gap-2 flex-wrap font-mono text-sm">
      <span class="font-bold text-primary">{{ ws_name }}</span>
      {% if ws_card and ws_card != "" %}
        {% if ws_card.status %}
        <span class="badge badge-outline badge-xs">{{ ws_card.status }}</span>
        {% endif %}
        {% if ws_card.tags %}
          {% for tag in ws_card.tags %}<span class="badge badge-ghost badge-xs">{{ tag }}</span>{% endfor %}
        {% endif %}
        {% if ws_card.features %}
          {% for f in ws_card.features %}<span class="badge badge-primary badge-outline badge-xs">{{ f }}</span>{% endfor %}
        {% endif %}
      {% endif %}
      <svg class="w-3 h-3 text-base-content/30 ml-1 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
      </svg>
    </div>
  </summary>
  {% if ws_card and ws_card != "" %}
  <div class="mt-2 pl-1 space-y-1 font-mono text-xs text-base-content/50">
    {% if ws_card.tagline %}<div>{{ ws_card.tagline }}</div>{% endif %}
    <div class="truncate text-base-content/30">{{ ws.path }}</div>
  </div>
  {% endif %}
</details>

{# ── Aggregate stats ───────────────────────────────────────── #}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
  <div class="stat bg-base-200 rounded-box p-4">
    <div class="stat-title text-xs">Infra envs</div>
    <div class="stat-value text-2xl text-primary">{{ infra_envs | length }}</div>
  </div>
  <div class="stat bg-base-200 rounded-box p-4">
    <div class="stat-title text-xs">Servers</div>
    <div class="stat-value text-2xl">{{ srv_count }}</div>
    <div class="stat-desc text-xs font-mono text-base-content/30">across all envs</div>
  </div>
  <div class="stat bg-base-200 rounded-box p-4">
    <div class="stat-title text-xs">Components</div>
    <div class="stat-value text-2xl">{{ comp_count }}</div>
    <div class="stat-desc text-xs font-mono text-base-content/30">across all envs</div>
  </div>
  <div class="stat bg-base-200 rounded-box p-4">
    <div class="stat-title text-xs">Workflows</div>
    <div class="stat-value text-2xl">{{ wf_count }}</div>
    <div class="stat-desc text-xs font-mono text-base-content/30">across all envs</div>
  </div>
</div>

<div class="space-y-6">
  {% for env in infra_envs %}
  <div class="card bg-base-200 shadow">
    <div class="card-body p-4">
      <div class="flex items-center gap-2 mb-3">
        <svg class="w-4 h-4 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
        </svg>
        <span class="font-mono font-semibold text-sm">{{ env.name }}</span>
        <div class="ml-auto flex items-center gap-1">
          <a href="/ui/workspaces/{{ ws_name }}/servers?env={{ env.name }}"
             class="btn btn-ghost btn-xs gap-1 font-mono text-base-content/50 hover:text-base-content h-6 min-h-0 px-2">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
            </svg>
            <span class="hidden sm:inline text-xs">Servers</span>
          </a>
          <a href="/ui/workspaces/{{ ws_name }}/components?env={{ env.name }}"
             class="btn btn-ghost btn-xs gap-1 font-mono text-base-content/50 hover:text-base-content h-6 min-h-0 px-2">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
            </svg>
            <span class="hidden sm:inline text-xs">Components</span>
          </a>
          <a href="/ui/workspaces/{{ ws_name }}/config?env={{ env.name }}"
             class="btn btn-ghost btn-xs gap-1 font-mono text-base-content/50 hover:text-base-content h-6 min-h-0 px-2">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            <span class="hidden sm:inline text-xs">Settings</span>
          </a>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

        {# ── Servers ── #}
        <div>
          <p class="text-xs text-base-content/40 uppercase tracking-wider mb-2">Servers</p>
          {% if env.servers %}
          <div class="space-y-1">
            {% for srv in env.servers %}
            <div class="flex items-center gap-2">
              {% if srv.state == "completed" %}
              <span class="w-2 h-2 rounded-full bg-success flex-shrink-0"></span>
              {% elif srv.state == "running" %}
              <span class="w-2 h-2 rounded-full bg-warning flex-shrink-0 animate-pulse"></span>
              {% elif srv.state == "failed" %}
              <span class="w-2 h-2 rounded-full bg-error flex-shrink-0"></span>
              {% elif srv.state == "pending" %}
              <span class="w-2 h-2 rounded-full bg-base-content/20 flex-shrink-0"></span>
              {% else %}
              <span class="w-2 h-2 rounded-full bg-base-content/10 flex-shrink-0"></span>
              {% endif %}
              <a href="/ui/workspaces/{{ ws_name }}/servers/{{ srv.name }}"
                 class="font-mono text-xs truncate hover:text-primary hover:underline">{{ srv.name }}</a>
              {% if srv.state %}
              <span class="ml-auto text-xs text-base-content/40 font-mono">{{ srv.state }}</span>
              {% endif %}
            </div>
            {% endfor %}
          </div>
          {% else %}
          <span class="text-xs text-base-content/30">—</span>
          {% endif %}
        </div>

        {# ── Components ── #}
        <div>
          <p class="text-xs text-base-content/40 uppercase tracking-wider mb-2">Components</p>
          {% if env.components %}
          <div class="space-y-1">
            {% for comp in env.components %}
            <div class="flex items-center gap-2">
              {% if comp.state == "completed" %}
              <span class="w-2 h-2 rounded-full bg-success flex-shrink-0"></span>
              {% elif comp.state == "running" %}
              <span class="w-2 h-2 rounded-full bg-warning flex-shrink-0 animate-pulse"></span>
              {% elif comp.state == "failed" %}
              <span class="w-2 h-2 rounded-full bg-error flex-shrink-0"></span>
              {% elif comp.state == "pending" %}
              <span class="w-2 h-2 rounded-full bg-base-content/20 flex-shrink-0"></span>
              {% else %}
              <span class="w-2 h-2 rounded-full bg-base-content/10 flex-shrink-0"></span>
              {% endif %}
              <a href="/ui/workspaces/{{ ws_name }}/components?env={{ env.name }}"
                 class="font-mono text-xs hover:text-primary truncate">{{ comp.name }}</a>
              {% if comp.state %}
              <span class="ml-auto text-xs text-base-content/40 font-mono">{{ comp.state }}</span>
              {% endif %}
            </div>
            {% endfor %}
          </div>
          {% else %}
          <span class="text-xs text-base-content/30">—</span>
          {% endif %}
        </div>

        {# ── Workflows ── #}
        <div>
          <p class="text-xs text-base-content/40 uppercase tracking-wider mb-2">Workflows</p>
          {% if env.workflows %}
          <div class="flex flex-col gap-1">
            {% for wf in env.workflows %}
            <span class="badge badge-primary badge-outline badge-xs font-mono w-fit">{{ wf }}</span>
            {% endfor %}
          </div>
          {% else %}
          <span class="text-xs text-base-content/30">—</span>
          {% endif %}
        </div>

      </div>
    </div>
  </div>
  {% else %}
  <div class="alert">
    <span class="text-sm">No infra environments found.</span>
  </div>
  {% endfor %}
</div>

{% else %}
<div class="alert alert-warning">
  <span>Workspace <code class="font-mono">{{ ws_name }}</code> not found.</span>
</div>
{% endif %}

<div class="mt-6 flex gap-2">
  <a href="/ui/workspaces/{{ ws_name }}/servers"    class="btn btn-sm btn-outline">Servers →</a>
  <a href="/ui/workspaces/{{ ws_name }}/components" class="btn btn-sm btn-outline">Components →</a>
  <a href="/ui/workspaces/{{ ws_name }}/dag"        class="btn btn-sm btn-outline">DAG →</a>
  <a href="/ui/workspaces/{{ ws_name }}/clusters"   class="btn btn-sm btn-outline">Clusters →</a>
</div>
{% endblock %}