{% extends "admin/change_form.html" %}
{% load i18n %}

{% block object-tools-items %}

  {% if json_view_url_name and object_id %}
    <li>
      <button
        type="button"
        id="json-view-btn"
        class="button"
        style="
          background: #2a7ae4;
          color: #fff;
          border: none;
          padding: 6px 14px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 13px;
          font-weight: 500;
          display: inline-flex;
          align-items: center;
          gap: 6px;
        "
      >
        <span style="font-family: monospace; font-size: 15px;">{}</span>
        {% trans "View as JSON" %}
      </button>
    </li>
  {% endif %}

  {{ block.super }}

{% endblock %}


{% block footer %}
  {{ block.super }}

  {% if json_view_url_name and object_id %}

  <!-- Modal overlay -->
  <div
    id="json-view-modal"
    style="
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 9999;
      align-items: center;
      justify-content: center;
    "
  >
    <!-- Modal box -->
    <div style="
      background: #1e1e1e;
      color: #d4d4d4;
      border-radius: 8px;
      width: 90%;
      max-width: 760px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      overflow: hidden;
    ">

      <!-- Header -->
      <div style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid #333;
        flex-shrink: 0;
      ">
        <span style="font-family: monospace; font-size: 14px; color: #9cdcfe;">
          {{ opts.app_label }}.{{ opts.model_name }} #{{ object_id }}
        </span>
        <div style="display:flex; gap: 10px; align-items: center;">
          <button
            id="json-copy-btn"
            style="
              background: #3a3a3a;
              color: #ccc;
              border: 1px solid #555;
              border-radius: 4px;
              padding: 4px 12px;
              cursor: pointer;
              font-size: 12px;
            "
          >
            {% trans "Copy" %}
          </button>
          <button
            id="json-close-btn"
            style="
              background: transparent;
              border: none;
              color: #888;
              font-size: 20px;
              cursor: pointer;
              line-height: 1;
            "
          >&#x2715;</button>
        </div>
      </div>

      <!-- Body -->
      <div style="overflow-y: auto; padding: 20px; flex: 1;">
        <div id="json-loading" style="color: #888; font-family: monospace; font-size: 13px;">
          {% trans "Loading..." %}
        </div>
        <pre
          id="json-content"
          style="
            margin: 0;
            font-family: 'Fira Code', 'Cascadia Code', monospace;
            font-size: 13px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-all;
            display: none;
          "
        ></pre>
        <div
          id="json-error"
          style="color: #f48771; font-family: monospace; font-size: 13px; display: none;"
        ></div>
      </div>

    </div>
  </div>

  <script>
  (function () {
    const btn      = document.getElementById('json-view-btn');
    const modal    = document.getElementById('json-view-modal');
    const closeBtn = document.getElementById('json-close-btn');
    const copyBtn  = document.getElementById('json-copy-btn');
    const content  = document.getElementById('json-content');
    const loading  = document.getElementById('json-loading');
    const errorDiv = document.getElementById('json-error');

    const jsonUrl = "{% url 'admin:'|add:json_view_url_name object_id %}";

    let fetched = false;

    function openModal() {
      modal.style.display = 'flex';
      document.body.style.overflow = 'hidden';

      if (!fetched) {
        fetch(jsonUrl)
          .then(function (res) {
            if (!res.ok) throw new Error('HTTP ' + res.status);
            return res.json();
          })
          .then(function (data) {
            fetched = true;
            loading.style.display  = 'none';
            content.style.display  = 'block';
            content.textContent = JSON.stringify(data, null, 2);
            colorizeJson(content);
          })
          .catch(function (err) {
            loading.style.display  = 'none';
            errorDiv.style.display = 'block';
            errorDiv.textContent   = 'Error: ' + err.message;
          });
      }
    }

    function closeModal() {
      modal.style.display = 'none';
      document.body.style.overflow = '';
    }

    btn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);

    // Close on overlay click
    modal.addEventListener('click', function (e) {
      if (e.target === modal) closeModal();
    });

    // Close on Escape
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') closeModal();
    });

    // Copy to clipboard
    copyBtn.addEventListener('click', function () {
      if (!content.textContent) return;
      navigator.clipboard.writeText(content.textContent).then(function () {
        copyBtn.textContent = '{% trans "Copied!" %}';
        setTimeout(function () {
          copyBtn.textContent = '{% trans "Copy" %}';
        }, 2000);
      });
    });

    // Simple JSON syntax highlighting
    function colorizeJson(el) {
      const text = el.textContent;
      el.innerHTML = text.replace(
        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function (match) {
          let cls = 'color:#b5cea8';              // number
          if (/^"/.test(match)) {
            cls = /:$/.test(match)
              ? 'color:#9cdcfe'                   // key
              : 'color:#ce9178';                  // string
          } else if (/true|false/.test(match)) {
            cls = 'color:#569cd6';                // boolean
          } else if (/null/.test(match)) {
            cls = 'color:#808080';                // null
          }
          return '<span style="' + cls + '">' + match + '</span>';
        }
      );
    }
  })();
  </script>

  {% endif %}
{% endblock %}