// MapLibre-GL-Style für die zentrale Karte — gerendert aus unseren DACH-PMTiles
// (OpenMapTiles-Schema). GPU + Worker → performant auf dem Handy (Ziel der Migration).
// GEOMETRIE-ONLY (keine Symbol/Text-Layer) → KEINE Glyphs/Fonts nötig für den ersten
// Perf-Test. Labels (mit Glyph-Hosting) kommen in M3, wenn die Performance steht.
(function () {
  'use strict';

  var TILES_FILE = 'dach.pmtiles';
  function tilesUrl() { return window.location.origin + '/tiles/' + TILES_FILE; }

  var THEMES = {
    light: {
      bg: '#f4f1ec', land: '#dce8c8', park: '#c8e6b0', water: '#a0c8f0',
      road: '#ffffff', roadCasing: '#d9cfc2', building: '#e6ddcf',
      buildingLine: '#d4cabb', boundary: '#b08ac0',
      label: '#33312e', roadLabel: '#6b6357', waterLabel: '#4a78a8', labelHalo: 'rgba(255,255,255,0.9)',
    },
    dark: {
      bg: '#1a1d21', land: '#222820', park: '#27331f', water: '#16242e',
      road: '#3a4046', roadCasing: '#23282d', building: '#262b30',
      buildingLine: '#31373d', boundary: '#7d5a8c',
      label: '#d6d9dd', roadLabel: '#9aa0a6', waterLabel: '#6fa0cc', labelHalo: 'rgba(0,0,0,0.8)',
    },
  };

  var FONT = ['Open Sans Regular'];

  // Liefert ein MapLibre-Style-JSON (Version 8) ohne glyphs/sprite.
  function build(opts) {
    opts = opts || {};
    var t = THEMES[opts.dark ? 'dark' : 'light'];
    return {
      version: 8,
      glyphs: window.location.origin + '/fonts/{fontstack}/{range}.pbf',
      sources: {
        by: { type: 'vector', url: 'pmtiles://' + tilesUrl() },
      },
      layers: [
        { id: 'bg', type: 'background', paint: { 'background-color': t.bg } },
        { id: 'landcover', type: 'fill', source: 'by', 'source-layer': 'landcover',
          paint: { 'fill-color': t.land, 'fill-opacity': 0.55 } },
        { id: 'park', type: 'fill', source: 'by', 'source-layer': 'park',
          paint: { 'fill-color': t.park, 'fill-opacity': 0.5 } },
        { id: 'water', type: 'fill', source: 'by', 'source-layer': 'water',
          paint: { 'fill-color': t.water } },
        { id: 'waterway', type: 'line', source: 'by', 'source-layer': 'waterway',
          paint: { 'line-color': t.water, 'line-width': 1 } },
        { id: 'road-casing', type: 'line', source: 'by', 'source-layer': 'transportation',
          minzoom: 11,
          paint: { 'line-color': t.roadCasing,
            'line-width': ['interpolate', ['linear'], ['zoom'], 11, 2, 16, 6] } },
        { id: 'roads', type: 'line', source: 'by', 'source-layer': 'transportation',
          paint: { 'line-color': t.road,
            'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 12, 1.5, 16, 4] } },
        { id: 'buildings', type: 'fill', source: 'by', 'source-layer': 'building',
          minzoom: 13,
          paint: { 'fill-color': t.building, 'fill-outline-color': t.buildingLine } },
        { id: 'boundary', type: 'line', source: 'by', 'source-layer': 'boundary',
          paint: { 'line-color': t.boundary, 'line-dasharray': [2, 2], 'line-width': 1 } },

        // ---- Labels (brauchen glyphs) ----
        { id: 'water-labels', type: 'symbol', source: 'by', 'source-layer': 'water_name',
          layout: {
            'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']],
            'text-font': FONT, 'text-size': 12, 'text-max-width': 6,
          },
          paint: { 'text-color': t.waterLabel, 'text-halo-color': t.labelHalo, 'text-halo-width': 1.2 } },

        { id: 'street-labels', type: 'symbol', source: 'by', 'source-layer': 'transportation_name',
          minzoom: 14,
          layout: {
            'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']],
            'text-font': FONT, 'symbol-placement': 'line', 'text-size': 11,
          },
          paint: { 'text-color': t.roadLabel, 'text-halo-color': t.labelHalo, 'text-halo-width': 1.2 } },

        // Ortsnamen (Städte/Dörfer) — wichtig für Orientierung, auch bei kleinem Zoom.
        { id: 'place-labels', type: 'symbol', source: 'by', 'source-layer': 'place',
          filter: ['in', ['get', 'class'], ['literal', ['city', 'town', 'village', 'suburb', 'hamlet', 'neighbourhood']]],
          layout: {
            'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']],
            'text-font': FONT, 'text-max-width': 8, 'text-anchor': 'center',
            'text-size': ['interpolate', ['linear'], ['zoom'],
              4, 10, 8, 12, 12, 14, 16, 17],
          },
          paint: { 'text-color': t.label, 'text-halo-color': t.labelHalo, 'text-halo-width': 1.6 } },
      ],
    };
  }

  window.MapGLStyle = { build: build, tilesUrl: tilesUrl, tilesFile: TILES_FILE };
})();