map

import { DOCUMENT, isPlatformBrowser } from '@angular/common';
import { computed, inject, Injectable, InjectionToken, PLATFORM_ID, signal } from '@angular/core';

import {
  findZardMapPreset,
  ZARD_MAP_DEFAULT_PRESET_ID,
  ZARD_MAP_PRESETS,
  type ZardMapPreset,
  type ZardMapProvider,
  type ZardMapStyles,
} from './map-styles';

// This file must not import `ng-mapcn`: the picker and any non-lazy code inject the service, and ng-mapcn is not
// tree-shakeable (it pulls all of MapLibre). `provideZardMap()` is the only bridge between the two.

export type ZardMapKeys = Partial<Record<ZardMapProvider, string>>;

export interface ZardMapStyleConfig {
  /** The catalogue the picker lists and the service resolves ids against. Defaults to `ZARD_MAP_PRESETS`. */
  presets?: readonly ZardMapPreset[];
  /** Preset every map starts with, by id. A stored choice wins when `persist` is on. Defaults to Carto Positron. */
  style?: string;
  /** API keys of the key-based providers. A preset that needs a key is only picked once its provider has one. */
  keys?: ZardMapKeys;
  /**
   * Remembers the picked preset (and the keys typed into the picker) in `localStorage`, browser only. `true` uses the
   * `zard-map-style` key, a string picks the key. Ignored on the server and when storage is unavailable.
   */
  persist?: boolean | string;
}

/** Why `select()` did not change the basemap. */
export type ZardMapSelectResult = 'selected' | 'unknown-preset' | 'needs-key';

export const ZARD_MAP_STYLE_CONFIG = new InjectionToken<ZardMapStyleConfig>('ZARD_MAP_STYLE_CONFIG');

const DEFAULT_STORAGE_KEY = 'zard-map-style';

/**
 * The active basemap of every map, shared from the root injector by all the routes that register `provideZardMap()`.
 * Selecting a preset swaps, live, every `<ng-map>` without a `[styles]` of its own.
 */
@Injectable({ providedIn: 'root' })
export class ZardMapStyleService {
  private readonly document = inject(DOCUMENT);
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  private readonly configs = new WeakSet<ZardMapStyleConfig>();
  private storageKey: string | null = null;
  private initialized = false;

  private readonly presetsState = signal<readonly ZardMapPreset[]>(ZARD_MAP_PRESETS);
  private readonly presetIdState = signal(ZARD_MAP_DEFAULT_PRESET_ID);
  private readonly keysState = signal<ZardMapKeys>({});

  /** Every preset the picker lists. */
  readonly presets = this.presetsState.asReadonly();
  /** Id of the preset in use. */
  readonly presetId = this.presetIdState.asReadonly();
  /** Keys known to the service, by provider. */
  readonly keys = this.keysState.asReadonly();

  /** The preset in use. A key-based preset without a key is not "in use": the default stands in until it has one. */
  readonly preset = computed<ZardMapPreset>(() => {
    const presets = this.presetsState();
    const fallback = findZardMapPreset(ZARD_MAP_DEFAULT_PRESET_ID, presets) ?? presets[0] ?? ZARD_MAP_PRESETS[0];
    const preset = findZardMapPreset(this.presetIdState(), presets) ?? fallback;

    return this.canUse(preset, this.keysState()) ? preset : fallback;
  });

  /** The light and dark styles of the preset in use. This is what `provideZardMap()` feeds into ng-mapcn. */
  readonly styles = computed<ZardMapStyles>(() => {
    const preset = this.preset();
    return preset.styles(preset.requiresKey ? this.keysState()[preset.provider] : undefined);
  });

  /**
   * Applies a config once per object. The first call also decides where the app starts: the stored choice (with
   * `persist`), else `config.style`, else Carto Positron. Later calls (another lazy route with its own
   * `provideZardMap()`) only add keys and persistence, they never move the basemap under the user.
   */
  configure(config: ZardMapStyleConfig = {}): void {
    if (this.configs.has(config)) {
      return;
    }
    this.configs.add(config);

    if (config.presets?.length) {
      this.presetsState.set(config.presets);
    }
    if (config.persist && !this.storageKey) {
      this.storageKey = typeof config.persist === 'string' ? config.persist : DEFAULT_STORAGE_KEY;
    }

    const stored = this.read();
    // A key given in config is the developer's; one typed into the picker is the user's. The developer's wins.
    this.keysState.update(current => ({ ...current, ...stored.keys, ...config.keys }));

    if (this.initialized) {
      return;
    }
    this.initialized = true;

    const keys = this.keysState();
    const candidates = [stored.preset, config.style];
    for (const id of candidates) {
      const preset = findZardMapPreset(id, this.presetsState());
      if (preset && this.canUse(preset, keys)) {
        this.presetIdState.set(preset.id);
        return;
      }
    }
  }

