import type { GeoJSONSourceSpecification, StyleSpecification } from "maplibre-gl";
import { annotationPoints, impactAreaPolygon } from "../data/workbench-simulation";
import { MAP_STYLE_TOKENS } from "./map-colors";

export const SIMULATION_SOURCE_IDS = {
  impactArea: "simulation-impact-area",
  annotations: "simulation-annotations"
} as const;

export const simulationSources = {
  impactArea: {
    type: "geojson",
    data: impactAreaPolygon
  } satisfies GeoJSONSourceSpecification,
  annotations: {
    type: "geojson",
    data: annotationPoints
  } satisfies GeoJSONSourceSpecification
};

export const simulationAnnotationLayers: StyleSpecification["layers"] = [
  {
    id: "simulation-impact-fill",
    type: "fill",
    source: SIMULATION_SOURCE_IDS.impactArea,
    paint: {
      "fill-color": MAP_STYLE_TOKENS.state.risk,
      "fill-opacity": MAP_STYLE_TOKENS.opacity.area
    }
  },
  {
    id: "simulation-impact-outline",
    type: "line",
    source: SIMULATION_SOURCE_IDS.impactArea,
    paint: {
      "line-color": MAP_STYLE_TOKENS.state.risk,
      "line-width": 1.5,
      "line-dasharray": [2, 2],
      "line-opacity": 0.72
    }
  },
  {
    id: "simulation-burst-halo",
    type: "circle",
    source: SIMULATION_SOURCE_IDS.annotations,
    filter: ["==", ["get", "kind"], "burst"],
    paint: {
      "circle-color": MAP_STYLE_TOKENS.canvas.casing,
      "circle-radius": 18,
      "circle-stroke-color": MAP_STYLE_TOKENS.state.incident,
      "circle-stroke-width": 3,
      "circle-opacity": 0.88
    }
  },
  {
    id: "simulation-burst-point",
    type: "circle",
    source: SIMULATION_SOURCE_IDS.annotations,
    filter: ["==", ["get", "kind"], "burst"],
    paint: {
      "circle-color": MAP_STYLE_TOKENS.state.incident,
      "circle-radius": 7,
      "circle-stroke-color": MAP_STYLE_TOKENS.canvas.casing,
      "circle-stroke-width": 3
    }
  },
  {
    id: "simulation-pipe-label",
    type: "symbol",
    source: SIMULATION_SOURCE_IDS.annotations,
    filter: ["==", ["get", "kind"], "pipe-label"],
    layout: {
      "text-field": ["get", "label"],
      "text-size": 13,
      "text-font": ["Open Sans Bold"],
      "text-allow-overlap": true
    },
    paint: {
      "text-color": MAP_STYLE_TOKENS.label.inverse,
      "text-halo-color": MAP_STYLE_TOKENS.state.agent,
      "text-halo-width": 9
    }
  },
  {
    id: "simulation-impact-label",
    type: "symbol",
    source: SIMULATION_SOURCE_IDS.annotations,
    filter: ["==", ["get", "kind"], "tooltip"],
    layout: {
      "text-field": ["get", "label"],
      "text-size": 14,
      "text-font": ["Open Sans Bold"],
      "text-offset": [0, 0],
      "text-allow-overlap": true
    },
    paint: {
      "text-color": MAP_STYLE_TOKENS.state.risk,
      "text-halo-color": MAP_STYLE_TOKENS.canvas.casing,
      "text-halo-width": 4
    }
  },
  {
    id: "simulation-district-label",
    type: "symbol",
    source: SIMULATION_SOURCE_IDS.annotations,
    filter: ["==", ["get", "kind"], "district"],
    layout: {
      "text-field": ["get", "label"],
      "text-size": 13,
      "text-font": ["Open Sans Regular"],
      "text-allow-overlap": true
    },
    paint: {
      "text-color": MAP_STYLE_TOKENS.label.secondary,
      "text-halo-color": MAP_STYLE_TOKENS.canvas.casing,
      "text-halo-width": 3
    }
  },
  {
    id: "simulation-burst-label",
    type: "symbol",
    source: SIMULATION_SOURCE_IDS.annotations,
    filter: ["==", ["get", "kind"], "burst"],
    layout: {
      "text-field": "爆管位置\nDN600 给水管线\n压力：0.18 MPa\n时间：09:00",
      "text-size": 12,
      "text-font": ["Open Sans Regular"],
      "text-offset": [5.2, -3.4],
      "text-anchor": "left",
      "text-allow-overlap": true
    },
    paint: {
      "text-color": MAP_STYLE_TOKENS.label.primary,
      "text-halo-color": MAP_STYLE_TOKENS.canvas.casing,
      "text-halo-width": 5
    }
  }
];

export const simulationLayerIds = simulationAnnotationLayers.map((layer) => layer.id);