{% extends 'base/layout.html' %}
{% load helpers %}

{% block title %}Auto-cable two ports{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-6">
    <div class="card">
      <h2 class="card-header">Auto-cable two ports</h2>
      <div class="card-body">
        <form method="post" action="{% url 'plugins:netbox_autocabling:autocable' %}">
          {% csrf_token %}
          {{ form.as_p }}
          <button type="submit" class="btn btn-primary">Compute the plan →</button>
        </form>
      </div>
    </div>
  </div>
</div>

{% if plan %}
<div class="row mt-3">
  <div class="col col-md-8">
    <div class="card">
      <h2 class="card-header">
        Cabling plan
        {% if plan.severity == 'success' %}
          <span class="badge text-bg-green">● {{ plan.status_label }}</span>
        {% elif plan.severity == 'warning' %}
          <span class="badge text-bg-orange">▲ {{ plan.status_label }}</span>
        {% else %}
          <span class="badge text-bg-red">✕ {{ plan.status_label }}</span>
        {% endif %}
      </h2>
      <div class="card-body">
        <p>{{ plan.reason }}</p>

        {% if plan.path_steps %}
          <p class="mb-1"><strong>Path:</strong></p>
          <div class="d-flex flex-wrap align-items-center mb-3" style="gap:.25rem;">
            {% for step in plan.path_steps %}
              <span class="badge bg-gray-200 text-dark border font-monospace px-2 py-1"
                    style="font-size:.85rem;">{{ step.rack }}</span>
              {% if step.link == 'bridge' %}
                <span class="d-inline-flex flex-column align-items-center text-orange" style="line-height:1;">
                  <span style="font-size:.65rem;">bridge</span><span>╌╌▶</span>
                </span>
              {% elif step.link == 'trunk' %}
                <span class="d-inline-flex flex-column align-items-center text-muted" style="line-height:1;">
                  <span style="font-size:.65rem;">trunk</span><span>──▶</span>
                </span>
              {% endif %}
            {% endfor %}
          </div>
        {% elif plan.path_names %}
          <p><strong>Path:</strong> {{ plan.path_names|join:" → " }}</p>
        {% endif %}

        {% if plan.status == 'propose_direct_no_path' %}
          <div class="alert alert-warning">
            No backbone path between these two racks, but they are
            <strong>in the same room</strong>: you can pull a
            <strong>direct cable</strong> between the two ports. Confirm below.
          </div>
        {% endif %}

        {% if plan.bridges %}
          <div class="alert alert-warning">
            This path includes <strong>{{ plan.bridges|length }} direct bridge(s)</strong>
            — a panel-to-panel cable to pull within a single room to connect two
            backbone segments:
            <ul class="mb-1">
              {% for x, y in plan.bridges %}
                <li class="font-monospace">{{ x }} ↔ {{ y }}</li>
              {% endfor %}
            </ul>
            {% if plan.bridge_free_exists %}
              <em>A 100% backbone path (without a bridge) also exists.</em>
            {% else %}
              <em>No 100% backbone path between these racks — the bridge is necessary.</em>
            {% endif %}
          </div>
        {% endif %}

        {% if plan.overflow %}
          <div class="alert alert-warning">
            <strong>Saturation overflow</strong> — a rack's own trunks are full, so this
            plan borrows a <strong>co-located rack</strong>'s capacity via a same-room
            cable to pull (this is different from a satellite rack, which has no trunks):
            <ul class="mb-0">
              {% for own, neighbor in plan.overflow %}
                <li class="font-monospace">{{ own }} → {{ neighbor }}</li>
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {% if plan.status == 'exhausted' and plan.saturated_hops %}
          <div class="alert alert-warning">
            <p class="mb-1"><strong>Saturated path — {{ plan.saturated_hops|length }} bottleneck(s)</strong>
              along the shortest path. You must <strong>add fiber</strong>
              (or pull a bridge) on each:</p>
            <table class="table table-sm mb-2">
              <thead><tr><th>Bottleneck (rack ↔ rack)</th><th>Free</th><th>Total</th><th>To add</th></tr></thead>
              <tbody>
                {% for h in plan.saturated_hops %}
                  <tr>
                    <td class="font-monospace">{{ h.a }} ↔ {{ h.b }}</td>
                    <td>{{ h.free }}</td>
                    <td>{{ h.total }}</td>
                    <td>≥ 1 fiber</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
            {% if site_id %}
              <a href="{% url 'plugins:netbox_autocabling:capacities' %}?site={{ site_id }}"
                 class="btn btn-sm btn-ghost-warning">View capacities per rack →</a>
            {% endif %}
          </div>
        {% endif %}

        {% if plan.status == 'no_path' %}
          <div class="alert alert-danger">
            <p class="mb-1"><strong>Why no cabling&nbsp;?</strong></p>
            {% if plan.off_backbone_a or plan.off_backbone_b %}
              <p class="mb-1">One of the racks has <strong>no backbone panel</strong> for this media
                (neither in its rack nor in its room) — you must first connect it to the backbone,
                or choose two ports located on the backbone.</p>
            {% elif plan.disconnected %}
              <p class="mb-1">The two racks are on <strong>unconnected backbone segments</strong>:
                no trunk connects them. A direct cable is only possible within the same room.</p>
            {% endif %}
            {% if plan.alt_media %}
              <form method="post" action="{% url 'plugins:netbox_autocabling:autocable' %}" class="mt-2">
                {% csrf_token %}
                <input type="hidden" name="device_a" value="{{ form.device_a.value }}">
                <input type="hidden" name="port_type_a" value="{{ form.port_type_a.value }}">
                <input type="hidden" name="port_a" value="{{ form.port_a.value }}">
                <input type="hidden" name="device_b" value="{{ form.device_b.value }}">
                <input type="hidden" name="port_type_b" value="{{ form.port_type_b.value }}">
                <input type="hidden" name="port_b" value="{{ form.port_b.value }}">
                <input type="hidden" name="media" value="{{ plan.alt_media }}">
                A <strong>{{ plan.alt_media }}</strong> path exists however.
                <button type="submit" class="btn btn-sm btn-ghost-danger">Recompute in {{ plan.alt_media }} →</button>
              </form>
            {% endif %}
          </div>
        {% endif %}

        {% if rows %}
          <p class="text-muted mb-1">Cables to create ({{ rows|length }}) — from endpoint A to endpoint B:</p>
          <table class="table table-hover">
            <thead>
              <tr><th>#</th><th>Location</th><th>From</th><th>To</th><th>Cable</th></tr>
            </thead>
            <tbody>
              {% for r in rows %}
                <tr{% if r.bridge %} class="table-warning"{% endif %}>
                  <td>{{ r.n }}</td>
                  <td class="font-monospace">
                    {{ r.rack }}{% if r.bridge %} <span class="badge text-bg-orange">bridge</span>{% endif %}
                  </td>
                  <td class="font-monospace">{{ r.from }}</td>
                  <td class="font-monospace">{{ r.to }}</td>
                  <td>{{ r.cable_type }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}

        {% if result %}
          <div class="alert alert-info">
            Created: {{ result.created|length }} · Reused: {{ result.reused|length }}
            · Conflicts: {{ result.conflicts|length }}
          </div>
        {% endif %}

        {% if plan.ok and not result %}
          <form method="post" action="{% url 'plugins:netbox_autocabling:autocable_execute' %}">
            {% csrf_token %}
            <input type="hidden" name="device_a" value="{{ form.device_a.value }}">
            <input type="hidden" name="port_type_a" value="{{ form.port_type_a.value }}">
            <input type="hidden" name="port_a" value="{{ form.port_a.value }}">
            <input type="hidden" name="device_b" value="{{ form.device_b.value }}">
            <input type="hidden" name="port_type_b" value="{{ form.port_type_b.value }}">
            <input type="hidden" name="port_b" value="{{ form.port_b.value }}">
            <input type="hidden" name="media" value="{{ form.media.value }}">
            {% if plan.status == 'propose_direct_no_path' %}
              <button type="submit" class="btn btn-warning">Create direct cable (I confirm)</button>
            {% elif plan.overflow %}
              <button type="submit" class="btn btn-warning">Create (saturation overflow, same-room cable) — I confirm</button>
            {% elif plan.needs_confirmation %}
              <button type="submit" class="btn btn-warning">Create (includes a direct bridge) — I confirm</button>
            {% else %}
              <button type="submit" class="btn btn-success">✓ Create the cables</button>
            {% endif %}
          </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}