let page = 1;
let loading = false;
let entryCounter = 0;

// Schlüssel im localStorage
const LOCATION_KEY = "userLocation";
const LOCATION_INTERVAL = 5 * 60 * 1000; // 5 Minuten

function updateLocation() {
  if (!navigator.geolocation) {
    console.warn("Geolocation wird nicht unterstützt.");
    return;
  }

  navigator.geolocation.getCurrentPosition(
    pos => {
      const coords = {
        lat: pos.coords.latitude,
        lon: pos.coords.longitude,
        ts: Date.now()
      };
      localStorage.setItem(LOCATION_KEY, JSON.stringify(coords));
      console.log("Location aktualisiert:", coords);
    },
    err => {
      console.warn("Geolocation verweigert oder fehlgeschlagen:", err);
    }
  );
}

function getStoredLocation() {
  try {
    const loc = localStorage.getItem(LOCATION_KEY);
    return loc ? JSON.parse(loc) : null;
  } catch (e) {
    console.warn("Fehler beim Parsen von Location:", e);
    return null;
  }
}

(function initLocation() {
  const loc = getStoredLocation();
  if (!loc || Date.now() - loc.ts > LOCATION_INTERVAL) {
    updateLocation();
  }
  // danach regelmäßig erneuern
  setInterval(updateLocation, LOCATION_INTERVAL);
})();


// Hilfsfunktion: simples HTML-escape
function escapeHtml(str) {
  if (str === null || str === undefined) return "";
  return String(str).replace(/[&<>"']/g, function(m) {
    return { '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[m];
  });
}

let adIndex = 0;   // Zähler für Werbeblöcke
let ads = [];      // Werbeblöcke von zweiter AJAX-Quelle

function insertAd(container) {
  const coords = getStoredLocation();
  url = "js-ajax-ads.php?";
  if (coords) {
	url += `&lat=${coords.lat}&lon=${coords.lon}`;
  }
  return fetch(url)
    .then(res => {
      if (!res.ok) throw new Error("HTTP " + res.status);
      return res.json();
    })
    .then(ad => {
      const html = `<div>${ad}</div>`;
      container.insertAdjacentHTML("beforeend", html);
    })
    .catch(err => {
      console.error("Fehler beim Laden eines Werbeblocks:", err);
    });
}

function renderEntries(entries) {
  const container = document.getElementById("content");
  if (!Array.isArray(entries)) entries = [entries];

  entries.forEach(entry => {
    const dateStr = entry.start || "";
    const statRecent = (entry.statistics && entry.statistics[1] !== undefined) ? entry.statistics[1] + "%" : "0%";
    const statAll    = (entry.statistics && entry.statistics[0] !== undefined) ? entry.statistics[0] + "%" : "0%";

    const title   = escapeHtml(entry.title);
    const excerpt = escapeHtml(entry.excerpt);
    const city    = escapeHtml(entry.city);
    const id      = encodeURIComponent(entry.id);
    const uid     = encodeURIComponent(entry.uid);
    const poster  = escapeHtml(entry.poster);

    const html = `
      <article onclick="location.href='/v/${uid}';">
        <div class="media w60">
          <div class="items">
            <div class="item">
              <img src="${poster}" width="100%">
            </div>
            <div class="chooser" style="display: none;">
              <a class="choose-left"><span class="hide">«</span></a>
              <a class="choose-right"><span class="hide">»</span></a>
              <div class="choose-center">
                <a href="#" class="btn"><span class="hide">·</span></a>
                <a href="#" class="btn"><span class="hide">·</span></a>
                <a href="#" class="btn big"><span class="hide">·</span></a>
                <a href="#" class="btn"><span class="hide">·</span></a>
                <a href="#" class="btn"><span class="hide">·</span></a>
              </div>
            </div>
          </div>
        </div>
        <div class="description w40 pl10">
          <div class="container">
            <h1>${title}</h1>
            <p>${excerpt}…</p>
            <p class="stamp"><span>${city},&nbsp;${dateStr}</span></p>
            <div class="viewbar">
              <div class="viewbar-border" style="position:relative;">
                <div class="viewbar-indicator"
                     title="Aufmerksamkeitsindikator letzter sechs Monate"
                     style="width: ${statRecent}; position: relative; top: 0px; z-index: 1;"></div>
                <div class="viewbar-indicator-g"
                     title="Aufmerksamkeitsindikator gesamte Zeit"
                     style="width: ${statAll}; position:absolute; top:0px; z-index:2;"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </article>
    `;
    container.insertAdjacentHTML("beforeend", html);
    entryCounter++;
    if (entryCounter % 3 === 0) {
      insertAd(container);
    }
  });
}

function loadMoreContent() {
  if (loading) return;
  loading = true;
  const loadingElement = document.getElementById("loading");
  loadingElement.style.display = "block";
  const params = new URLSearchParams(window.location.search);
  const zeig = params.get("zeig"); // z.B. "unterhaltung"
  var url = `js-ajax-content.php?seite=${page}`;
  if(zeig !== null){
    url += `&zeig=${zeig}`;
  }
  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("HTTP " + response.status);
      return response.json();
    })
    .then(data => {
      console.log("AJAX data:", data); 
      if (!data || (Array.isArray(data) && data.length === 0)) {
        window.removeEventListener("scroll", onScroll);
        return;
      }
      renderEntries(data);
      page++;
    })
    .catch(error => {
      console.error('Fehler beim Laden der Inhalte:', error);
    })
    .finally(() => {
      loadingElement.style.display = "none";
      loading = false;
    });
}




window.onload = function() {
  loadMoreContent();
};