  /**
   * Switches every map to a preset, live. A key-based preset needs its provider's key: pass `key` the first time, or
   * set it with `setKey()`. Without one nothing changes (and no request goes out), and the result says why.
   */
  select(id: string, key?: string): ZardMapSelectResult {
    const preset = findZardMapPreset(id, this.presetsState());
    if (!preset) {
      return 'unknown-preset';
    }

    const typed = key?.trim();
    if (typed && preset.requiresKey) {
      this.setKey(preset.provider, typed);
    }
    if (!this.canUse(preset, this.keysState())) {
      return 'needs-key';
    }

    this.presetIdState.set(preset.id);
    this.write();
    return 'selected';
  }

  /** Stores the key of a provider. An empty key forgets it, and a preset that needed it falls back to the default. */
  setKey(provider: ZardMapProvider, key: string): void {
    const trimmed = key.trim();
    this.keysState.update(current => {
      const next = { ...current };
      if (trimmed) {
        next[provider] = trimmed;
      } else {
        delete next[provider];
      }
      return next;
    });
    this.write();
  }

  /** Back to the default preset (and store that, when persistence is on). */
  reset(): void {
    this.presetIdState.set(ZARD_MAP_DEFAULT_PRESET_ID);
    this.write();
  }

  private canUse(preset: ZardMapPreset, keys: ZardMapKeys): boolean {
    return !preset.requiresKey || !!keys[preset.provider];
  }

  private get storage(): Storage | null {
    if (!this.isBrowser || !this.storageKey) {
      return null;
    }
    try {
      return this.document.defaultView?.localStorage ?? null;
    } catch {
      // Blocked storage (privacy mode, sandboxed iframe): the choice just lasts until the page closes.
      return null;
    }
  }

  private read(): { preset?: string; keys: ZardMapKeys } {
    const { storage } = this;
    if (!storage || !this.storageKey) {
      return { keys: {} };
    }

    try {
      const preset = storage.getItem(this.storageKey) ?? undefined;
      return { preset, keys: parseKeys(storage.getItem(`${this.storageKey}:keys`)) };
    } catch {
      return { keys: {} };
    }
  }

  private write(): void {
    const { storage } = this;
    if (!storage || !this.storageKey) {
      return;
    }

    try {
      storage.setItem(this.storageKey, this.presetIdState());
      const keys = this.keysState();
      if (Object.keys(keys).length > 0) {
        storage.setItem(`${this.storageKey}:keys`, JSON.stringify(keys));
      } else {
        storage.removeItem(`${this.storageKey}:keys`);
      }
    } catch {
      // Quota exceeded or storage blocked: nothing to recover, the in-memory choice still applies.
    }
  }
}

/** Anything that is not an object of non-empty strings is dropped, so a corrupted value just means "no keys". */
function parseKeys(raw: string | null): ZardMapKeys {
  if (!raw) {
    return {};
  }

  try {
    const parsed: unknown = JSON.parse(raw);
    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
      return {};
    }

    const keys: ZardMapKeys = {};
    for (const [provider, key] of Object.entries(parsed)) {
      if (typeof key === 'string' && key.trim()) {
        keys[provider as ZardMapProvider] = key.trim();
      }
    }
    return keys;
  } catch {
    return {};
  }
}

import type { StyleSpecification } from 'maplibre-gl';

// Plain data: this file must not import `ng-mapcn` (or anything that evaluates MapLibre), because the picker, the
// docs and any non-lazy code read the catalogue. `maplibre-gl` is imported for types only and is erased.

/** Who serves the tiles. Drives the grouping of the picker and the usage notes of the docs. */
export type ZardMapProvider = 'carto' | 'openfreemap' | 'osm' | 'maptiler' | 'stadia';

/** A MapLibre style: a style JSON URL, or the style object itself. */
export type ZardMapStyleValue = string | StyleSpecification;

/** One basemap per theme, the shape `<ng-map [styles]>` and `provideMapStyles()` take. */
export interface ZardMapStyles {
  readonly light: ZardMapStyleValue;
  readonly dark: ZardMapStyleValue;
}

