/***** Popup JS for Chrome Extension: Tracking Proxy Helper *****/

//function test(o){
//  chrome.runtime.sendMessage({ type: 'REQUEST_POPUP_DATA2',details:typeof o=='object'?JSON.parse(JSON.stringify(o)):null,test:123 });
//}

function syntaxHighlight(json) {
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(/("(\\u[\dA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    let cls = 'number';
    if (/^"/.test(match)) {
      if (/:$/.test(match)) {
        cls = 'key'; // Anwenden der CSS-Klasse 'key' auf JSON Schlüssel
      } else {
        cls = 'string';
      }
    } else if (/true|false/.test(match)) {
      cls = 'boolean';
    } else if (/null/.test(match)) {
      cls = 'null';
    }
    return '<span class="' + cls + '">' + match + '</span>';
  });
}

// Initialize popup with Tracking Proxy Events
document.addEventListener('DOMContentLoaded', function() {
  const tpIdElement = document.getElementById('tp-id');
  const sessIdElement = document.getElementById('tp-sess-id');
  const channelsElement = document.getElementById('channels');
  const eventsElement = document.getElementById('events');

  chrome.runtime.sendMessage({ type: 'REQUEST_POPUP_DATA' }, function(response) {
    //test(response);
    if (typeof response=='object') {
      // TP Account ID
      const tpId = response.tpId || 'Not Available';
      tpIdElement.textContent = tpId;
      // TP Session ID
      const sessId = response.sessId || 'Not Available';
      sessIdElement.textContent = sessId;
      // Channels
      const channels = response.channels || [];
      channelsElement.innerHTML = `
        <details class="channel-details">
          <summary>Channels</summary>
          <pre>${syntaxHighlight(JSON.stringify(channels, null, 2))}</pre>
        </details>
      `;
      // Events
      const events = response.events || [];
      eventsElement.innerHTML = events.map((event, index) => `
        <details class="event-details">
          <summary>${event.event}</summary>
          <pre>${syntaxHighlight(JSON.stringify(event, null, 2))}</pre>
        </details>
      `).join('');
    }
  });
});

document.getElementById('options-link').addEventListener('click', function(e) {
    e.preventDefault();
    // Öffnet die Options-Seite
    if (chrome.runtime.openOptionsPage) {
        chrome.runtime.openOptionsPage();
    } else {
        window.open(chrome.runtime.getURL('options.html'));
    }
});