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

{% block content %}
<div class="row">
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">Group</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Name</th>
            <td>{{ object.name }}</td>
          </tr>
          <tr>
            <th scope="row">Owner</th>
            <td>
              {% if object.owner %}
                <a href="{{ object.owner.get_absolute_url }}">{{ object.owner }}</a>
              {% else %}
                <span class="text-muted">&mdash;</span>
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Application</th>
            <td>
              {% if object.application %}
                <a href="{{ object.application.get_absolute_url }}">{{ object.application }}</a>
              {% else %}
                <span class="text-muted">&mdash;</span>
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Member of</th>
            <td>
              {% if parent_groups %}
                {% for pg in parent_groups %}
                  <a href="{{ pg.get_absolute_url }}">{{ pg.name }}</a>{% if not forloop.last %}, {% endif %}
                {% endfor %}
              {% else %}
                <span class="text-muted">&mdash;</span>
              {% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Description</th>
            <td>{{ object.description|default:"&mdash;" }}</td>
          </tr>
        </table>
      </div>
    </div>

    {% include 'inc/panels/custom_fields.html' with obj=object %}

    {# ── Sync Diff panel ─────────────────────────────────────────────────── #}
    <div class="card mt-3" id="sync-diff-card" style="display:none;">
      <h5 class="card-header d-flex justify-content-between align-items-center">
        <span><i class="mdi mdi-swap-horizontal me-1"></i> Sync Diff</span>
        <span id="sync-diff-badge"></span>
      </h5>
      <div class="card-body p-0">
        <div id="sync-diff-container"></div>
      </div>
    </div>

    <style>
      .diff-category-header {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6c757d;
        padding: 0.5rem 1rem 0.25rem;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
      }
      .diff-category-header:first-child { border-top: none; }
      .diff-row {
        display: flex;
        border-bottom: 1px solid #f0f0f0;
      }
      .diff-row:last-child { border-bottom: none; }
      .diff-cell {
        flex: 1;
        padding: 0.35rem 1rem;
        font-family: monospace;
        font-size: 0.85rem;
        word-break: break-all;
        min-width: 0;
      }
      .diff-cell + .diff-cell { border-left: 1px solid #dee2e6; }
      .diff-cell-nb    { background: #fff8f8; color: #c0392b; }
      .diff-cell-ext   { background: #fffdf0; color: #856404; }
      .diff-cell-empty { background: #fafafa; }
      .diff-col-header {
        display: flex;
        border-bottom: 1px solid #dee2e6;
        font-size: 0.78rem;
        font-weight: 600;
        background: #fff;
      }
      .diff-col-header-cell {
        flex: 1;
        padding: 0.4rem 1rem;
        color: #495057;
      }
      .diff-col-header-cell + .diff-col-header-cell { border-left: 1px solid #dee2e6; }
      .diff-summary {
        display: flex;
        gap: 1.25rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #dee2e6;
        background: #fdfdfd;
        flex-wrap: wrap;
      }
      .diff-summary-item { font-size: 0.82rem; color: #495057; }
      .diff-summary-count { font-weight: 700; font-size: 1rem; }
    </style>

    <script>
    (function () {
      const rawJson = "{{ object.custom_field_data.appviz_diff|default:''|escapejs }}";
      const card      = document.getElementById('sync-diff-card');
      const badge     = document.getElementById('sync-diff-badge');
      const container = document.getElementById('sync-diff-container');

      if (!rawJson) return;

      card.style.display = '';

      let raw = null;
      try { raw = JSON.parse(rawJson); } catch (e) { /* fall through */ }

      if (!raw || raw.error) {
        badge.innerHTML = '<span class="badge bg-warning text-dark">Error</span>';
        container.innerHTML =
          `<div class="p-3 text-danger">` +
          `<i class="mdi mdi-alert-circle me-1"></i>${esc(raw?.error || 'Could not parse diff data.')}</div>`;
        return;
      }

      if (Object.keys(raw).length === 0) {
        badge.innerHTML = '<span class="badge bg-success">In Sync</span>';
        container.innerHTML =
          '<div class="p-3 text-success">' +
          '<i class="mdi mdi-check-circle me-1"></i>No differences found.</div>';
        return;
      }

      badge.innerHTML = '<span class="badge bg-danger">Out of Sync</span>';

      const LABELS = {
        prefixes:      { label: 'Prefixes',      icon: 'mdi-ip-network'       },
        ip_addresses:  { label: 'IP Addresses',  icon: 'mdi-ip'               },
        ip_ranges:     { label: 'IP Ranges',      icon: 'mdi-arrow-left-right' },
        member_groups: { label: 'Member Groups',  icon: 'mdi-group'            },
      };

      let totalNb = 0, totalExt = 0;
      for (const changes of Object.values(raw)) {
        totalNb  += (changes.only_in_netbox   || []).length;
        totalExt += (changes.only_in_external || []).length;
      }

      let html = `
        <div class="diff-summary">
          <div class="diff-summary-item">
            <span class="diff-summary-count text-danger">${totalNb}</span>
            <span class="ms-1">only in <strong>NetBox</strong></span>
          </div>
          <div class="diff-summary-item">
            <span class="diff-summary-count text-warning">${totalExt}</span>
            <span class="ms-1">only in <strong>External</strong></span>
          </div>
        </div>
        <div class="diff-col-header">
          <div class="diff-col-header-cell">
            <i class="mdi mdi-database text-primary me-1"></i>Only in NetBox
          </div>
          <div class="diff-col-header-cell">
            <i class="mdi mdi-cloud text-info me-1"></i>Only in External
          </div>
        </div>`;

      for (const [key, changes] of Object.entries(raw)) {
        const meta    = LABELS[key] || { label: key, icon: 'mdi-tag' };
        const nbOnly  = changes.only_in_netbox   || [];
        const extOnly = changes.only_in_external || [];
        const maxRows = Math.max(nbOnly.length, extOnly.length);

        html += `
          <div class="diff-category-header">
            <i class="mdi ${meta.icon} me-1"></i>${esc(meta.label)}
            <span class="ms-2 text-danger">&minus;${nbOnly.length}</span>
            <span class="ms-1 text-warning">+${extOnly.length}</span>
          </div>`;

        for (let i = 0; i < maxRows; i++) {
          const nbVal  = nbOnly[i]  ? `<span class="diff-cell diff-cell-nb">${esc(nbOnly[i])}</span>`   : `<span class="diff-cell diff-cell-empty"></span>`;
          const extVal = extOnly[i] ? `<span class="diff-cell diff-cell-ext">${esc(extOnly[i])}</span>` : `<span class="diff-cell diff-cell-empty"></span>`;
          html += `<div class="diff-row">${nbVal}${extVal}</div>`;
        }
      }

      container.innerHTML = html;

      function esc(s) {
        return String(s)
          .replace(/&/g,'&amp;').replace(/</g,'&lt;')
          .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
      }
    })();
    </script>
    {# ── end Sync Diff panel ─────────────────────────────────────────────── #}

  </div>
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">External System</h5>
      <div class="card-body">
        <p class="text-muted mb-3">
          Use <strong>Check Contents</strong> to compare this group with the
          external system, or <strong>Sync to AppViz</strong> to push the
          current contents to it.
        </p>
        <div class="d-flex gap-2">

          {# Check Contents: disabled server-side when no AppViz object ID is set #}
          <span
                  {% if not object.custom_field_data.appviz_object_id %}
                  title="No AppViz object ID is set on this group"
                  style="cursor: not-allowed;"
                  {% endif %}
          >
            <button
                    id="check-btn"
                    class="btn btn-secondary"
                    onclick="runScript('check')"
                    {% if not object.custom_field_data.appviz_object_id %}
                    disabled
                    style="pointer-events: none;"
                    {% endif %}
            >
              <i class="mdi mdi-sync-alert"></i> Check Contents
            </button>
          </span>

          <button
            id="sync-btn"
            class="btn btn-primary"
            onclick="confirmSync()"
            disabled
            title="Run 'Check Contents' first to enable syncing"
            data-sync-status="{% if object.custom_field_data.appviz_sync == True %}true{% elif object.custom_field_data.appviz_sync == False %}false{% else %}none{% endif %}"
          >
            <i class="mdi mdi-cloud-upload"></i> Sync to AppViz
          </button>
        </div>

        {# Single container — content is fully replaced by JS, no show/hide siblings #}
        <div id="script-status" class="mt-3" style="display:none;"></div>

      </div>
    </div>
  </div>
</div>

{% if member_groups %}
<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">Member groups</h5>
      <div class="card-body">
        <table class="table table-hover">
          <thead>
            <tr><th>Name</th><th>Owner</th><th>Application</th><th>Description</th></tr>
          </thead>
          <tbody>
            {% for group in member_groups %}
              <tr>
                <td><a href="{{ group.get_absolute_url }}">{{ group.name }}</a></td>
                <td>
                  {% if group.owner %}
                    <a href="{{ group.owner.get_absolute_url }}">{{ group.owner }}</a>
                  {% else %}
                    <span class="text-muted">&mdash;</span>
                  {% endif %}
                </td>
                <td>
                  {% if group.application %}
                    <a href="{{ group.application.get_absolute_url }}">{{ group.application }}</a>
                  {% else %}
                    <span class="text-muted">&mdash;</span>
                  {% endif %}
                </td>
                <td>{{ group.description|default:"&mdash;" }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endif %}

<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">Prefixes</h5>
      <div class="card-body">
        <table class="table table-hover">
          <thead><tr><th>Prefix</th><th>Site</th><th>Description</th></tr></thead>
          <tbody>
            {% for prefix in prefixes %}
              <tr>
                <td><a href="{{ prefix.get_absolute_url }}">{{ prefix }}</a></td>
                <td>
                  {% if prefix.scope %}
                    <a href="{{ prefix.scope.get_absolute_url }}">{{ prefix.scope }}</a>
                  {% else %}
                    <span class="text-muted">&mdash;</span>
                  {% endif %}
                </td>
                <td>{{ prefix.description|default:"&mdash;" }}</td>
              </tr>
            {% empty %}
              <tr><td colspan="3" class="text-muted">No prefixes assigned.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">IP Addresses</h5>
      <div class="card-body">
        <table class="table table-hover">
          <thead><tr><th>Address</th><th>Description</th></tr></thead>
          <tbody>
            {% for ip in ip_addresses %}
              <tr>
                <td><a href="{{ ip.get_absolute_url }}">{{ ip }}</a></td>
                <td>{{ ip.description|default:"&mdash;" }}</td>
              </tr>
            {% empty %}
              <tr><td colspan="2" class="text-muted">No IP addresses assigned.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">IP Ranges</h5>
      <div class="card-body">
        <table class="table table-hover">
          <thead><tr><th>Range</th><th>Description</th></tr></thead>
          <tbody>
            {% for range in ip_ranges %}
              <tr>
                <td><a href="{{ range.get_absolute_url }}">{{ range }}</a></td>
                <td>{{ range.description|default:"&mdash;" }}</td>
              </tr>
            {% empty %}
              <tr><td colspan="2" class="text-muted">No IP ranges assigned.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<input type="hidden" id="csrf-token" value="{{ csrf_token }}">
<script>
const GROUP_ID   = {{ object.pk }};
const CSRF_TOKEN = document.getElementById('csrf-token').value;

// ── Sync button state on page load ────────────────────────────────────────────
(function () {
  const syncBtn = document.getElementById('sync-btn');
  const status  = syncBtn.getAttribute('data-sync-status');
  if (status !== 'true') {
    syncBtn.disabled = false;
    syncBtn.removeAttribute('title');
  }
})();

// ── Script config ─────────────────────────────────────────────────────────────
const SCRIPTS = {
  check: {
    id:      {{ check_script_id|default:'null' }},
    message: 'Checking group contents against external system\u2026',
    btnId:   'check-btn',
    reload:  true,
  },
  sync: {
    id:      {{ sync_script_id|default:'null' }},
    message: 'Pushing group contents to external system\u2026',
    btnId:   'sync-btn',
    reload:  true,
  },
};

// ── Helpers ───────────────────────────────────────────────────────────────────
function escapeHtml(s) {
  return String(s)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;')
    .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function getCookie(name) {
  const m = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  return m ? decodeURIComponent(m[2]) : '';
}

function showSpinner(message) {
  const el = document.getElementById('script-status');
  el.style.display = 'block';
  el.innerHTML = `
    <div class="d-flex align-items-center gap-2 text-muted">
      <div class="spinner-border spinner-border-sm" role="status"></div>
      <span>${escapeHtml(message)}</span>
    </div>`;
}

function showResult(job) {
  const statusVal  = job.status?.value;
  const isSuccess  = statusVal === 'completed';
  const isError    = statusVal === 'failed' || statusVal === 'errored';
  const alertClass = isSuccess ? 'alert-success' : isError ? 'alert-danger' : 'alert-warning';
  const icon       = isSuccess ? 'mdi-check-circle' : isError ? 'mdi-alert-circle' : 'mdi-information';
  const output     = (job.data?.output || '').trim();

  const el = document.getElementById('script-status');
  el.style.display = 'block';
  el.innerHTML = `
    <div class="alert ${alertClass} mb-0">
      <div class="d-flex align-items-start gap-2">
        <i class="mdi ${icon} mt-1"></i>
        <div>
          <strong>${escapeHtml(job.status?.label || statusVal || 'Unknown')}</strong>
          ${output ? `<pre class="mb-0 mt-1" style="font-size:0.85em;white-space:pre-wrap;">${escapeHtml(output)}</pre>` : ''}
        </div>
      </div>
    </div>`;
}

function showError(message) {
  const el = document.getElementById('script-status');
  el.style.display = 'block';
  el.innerHTML = `
    <div class="alert alert-danger mb-0">
      <i class="mdi mdi-alert-circle me-1"></i>${escapeHtml(message)}
    </div>`;
}

function confirmSync() {
  if (confirm(
    `Are you sure you want to sync this group to AppViz?\n\nThis will push the current NetBox contents to the external system and cannot be undone.`
  )) {
    runScript('sync');
  }
}

// ── Script runner ─────────────────────────────────────────────────────────────
async function runScript(action) {
  const cfg = SCRIPTS[action];
  if (cfg.id === null) {
    alert('This script is not yet configured.');
    return;
  }

  const btn      = document.getElementById(cfg.btnId);
  const otherBtn = document.getElementById(action === 'check' ? 'sync-btn' : 'check-btn');

  btn.disabled      = true;
  otherBtn.disabled = true;

  try {
    showSpinner(cfg.message);

    const submitResp = await fetch(
      `/api/extras/scripts/${cfg.id}/`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': CSRF_TOKEN,
        },
        body: JSON.stringify({ data: { group: GROUP_ID }, commit: true }),
      }
    );

    if (!submitResp.ok) {
      const err = await submitResp.json();
      throw new Error(err.detail || JSON.stringify(err));
    }

    const submitted = await submitResp.json();
    const rawJobUrl = submitted.result?.url;
    if (!rawJobUrl) throw new Error('No job URL returned from script submission.');
    const jobUrl = new URL(rawJobUrl).pathname;

    showSpinner('Waiting for job to complete\u2026');

    const job = await pollJob(jobUrl);
    showResult(job);

    if (job.status?.value === 'completed' && cfg.reload) {
      setTimeout(() => window.location.reload(), 5000);
    }

  } catch (err) {
    showError(err.message);
  } finally {
    btn.disabled      = false;
    otherBtn.disabled = false;
  }
}

// ── Job poller ────────────────────────────────────────────────────────────────
async function pollJob(url, interval = 1500, maxAttempts = 60) {
  for (let i = 0; i < maxAttempts; i++) {
    await new Promise(r => setTimeout(r, interval));
    const resp = await fetch(url, {
      headers: { 'X-CSRFToken': getCookie('csrftoken') },
    });
    if (!resp.ok) throw new Error(`Poll failed: HTTP ${resp.status}`);
    const job = await resp.json();
    const s = job.status?.value || job.status;
    if (['completed', 'failed', 'errored'].includes(s)) return job;
  }
  throw new Error('Job timed out after polling.');
}
</script>
{% endblock %}