/** The few colors the picker's mini-map swatch is drawn with: land, water, a park, minor roads and a major road. */
export interface ZardMapSwatchPalette {
  readonly land: string;
  readonly water: string;
  readonly park: string;
  readonly road: string;
  readonly casing: string;
  readonly major: string;
}

export interface ZardMapPreset {
  /** Stable id: what `provideZardMap({ style })` takes and what `persist` stores. */
  readonly id: string;
  readonly label: string;
  readonly provider: ZardMapProvider;
  /** The name of the style in each theme, for the docs table. */
  readonly variants: { readonly light: string; readonly dark: string };
  /** What the basemap looks like in light and dark, in one line. */
  readonly description: string;
  /** Set when the style only fits one theme. The picker marks it "Light only" or "Dark only". */
  readonly theme?: 'light' | 'dark';
  /** Needs an API key from the provider. The key is never part of the catalogue: it comes from config or the picker. */
  readonly requiresKey: boolean;
  /** Not for production traffic: the provider's usage policy forbids it. */
  readonly devOnly: boolean;
  /** Attribution the basemap requires. MapLibre prints it in the corner of every map, keep it visible. */
  readonly attribution: string;
  /** What the basemap looks like in light and dark, as the colors of the mini-map swatch next to the label. */
  readonly swatch: { readonly light: ZardMapSwatchPalette; readonly dark: ZardMapSwatchPalette };
  /**
   * The light and dark styles. Key-based presets get the key; the keyless ones ignore it. Keep the returned objects
   * referentially stable for the same input: `<ng-map>` compares styles by identity before it calls `setStyle`.
   */
  readonly styles: (key?: string) => ZardMapStyles;
}

export interface ZardMapProviderInfo {
  readonly id: ZardMapProvider;
  readonly label: string;
  readonly url: string;
  readonly requiresKey: boolean;
  /** Where to get a key, for the providers that need one. */
  readonly keyUrl?: string;
  /** What to know before shipping it. */
  readonly limits: string;
}

export const ZARD_MAP_PROVIDERS: readonly ZardMapProviderInfo[] = [
  {
    id: 'carto',
    label: 'Carto',
    url: 'https://carto.com/basemaps',
    requiresKey: false,
    limits: 'Free for non-commercial and low-traffic use. Commercial products need a Carto plan.',
  },
  {
    id: 'openfreemap',
    label: 'OpenFreeMap',
    url: 'https://openfreemap.org',
    requiresKey: false,
    limits: 'Free with no registration and no hard limit. Donations keep it running.',
  },
  {
    id: 'osm',
    label: 'OpenStreetMap',
    url: 'https://operations.osmfoundation.org/policies/tiles/',
    requiresKey: false,
    limits: 'Development and demos only. The tile usage policy forbids heavy or production traffic.',
  },
  {
    id: 'maptiler',
    label: 'MapTiler',
    url: 'https://www.maptiler.com/cloud/',
    requiresKey: true,
    keyUrl: 'https://cloud.maptiler.com/account/keys/',
    limits: 'Free plan for non-commercial use with a monthly request quota. Restrict the key to your domain.',
  },
  {
    id: 'stadia',
    label: 'Stadia Maps',
    url: 'https://stadiamaps.com',
    requiresKey: true,
    keyUrl: 'https://client.stadiamaps.com/dashboard/',
    limits: 'Works without a key on localhost. Production domains need a (free) account and a key.',
  },
];

const OSM_ATTRIBUTION = '© OpenStreetMap contributors';
const CARTO_ATTRIBUTION = '© OpenStreetMap contributors © CARTO';
const OPENFREEMAP_ATTRIBUTION = '© OpenFreeMap © OpenMapTiles Data from OpenStreetMap';
const MAPTILER_ATTRIBUTION = '© MapTiler © OpenStreetMap contributors';
const STADIA_ATTRIBUTION = '© Stadia Maps © OpenMapTiles © OpenStreetMap contributors';

const carto = (name: string): string => `https://basemaps.cartocdn.com/gl/${name}-gl-style/style.json`;
const openFreeMap = (name: string): string => `https://tiles.openfreemap.org/styles/${name}`;
const mapTiler = (name: string, key: string): string =>
  `https://api.maptiler.com/maps/${name}/style.json?key=${encodeURIComponent(key)}`;
const stadia = (name: string, key: string): string =>
  `https://tiles.stadiamaps.com/styles/${name}.json?api_key=${encodeURIComponent(key)}`;

