// Hero Proof
function detectBrowserOS() {
  const ua = navigator.userAgent;
  let browser = "Unknown", os = "Unknown";
  if (/firefox/i.test(ua)) browser = "Firefox";
  else if (/edg/i.test(ua)) browser = "Edge";
  else if (/chrome|crios/i.test(ua) && !/edg/i.test(ua)) browser = "Chrome";
  else if (/safari/i.test(ua) && !/chrome|crios|edg/i.test(ua)) browser = "Safari";

  if (/windows nt 11/i.test(ua)) os = "Windows 11";
  else if (/windows nt 10/i.test(ua)) os = "Windows 10";
  else if (/mac os x/i.test(ua)) os = "macOS";
  else if (/android/i.test(ua)) os = "Android";
  else if (/iphone|ipad|ipod/i.test(ua)) os = "iOS";
  else if (/linux/i.test(ua)) os = "Linux";

  const resolution = `${window.screen.width}×${window.screen.height}`;
  return { browser, os, resolution };
}

function maskIp(ip) {
  // IPv4 93.104.15.201 -> 93.104.15.x | IPv6: kürzen
  if (ip.includes(".")) {
    const parts = ip.split(".");
    parts[3] = "x";
    return parts.join(".");
  }
  return ip.split(":").slice(0, 4).join(":") + ":…";
}

async function setHeroProof() {
  const heroEl = document.getElementById('hero-proof');
  try {
    const res = await fetch('/geoip.php');
    if (!res.ok) throw new Error('API error');
    const data = await res.json();
    const { browser, os, resolution } = detectBrowserOS();

    const city = data.city || "your city";
    const country = data.country_name || "your country";
    const ipMasked = data.ip ? maskIp(data.ip) : "—";

    heroEl.innerHTML = `
      <span>You are currently located approximately in <span class="text-yellow-400 font-semibold">${city}, ${country}</span>
      (IP: <span class="text-yellow-400 font-semibold">${data.ip}</span>).</span><br>
      <span>You are using the browser <span class="text-yellow-400 font-semibold">${browser}</span> under <span class="text-yellow-400 font-semibold">${os}</span>.
      Even your screen resolution of <span class="text-yellow-400 font-semibold">${resolution} pixels</span> is visible to us.</span>
    `;
  } catch {
    const { browser, os, resolution } = detectBrowserOS();
    heroEl.innerHTML = `
      <span>We couldn't load your location just now.</span><br>
      <span>Your browser: <span class="text-yellow-400 font-semibold">${browser}</span> under
      <span class="text-yellow-400 font-semibold">${os}</span>, resolution
      <span class="text-yellow-400 font-semibold">${resolution} pixels</span>.</span>
    `;
  }
}




// ==== IP & Location ====
async function fetchIPInfo() {
  const resultEl = document.getElementById('ip-result');

  try {
    const res = await fetch('/geoip.php');
    if (!res.ok) throw new Error('API error');
    const data = await res.json();

    // const hint = `Note: This location display is based on your IP address and is usually only accurate to within a few kilometres. 
    // With GPS-enabled devices and location sharing, it may be accurate to within a few metres.`;

    resultEl.innerHTML = `
      <p><strong>IP:</strong> ${data.ip}</p>
      <p><strong>Country:</strong> ${data.country_name} (${data.country})</p>
      <p><strong>Region:</strong> ${data.region || '—'}</p>
      <p><strong>City:</strong> ${data.city || '—'}</p>
      ${data.org ? `<p><strong>ISP:</strong> ${data.org}</p>` : ''}
      <p><strong>Coordinates:</strong> ${data.latitude}, ${data.longitude}</p>
      
    `;
    renderIpMap(data.latitude, data.longitude, data.city);

  } catch (err) {
    resultEl.innerHTML = `<span class="text-red-500">Error: ${err.message}</span>`;
  }
}


//  RENDER IP MAP
let ipMap;

