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

{% block title %}{% trans "Biomedical cartography" %}{% endblock %}

{% block content %}
<style>
  .bio-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
  .bio-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .75rem; margin: .4rem 0 .8rem; align-items: center; }
  .bio-legend .edge::before { content: ''; display: inline-block; width: .8rem; height: .3rem; border-radius: 2px; margin-right: .3rem; background: var(--c); vertical-align: 2px; }
  .bio-legend .shape svg { vertical-align: -5px; margin-right: .25rem; }

  .bio-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
  .bio-tile {
    border: 1px solid var(--tblr-border-color); border-radius: .6rem;
    background: var(--tblr-bg-surface); padding: .7rem .85rem;
    border-top: 4px solid var(--tile-c, #9e9e9e);
    text-decoration: none; color: inherit; display: block;
  }
  .bio-tile:hover { box-shadow: 0 1px 8px rgba(0,0,0,.14); color: inherit; }
  .bio-tile .t { font-weight: 600; font-size: .85rem; line-height: 1.2; margin-bottom: .15rem; }
  .bio-tile .s { font-size: .72rem; color: var(--tblr-secondary, var(--tblr-muted)); margin-bottom: .4rem; }
  .bio-tile .badges { display: flex; gap: .35rem; flex-wrap: wrap; }

  .bio-diagram { overflow-x: auto; }

  /* 2 plateaux par ligne, pour des cards plus larges et moins hautes */
  .bio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 620px), 1fr)); gap: .8rem; align-items: start; }
  .bio-card { border: 1px solid var(--tblr-border-color); border-radius: .6rem; background: var(--tblr-bg-surface); border-left: 4px solid var(--card-c, #9e9e9e); }
  .bio-card-header { padding: .6rem .8rem; border-bottom: 1px solid var(--tblr-border-color); display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
  .bio-card-header .t { font-weight: 700; font-size: .88rem; line-height: 1.2; }
  .bio-card-header .t a { color: inherit; text-decoration: none; }
  .bio-card-header .s { font-size: .7rem; color: var(--tblr-secondary, var(--tblr-muted)); margin-top: .1rem; }
  .bio-card-header .s .cat { color: var(--card-c); font-weight: 600; }
  .bio-card-header .metrics { text-align: right; font-size: .7rem; color: var(--tblr-secondary, var(--tblr-muted)); white-space: nowrap; line-height: 1.5; }
  .bio-card-body { padding: .45rem .6rem .6rem; }
  /* équipements sur 2 colonnes ; les en-têtes de rôle occupent la largeur */
  .bio-role-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
  .bio-role-head { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; margin: .45rem 0 .15rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rc); }
  .bio-role-group:first-child .bio-role-head { margin-top: .1rem; }
  @media (max-width: 720px) {
    .bio-role-group { grid-template-columns: 1fr; }
  }
  .bio-role-head .rc { font-weight: 600; color: var(--tblr-secondary, var(--tblr-muted)); }
  .bio-chip { display: flex; align-items: center; gap: .45rem; padding: .16rem .35rem; border-radius: .4rem; text-decoration: none; color: inherit; font-size: .78rem; }
  .bio-chip:hover { background: var(--tblr-active-bg, rgba(98,105,118,.08)); color: inherit; }
  .bio-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .bio-chip .n { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bio-chip .dots { display: flex; gap: 3px; flex: 0 0 auto; }
  .bio-chip .dots i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

  /* Survol vue flux : mise en avant du composant et de ses voisins */
  #bio-flux-svg .bio-edge, #bio-flux-svg .bio-node-g { transition: opacity .15s ease; }
  #bio-flux-svg.focus .bio-edge { opacity: .05; }
  #bio-flux-svg.focus .bio-node-g { opacity: .1; }
  #bio-flux-svg.focus .bio-edge.hl-edge { opacity: 1; }
  #bio-flux-svg.focus .bio-node-g.hl-node { opacity: 1; }
  #bio-flux-svg .bio-node-g.hl-self .bio-node { stroke: #f59e0b !important; stroke-width: 2.2; }
  .bio-node { fill: var(--tblr-bg-surface, #fff); stroke: #94a3b8; }
  .bio-node-label { font-size: 11.5px; font-weight: 600; fill: currentColor; }
  .bio-group-label { font-size: 10.5px; font-weight: 700; fill: #64748b; text-transform: uppercase; letter-spacing: .04em; }
  .bio-edge { opacity: .65; }
  .bio-edge:hover { opacity: 1; stroke-width: 6; }
</style>

<div class="bio-toolbar">
  <div class="me-auto">
    <h1 class="mb-0">{% trans "Biomedical cartography" %}</h1>
    <div class="text-muted">{% trans "Technical platforms, equipment and flows colored by flow type" %}</div>
  </div>
  <div class="btn-group" role="group">
    <a href="?view=flux{% if base_qs %}&{{ base_qs }}{% endif %}"
       class="btn btn-sm {% if mode == 'flux' %}btn-primary{% else %}btn-outline-primary{% endif %}">
      {% trans "Flow view" %}
    </a>
    <a href="?view=plateaux{% if base_qs %}&{{ base_qs }}{% endif %}"
       class="btn btn-sm {% if mode == 'plateaux' %}btn-primary{% else %}btn-outline-primary{% endif %}">
      {% trans "Platform view" %}
    </a>
  </div>
  <form method="get" class="d-flex flex-wrap gap-2 align-items-end">
    <input type="hidden" name="view" value="{{ mode }}">
    <div>
      <label class="form-label mb-1">{% trans "Establishment" %}</label>
      <select name="site_id" class="form-select form-select-sm">
        <option value="">{% trans "All" %}</option>
        {% for site in sites_choices %}
          <option value="{{ site.pk }}" {% if filter_site_id == site.pk|stringformat:'s' %}selected{% endif %}>{{ site.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="form-label mb-1">{% trans "Technical platform" %}</label>
      <select name="plateau_id" class="form-select form-select-sm">
        <option value="">{% trans "All" %}</option>
        {% for plateau in plateaux_choices %}
          <option value="{{ plateau.pk }}" {% if filter_plateau_id == plateau.pk|stringformat:'s' %}selected{% endif %}>{{ plateau.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="form-label mb-1">{% trans "Role" %}</label>
      <select name="role" class="form-select form-select-sm">
        <option value="">{% trans "All" %}</option>
        {% for choice in role_choices %}
          <option value="{{ choice.0 }}" {% if filter_role == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="form-label mb-1">{% trans "Protocol" %}</label>
      <select name="protocol" class="form-select form-select-sm">
        <option value="">{% trans "All" %}</option>
        {% for p in protocols %}
          <option value="{{ p }}" {% if filter_protocol == p %}selected{% endif %}>{{ p }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="form-label mb-1">{% trans "Flow type" %}</label>
      <select name="family" class="form-select form-select-sm">
        <option value="">{% trans "All" %}</option>
        {% for fam in legend_families %}
          <option value="{{ fam.key }}" {% if filter_family == fam.key %}selected{% endif %}>{{ fam.label }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="form-label mb-1">{% trans "Search" %}</label>
      <input type="text" name="q" value="{{ filter_q }}" class="form-control form-control-sm" placeholder="{% trans 'Equipment, message…' %}">
    </div>
    <button type="submit" class="btn btn-sm btn-primary">{% trans "Filter" %}</button>
  </form>
</div>

{% if mode == 'plateaux' %}
<div class="bio-cards mt-2">
  {% for card in cards %}
    <div class="bio-card" style="--card-c: {{ card.color }};">
      <div class="bio-card-header">
        <div>
          <div class="t">
            {% if card.plateau %}
              <a href="{{ card.plateau.get_absolute_url }}">{{ card.plateau.name }}</a>
            {% else %}
              {% trans "No platform" %}
            {% endif %}
          </div>
          <div class="s">
            {% if card.site %}{{ card.site.name }}{% endif %}{% if card.category %} · <span class="cat">{{ card.category }}</span>{% endif %}
          </div>
        </div>
        <div class="metrics">
          <div>{{ card.dm_count }} {% trans "devices" %} · {{ card.count }} {% trans "equip." %}{% if card.shared_count %} ({{ card.shared_count }} {% trans "shared" %}){% endif %}</div>
          <div>{{ card.flow_count }} {% trans "flows" %}</div>
        </div>
      </div>
      <div class="bio-card-body">
        {% for grp in card.groups %}
        <div class="bio-role-group">
          <div class="bio-role-head" style="--rc: {{ grp.color }};">
            <svg width="18" height="14" viewBox="0 0 18 14" xmlns="http://www.w3.org/2000/svg">
              <g transform="translate(9, 7)">
                <path d="{{ grp.icon }}" fill="none" stroke="{{ grp.color }}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </g>
            </svg>
            <span class="rl">{{ grp.label }}</span>
            <span class="rc">{{ grp.count }}</span>
          </div>
          {% for chip in grp.equipments %}
            <a class="bio-chip" href="/plugins/biomed/equipements/{{ chip.pk }}/" title="{{ chip.label }}">
              <span class="dot" style="background: {{ chip.color }};"></span>
              <span class="n">{{ chip.display }}{% if chip.shared %} <span class="badge text-bg-purple" style="font-size:.6rem;">×{{ chip.shared }}</span>{% endif %}</span>
              <span class="dots">
                {% for dot in chip.dots %}<i style="background: {{ dot.color }};" title="{{ dot.label }}"></i>{% endfor %}
              </span>
            </a>
          {% endfor %}
        </div>
        {% endfor %}
      </div>
    </div>
  {% empty %}
    <div class="text-muted">{% trans "No technical platform" %}</div>
  {% endfor %}
</div>
{% else %}
<h2 class="h4">{% trans "Technical platforms" %}</h2>
<div class="bio-tiles">
  {% for tile in tiles %}
    <a class="bio-tile" style="--tile-c: {{ tile.color }};" href="{{ tile.plateau.get_absolute_url }}">
      <div class="t">{{ tile.plateau.name }}</div>
      <div class="s">{{ tile.plateau.site.name }} · {{ tile.plateau.get_category_display }}</div>
      <div class="badges">
        <span class="badge text-bg-blue">{{ tile.equipment_count }} {% trans "equip." %}</span>
        <span class="badge text-bg-green">{{ tile.dm_count }} {% trans "devices" %}</span>
        {% if tile.flow_count %}
          <span class="badge text-bg-purple">{{ tile.flow_count }} {% trans "flows" %}</span>
        {% endif %}
      </div>
    </a>
  {% empty %}
    <div class="text-muted">{% trans "No technical platform" %}</div>
  {% endfor %}
</div>

<h2 class="h4 d-flex justify-content-between align-items-baseline">
  <span>{% trans "Flow map" %}</span>
  <span class="text-muted" style="font-size:.8rem;">{{ flow_count }} {% trans "flows" %}</span>
</h2>
<div class="bio-legend">
  <strong style="font-size:.72rem;">{% trans "Flow types" %} :</strong>
  {% for fam in legend_families %}
    <span class="edge" style="--c:{{ fam.color }};">{{ fam.label }}</span>
  {% endfor %}
</div>
<div class="bio-legend">
  <strong style="font-size:.72rem;">{% trans "Roles" %} :</strong>
  {% for item in legend_roles %}
    <span class="shape">
      <svg width="42" height="20" viewBox="0 0 42 20" xmlns="http://www.w3.org/2000/svg">
        <path d="{{ item.body }}" fill="{{ item.color }}" fill-opacity="0.14" stroke="{{ item.color }}" stroke-width="1.4"></path>
        {% if item.body_inner %}<path d="{{ item.body_inner }}" fill="none" stroke="{{ item.color }}" stroke-width="0.9"></path>{% endif %}
        <g transform="translate(21, 10)">
          <path d="{{ item.icon }}" fill="none" stroke="{{ item.color }}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>{{ item.label }}
    </span>
  {% endfor %}
</div>

{% if svg %}
  <div class="card mb-3">
    <div class="card-body bio-diagram">
      <svg id="bio-flux-svg" viewBox="0 0 {{ svg.width }} {{ svg.height }}" width="{{ svg.width }}" height="{{ svg.height }}" xmlns="http://www.w3.org/2000/svg">
        {% for edge in svg.edges %}
          <path class="bio-edge" data-s="{{ edge.src_pk }}" data-t="{{ edge.dst_pk }}"
                d="M {{ edge.x1 }} {{ edge.y1 }} C {{ edge.cx }} {{ edge.y1 }}, {{ edge.cx }} {{ edge.y2 }}, {{ edge.x2 }} {{ edge.y2 }}"
                stroke="{{ edge.color }}" stroke-width="{{ edge.width }}" fill="none">
            <title>{{ edge.title }}</title>
          </path>
        {% endfor %}
        {% for label in svg.group_labels %}
          <text class="bio-group-label" x="10" y="{{ label.y }}">{{ label.label }}</text>
        {% endfor %}
        {% for node in svg.left_nodes %}
          {% include 'netbox_biomed/inc/carto_node.html' %}
        {% endfor %}
        {% for node in svg.right_nodes %}
          {% include 'netbox_biomed/inc/carto_node.html' %}
        {% endfor %}
      </svg>
    </div>
  </div>
{% else %}
  <div class="alert alert-info">{% trans "No flow matches these criteria." %}</div>
{% endif %}

<script>
  // Survol d'un composant : mise en avant de ses flux et de ses voisins
  (function () {
    var svg = document.getElementById('bio-flux-svg');
    if (!svg) return;
    var nodes = svg.querySelectorAll('.bio-node-g');
    var edges = svg.querySelectorAll('.bio-edge');
    function clear() {
      svg.classList.remove('focus');
      svg.querySelectorAll('.hl-edge, .hl-node, .hl-self').forEach(function (el) {
        el.classList.remove('hl-edge', 'hl-node', 'hl-self');
      });
    }
    nodes.forEach(function (node) {
      node.addEventListener('mouseenter', function () {
        clear();
        var id = node.dataset.eq;
        var linked = {};
        linked[id] = true;
        edges.forEach(function (edge) {
          if (edge.dataset.s === id || edge.dataset.t === id) {
            edge.classList.add('hl-edge');
            linked[edge.dataset.s] = true;
            linked[edge.dataset.t] = true;
          }
        });
        nodes.forEach(function (other) {
          if (linked[other.dataset.eq]) other.classList.add('hl-node');
        });
        node.classList.add('hl-self');
        svg.classList.add('focus');
      });
      node.addEventListener('mouseleave', clear);
    });
  })();
</script>
{% endif %}
{% endblock %}