/** Raster tiles are a style of their own. Built once so `<ng-map>` sees the same object every time. */
const osmRasterStyle = (dim: boolean): StyleSpecification => ({
  version: 8,
  sources: {
    osm: {
      type: 'raster',
      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
      tileSize: 256,
      maxzoom: 19,
      attribution: OSM_ATTRIBUTION,
    },
  },
  layers: [
    {
      id: 'osm',
      type: 'raster',
      source: 'osm',
      paint: dim ? { 'raster-brightness-max': 0.45, 'raster-saturation': -0.6 } : {},
    },
  ],
});

const OSM_STYLES: ZardMapStyles = Object.freeze({ light: osmRasterStyle(false), dark: osmRasterStyle(true) });

/** Id of the preset every app starts with: the Carto Positron / Dark Matter pair. */
export const ZARD_MAP_DEFAULT_PRESET_ID = 'carto-positron';

/** Keyless presets cache their (constant) styles, keyed ones one object per key. */
const keyless = (styles: ZardMapStyles): ((key?: string) => ZardMapStyles) => {
  const frozen = Object.freeze(styles);
  return () => frozen;
};

const keyed = (build: (key: string) => ZardMapStyles): ((key?: string) => ZardMapStyles) => {
  const cache = new Map<string, ZardMapStyles>();
  return (key = '') => {
    let styles = cache.get(key);
    if (!styles) {
      styles = Object.freeze(build(key));
      cache.set(key, styles);
    }
    return styles;
  };
};

/**
 * The basemaps zard ships, in the order the picker lists them. Keyless presets work out of the box; the key-based ones
 * (MapTiler, Stadia) need a key from `provideZardMap({ keys })` or the picker, and are never hard-coded.
 */
