<!doctype html>
<html lang="cs">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Mapy.com – KML viewer</title>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    html, body { height: 100%; margin: 0; }
    #app { height: 100%; display: grid; grid-template-rows: auto 1fr; }
    #bar {
      display: grid;
      grid-template-columns: 1.2fr 1fr auto;
      gap: 8px;
      padding: 10px;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-size: 14px;
    }
    #map { height: 100%; }
    input, select, button {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 10px;
      font-size: 14px;
    }
    button { background: #fff; cursor: pointer; }
    button:hover { background: #f7f7f7; }
    #status { grid-column: 1 / -1; color: #555; font-size: 12px; }
  </style>
</head>
<body>
<div id="app">
  <div id="bar">
    <select id="basemap">
      <option value="outdoor">Turistická (outdoor)</option>
      <option value="basic">Základní (basic)</option>
      <option value="winter">Zimní (winter)</option>
      <option value="aerial">Letecká (aerial)</option>
      <option value="hybrid">Hybrid (aerial + names-overlay)</option>
    </select>
    <button id="reload">Znovu načíst KML</button>
    <div id="status"></div>
  </div>
  <div id="map"></div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  // === API KEY natvrdo (veřejné v client-side kódu!) ===
  const DEFAULT_API_KEY = "TEMGqpRC0ptqWZZai5V3QgdYn15doBGWt9YkLbkRaK0"; // <-- sem dej reálnej klíč

  // --- Config ---
  const TILE_BASE = "https://api.mapy.com/v1/maptiles";
  const ATTR = "&copy; Seznam.cz, a.s. a další";

  // URL params:
  // ?kml=<URL-encoded KML URL>   (povinné pro auto-load)
  // ?basemap=outdoor|basic|winter|aerial|hybrid
  // ?apiKey=...  (volitelné; přebije DEFAULT_API_KEY)
  // ?proxy=<URL>  (volitelné; CORS proxy prefix končící "...?url=")
  const params = new URLSearchParams(location.search);
  const kmlUrlParam  = params.get("kml") || "";
  const proxyParam   = params.get("proxy") || "";
  const basemapParam = params.get("basemap") || "outdoor";
  const apiKeyParam  = params.get("apiKey") || "";

  // --- Map tiles layer ---
  function tileUrl(mapset, tileSize, apiKey) {
    const q = apiKey ? `?apiKey=${encodeURIComponent(apiKey)}` : "";
    return `${TILE_BASE}/${mapset}/${tileSize}/{z}/{x}/{y}${q}`;
  }

  const map = L.map("map").setView([49.8, 15.5], 7);
  let baseLayer = null, overlayLayer = null;
  const markersLayer = L.layerGroup().addTo(map);

  function setBasemap(mode, apiKey) {
    const tileSize = "256";

    if (baseLayer) map.removeLayer(baseLayer);
    if (overlayLayer) { map.removeLayer(overlayLayer); overlayLayer = null; }

    const commonTileOpts = {
      attribution: ATTR,
      maxZoom: 20,
      tms: true,           // <<< FIX: přepne XYZ -> TMS (invertuje Y)
      crossOrigin: true,   // volitelné; hodí se pro canvas/screenshoty
    };

    if (mode === "hybrid") {
      baseLayer = L.tileLayer(tileUrl("aerial", tileSize, apiKey), commonTileOpts);
      overlayLayer = L.tileLayer(tileUrl("names-overlay", tileSize, apiKey), commonTileOpts);
      baseLayer.addTo(map);
      overlayLayer.addTo(map);
    } else {
      baseLayer = L.tileLayer(tileUrl(mode, tileSize, apiKey), commonTileOpts);
      baseLayer.addTo(map);
    }
  }

  // --- KML parse (toleruje wikipedí "<?ignore ...?>" za </kml>) ---
  function extractKmlOnly(text) {
    const start = text.search(/<kml\b/i);
    const end = text.search(/<\/kml>/i);
    if (start === -1 || end === -1) return text.trim();
    return text.slice(start, end + 6).trim();
  }

  function parseKmlPoints(xmlText) {
    const cleaned = extractKmlOnly(xmlText);
    const doc = new DOMParser().parseFromString(cleaned, "application/xml");
    if (doc.querySelector("parsererror")) throw new Error("Neplatné XML/KML (parsererror).");

    const placemarks = [...doc.getElementsByTagName("Placemark")];
    const out = [];

    for (const pm of placemarks) {
      const name = (pm.getElementsByTagName("name")[0]?.textContent || "").trim() || "Bez názvu";
      const desc = (pm.getElementsByTagName("description")[0]?.textContent || "").trim();

      const coordNode =
        pm.getElementsByTagName("Point")[0]?.getElementsByTagName("coordinates")[0] ||
        pm.getElementsByTagName("coordinates")[0];

      if (!coordNode) continue;

      const first = (coordNode.textContent || "").trim().split(/\s+/)[0]; // "lon,lat,alt"
      const [lonS, latS] = first.split(",");
      const lon = Number(lonS), lat = Number(latS);
      if (!isFinite(lat) || !isFinite(lon)) continue;

      out.push({ name, desc, lat, lon });
    }
    return out;
  }

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, c => ({
      "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
    }[c]));
  }

  function setStatus(msg) { document.getElementById("status").textContent = msg; }

  function showPoints(points) {
    markersLayer.clearLayers();
    if (!points.length) { setStatus("Nenašel jsem žádné body v KML."); return; }

    const bounds = [];
    for (const p of points) {
      const m = L.marker([p.lat, p.lon]).addTo(markersLayer);
      m.bindTooltip(p.name, { permanent: true, direction: "top", offset: [0, -10] });
      m.bindPopup(`<b>${escapeHtml(p.name)}</b>${p.desc ? `<br>${escapeHtml(p.desc)}` : ""}`);
      bounds.push([p.lat, p.lon]);
    }
    map.fitBounds(bounds, { padding: [30, 30] });
    setStatus(`Načteno bodů: ${points.length}`);
  }

  async function fetchText(url) {
    const r = await fetch(url, { mode: "cors" });
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    return await r.text();
  }

  function resolveKmlUrl() {
    if (!kmlUrlParam) return "";
    const abs = new URL(kmlUrlParam, location.href).toString();
    return proxyParam ? (proxyParam + encodeURIComponent(abs)) : abs;
  }

  async function loadAndRenderKml() {
    const apiKey = (apiKeyParam || DEFAULT_API_KEY).trim();
    const basemap = document.getElementById("basemap").value;

    setBasemap(basemap, apiKey);

    const kmlUrl = resolveKmlUrl();
    if (!kmlUrl) {
      setStatus("Chybí parametr ?kml=. Přidej do URL např. ?kml=data/hincove.kml");
      return;
    }

    try {
      setStatus("Načítám KML…");
      const text = await fetchText(kmlUrl);
      const pts = parseKmlPoints(text);
      showPoints(pts);
    } catch (e) {
      setStatus(`Chyba načítání/parsu: ${e?.message || e}. Tip: problém bývá CORS – hostuj KML ve stejném repu nebo použij proxy.`);
    }
  }

  // --- init UI ---
  document.getElementById("basemap").value = basemapParam;
  document.getElementById("reload").addEventListener("click", loadAndRenderKml);

  // auto-load on open
  loadAndRenderKml();
</script>
</body>
</html>