import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';
import 'package:vector_tile_renderer/vector_tile_renderer.dart';

/// Martin URL provider — overridden in main() with the saved value.
final martinUrlProvider = Provider<String>((ref) => 'http://localhost:3001');

/// Builds a Style that fetches tiles directly from Martin.
/// Keyed by Martin URL so a URL change triggers a reload.
final mapStyleProvider =
    FutureProvider.family<Style, String>((ref, martinUrl) async {
  final urlTemplate =
      '$martinUrl/planet_osm_polygon,planet_osm_line,planet_osm_point,planet_osm_roads/{z}/{x}/{y}';

  final tileProvider = NetworkVectorTileProvider(
    urlTemplate: urlTemplate,
    maximumZoom: 14,
    minimumZoom: 0,
  );

  final providers = TileProviders({
    'osm_all': tileProvider,
  });

  final styleJson = <String, dynamic>{
    "version": 8,
    "name": "Privacy Maps",
    "sources": {
      "osm_all": {
        "type": "vector",
        "tiles": [urlTemplate],
        "minzoom": 0,
        "maxzoom": 14,
      }
    },
    "layers": [
      {
        "id": "background",
        "type": "background",
        "paint": {"background-color": "#f0ebe3"}
      },
      {
        "id": "landuse",
        "type": "fill",
        "source": "osm_all",
        "source-layer": "planet_osm_polygon",
        "paint": {"fill-color": "#d4e5c9", "fill-opacity": 0.6}
      },
      {
        "id": "water",
        "type": "fill",
        "source": "osm_all",
        "source-layer": "planet_osm_polygon",
        "filter": ["==", "natural", "water"],
        "paint": {"fill-color": "#a0c8f0"}
      },
      {
        "id": "roads-minor",
        "type": "line",
        "source": "osm_all",
        "source-layer": "planet_osm_line",
        "paint": {"line-color": "#ccc", "line-width": 1}
      },
      {
        "id": "roads-main",
        "type": "line",
        "source": "osm_all",
        "source-layer": "planet_osm_roads",
        "paint": {"line-color": "#f5a623", "line-width": 2}
      },
      {
        "id": "buildings",
        "type": "fill",
        "source": "osm_all",
        "source-layer": "planet_osm_polygon",
        "filter": ["has", "building"],
        "paint": {"fill-color": "#d9d0c7", "fill-outline-color": "#bbb"}
      },
      {
        "id": "road-names",
        "type": "symbol",
        "source": "osm_all",
        "source-layer": "planet_osm_line",
        "minzoom": 13,
        "filter": ["has", "name"],
        "layout": {
          "text-field": ["get", "name"],
          "text-font": ["Noto Sans Regular", "Open Sans Regular"],
          "text-size": 11,
          "symbol-placement": "line",
          "text-max-angle": 30,
          "text-padding": 10
        },
        "paint": {
          "text-color": "#444",
          "text-halo-color": "#fff",
          "text-halo-width": 1.5
        }
      },
      {
        "id": "place-names",
        "type": "symbol",
        "source": "osm_all",
        "source-layer": "planet_osm_point",
        "minzoom": 10,
        "filter": [
          "all",
          ["has", "name"],
          ["has", "place"]
        ],
        "layout": {
          "text-field": ["get", "name"],
          "text-font": ["Noto Sans Regular", "Open Sans Regular"],
          "text-size": [
            "interpolate",
            ["linear"],
            ["zoom"],
            10,
            11,
            14,
            14
          ],
          "text-anchor": "center",
          "text-padding": 5
        },
        "paint": {
          "text-color": "#333",
          "text-halo-color": "#fff",
          "text-halo-width": 1.5
        }
      }
    ]
  };

  final theme = ThemeReader().read(styleJson);

  return Style(
    theme: theme,
    providers: providers,
  );
});