export const ZARD_MAP_PRESETS: readonly ZardMapPreset[] = [
  {
    id: 'carto-positron',
    label: 'Positron',
    provider: 'carto',
    variants: { light: 'Positron', dark: 'Dark Matter' },
    description: 'Clean light gray basemap that turns into Dark Matter in dark mode. The default.',
    requiresKey: false,
    devOnly: false,
    attribution: CARTO_ATTRIBUTION,
    swatch: {
      light: {
        land: '#fafaf8',
        water: '#d4dadc',
        park: '#e9ede4',
        road: '#ffffff',
        casing: '#e0e0e0',
        major: '#ffffff',
      },
      dark: {
        land: '#161616',
        water: '#2e3a42',
        park: '#1c241c',
        road: '#3a3a3a',
        casing: '#0c0c0c',
        major: '#5c5c5c',
      },
    },
    styles: keyless({ light: carto('positron'), dark: carto('dark-matter') }),
  },
  {
    id: 'carto-voyager',
    label: 'Voyager',
    provider: 'carto',
    variants: { light: 'Voyager', dark: 'Dark Matter' },
    description: 'Warm, colorful street map in light mode, Dark Matter in dark mode.',
    theme: 'light',
    requiresKey: false,
    devOnly: false,
    attribution: CARTO_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f3eee4',
        water: '#a8cfe0',
        park: '#cfe3c0',
        road: '#ffffff',
        casing: '#e0d6c4',
        major: '#f9d99a',
      },
      dark: {
        land: '#161616',
        water: '#2e3a42',
        park: '#1c241c',
        road: '#3a3a3a',
        casing: '#0c0c0c',
        major: '#5c5c5c',
      },
    },
    styles: keyless({ light: carto('voyager'), dark: carto('dark-matter') }),
  },
  {
    id: 'openfreemap-liberty',
    label: 'Liberty',
    provider: 'openfreemap',
    variants: { light: 'Liberty', dark: 'Dark' },
    description: 'Detailed, softly colored street map. Dark mode uses the OpenFreeMap dark style.',
    theme: 'light',
    requiresKey: false,
    devOnly: false,
    attribution: OPENFREEMAP_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f2f3ec',
        water: '#9ec9e2',
        park: '#cfe5bd',
        road: '#ffffff',
        casing: '#d9d9d9',
        major: '#fcd6a4',
      },
      dark: {
        land: '#17181c',
        water: '#24384a',
        park: '#1d281d',
        road: '#3a3d44',
        casing: '#0e0f12',
        major: '#5d6170',
      },
    },
    styles: keyless({ light: openFreeMap('liberty'), dark: openFreeMap('dark') }),
  },
  {
    id: 'openfreemap-bright',
    label: 'Bright',
    provider: 'openfreemap',
    variants: { light: 'Bright', dark: 'Dark' },
    description: 'Saturated, high-contrast street map. Dark mode uses the OpenFreeMap dark style.',
    theme: 'light',
    requiresKey: false,
    devOnly: false,
    attribution: OPENFREEMAP_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f5efe0',
        water: '#a3d1f0',
        park: '#c8e6b0',
        road: '#ffffff',
        casing: '#e3d6b8',
        major: '#ffc97a',
      },
      dark: {
        land: '#17181c',
        water: '#24384a',
        park: '#1d281d',
        road: '#3a3d44',
        casing: '#0e0f12',
        major: '#5d6170',
      },
    },
    styles: keyless({ light: openFreeMap('bright'), dark: openFreeMap('dark') }),
  },
  {
    id: 'openfreemap-positron',
    label: 'Positron',
    provider: 'openfreemap',
    variants: { light: 'Positron', dark: 'Dark' },
    description: 'Minimal light basemap for data on top. Dark mode uses the OpenFreeMap dark style.',
    theme: 'light',
    requiresKey: false,
    devOnly: false,
    attribution: OPENFREEMAP_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f2f3f0',
        water: '#c2c8ca',
        park: '#e3e8de',
        road: '#ffffff',
        casing: '#d9d9d9',
        major: '#ffffff',
      },
      dark: {
        land: '#17181c',
        water: '#24384a',
        park: '#1d281d',
        road: '#3a3d44',
        casing: '#0e0f12',
        major: '#5d6170',
      },
    },
    styles: keyless({ light: openFreeMap('positron'), dark: openFreeMap('dark') }),
  },
  {
    id: 'openfreemap-dark',
    label: 'Dark',
    provider: 'openfreemap',
    variants: { light: 'Dark', dark: 'Dark' },
    description: 'Always dark, in light mode too.',
    theme: 'dark',
    requiresKey: false,
    devOnly: false,
    attribution: OPENFREEMAP_ATTRIBUTION,
    swatch: {
      light: {
        land: '#17181c',
        water: '#24384a',
        park: '#1d281d',
        road: '#3a3d44',
        casing: '#0e0f12',
        major: '#5d6170',
      },
      dark: {
        land: '#17181c',
        water: '#24384a',
        park: '#1d281d',
        road: '#3a3d44',
        casing: '#0e0f12',
        major: '#5d6170',
      },
    },
    styles: keyless({ light: openFreeMap('dark'), dark: openFreeMap('dark') }),
  },
  {
    id: 'openfreemap-fiord',
    label: 'Fiord',
    provider: 'openfreemap',
    variants: { light: 'Fiord', dark: 'Fiord' },
    description: 'Muted blue-gray basemap, the same in both themes.',
    theme: 'dark',
    requiresKey: false,
    devOnly: false,
    attribution: OPENFREEMAP_ATTRIBUTION,
    swatch: {
      light: {
        land: '#45516e',
        water: '#2f3c58',
        park: '#4a5b70',
        road: '#5b6a88',
        casing: '#333e58',
        major: '#7a89a6',
      },
      dark: {
        land: '#45516e',
        water: '#2f3c58',
        park: '#4a5b70',
        road: '#5b6a88',
        casing: '#333e58',
        major: '#7a89a6',
      },
    },
    styles: keyless({ light: openFreeMap('fiord'), dark: openFreeMap('fiord') }),
  },
  {
    id: 'osm-raster',
    label: 'Standard',
    provider: 'osm',
    variants: { light: 'Standard', dark: 'Standard, dimmed' },
    description: 'The classic OpenStreetMap raster tiles. Dimmed in dark mode. Development only.',
    theme: 'light',
    requiresKey: false,
    devOnly: true,
    attribution: OSM_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f2efe9',
        water: '#aad3df',
        park: '#c8facc',
        road: '#ffffff',
        casing: '#d6c9b6',
        major: '#fcd6a4',
      },
      dark: {
        land: '#3d3b36',
        water: '#2f4a52',
        park: '#3a4a3a',
        road: '#55524b',
        casing: '#2a2926',
        major: '#7a6a4f',
      },
    },
    styles: () => OSM_STYLES,
  },
  {
    id: 'maptiler-streets',
    label: 'Streets',
    provider: 'maptiler',
    variants: { light: 'Streets', dark: 'Streets Dark' },
    description: 'General-purpose street map with a matching dark variant.',
    requiresKey: true,
    devOnly: false,
    attribution: MAPTILER_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f8f4f0',
        water: '#9ec7ef',
        park: '#d4e6c3',
        road: '#ffffff',
        casing: '#e2d6c8',
        major: '#ffd37f',
      },
      dark: {
        land: '#1f242b',
        water: '#14324d',
        park: '#21332a',
        road: '#3a4250',
        casing: '#12161b',
        major: '#9a7238',
      },
    },
    styles: keyed(key => ({ light: mapTiler('streets-v4', key), dark: mapTiler('streets-v4-dark', key) })),
  },
  {
    id: 'maptiler-dataviz',
    label: 'Dataviz',
    provider: 'maptiler',
    variants: { light: 'Dataviz', dark: 'Dataviz Dark' },
    description: 'Muted basemap made for data on top, with a dark variant.',
    requiresKey: true,
    devOnly: false,
    attribution: MAPTILER_ATTRIBUTION,
    swatch: {
      light: {
        land: '#e8ecee',
        water: '#c4d3dc',
        park: '#dde6dc',
        road: '#ffffff',
        casing: '#d3d9dc',
        major: '#f0e4c8',
      },
      dark: {
        land: '#24292e',
        water: '#16222d',
        park: '#263029',
        road: '#3a4048',
        casing: '#181c20',
        major: '#5a636c',
      },
    },
    styles: keyed(key => ({ light: mapTiler('dataviz-v4', key), dark: mapTiler('dataviz-v4-dark', key) })),
  },
  {
    id: 'maptiler-satellite',
    label: 'Satellite',
    provider: 'maptiler',
    variants: { light: 'Hybrid', dark: 'Hybrid' },
    description: 'Satellite imagery with labels, the same in both themes.',
    requiresKey: true,
    devOnly: false,
    attribution: MAPTILER_ATTRIBUTION,
    swatch: {
      light: {
        land: '#3f5a3b',
        water: '#1c3a52',
        park: '#2f4a2c',
        road: '#c9c3a8',
        casing: '#2b2f26',
        major: '#e6d9a8',
      },
      dark: {
        land: '#3f5a3b',
        water: '#1c3a52',
        park: '#2f4a2c',
        road: '#c9c3a8',
        casing: '#2b2f26',
        major: '#e6d9a8',
      },
    },
    styles: keyed(key => ({ light: mapTiler('hybrid', key), dark: mapTiler('hybrid', key) })),
  },
  {
    id: 'maptiler-outdoor',
    label: 'Outdoor',
    provider: 'maptiler',
    variants: { light: 'Outdoor', dark: 'Outdoor Dark' },
    description: 'Terrain, trails and contour lines, with a dark variant.',
    requiresKey: true,
    devOnly: false,
    attribution: MAPTILER_ATTRIBUTION,
    swatch: {
      light: {
        land: '#dfe6cf',
        water: '#a5cbe0',
        park: '#c2dca8',
        road: '#ffffff',
        casing: '#cbc6b0',
        major: '#f5c77a',
      },
      dark: {
        land: '#2a3128',
        water: '#14324d',
        park: '#21332a',
        road: '#3f4a40',
        casing: '#151a14',
        major: '#8a7040',
      },
    },
    styles: keyed(key => ({ light: mapTiler('outdoor-v4', key), dark: mapTiler('outdoor-v4-dark', key) })),
  },
  {
    id: 'stadia-alidade-smooth',
    label: 'Alidade Smooth',
    provider: 'stadia',
    variants: { light: 'Alidade Smooth', dark: 'Alidade Smooth Dark' },
    description: 'Soft, low-contrast basemap with Alidade Smooth Dark in dark mode.',
    requiresKey: true,
    devOnly: false,
    attribution: STADIA_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f4f4f1',
        water: '#b6d0e0',
        park: '#dbe7d4',
        road: '#ffffff',
        casing: '#e1e1dc',
        major: '#f2e3c6',
      },
      dark: {
        land: '#2a2c31',
        water: '#16181b',
        park: '#2c3a30',
        road: '#44474d',
        casing: '#1c1e21',
        major: '#62666d',
      },
    },
    styles: keyed(key => ({ light: stadia('alidade_smooth', key), dark: stadia('alidade_smooth_dark', key) })),
  },
  {
    id: 'stadia-outdoors',
    label: 'Outdoors',
    provider: 'stadia',
    variants: { light: 'Outdoors', dark: 'Outdoors' },
    description: 'Hiking and cycling map with terrain, the same in both themes.',
    theme: 'light',
    requiresKey: true,
    devOnly: false,
    attribution: STADIA_ATTRIBUTION,
    swatch: {
      light: {
        land: '#e4ead6',
        water: '#a9cfe3',
        park: '#c9e0b0',
        road: '#ffffff',
        casing: '#d2d0bd',
        major: '#f5d28a',
      },
      dark: {
        land: '#e4ead6',
        water: '#a9cfe3',
        park: '#c9e0b0',
        road: '#ffffff',
        casing: '#d2d0bd',
        major: '#f5d28a',
      },
    },
    styles: keyed(key => ({ light: stadia('outdoors', key), dark: stadia('outdoors', key) })),
  },
  {
    id: 'stadia-osm-bright',
    label: 'OSM Bright',
    provider: 'stadia',
    variants: { light: 'OSM Bright', dark: 'OSM Bright' },
    description: 'Familiar OpenStreetMap colors on vector tiles, the same in both themes.',
    theme: 'light',
    requiresKey: true,
    devOnly: false,
    attribution: STADIA_ATTRIBUTION,
    swatch: {
      light: {
        land: '#f3efe6',
        water: '#a8d3e8',
        park: '#c8e2b8',
        road: '#ffffff',
        casing: '#d9cdb8',
        major: '#fbc77d',
      },
      dark: {
        land: '#f3efe6',
        water: '#a8d3e8',
        park: '#c8e2b8',
        road: '#ffffff',
        casing: '#d9cdb8',
        major: '#fbc77d',
      },
    },
    styles: keyed(key => ({ light: stadia('osm_bright', key), dark: stadia('osm_bright', key) })),
  },
];