function renderIpMap(lat, lon, label) {
  const el = document.getElementById('ip-map');
  if (!el || lat == null || lon == null) return;
  const latNum = Number(lat), lonNum = Number(lon);
  if (!isFinite(latNum) || !isFinite(lonNum)) return;
  if (!window.L) return; // Leaflet noch nicht geladen

  const center = [latNum, lonNum];

  if (ipMap) {
    ipMap.setView(center, 10);
    if (ipMap._marker) {
      ipMap._marker.setLatLng(center).setPopupContent(label || "Approximately here");
    } else {
      ipMap._marker = L.marker(center).addTo(ipMap).bindPopup(label || "Approximately here");
    }
    return;
  }

  ipMap = L.map('ip-map', { zoomControl: false, attributionControl: true }).setView(center, 8);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap-Mitwirkende'
  }).addTo(ipMap);

  ipMap._marker = L.marker(center).addTo(ipMap).bindPopup(label || "Approximately here");
}















// ==== Fingerprint ====
function generateFingerprint() {
  const fpEl = document.getElementById('fp-result');

  const fingerprintData = [
    { label: 'Browser', value: navigator.userAgent },
    { label: 'Language', value: navigator.language },
    { label: 'Operating System', value: navigator.platform },
    { label: 'Screen', value: `${window.screen.width}×${window.screen.height} (DPR ${window.devicePixelRatio})` },
    { label: 'Timezone', value: Intl.DateTimeFormat().resolvedOptions().timeZone },
    { label: 'Cookies enabled?', value: navigator.cookieEnabled ? 'Ja' : 'Nein' },
    { label: 'Do Not Track', value: navigator.doNotTrack === '1' ? 'Enabled' : 'Disabled' }
  ];

  // Canvas Fingerprint (vereinfachtes Beispiel)
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = "14px 'Arial'";
  ctx.textBaseline = 'alphabetic';
  ctx.fillStyle = '#f60';
  ctx.fillRect(125,1,62,20);
  ctx.fillStyle = '#069';
  ctx.fillText('privacy-check', 2, 15);
  ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
  ctx.fillText('privacy-check', 4, 17);
  const canvasHash = hashCode(canvas.toDataURL());

  fingerprintData.push({
    label: 'Canvas Fingerprint',
    value: `<span class="font-mono">${canvasHash}</span> <span class="text-gray-400">(Unique device identifier)</span>`
  });

  // Anzeige als Liste
  fpEl.innerHTML = `
    <ul class="space-y-2">
      ${fingerprintData.map(item => `
        <li class="border-b border-gray-700 pb-1">
          <strong class="text-yellow-400">${item.label}:</strong> ${item.value}
        </li>
      `).join('')}
    </ul>
  `;
}

// Hilfsfunktion: String -> einfacher Hash
function hashCode(str) {
  let hash = 0, i, chr;
  if (str.length === 0) return hash;
  for (i = 0; i < str.length; i++) {
    chr = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + chr;
    hash |= 0; // 32bit int
  }
  return hash;
}


// ==== INIT ====
fetchIPInfo();
generateFingerprint();
setHeroProof();



let trackerData = {};

// 1. Tracker-Daten laden
fetch('trackers_light.json')
  .then(res => res.json())
  .then(data => {
    trackerData = data;
    // console.log(`✅ Tracker data loaded: ${Object.keys(trackerData).length} Domains`);
  })
  .catch(err => {
    console.error("Error loading tracker data:", err);
  });

// 2. Button-Event
document.getElementById('checkEmailBtn').addEventListener('click', () => {
  const resultEl = document.getElementById('emailResult');
  resultEl.innerHTML = '';

  const fileInput = document.getElementById('emailFile');
  const textInput = document.getElementById('emailText').value.trim();

  if (fileInput.files.length > 0) {
    const reader = new FileReader();
    reader.onload = e => analyzeEmailHTML(e.target.result, resultEl);
    reader.readAsText(fileInput.files[0]);
  } else if (textInput) {
    analyzeEmailHTML(textInput, resultEl);
  } else {
    resultEl.innerHTML = `<span class="text-red-500">Please insert HTML or upload a file.</span>`;
  }
});

