{% extends 'generic/object.html' %}
{% load helpers %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <div class="card">
      <div class="card-body">
        {% if location_count == 0 %}
          <p class="text-muted">No location associated with this entity.</p>
        {% else %}
          <div class="d-flex align-items-center justify-content-between mb-3">
            <span class="text-muted">{{ location_count }} location{{ location_count|pluralize }} · loading traces…</span>
            <button id="btn-export-csv" class="btn btn-sm btn-outline-secondary" style="display:none;">⬇ CSV</button>
          </div>
          <div style="overflow-x:auto;">
            <table id="trace-table" style="width:100%; border-collapse:collapse; font-size:12px;">
              <thead id="trace-thead"></thead>
              <tbody id="trace-tbody">
                <tr><td colspan="99" style="padding:20px; text-align:center; color:var(--tblr-secondary);">Loading…</td></tr>
              </tbody>
            </table>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if location_count > 0 %}
<script>
(function(){
  const DATA_URL = "{{ data_url }}";

  function esc(s){ return s==null?'':String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }

  fetch(DATA_URL, {headers:{'X-Requested-With':'XMLHttpRequest'}})
    .then(r=>r.json())
    .then(buildTable)
    .catch(e=>{
      document.getElementById('trace-tbody').innerHTML =
        `<tr><td colspan="99" style="padding:20px;color:red;">Error: ${esc(String(e))}</td></tr>`;
    });

  function buildTable(data){
    const allPaths = data.paths || [];
    const rows = [];

    allPaths.forEach(path => {
      const ports = (path.elements||[]).filter(e=>e.kind==='port');
      if(ports.length < 2) return;
      const origin = ports[0];
      const dest   = ports[ports.length-1];
      const middle = ports.slice(1,-1);
      const devSeq = [];
      middle.forEach(p=>{
        if(!devSeq.length || devSeq[devSeq.length-1].device !== p.device) devSeq.push(p);
      });
      rows.push({ origin, dest, _devSeq: devSeq, location: path.location||'' });
    });

    let maxNext = 0;
    rows.forEach(r => maxNext = Math.max(maxNext, r._devSeq.length));

    const thS = 'border:1px solid var(--tblr-border-color);padding:6px 8px;background:var(--tblr-light,#f8f9fa);font-weight:600;white-space:nowrap;cursor:pointer;user-select:none;';
    const colNames = ['Location','Source device','Source port',
      ...Array.from({length:maxNext},(_,i)=>`Step ${i+1}`),
      'Destination device','Destination port'];

    let thead = '<tr>';
    colNames.forEach((name,i)=>{
      thead += `<th style="${thS}" onclick="window._topoSort(${i})">${name} <span id="si-${i}" style="font-size:10px;color:#94a3b8;">⇅</span></th>`;
    });
    thead += '</tr>';
    document.getElementById('trace-thead').innerHTML = thead;

    function deviceLink(p, s){ return p.device_url ? `<a href="${esc(p.device_url)}" style="${s}">${esc(p.device||'')}</a>` : esc(p.device||''); }
    function portLink(p, s)  { return p.url        ? `<a href="${esc(p.url)}"        style="${s}">${esc(p.name||'')}</a>`   : esc(p.name||''); }

    function textOfCell(r, col){
      if(col===0) return r.location||'';
      if(col===1) return r.origin.device||'';
      if(col===2) return r.origin.name||'';
      if(col===colNames.length-1) return r.dest.name||'';
      if(col===colNames.length-2) return r.dest.device||'';
      const step = r._devSeq[col-3];
      return step ? (step.device||step.name||'') : '';
    }

    const cS = 'border:1px solid var(--tblr-border-color);padding:5px 8px;vertical-align:top;';
    const dS = 'border:1px solid var(--tblr-border-color);padding:5px 8px;color:var(--tblr-secondary);vertical-align:top;';

    function renderTbody(){
      let tbody = '';
      const emptyStyle = 'border:1px solid var(--tblr-border-color); padding:5px 8px; background:var(--tblr-bg-surface-secondary,#f1f3f5); color:#c1c7cd; text-align:center;';
      rows.forEach(r=>{
        const missing = maxNext - r._devSeq.length;
        tbody += '<tr>';
        tbody += `<td style="${cS}">${esc(r.location)}</td>`;
        tbody += `<td style="${cS}">${deviceLink(r.origin,'color:var(--tblr-primary);')}</td>`;
        tbody += `<td style="${cS}">${portLink(r.origin,'color:var(--tblr-body-color);')}</td>`;
        r._devSeq.forEach(step=>{
          tbody += `<td style="${cS}">${step.device?`<strong>${deviceLink(step,'color:var(--tblr-body-color);font-weight:700;')}</strong><br>`:''}${portLink(step,'color:var(--tblr-secondary);')}</td>`;
        });
        for(let i=0; i<missing; i++){
          tbody += `<td style="${emptyStyle}">—</td>`;
        }
        tbody += `<td style="${dS}">${deviceLink(r.dest,'color:var(--tblr-secondary);')}</td>`;
        tbody += `<td style="${dS}">${portLink(r.dest,'color:var(--tblr-body-color);')}</td>`;
        tbody += '</tr>';
      });
      document.getElementById('trace-tbody').innerHTML || '<tr><td colspan="99" style="padding:20px;text-align:center;color:var(--tblr-secondary);">No cabled path.</td></tr>';
    }

    let _sortCol=-1, _sortAsc=true;
    window._topoSort = function(col){
      _sortAsc = _sortCol===col ? !_sortAsc : true;
      _sortCol = col;
      colNames.forEach((_,i)=>{ const ic=document.getElementById('si-'+i); if(ic) ic.textContent='⇅'; });
      const ic = document.getElementById('si-'+col); if(ic) ic.textContent = _sortAsc?'▲':'▼';
      // Secondary sort: source device → source port asc; dest device → dest port asc
      const isOriginDevice = (col===1);
      const isDestDevice = (col===colNames.length-2);
      rows.sort((a,b)=>{
        const va=textOfCell(a,col).toLowerCase(), vb=textOfCell(b,col).toLowerCase();
        let cmp = _sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
        if(cmp===0 && isOriginDevice){
          cmp = (a.origin.name||'').toLowerCase().localeCompare((b.origin.name||'').toLowerCase());
        } else if(cmp===0 && isDestDevice){
          cmp = (a.dest.name||'').toLowerCase().localeCompare((b.dest.name||'').toLowerCase());
        }
        return cmp;
      });
      renderTbody();
    };

    renderTbody();

    // Update counter and CSV button
    document.querySelector('.text-muted').textContent =
      `{{ location_count }} location{{ location_count|pluralize }} · ${rows.length} path(s)`;
    const btnCsv = document.getElementById('btn-export-csv');
    btnCsv.style.display = '';
    btnCsv.onclick = ()=>{
      const tbl = document.getElementById('trace-table');
      const trows = Array.from(tbl.querySelectorAll('tr'));
      const csv = trows.map(r=>Array.from(r.querySelectorAll('th,td')).map(c=>'"'+c.innerText.replace(/"/g,'""')+'"').join(',')).join('\n');
      const a = document.createElement('a');
      a.href = 'data:text/csv;charset=utf-8,\uFEFF'+encodeURIComponent(csv);
      a.download = 'cable_traces.csv'; a.click();
    };
  }
})();
</script>
{% endif %}
{% endblock %}