/** The Carto Positron / Dark Matter pair every map falls back to. Keyless; the attribution is mandatory. */
export const ZARD_MAP_DEFAULT_STYLES: ZardMapStyles & { readonly light: string; readonly dark: string } = {
  light: carto('positron'),
  dark: carto('dark-matter'),
};

export function findZardMapPreset(
  id: string | null | undefined,
  presets: readonly ZardMapPreset[] = ZARD_MAP_PRESETS,
): ZardMapPreset | undefined {
  return id ? presets.find(preset => preset.id === id) : undefined;
}

/*
 * Global map styles: import after `maplibre-gl/dist/maplibre-gl.css`, both unlayered, so MapLibre wins over
 * Tailwind's preflight. Styles ng-mapcn's popups, tooltips and labels with the zard tokens.
 */

/* MapLibre's popup chrome is neutralised: the card below is the only visible surface. */
.maplibregl-popup-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}

.maplibregl-popup-tip {
  display: none !important;
}

/* Attribution follows the theme. It must stay visible: the basemaps require it. */
.maplibregl-ctrl-attrib.maplibregl-compact,
.maplibregl-ctrl-attrib {
  background-color: color-mix(in oklab, var(--background) 75%, transparent) !important;
  color: var(--muted-foreground) !important;
  font-size: 11px;
}

