let page = 1;
let loading = false;
let entryCounter = 0;
let lastAdId = null;
let adIndex = 0;
let ads = []; 

const LOCATION_KEY = "userLocation";
const LOCATION_INTERVAL = 5 * 60 * 1000; 

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];
  });
}

function insertAd(placeholderId) {
  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 => {
      if (ad.id === lastAdId) {
        return insertAd(placeholderId);
      }
	  
      const placeholder = document.getElementById(placeholderId);
      if (placeholder) {
        placeholder.outerHTML = `<div class="adblock">${ad.html}</div>`;
        lastAdId = ad.id;
      }
    })
    .catch(err => {
      console.error("Fehler beim Laden eines Werbeblocks:", err);
    });
}

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

  entries.forEach(entry => {
    const dateStr = entry.timestamp || "";
    
	if(entry.type === "note"){
		let timeStr = "";
		if(entry.start?.trim() && entry.expire?.trim()){
			timeStr = "Von " + entry.start + " &ndash; " + entry.expire;
		}else{
			timeStr = "Am " + entry.timestamp;
		}
		 html = `
		  <a name="v${entry.uid}"></a>
		  <article class="note-finance" style="cursor: pointer;" onClick="location.href='/finanzierung';"> 	
			<div class="description w100 pl10">
			  <div class="container">
			    <p>${timeStr} gab es aufgrund eingeschränkter Kapazitäten keine Aufzeichnung. Jetzt aktiv werden und dem Dienst zu Finanzieren helfen!</p>
			    <div class="note-finance-frame" style="display: block;margin: 20px 0px 0px 0px;background: #DFDFDF;padding: 5px;border:1px solid #C0C0C0;">
			      <div class="note-finance-bar" style="display: block;margin: 0px 0px 0px 0px;background: #ccc;padding: 0px;border:1px solid #FFF;">
				    <div class="note-finance-indicator" style="display: inline-block;width: ${entry.finbar.percentage}%;background: ${entry.finbar.color};"><span style="color: #fff;font-weight: bold;display: block;padding: 0px 5px 2px 5px;"><small>${entry.finbar.string}</small></span></div>
				  </div>
				</div>
			  </div>
			</div>
			<div class="clear"></div>
		  </article>
		`;
	}
	if(entry.type === "report"){
	
	  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);
	  
	  if(entry.comments < 1){
		statusComments = "";
	  }else if(entry.comments == 1){
		statusComments = '<span style="font-size: small;">1 Kommentar</span><br />';
	  }else if(entry.comments > 1){
		statusComments = '<span style="font-size: small;">' + entry.comments + ' Kommentare</span><br />';
	  }
	  
	  if(entry.greyit == 1){
		greyIt = 'style="color: darkgrey !important;"';
	  }else{
		greyIt = '';
	  }
	  
	  switch (entry.status) {
	    case "<b>Gesamte Aufzeichnung wird aufbereitet.</b>":
		  statusHtml = '<span class="icon-container-workout" style="float: left;font-size: small;display: flex;align-items: center; color:#CCC;"><svg fill="#CCC" height="20" viewBox="0 0 24 24" width="20" class="" style="cursor: auto; fill: #CCC;float: left;stroke: none;margin: 0px 10px 0px 0px;padding: 0px;"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m1-10.5 3 2.25v2.5l-5-3.75V5h2z"></path></svg>Aufbereitung dauert an</span>';
		  break;
	    default:
		  statusHtml = "";
	  }

      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 ${greyIt}>${title}</h1>
			<p ${greyIt}>${excerpt}&hellip;</p>
			<p ${greyIt} class="stamp">${statusHtml}${statusComments}${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) {
      const placeholderId = "ad-" + entryCounter;
      container.insertAdjacentHTML("beforeend", `<div id="${placeholderId}" class="ad-placeholder"></div>`);
      insertAd(placeholderId);
    }
  });
}

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");
  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();
};