{% extends "base.html" %}
{% block title %}Vue réseau{% endblock %}

{% block content %}

<div class="flex items-center justify-between mb-6">
  <h1 class="text-xl font-bold text-gray-900">Vue réseau</h1>
  <div class="flex gap-2">
    <a href="{{ url_for('jobs.index') }}"
       class="text-sm text-gray-500 hover:text-gray-700 px-3 py-1.5 rounded border border-gray-200 bg-white transition">
      Vue locale
    </a>
    <form method="post" action="{{ url_for('network.network_sync_all') }}">
      <button type="submit"
              class="text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded transition">
        Synchroniser tout
      </button>
    </form>
  </div>
</div>

{% macro instance_section(inst_name, inst_url, jobs_data, inst_id=None, inst_status=None, last_seen=None) %}
<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-6">
  <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between gap-4">
    <div class="flex items-center gap-3 min-w-0">
      <h2 class="text-base font-semibold text-gray-800">{{ inst_name }}</h2>
      {% if inst_id %}
        {% set sc = {'online':'bg-green-100 text-green-700','error':'bg-red-100 text-red-700','offline':'bg-gray-100 text-gray-500'} %}
        <span class="text-xs px-2 py-0.5 rounded-full font-medium {{ sc.get(inst_status, 'bg-gray-100 text-gray-400') }}">
          {{ inst_status or 'unknown' }}
        </span>
        {% if last_seen %}
          <span class="text-xs text-gray-400 hidden sm:inline">sync {{ last_seen.strftime('%d/%m %H:%M') }}</span>
        {% endif %}
      {% else %}
        <span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-medium">local</span>
      {% endif %}
      {% if inst_url %}
        <span class="text-xs font-mono text-gray-400 truncate hidden md:inline">{{ inst_url }}</span>
      {% endif %}
    </div>
    {% if inst_id %}
    <div class="flex gap-2 shrink-0">
      <form method="post" action="{{ url_for('network.remote_instance_sync', inst_id=inst_id) }}">
        <button type="submit"
                class="text-xs bg-gray-50 hover:bg-gray-100 text-gray-600 px-3 py-1.5 rounded border border-gray-200 transition">
          Sync
        </button>
      </form>
      <a href="{{ url_for('network.remote_instance_edit', inst_id=inst_id) }}"
         class="text-xs bg-gray-50 hover:bg-gray-100 text-gray-600 px-3 py-1.5 rounded border border-gray-200 transition">
        Éditer
      </a>
    </div>
    {% endif %}
  </div>

  {% if not jobs_data %}
    <div class="px-6 py-8 text-center text-gray-400 text-sm">
      {% if inst_id %}
        Aucune donnée — cliquez sur "Sync" pour récupérer l'état de cette instance.
      {% else %}
        Aucun job configuré.
        <a href="{{ url_for('jobs.job_new') }}" class="text-blue-600 hover:underline ml-1">Créer un job →</a>
      {% endif %}
    </div>
  {% else %}
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="text-xs text-gray-500 uppercase tracking-wide bg-gray-50">
          <th class="px-6 py-3 text-left font-medium">Job</th>
          <th class="px-6 py-3 text-left font-medium">Type</th>
          <th class="px-6 py-3 text-left font-medium">Dernière exéc.</th>
          <th class="px-6 py-3 text-left font-medium">Statut</th>
          <th class="px-6 py-3 text-left font-medium">Taille</th>
          <th class="px-6 py-3 text-right font-medium">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100">
        {% for row in jobs_data %}
        <tr class="hover:bg-gray-50">
          <td class="px-6 py-3 font-medium text-gray-900">{{ row.name }}</td>
          <td class="px-6 py-3">
            <span class="bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded font-mono">{{ row.type }}</span>
          </td>
          <td class="px-6 py-3 text-xs text-gray-500">
            {% if row.last_run_at %}{{ row.last_run_at.strftime('%d/%m/%Y %H:%M') }}
            {% else %}<span class="text-gray-300">Jamais</span>{% endif %}
          </td>
          <td class="px-6 py-3">
            {% if row.last_status == 'success' %}
              <span class="bg-green-100 text-green-700 text-xs font-medium px-2 py-0.5 rounded-full">✓ succès</span>
            {% elif row.last_status == 'error' %}
              <span class="bg-red-100 text-red-700 text-xs font-medium px-2 py-0.5 rounded-full">✗ erreur</span>
            {% elif row.last_status == 'running' %}
              <span class="bg-blue-100 text-blue-700 text-xs font-medium px-2 py-0.5 rounded-full animate-pulse">⟳ en cours</span>
            {% else %}
              <span class="text-gray-300 text-xs">—</span>
            {% endif %}
          </td>
          <td class="px-6 py-3 text-xs text-gray-500">
            {% if row.last_size_human is defined %}{{ row.last_size_human }}
            {% elif row.size_human is defined %}{{ row.size_human }}
            {% else %}—{% endif %}
          </td>
          <td class="px-6 py-3 text-right">
            <div class="flex items-center justify-end gap-2">
              {% if inst_id and row.job_id %}
              <form method="post"
                    action="{{ url_for('network.remote_job_run', inst_id=inst_id, job_id=row.job_id) }}"
                    onsubmit="return confirm('Lancer « {{ row.name }} » sur {{ inst_name }} ?')">
                <button type="submit"
                  class="bg-blue-50 hover:bg-blue-100 text-blue-700 text-xs font-medium px-2.5 py-1 rounded transition">
                  ▶ Lancer
                </button>
              </form>
              {% elif not inst_id and row.job_id %}
              <form method="post"
                    action="{{ url_for('jobs.job_run_now', job_id=row.job_id) }}"
                    onsubmit="return confirm('Lancer « {{ row.name }} » maintenant ?')">
                <button type="submit"
                  class="bg-blue-50 hover:bg-blue-100 text-blue-700 text-xs font-medium px-2.5 py-1 rounded transition">
                  ▶ Lancer
                </button>
              </form>
              {% endif %}
              {% if inst_id and row.job_id %}
              <form method="post"
                    action="{{ url_for('network.archive_pull_latest', inst_id=inst_id, remote_job_id=row.job_id) }}"
                    onsubmit="return confirm('Rapatrier la dernière archive de « {{ row.name }} » depuis {{ inst_name }} ?')">
                <button type="submit"
                  class="text-gray-400 hover:text-gray-700 text-xs px-2 py-1 rounded hover:bg-gray-100 transition">
                  ← Rapatrier
                </button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endmacro %}

{# ── Instance locale ─────────────────────────────────────────────── #}
{{ instance_section(instance_name, instance_url, local_jobs_data) }}

{# ── Instances distantes ──────────────────────────────────────────── #}
{% if not instances %}
  <div class="bg-white rounded-xl border border-gray-200 px-6 py-10 text-center text-gray-400">
    <p>Aucune instance distante enregistrée.</p>
    <a href="{{ url_for('network.remote_instance_new') }}" class="mt-2 inline-block text-blue-600 hover:underline text-sm">
      Ajouter une instance →
    </a>
  </div>
{% else %}
  {% for inst in instances %}
    {{ instance_section(inst.name, inst.url_display, inst.remote_runs,
                        inst_id=inst.id, inst_status=inst.status, last_seen=inst.last_seen) }}
  {% endfor %}
{% endif %}

{% endblock %}