.maplibregl-ctrl-attrib a {
  color: inherit !important;
}

.maplibregl-ctrl-attrib a:hover {
  color: var(--foreground) !important;
}

.maplibregl-ctrl-attrib-button {
  filter: none !important;
}

.dark .maplibregl-ctrl-attrib-button {
  filter: invert(1) !important;
}

.maplibregl-map {
  font-family: inherit;
}

@layer components {
  /* Popup card: the same surface as z-popover (radius, bg-popover, ring and shadow-md). */
  .ng-popup-card {
    min-width: 180px;
    max-width: 320px;
    padding: calc(var(--spacing, 0.25rem) * 2.5);
    border-radius: var(--radius-lg, var(--radius, 0.625rem));
    background-color: var(--popover);
    color: var(--popover-foreground);
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent),
      0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);
    animation: ng-popup-enter 0.1s ease-out;
  }

  .ng-popup-close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }

  .ng-popup-close:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }

  .ng-popup-close:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
  }

  /* Tooltip: the zard tooltip is an inverted pill (foreground on background). */
  .ng-tooltip-pill {
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-md, 6px);
    background-color: var(--foreground);
    color: var(--background);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);
    animation: ng-tooltip-enter 0.1s ease-out;
  }

  .ng-marker-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    background: var(--background);
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  .ng-marker-label--top {
    bottom: calc(100% + 6px);
  }

  .ng-marker-label--bottom {
    top: calc(100% + 6px);
  }

  .ng-marker-content {
    position: relative;
    cursor: pointer;
  }

  .ng-marker-default-icon {
    width: 16px;
    height: 16px;
    border: 2px solid var(--background);
    border-radius: 9999px;
    background: var(--primary);
    box-shadow:
      0 4px 6px rgb(0 0 0 / 0.1),
      0 2px 4px rgb(0 0 0 / 0.1);
  }

  /* The dot of a marker with no <ng-marker-content>: the marker element itself, or an empty child of it. */
  .maplibregl-marker:empty,
  .maplibregl-marker > div:empty {
    width: 16px;
    height: 16px;
    border: 2px solid var(--background);
    border-radius: 9999px;
    background: var(--primary);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.25);
    cursor: pointer;
    transition:
      transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .maplibregl-marker > div:empty:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.35);
  }

  .ng-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* `className="ng-popup-passthrough"` makes a popup ignore the pointer (hover tooltips on layers). */
  .maplibregl-popup:has(.ng-popup-passthrough),
  .maplibregl-popup:has(.ng-popup-passthrough) .maplibregl-popup-content {
    pointer-events: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .ng-popup-card,
    .ng-tooltip-pill {
      animation: none;
    }
  }
}

