{% extends 'base/layout.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Network Topology" %}{% endblock %}

{% block header %}
  <h1><span class="mdi mdi-graph-outline"></span> {% trans "Network Topology" %}</h1>
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{% static 'netbox_map/css/floorplan.css' %}">
  <link rel="stylesheet" href="{% static 'netbox_map/css/topology.css' %}">
{% endblock %}

{% block content %}
{% csrf_token %}

{# ===== Toolbar ===== #}
<div class="topo-toolbar">
  {# Row 1: Filters only #}
  <form method="get" action="" id="topology-filter-form" class="topo-toolbar-row topo-toolbar-row-filters">
    <div class="topo-toolbar-group topo-toolbar-filters">
      <label class="topo-toolbar-label"><i class="mdi mdi-filter-variant"></i></label>
      <div class="topo-filter-field">{{ filter_form.site_id }}</div>
      <div class="topo-filter-field">{{ filter_form.location_id }}</div>
      <div class="topo-filter-field topo-filter-sm">{{ filter_form.role_id }}</div>
      <div class="topo-filter-field topo-filter-sm">{{ filter_form.cable_type }}</div>
      <div class="topo-filter-field topo-filter-sm">
        {{ filter_form.tag }}
      </div>
      <div class="d-none">{{ filter_form.tenant_id }}{{ filter_form.rack_id }}</div>
      <div class="topo-toggle-group">
        <div class="form-check" title="{% trans 'Include sub-locations (children of selected Location)' %}">
          <input type="checkbox" class="form-check-input" id="id_include_sub_locations"
                 name="include_sub_locations" {% if filter_form.include_sub_locations.value %}checked{% endif %}>
          <label class="form-check-label small text-muted" for="id_include_sub_locations">
            <i class="mdi mdi-file-tree-outline"></i> sub-locations
          </label>
        </div>
        <div class="form-check" title="{% trans 'Include sub-roles (children of selected Role)' %}">
          <input type="checkbox" class="form-check-input" id="id_include_sub_roles"
                 name="include_sub_roles" {% if filter_form.include_sub_roles.value %}checked{% endif %}>
          <label class="form-check-label small text-muted" for="id_include_sub_roles">
            <i class="mdi mdi-account-tree-outline"></i> sub-roles
          </label>
        </div>
      </div>
      <button type="submit" class="topo-btn topo-btn-primary">{% trans "Apply" %}</button>
      {% if active_filters %}
      <a href="?" class="topo-btn topo-btn-danger" title="{% trans 'Clear filters' %}"><i class="mdi mdi-close"></i></a>
      {% endif %}
    </div>
  </form>

  {# Row 2: Actions + stats #}
  <div class="topo-toolbar-row topo-toolbar-row-actions">
    <div class="topo-toolbar-group topo-toolbar-info">
      <span class="topo-stat" id="topology-stats">
        <span id="stat-nodes">0</span> {% trans "devices" %}
        <span class="topo-stat-sep">&middot;</span>
        <span id="stat-edges">0</span> {% trans "cables" %}
      </span>
    </div>

    <div class="topo-toolbar-group topo-toolbar-actions">
      {# Saved views #}
      <div class="dropdown">
        <button class="topo-btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
          <i class="mdi mdi-bookmark-outline"></i>
          {% if saved_view %}{{ saved_view.name }}{% else %}{% trans "Views" %}{% endif %}
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="{% url 'plugins:netbox_map:topology' %}">
            <i class="mdi mdi-plus"></i> {% trans "New View" %}</a></li>
          {% if saved_views %}<li><hr class="dropdown-divider"></li>{% endif %}
          {% for sv in saved_views %}
          <li><a class="dropdown-item{% if saved_view and saved_view.pk == sv.pk %} active{% endif %}"
                 href="?view_id={{ sv.pk }}">{{ sv.name }}</a></li>
          {% endfor %}
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="{% url 'plugins:netbox_map:topologysavedview_list' %}">
            <i class="mdi mdi-cog-outline"></i> {% trans "Manage Views" %}</a></li>
        </ul>
      </div>
      {% if saved_view %}
      <button id="topo-save" class="topo-btn topo-btn-primary" type="button" title="{% trans 'Save Layout' %}">
        <i class="mdi mdi-content-save"></i> {% trans "Save" %}
      </button>
      {% endif %}
      <button id="topo-save-as" class="topo-btn" type="button" title="{% trans 'Save As New View' %}">
        <i class="mdi mdi-content-save-plus-outline"></i>
      </button>

      <span class="topo-toolbar-divider"></span>

      {# Zoom #}
      <div class="topo-btn-group">
        <button id="topo-zoom-out" class="topo-btn" type="button" title="{% trans 'Zoom Out' %}"><i class="mdi mdi-minus"></i></button>
        <button id="topo-zoom-fit" class="topo-btn" type="button" title="{% trans 'Fit to View' %}"><i class="mdi mdi-fit-to-screen-outline"></i></button>
        <button id="topo-zoom-in" class="topo-btn" type="button" title="{% trans 'Zoom In' %}"><i class="mdi mdi-plus"></i></button>
      </div>

      <span class="topo-toolbar-divider"></span>

      {# Topology mode #}
      <div class="topo-btn-group">
        <button id="mode-network" class="topo-btn active" type="button" title="{% trans 'Network Topology' %}"><i class="mdi mdi-lan"></i></button>
        <button id="mode-apps" class="topo-btn" type="button" title="{% trans 'Application Map (Beta)' %}"><i class="mdi mdi-application-outline"></i> <span class="badge bg-warning text-dark" style="font-size:.55rem;vertical-align:top;margin-left:-2px">Beta</span></button>
        <button id="mode-mixed" class="topo-btn" type="button" title="{% trans 'Mixed View (Beta)' %}"><i class="mdi mdi-layers-outline"></i> <span class="badge bg-warning text-dark" style="font-size:.55rem;vertical-align:top;margin-left:-2px">Beta</span></button>
      </div>

      <span class="topo-toolbar-divider"></span>

      {# View mode #}
      <div class="topo-btn-group">
        <button id="view-stencil" class="topo-btn active" type="button" title="{% trans 'Stencil View' %}"><i class="mdi mdi-card-outline"></i></button>
        <button id="view-node" class="topo-btn" type="button" title="{% trans 'Node View' %}"><i class="mdi mdi-circle-outline"></i></button>
      </div>

      {# Add devices #}
      <button id="topo-add-devices" class="topo-btn" type="button" title="{% trans 'Add individual devices to canvas' %}">
        <i class="mdi mdi-plus-box-outline"></i> {% trans "Add" %}
      </button>

      {# Role hierarchy editor #}
      <button id="topo-edit-hierarchy" class="topo-btn" type="button" title="{% trans 'Configure role layer order for auto-layout' %}">
        <i class="mdi mdi-sort-variant"></i>
      </button>

      {# Auto-sort ports #}
      <button id="topo-auto-sort" class="topo-btn active" type="button" title="{% trans 'Auto-sort interfaces to minimize cable crossings (updates on drag)' %}">
        <i class="mdi mdi-sort-ascending"></i>
      </button>

      {# Snap to grid #}
      <button id="topo-snap-grid" class="topo-btn" type="button" title="{% trans 'Snap to grid (or hold Shift while dragging)' %}">
        <i class="mdi mdi-grid"></i>
      </button>

      {# Reset layout #}
      <button id="topo-reset-layout" class="topo-btn" type="button" title="{% trans 'Reset layout — auto-arrange devices by role hierarchy' %}">
        <i class="mdi mdi-refresh"></i>
      </button>

      {# Pass-through collapse #}
      <button id="topo-collapse-pp" class="topo-btn" type="button"
              title="{% trans 'Hide patch panels and show end-to-end connections. Cables through patch panels are shown as dashed lines since they represent traced paths, not real single cables.' %}">
        <i class="mdi mdi-transit-skip"></i>
      </button>

      {# #61 — Hide ports whose remote end isn't in the current filtered view #}
      <button id="topo-hide-unconnected-ports" class="topo-btn" type="button"
              title="{% trans 'Hide ports not connected within current filtered view — collapses device cards to only show ports going to other visible devices.' %}">
        <i class="mdi mdi-ethernet-off"></i>
      </button>

      <span class="topo-toolbar-divider"></span>

      {# Cable color mode #}
      <div class="topo-btn-group">
        <button id="cable-color-physical" class="topo-btn active" type="button" title="{% trans 'Color by cable type' %}"><i class="mdi mdi-palette-outline"></i></button>
        <button id="cable-color-speed" class="topo-btn" type="button" title="{% trans 'Color by interface speed' %}"><i class="mdi mdi-speedometer"></i></button>
      </div>

      {# Cable style toggle #}
      <div class="topo-btn-group">
        <button id="cable-curve" class="topo-btn active" type="button" title="{% trans 'Curved Cables' %}"><i class="mdi mdi-vector-curve"></i></button>
        <button id="cable-ortho" class="topo-btn" type="button" title="{% trans 'Straight Cables' %}"><i class="mdi mdi-vector-polyline"></i></button>
      </div>

      {# Cable labels toggle #}
      <button id="topo-toggle-labels" class="topo-btn" type="button" title="{% trans 'Cable Labels' %}"><i class="mdi mdi-tag-text-outline"></i></button>

      {# PDF Export #}
      <button id="topo-export-pdf" class="topo-btn" type="button" title="{% trans 'Export PDF' %}"><i class="mdi mdi-download"></i></button>
    </div>
  </div>
</div>

{# ===== Main layout: SVG graph + sidebar ===== #}
<div class="topology-layout"
     id="topology-container"
     data-topology-url="{% url 'plugins:netbox_map:topology_data' %}"
     data-device-detail-url="{% url 'plugins:netbox_map:topology_device_detail' device_id=0 %}"
     data-csrf-token="{{ csrf_token }}"
     data-save-url="{% url 'plugins:netbox_map:topology_save_layout' %}"
     data-saved-view-id="{{ saved_view.pk|default:'' }}"
     data-app-data-url="{% url 'plugins:netbox_map:topology_app_data' %}"
     data-app-detail-url="{% url 'plugins:netbox_map:topology_app_detail' app_id=0 %}"
     data-topology-mode="{{ topology_mode }}">
  <div class="topology-graph-area">
    <svg id="topology-svg"></svg>
    <div id="topo-alerts" class="topo-alerts d-none"></div>
    <div id="topology-loading" class="topology-overlay d-none">
      <div class="spinner-border text-primary" role="status"></div>
      <span class="ms-2">{% trans "Loading topology..." %}</span>
    </div>
    <div id="topology-empty" class="topology-overlay">
      <div class="text-center text-muted">
        <i class="mdi mdi-graph-outline" style="font-size:48px;"></i>
        <p class="mt-2">{% trans "Use a filter or click" %} <strong>+ Add</strong> {% trans "to add devices to the canvas." %}</p>
      </div>
    </div>
  </div>

  {# Role hierarchy editor (hidden, slides over sidebar) #}
  <div id="hierarchy-editor" class="device-picker d-none">
    <div class="picker-header">
      <span class="picker-title"><i class="mdi mdi-sort-variant"></i> {% trans "Role Layer Order" %}</span>
      <button id="hierarchy-close" class="picker-close-btn"><i class="mdi mdi-close"></i></button>
    </div>
    <div class="picker-filters" style="border-bottom:none;">
      <p class="small text-muted mb-0">{% trans "Drag roles to reorder. Top = left side of topology (upstream), bottom = right side (downstream). Click Apply to re-layout." %}</p>
    </div>
    <div class="picker-results" id="hierarchy-list" style="padding:4px 0;"></div>
    <div class="picker-footer">
      <button id="hierarchy-reset" class="topo-btn" style="font-size:11px;">{% trans "Auto-detect" %}</button>
      <button id="hierarchy-apply" class="topo-btn topo-btn-primary">{% trans "Apply" %}</button>
    </div>
  </div>

  {# Device picker panel (hidden, slides over sidebar) #}
  <div id="device-picker" class="device-picker d-none">
    <div class="picker-header">
      <span class="picker-title"><i class="mdi mdi-plus-box-outline"></i> {% trans "Add Devices" %}</span>
      <button id="picker-close" class="picker-close-btn"><i class="mdi mdi-close"></i></button>
    </div>
    <div class="picker-filters">
      <div class="picker-search-wrap">
        <i class="mdi mdi-magnify"></i>
        <input type="text" id="picker-search" class="form-control form-control-sm" placeholder="{% trans 'Search by name...' %}">
      </div>
      <div class="picker-filter-row">
        <select id="picker-site" class="form-select form-select-sm">
          <option value="">{% trans "All Sites" %}</option>
        </select>
        <select id="picker-role" class="form-select form-select-sm">
          <option value="">{% trans "All Roles" %}</option>
        </select>
      </div>
    </div>
    <div class="picker-results" id="picker-results">
      <div class="picker-placeholder">{% trans "Search for devices to add" %}</div>
    </div>
    <div class="picker-footer">
      <span id="picker-count" class="picker-count">0 {% trans "added" %}</span>
      <button id="picker-done" class="topo-btn topo-btn-primary">{% trans "Apply" %}</button>
    </div>
  </div>

  <div class="topology-sidebar" id="topology-sidebar">
    <div class="sidebar-panel" id="topo-sidebar-list">
      <div class="topo-sidebar-header">
        <div class="topo-search-wrap">
          <i class="mdi mdi-magnify"></i>
          <input type="text" id="topo-search" class="form-control form-control-sm"
                 placeholder="{% trans 'Search devices...' %}">
        </div>
      </div>
      <div class="topo-role-toggles" id="topo-role-toggles"></div>
      <div class="topo-device-count px-2 py-1">
        <span id="topo-device-count" class="small text-muted"></span>
      </div>
      <div class="topo-device-list" id="topo-device-list"></div>
    </div>

    <div class="sidebar-panel d-none" id="topo-sidebar-detail">
      <div class="topo-detail-header" id="topo-detail-back">
        <i class="mdi mdi-arrow-left"></i>
        <span>{% trans "Back to list" %}</span>
        <span class="topo-detail-esc">Esc</span>
      </div>
      <div class="topo-detail-content" id="topo-detail-content"></div>
    </div>
  </div>
</div>

{{ initial_filters_json|json_script:"topo-initial-filters" }}
{{ saved_view_data|json_script:"topo-saved-layout" }}

{# ===== Footer legend (switches based on topology mode) ===== #}
<div class="topo-footer" id="legend-network">
  <div class="topo-legend">
    <span class="topo-legend-title">{% trans "Speed" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#f39c12;"></span>100M</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#2ecc71;"></span>1G</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#3498db;"></span>10G</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#9b59b6;"></span>25G</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#e74c3c;"></span>40G</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#e91e63;"></span>100G</span>
  </div>
  <div class="topo-legend">
    <span class="topo-legend-title">{% trans "Port" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#ff9800;"></span>{% trans "Front" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#795548;"></span>{% trans "Rear" %}</span>
  </div>
</div>
<div class="topo-footer d-none" id="legend-apps">
  <div class="topo-legend">
    <span class="topo-legend-title">{% trans "Criticality" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#e74c3c;"></span>{% trans "Critical" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#e67e22;"></span>{% trans "High" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#f39c12;"></span>{% trans "Medium" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#3498db;"></span>{% trans "Low" %}</span>
  </div>
  <div class="topo-legend">
    <span class="topo-legend-title">{% trans "Dependency" %}</span>
    <span class="topo-legend-item"><span style="display:inline-block;width:20px;height:2px;background:#e74c3c;vertical-align:middle;margin-right:4px;"></span>{% trans "Hard" %}</span>
    <span class="topo-legend-item"><span style="display:inline-block;width:20px;height:2px;background:#e67e22;vertical-align:middle;margin-right:4px;border-top:2px dashed #e67e22;height:0;"></span>{% trans "Soft" %}</span>
    <span class="topo-legend-item"><span style="display:inline-block;width:20px;height:0;border-top:2px dotted #5a6080;vertical-align:middle;margin-right:4px;"></span>{% trans "Deployed on" %}</span>
  </div>
  <div class="topo-legend">
    <span class="topo-legend-title">{% trans "Simulation" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#e74c3c;"></span>{% trans "Failed" %}</span>
    <span class="topo-legend-item"><span class="legend-dot" style="background:#e67e22;"></span>{% trans "Impacted" %}</span>
  </div>
</div>
{% endblock %}

{% block javascript %}
  <script src="{% static 'netbox_map/js/d3.v7.min.js' %}"></script>
  <script src="{% static 'netbox_map/js/dagre.min.js' %}"></script>
  <script src="{% static 'netbox_map/js/topology_core.js' %}"></script>
  <script src="{% static 'netbox_map/js/topology_renderer.js' %}"></script>
  <script src="{% static 'netbox_map/js/topology_app_renderer.js' %}"></script>
  <script src="{% static 'netbox_map/js/topology_sidebar.js' %}"></script>
  <script src="{% static 'netbox_map/js/topology_detail.js' %}"></script>
  <script src="{% static 'netbox_map/js/topology_main.js' %}"></script>
  <script src="{% static 'netbox_map/js/jspdf.umd.min.js' %}"></script>
  <script src="{% static 'netbox_map/js/topology_pdf.js' %}"></script>
{% endblock %}