// 3. Analyse-Funktion
function analyzeEmailHTML(html, outputEl) {
  if (!Object.keys(trackerData).length) {
    outputEl.innerHTML = `<span class="text-red-500">Tracker data not yet loaded.</span>`;
    return;
  }

  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const found = new Set();
  const trackers = [];

  // Bilder
  doc.querySelectorAll('img').forEach(img => {
    const src = cleanURL(img.src);
    if (src && isValidURL(src)) {
      const domain = extractDomain(src);
      if (trackerData[domain] && !found.has(domain)) {
        trackers.push({ type: 'Image', src, domain });
        found.add(domain);
      }
    }
  });

  // Links
  doc.querySelectorAll('a[href]').forEach(a => {
    const href = cleanURL(a.href);
    if (href && isValidURL(href)) {
      const domain = extractDomain(href);
      if (trackerData[domain] && !found.has(domain)) {
        trackers.push({ type: 'Link', src: href, domain });
        found.add(domain);
      }
    }
  });


// Ergebnis
if (trackers.length === 0) {
  outputEl.innerHTML = `<span class="text-green-600">No tracker domain found 🎉</span>`;
} else {
  outputEl.innerHTML = `
    <p class="font-semibold mb-2">🔍 Tracker domains found:</p>
    <div class="overflow-x-auto rounded border border-gray-700">
      <table class="w-full text-sm border-collapse table-auto">
        <thead>
          <tr class="bg-gray-700 text-gray-200">
            <th class="border border-gray-600 px-2 py-1 text-left">Type</th>
            <th class="border border-gray-600 px-2 py-1 text-left">Domain</th>
            <th class="border border-gray-600 px-2 py-1 text-left">Owner</th>
            <th class="border border-gray-600 px-2 py-1 text-left">Category</th>
            <th class="border border-gray-600 px-2 py-1 text-left">Details</th>
          </tr>
        </thead>
        <tbody>
          ${trackers.map((t, i) => {
            const info = trackerData[t.domain] || {};
            const owner = info.owner || "Unknown";
            const categories = (info.categories || []).join(", ") || "(not specified)";
            const rowId = `trk-details-${i}`;
            return `
              <tr class="align-top">
                <td class="border border-gray-600 px-2 py-1 break-all">${t.type}</td>
                <td class="border border-gray-600 px-2 py-1 break-all" title="${t.src}">${t.domain}</td>
                <td class="border border-gray-600 px-2 py-1 break-all">${owner}</td>
                <td class="border border-gray-600 px-2 py-1 break-all">${categories}</td>
                <td class="border border-gray-600 px-2 py-1">
                  <button
                    class="text-yellow-400 hover:text-yellow-300 underline"
                    onclick="document.getElementById('${rowId}').classList.toggle('hidden')">
                    show
                  </button>
                  <div id="${rowId}" class="hidden mt-2">
                    <div class="text-xs text-gray-400">Full link:</div>
                    <pre class="mt-1 max-w-full whitespace-pre-wrap break-all bg-gray-900 p-2 rounded border border-gray-700">${t.src}</pre>
                  </div>
                </td>
              </tr>
            `;
          }).join('')}
        </tbody>
      </table>
    </div>
  `;
}



}

// 4. Hilfsfunktionen
function cleanURL(raw) {
  const match = raw?.match(/https?:\/\/[^\s"'<>]+/i);
  return match ? match[0] : '';
}

function isValidURL(url) {
  try {
    const parsed = new URL(url);
    return /^https?:$/.test(parsed.protocol) && parsed.hostname.includes('.');
  } catch {
    return false;
  }
}

function extractDomain(url) {
  try {
    const hostname = new URL(url).hostname.toLowerCase();
    const parts = hostname.split('.');
    return parts.slice(-2).join('.'); // z.B. sub.domain.com → domain.com
  } catch {
    return '';
  }
}






// mobile 
  (function () {
    const btn = document.getElementById('nav-toggle');
    const menu = document.getElementById('nav-menu');
    const iconOpen = document.getElementById('nav-icon-open');
    const iconClose = document.getElementById('nav-icon-close');

    if (!btn || !menu) return;

    btn.addEventListener('click', () => {
      const isOpen = !menu.classList.contains('hidden');
      menu.classList.toggle('hidden');
      btn.setAttribute('aria-expanded', String(!isOpen));
      iconOpen.classList.toggle('hidden');
      iconClose.classList.toggle('hidden');
    });

    // optional: Menü schließen, wenn Link geklickt wurde
    menu.querySelectorAll('a').forEach(a => {
      a.addEventListener('click', () => {
        if (!menu.classList.contains('hidden')) {
          menu.classList.add('hidden');
          btn.setAttribute('aria-expanded', 'false');
          iconOpen.classList.remove('hidden');
          iconClose.classList.add('hidden');
        }
      });
    });
  })();