@keyframes ng-popup-enter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ng-tooltip-enter {
  from {
    opacity: 0;
    transform: translateY(-2px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

import {
  MapArcComponent,
  MapClusterLayerComponent,
  MapComponent,
  MapControlsComponent,
  MapFillExtrusionComponent,
  MapGeoJSONComponent,
  MapHeatmapComponent,
  MapImageOverlayComponent,
  MapMarkerComponent,
  MapPopupComponent,
  MapRasterSourceComponent,
  MapRouteComponent,
  MapTerrainComponent,
  MapVectorSourceComponent,
  MarkerContentComponent,
  MarkerLabelComponent,
  MarkerPopupComponent,
  MarkerTooltipComponent,
  RouteMarkerComponent,
  RouteProgressComponent,
} from 'ng-mapcn';

/**
 * The map is powered by ng-mapcn, so its elements keep the upstream selectors (`ng-map`,
 * `ng-map-marker`, ...) instead of `z-*`. Import this bundle, or pick what you need from `ng-mapcn`.
 */
export const ZardMapImports = [
  MapComponent,
  MapControlsComponent,
  MapMarkerComponent,
  MarkerContentComponent,
  MarkerLabelComponent,
  MarkerPopupComponent,
  MarkerTooltipComponent,
  MapPopupComponent,
  MapRouteComponent,
  RouteProgressComponent,
  RouteMarkerComponent,
  MapArcComponent,
  MapGeoJSONComponent,
  MapClusterLayerComponent,
  MapHeatmapComponent,
  MapRasterSourceComponent,
  MapVectorSourceComponent,
  MapImageOverlayComponent,
  MapFillExtrusionComponent,
  MapTerrainComponent,
] as const;

import { inject, type Provider, type Signal } from '@angular/core';

import { type MapLabels, type MapStylesConfig, provideMapLabels, provideMapStyles } from 'ng-mapcn';

import { ZARD_MAP_STYLE_CONFIG, ZardMapStyleService, type ZardMapStyleConfig } from './map-style.service';

type ZardMapSource<T> = T | Signal<T | undefined> | (() => Signal<T | undefined>);

export interface ZardMapConfig extends ZardMapStyleConfig {
  /**
   * A fixed basemap for every `<ng-map>`, one style per theme. A missing theme keeps the Carto default. Pass a signal
   * (or a factory returning one) to swap the basemap yourself. When it is set, `ZardMapStyleService` and
   * `<z-map-style-select>` no longer drive the maps: use `style` / `persist` for the shipped picker instead.
   * A map with its own `[styles]` ignores this.
   */
  styles?: ZardMapSource<MapStylesConfig>;
  /** Translations for the control tooltips, the loader and the popup close button. Missing keys stay English. */
  labels?: ZardMapSource<Partial<MapLabels>>;
}

/**
 * Registers the map defaults, driven by `ZardMapStyleService` so `<z-map-style-select>` changes every map live.
 *
 * ng-mapcn is not tree-shakeable: import this from a routes file loaded with `loadChildren` (or from the map's own
 * component), never from `app.config.ts` or an eager `app.routes.ts`, or MapLibre (about 1 MB) lands in the initial
 * bundle. The theme follows the `dark` class on `<html>`.
 */
export function provideZardMap(config: ZardMapConfig = {}): Provider[] {
  const { styles, labels, ...styleConfig } = config;

  return [
    { provide: ZARD_MAP_STYLE_CONFIG, useValue: styleConfig },
    provideMapStyles(
      styles ??
        (() => {
          const service = inject(ZardMapStyleService);
          service.configure(inject(ZARD_MAP_STYLE_CONFIG));
          return service.styles;
        }),
    ),
    ...(labels ? [provideMapLabels(labels)] : []),
  ];
}