function initWebGLContext(
  canvas: HTMLCanvasElement
): WebGLRenderingContext | null {
  const gl =
    (canvas.getContext("webgl") as WebGLRenderingContext | null) ||
    (canvas.getContext("experimental-webgl") as WebGLRenderingContext | null);
  return gl;
}

function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {
  const dpr = Math.max(1, window.devicePixelRatio || 1);
  const displayWidth = Math.floor(canvas.clientWidth * dpr);
  const displayHeight = Math.floor(canvas.clientHeight * dpr);
  if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
    canvas.width = displayWidth;
    canvas.height = displayHeight;
    return true;
  }
  return false;
}

export const WebGLMap = observer(() => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const glRef = useRef<WebGLRenderingContext | null>(null);
  const programRef = useRef<WebGLProgram | null>(null);
  const bufferRef = useRef<WebGLBuffer | null>(null);
  const pointProgramRef = useRef<WebGLProgram | null>(null);
  const pointBufferRef = useRef<WebGLBuffer | null>(null);
  const screenLineProgramRef = useRef<WebGLProgram | null>(null);
  const screenLineBufferRef = useRef<WebGLBuffer | null>(null);
  const attribsRef = useRef<{ a_pos: number } | null>(null);
  const uniformsRef = useRef<{
    u_cameraPos: WebGLUniformLocation | null;
    u_scale: WebGLUniformLocation | null;
    u_resolution: WebGLUniformLocation | null;
    u_color: WebGLUniformLocation | null;
  } | null>(null);

  const { routeData, stationData, stationDataEn, stationDataZh, sightData } =
    useMapData() as any;
  const {
    position,
    scale,
    setPosition,
    setScale,
    isAutoMode,
    setIsAutoMode,
    screenCenter,
    setScreenCenter,
    userActivityTimestamp,
    updateUserActivity,
  } = useTransform();

  const cameraAnimationStore = useCameraAnimationStore();

  const scaleLimitsRef = useRef({
    min: null as number | null,
    max: null as number | null,
  });

  useEffect(() => {
    if (
      routeData?.scale_min !== undefined &&
      routeData?.scale_max !== undefined
    ) {
      scaleLimitsRef.current = {
        min: routeData.scale_min / 10,
        max: routeData.scale_max / 10,
      };
    }
  }, [routeData?.scale_min, routeData?.scale_max]);

  const clampScale = useCallback((value: number) => {
    const { min, max } = scaleLimitsRef.current;

    if (min === null || max === null) {
      return value;
    }

    const clampedValue = Math.max(min, Math.min(max, value));

    return clampedValue;
  }, []);
  const { selectedLanguage } = useGeolocationStore();
  const positionRef = useRef(position);
  const scaleRef = useRef(scale);
  const setPositionRef = useRef(setPosition);
  const setScaleRef = useRef(setScale);

  useEffect(() => {
    setPositionRef.current = setPosition;
  }, [setPosition]);

  useEffect(() => {
    setScaleRef.current = setScale;
  }, [setScale]);

  useEffect(() => {
    if (routeData) {
    }
  }, [routeData]);

  useEffect(() => {
    positionRef.current = position;
  }, [position]);

  useEffect(() => {
    scaleRef.current = scale;
  }, [scale]);

  const rotationAngle = useMemo(() => {
    const deg = (routeData as any)?.rotate ?? 0;
    return (deg * Math.PI) / 180;
  }, [routeData]);

  const {
    position: animatedYellowDotPosition,
    animateTo: animateYellowDotTo,
    setPositionImmediate: setYellowDotPositionImmediate,
  } = useAnimatedPolarPosition(0, 0, 800);

  const routePath = useMemo(() => {
    if (!routeData?.path || routeData?.path.length === 0)
      return new Float32Array();
    const centerLat = routeData.center_latitude;
    const centerLon = routeData.center_longitude;
    if (centerLat === undefined || centerLon === undefined)
      return new Float32Array();

    const cos = Math.cos(rotationAngle);
    const sin = Math.sin(rotationAngle);

    const verts: number[] = [];
    for (const [lat, lon] of routeData.path) {
      const local = coordinatesToLocal(lat - centerLat, lon - centerLon);
      const x = local.x * UP_SCALE;
      const y = local.y * UP_SCALE;
      const rx = x * cos - y * sin;
      const ry = x * sin + y * cos;
      verts.push(rx, ry);
    }
    return new Float32Array(verts);
  }, [
    routeData?.path,
    routeData?.center_latitude,
    routeData?.center_longitude,
    rotationAngle,
  ]);

  const transformedTramCoords = useMemo(() => {
    const centerLat = routeData?.center_latitude;
    const centerLon = routeData?.center_longitude;
    if (centerLat === undefined || centerLon === undefined) return null;

    const coords: any = apiStore?.context?.currentCoordinates;
    if (!coords) return null;

    const local = coordinatesToLocal(
      coords.latitude - centerLat,
      coords.longitude - centerLon
    );
    const x = local.x * UP_SCALE;
    const y = local.y * UP_SCALE;
    const cos = Math.cos(rotationAngle);
    const sin = Math.sin(rotationAngle);
    const rx = x * cos - y * sin;
    const ry = x * sin + y * cos;

    return { x: rx, y: ry };
  }, [
    routeData?.center_latitude,
    routeData?.center_longitude,
    apiStore?.context?.currentCoordinates,
    rotationAngle,
  ]);

  useEffect(() => {
    const callback = (newPos: { x: number; y: number }, newZoom: number) => {
      setPosition(newPos);
      setScale(newZoom);
    };

    cameraAnimationStore.setUpdateCallback(callback);

    cameraAnimationStore.syncState(position, scale);

    return () => {
      cameraAnimationStore.setUpdateCallback(null);
    };
  }, []);

  useEffect(() => {
    if (
      routeData?.scale_min !== undefined &&
      routeData?.scale_max !== undefined
    ) {
      cameraAnimationStore.setMaxZoom(routeData.scale_max / SCALE_FACTOR);
      cameraAnimationStore.setMinZoom(routeData.scale_min / SCALE_FACTOR);
    }
  }, [routeData?.scale_min, routeData?.scale_max, cameraAnimationStore]);

  useEffect(() => {
    const interval = setInterval(() => {
      const timeSinceActivity = Date.now() - userActivityTimestamp;
      if (timeSinceActivity >= 5000 && !isAutoMode) {
        setIsAutoMode(true);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [userActivityTimestamp, isAutoMode, setIsAutoMode]);

  useEffect(() => {
    if (cameraAnimationStore.isActivelyAnimating) {
      return;
    }

    if (isAutoMode && transformedTramCoords && screenCenter) {
      const transformedStations = stationData
        ? stationData
            .map((station: any) => {
              const centerLat = routeData?.center_latitude;
              const centerLon = routeData?.center_longitude;
              if (centerLat === undefined || centerLon === undefined)
                return null;

              const local = coordinatesToLocal(
                station.latitude - centerLat,
                station.longitude - centerLon
              );
              const x = local.x * UP_SCALE;
              const y = local.y * UP_SCALE;
              const cos = Math.cos(rotationAngle);
              const sin = Math.sin(rotationAngle);
              const rx = x * cos - y * sin;
              const ry = x * sin + y * cos;

              return {
                longitude: rx,
                latitude: ry,
                id: station.id,
              };
            })
            .filter(Boolean)
        : [];

      if (
        transformedTramCoords &&
        screenCenter &&
        transformedStations &&
        scaleLimitsRef.current !== null &&
        scaleLimitsRef.current.max !== null &&
        scaleLimitsRef.current.min &&
        scaleLimitsRef.current.min !== null
      ) {
        cameraAnimationStore.setMaxZoom(scaleLimitsRef.current!.max);
        cameraAnimationStore.setMinZoom(scaleLimitsRef.current!.min);

        cameraAnimationStore.syncState(positionRef.current, scaleRef.current);

        cameraAnimationStore.followTram(
          transformedTramCoords,
          screenCenter,
          transformedStations
        );
      }
    } else if (!isAutoMode) {
      cameraAnimationStore.stopAnimation();
    }
  }, [
    isAutoMode,
    transformedTramCoords,
    screenCenter,
    cameraAnimationStore,
    stationData,
    routeData,
    rotationAngle,
  ]);

  const stationLabels = useMemo(() => {
    if (!stationData || !routeData)
      return [] as Array<{ x: number; y: number; name: string; sub?: string }>;
    const centerLat = routeData.center_latitude;
    const centerLon = routeData.center_longitude;
    if (centerLat === undefined || centerLon === undefined) return [];
    const cos = Math.cos(rotationAngle);
    const sin = Math.sin(rotationAngle);
    const result: Array<{ x: number; y: number; name: string; sub?: string }> =
      [];
    for (let i = 0; i < stationData.length; i++) {
      const st = stationData[i];
      const local = coordinatesToLocal(
        st.latitude - centerLat,
        st.longitude - centerLon
      );
      const x = local.x * UP_SCALE;
      const y = local.y * UP_SCALE;
      const rx = x * cos - y * sin;
      const ry = x * sin + y * cos;
      const DEFAULT_LABEL_OFFSET_X = 25;
      const DEFAULT_LABEL_OFFSET_Y = 0;
      const labelOffsetX =
        st.offset_x === 0 && st.offset_y === 0
          ? DEFAULT_LABEL_OFFSET_X
          : st.offset_x;
      const labelOffsetY =
        st.offset_x === 0 && st.offset_y === 0
          ? DEFAULT_LABEL_OFFSET_Y
          : st.offset_y;
      const textBlockPositionX = rx + labelOffsetX;
      const textBlockPositionY = ry + labelOffsetY;
      const dpr = Math.max(
        1,
        (typeof window !== "undefined" && window.devicePixelRatio) || 1
      );
      const sx = (textBlockPositionX * scale + position.x) / dpr;
      const sy = (textBlockPositionY * scale + position.y) / dpr;
      let sub: string | undefined;
      if ((selectedLanguage as any) === "zh")
        sub = (stationDataZh as any)?.[i]?.name;
      else if (
        (selectedLanguage as any) === "en" ||
        (selectedLanguage as any) === "ru"
      )
        sub = (stationDataEn as any)?.[i]?.name;
      result.push({ x: sx, y: sy, name: st.name, sub });
    }
    return result;
  }, [
    stationData,
    stationDataEn as any,
    stationDataZh as any,
    position.x,
    position.y,
    scale,
    routeData?.center_latitude,
    routeData?.center_longitude,
    rotationAngle,
    selectedLanguage as any,
  ]);

  const stationPoints = useMemo(() => {
    if (!stationData || !routeData) return new Float32Array();
    const centerLat = routeData.center_latitude;
    const centerLon = routeData.center_longitude;
    if (centerLat === undefined || centerLon === undefined)
      return new Float32Array();

    const cos = Math.cos(rotationAngle);
    const sin = Math.sin(rotationAngle);
    const verts: number[] = [];
    for (const s of stationData) {
      const local = coordinatesToLocal(
        s.latitude - centerLat,
        s.longitude - centerLon
      );
      const x = local.x * UP_SCALE;
      const y = local.y * UP_SCALE;
      const rx = x * cos - y * sin;
      const ry = x * sin + y * cos;
      verts.push(rx, ry);
    }
    return new Float32Array(verts);
  }, [
    stationData,
    routeData?.center_latitude,
    routeData?.center_longitude,
    rotationAngle,
  ]);

  const sightPoints = useMemo(() => {
    if (!sightData || !routeData) return new Float32Array();
    const centerLat = routeData.center_latitude;
    const centerLon = routeData.center_longitude;
    if (centerLat === undefined || centerLon === undefined)
      return new Float32Array();

    const cos = Math.cos(rotationAngle);
    const sin = Math.sin(rotationAngle);
    const verts: number[] = [];
    for (const s of sightData) {
      const local = coordinatesToLocal(
        s.latitude - centerLat,
        s.longitude - centerLon
      );
      const x = local.x * UP_SCALE;
      const y = local.y * UP_SCALE;
      const rx = x * cos - y * sin;
      const ry = x * sin + y * cos;
      verts.push(rx, ry);
    }
    return new Float32Array(verts);
  }, [
    sightData,
    routeData?.center_latitude,
    routeData?.center_longitude,
    rotationAngle,
  ]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const gl = initWebGLContext(canvas);
    glRef.current = gl;
    if (!gl) return;

    const vertSrc = `
      attribute vec2 a_pos;
      uniform vec2 u_cameraPos;
      uniform float u_scale;
      uniform vec2 u_resolution;
      void main() {
        vec2 screen = a_pos * u_scale + u_cameraPos;
        vec2 zeroToOne = screen / u_resolution;
        vec2 zeroToTwo = zeroToOne * 2.0;
        vec2 clip = zeroToTwo - 1.0;
        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
      }
    `;
    const fragSrc = `
      precision mediump float;
      uniform vec4 u_color;
      void main() {
        gl_FragColor = u_color;
      }
    `;

    const compile = (type: number, src: string) => {
      const s = gl.createShader(type)!;
      gl.shaderSource(s, src);
      gl.compileShader(s);
      return s;
    };
    const vs = compile(gl.VERTEX_SHADER, vertSrc);
    const fs = compile(gl.FRAGMENT_SHADER, fragSrc);
    const prog = gl.createProgram()!;
    gl.attachShader(prog, vs);
    gl.attachShader(prog, fs);
    gl.linkProgram(prog);
    programRef.current = prog;
    gl.useProgram(prog);

    const a_pos = gl.getAttribLocation(prog, "a_pos");
    const u_cameraPos = gl.getUniformLocation(prog, "u_cameraPos");
    const u_scale = gl.getUniformLocation(prog, "u_scale");
    const u_resolution = gl.getUniformLocation(prog, "u_resolution");
    const u_color = gl.getUniformLocation(prog, "u_color");
    attribsRef.current = { a_pos };
    uniformsRef.current = { u_cameraPos, u_scale, u_resolution, u_color };

    const buffer = gl.createBuffer();
    bufferRef.current = buffer;

    const pointVert = `
      attribute vec2 a_pos;
      uniform vec2 u_cameraPos;
      uniform float u_scale;
      uniform vec2 u_resolution;
      uniform float u_pointSize;
      void main() {
        vec2 screen = a_pos * u_scale + u_cameraPos;
        vec2 zeroToOne = screen / u_resolution;
        vec2 zeroToTwo = zeroToOne * 2.0;
        vec2 clip = zeroToTwo - 1.0;
        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
        gl_PointSize = u_pointSize;
      }
    `;
    const pointFrag = `
      precision mediump float;
      uniform vec4 u_color;
      void main() {
        vec2 c = gl_PointCoord * 2.0 - 1.0;
        float d = dot(c, c);
        if (d > 1.0) discard;
        gl_FragColor = u_color;
      }
    `;
    const vs2 = compile(gl.VERTEX_SHADER, pointVert);
    const fs2 = compile(gl.FRAGMENT_SHADER, pointFrag);
    const pprog = gl.createProgram()!;
    gl.attachShader(pprog, vs2);
    gl.attachShader(pprog, fs2);
    gl.linkProgram(pprog);
    pointProgramRef.current = pprog;
    pointBufferRef.current = gl.createBuffer();

    const lineVert = `
      attribute vec2 a_screen;
      uniform vec2 u_resolution;
      void main(){
        vec2 zeroToOne = a_screen / u_resolution;
        vec2 clip = zeroToOne * 2.0 - 1.0;
        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
      }
    `;
    const lineFrag = `
      precision mediump float;
      uniform vec4 u_color;
      void main(){ gl_FragColor = u_color; }
    `;
    const lv = compile(gl.VERTEX_SHADER, lineVert);
    const lf = compile(gl.FRAGMENT_SHADER, lineFrag);
    const lprog = gl.createProgram()!;
    gl.attachShader(lprog, lv);
    gl.attachShader(lprog, lf);
    gl.linkProgram(lprog);
    screenLineProgramRef.current = lprog;
    screenLineBufferRef.current = gl.createBuffer();

    const handleResize = () => {
      const changed = resizeCanvasToDisplaySize(canvas);
      if (!gl) return;
      setScreenCenter({
        x: canvas.width / 2,
        y: canvas.height / 2,
      });
      if (changed) {
        gl.viewport(0, 0, canvas.width, canvas.height);
      }
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
    };

    handleResize();
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  useEffect(() => {
    const centerLat = routeData?.center_latitude;
    const centerLon = routeData?.center_longitude;
    if (centerLat !== undefined && centerLon !== undefined) {
      const coords: any = apiStore?.context?.currentCoordinates;
      if (coords) {
        const local = coordinatesToLocal(
          coords.latitude - centerLat,
          coords.longitude - centerLon
        );
        const x = local.x * UP_SCALE;
        const y = local.y * UP_SCALE;
        const cos = Math.cos(rotationAngle),
          sin = Math.sin(rotationAngle);
        const rx = x * cos - y * sin;
        const ry = x * sin + y * cos;

        if (isAutoMode) {
          animateYellowDotTo(rx, ry);
        } else {
          setYellowDotPositionImmediate(rx, ry);
        }
      }
    }
  }, [
    routeData?.center_latitude,
    routeData?.center_longitude,
    rotationAngle,
    apiStore?.context?.currentCoordinates?.latitude,
    apiStore?.context?.currentCoordinates?.longitude,
    isAutoMode,
    animateYellowDotTo,
    setYellowDotPositionImmediate,
  ]);

  useEffect(() => {
    const gl = glRef.current;
    const canvas = canvasRef.current;
    const prog = programRef.current;
    const buffer = bufferRef.current;
    const attribs = attribsRef.current;
    const uniforms = uniformsRef.current;
    const pprog = pointProgramRef.current;
    const pbuffer = pointBufferRef.current;
    if (
      !gl ||
      !canvas ||
      !prog ||
      !buffer ||
      !attribs ||
      !uniforms ||
      !pprog ||
      !pbuffer
    )
      return;

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(prog);
    gl.uniform2f(uniforms.u_cameraPos, position.x, position.y);
    gl.uniform1f(uniforms.u_scale, scale);
    gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, routePath, gl.STATIC_DRAW);
    gl.enableVertexAttribArray(attribs.a_pos);
    gl.vertexAttribPointer(attribs.a_pos, 2, gl.FLOAT, false, 0, 0);

    const vcount = routePath.length / 2;
    let tramSegIndex = -1;
    {
      const centerLatTmp = routeData?.center_latitude;
      const centerLonTmp = routeData?.center_longitude;
      if (centerLatTmp !== undefined && centerLonTmp !== undefined) {
        const coordsAny: any = apiStore?.context?.currentCoordinates;
        if (coordsAny) {
          const loc = coordinatesToLocal(
            coordsAny.latitude - centerLatTmp,
            coordsAny.longitude - centerLonTmp
          );
          const wx = loc.x * UP_SCALE;
          const wy = loc.y * UP_SCALE;
          const cosR = Math.cos(rotationAngle),
            sinR = Math.sin(rotationAngle);
          const tX = wx * cosR - wy * sinR;
          const tY = wx * sinR + wy * cosR;
          let best = -1,
            bestD = Infinity;
          for (let i = 0; i < vcount - 1; i++) {
            const p1x = routePath[i * 2],
              p1y = routePath[i * 2 + 1];
            const p2x = routePath[(i + 1) * 2],
              p2y = routePath[(i + 1) * 2 + 1];
            const dx = p2x - p1x,
              dy = p2y - p1y;
            const len2 = dx * dx + dy * dy;
            if (!len2) continue;
            const t = ((tX - p1x) * dx + (tY - p1y) * dy) / len2;
            const cl = Math.max(0, Math.min(1, t));
            const px = p1x + cl * dx,
              py = p1y + cl * dy;
            const d = Math.hypot(tX - px, tY - py);
            if (d < bestD) {
              bestD = d;
              best = i;
            }
          }
          tramSegIndex = best;
        }
      }
    }

    const vertexCount = routePath.length / 2;
    if (vertexCount > 1) {
      const generateThickLine = (points: Float32Array, width: number) => {
        const vertices: number[] = [];
        const halfWidth = width / 2;

        if (points.length < 4) return new Float32Array();

        for (let i = 0; i < points.length - 2; i += 2) {
          const x1 = points[i];
          const y1 = points[i + 1];
          const x2 = points[i + 2];
          const y2 = points[i + 3];

          const dx = x2 - x1;
          const dy = y2 - y1;
          const length = Math.sqrt(dx * dx + dy * dy);
          if (length === 0) continue;

          const perpX = (-dy / length) * halfWidth;
          const perpY = (dx / length) * halfWidth;

          vertices.push(x1 + perpX, y1 + perpY);
          vertices.push(x1 - perpX, y1 - perpY);
          vertices.push(x2 + perpX, y2 + perpY);

          vertices.push(x1 - perpX, y1 - perpY);
          vertices.push(x2 - perpX, y2 - perpY);
          vertices.push(x2 + perpX, y2 + perpY);

          if (i < points.length - 4) {
            const x3 = points[i + 4];
            const y3 = points[i + 5];

            const dx2 = x3 - x2;
            const dy2 = y3 - y2;
            const length2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
            if (length2 > 0) {
              const perpX2 = (-dy2 / length2) * halfWidth;
              const perpY2 = (dx2 / length2) * halfWidth;

              vertices.push(x2 + perpX, y2 + perpY);
              vertices.push(x2 - perpX, y2 - perpY);
              vertices.push(x2 + perpX2, y2 + perpY2);

              vertices.push(x2 - perpX, y2 - perpY);
              vertices.push(x2 - perpX2, y2 - perpY2);
              vertices.push(x2 + perpX2, y2 + perpY2);
            }
          }
        }

        return new Float32Array(vertices);
      };

      const lineWidth = Math.min(6);
      const r1 = ((PATH_COLOR >> 16) & 0xff) / 255;
      const g1 = ((PATH_COLOR >> 8) & 0xff) / 255;
      const b1 = (PATH_COLOR & 0xff) / 255;
      gl.uniform4f(uniforms.u_color, r1, g1, b1, 1);

      if (tramSegIndex >= 0) {
        const animatedPos = animatedYellowDotPosition;
        if (
          animatedPos &&
          animatedPos.x !== undefined &&
          animatedPos.y !== undefined
        ) {
          const passedPoints: number[] = [];

          for (let i = 0; i <= tramSegIndex; i++) {
            passedPoints.push(routePath[i * 2], routePath[i * 2 + 1]);
          }

          passedPoints.push(animatedPos.x, animatedPos.y);

          if (passedPoints.length >= 4) {
            const thickLineVertices = generateThickLine(
              new Float32Array(passedPoints),
              lineWidth
            );
            gl.bufferData(gl.ARRAY_BUFFER, thickLineVertices, gl.STATIC_DRAW);
            gl.drawArrays(gl.TRIANGLES, 0, thickLineVertices.length / 2);
          }
        }
      }

      const r2 = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
      const g2 = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
      const b2 = (UNPASSED_STATION_COLOR & 0xff) / 255;
      gl.uniform4f(uniforms.u_color, r2, g2, b2, 1);

      const animatedPos = animatedYellowDotPosition;
      if (
        animatedPos &&
        animatedPos.x !== undefined &&
        animatedPos.y !== undefined
      ) {
        const unpassedPoints: number[] = [];

        unpassedPoints.push(animatedPos.x, animatedPos.y);

        for (let i = tramSegIndex + 1; i < vertexCount; i++) {
          unpassedPoints.push(routePath[i * 2], routePath[i * 2 + 1]);
        }

        if (unpassedPoints.length >= 4) {
          const thickLineVertices = generateThickLine(
            new Float32Array(unpassedPoints),
            lineWidth
          );
          gl.bufferData(gl.ARRAY_BUFFER, thickLineVertices, gl.STATIC_DRAW);
          gl.drawArrays(gl.TRIANGLES, 0, thickLineVertices.length / 2);
        }
      }
    }

    if (stationPoints.length > 0) {
      gl.useProgram(pprog);
      const a_pos_pts = gl.getAttribLocation(pprog, "a_pos");
      const u_cameraPos_pts = gl.getUniformLocation(pprog, "u_cameraPos");
      const u_scale_pts = gl.getUniformLocation(pprog, "u_scale");
      const u_resolution_pts = gl.getUniformLocation(pprog, "u_resolution");
      const u_pointSize = gl.getUniformLocation(pprog, "u_pointSize");
      const u_color_pts = gl.getUniformLocation(pprog, "u_color");

      gl.uniform2f(u_cameraPos_pts, position.x, position.y);
      gl.uniform1f(u_scale_pts, scale);
      gl.uniform2f(u_resolution_pts, canvas.width, canvas.height);
      gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
      gl.bufferData(gl.ARRAY_BUFFER, stationPoints, gl.STATIC_DRAW);
      gl.enableVertexAttribArray(a_pos_pts);
      gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);

      gl.uniform1f(u_pointSize, 10 * scale * 1.5);
      const r_outline = ((BACKGROUND_COLOR >> 16) & 0xff) / 255;
      const g_outline = ((BACKGROUND_COLOR >> 8) & 0xff) / 255;
      const b_outline = (BACKGROUND_COLOR & 0xff) / 255;
      gl.uniform4f(u_color_pts, r_outline, g_outline, b_outline, 1);
      gl.drawArrays(gl.POINTS, 0, stationPoints.length / 2);

      gl.uniform1f(u_pointSize, 8.0 * scale * 1.5);

      if (tramSegIndex >= 0) {
        const passedStations = [];
        for (let i = 0; i < stationData.length; i++) {
          if (i <= tramSegIndex) {
            passedStations.push(stationPoints[i * 2], stationPoints[i * 2 + 1]);
          }
        }
        if (passedStations.length > 0) {
          const r_passed = ((PATH_COLOR >> 16) & 0xff) / 255;
          const g_passed = ((PATH_COLOR >> 8) & 0xff) / 255;
          const b_passed = (PATH_COLOR & 0xff) / 255;
          gl.uniform4f(u_color_pts, r_passed, g_passed, b_passed, 1);
          gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array(passedStations),
            gl.STATIC_DRAW
          );
          gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
        }
      }

      if (tramSegIndex >= 0) {
        const unpassedStations = [];
        for (let i = 0; i < stationData.length; i++) {
          if (i > tramSegIndex) {
            unpassedStations.push(
              stationPoints[i * 2],
              stationPoints[i * 2 + 1]
            );
          }
        }
        if (unpassedStations.length > 0) {
          const r_unpassed = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
          const g_unpassed = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
          const b_unpassed = (UNPASSED_STATION_COLOR & 0xff) / 255;
          gl.uniform4f(u_color_pts, r_unpassed, g_unpassed, b_unpassed, 1);
          gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array(unpassedStations),
            gl.STATIC_DRAW
          );
          gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
        }
      } else {
        const r_unpassed = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
        const g_unpassed = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
        const b_unpassed = (UNPASSED_STATION_COLOR & 0xff) / 255;
        gl.uniform4f(u_color_pts, r_unpassed, g_unpassed, b_unpassed, 1);
        gl.bufferData(gl.ARRAY_BUFFER, stationPoints, gl.STATIC_DRAW);
        gl.drawArrays(gl.POINTS, 0, stationPoints.length / 2);
      }
    }

    const a_pos_pts = gl.getAttribLocation(pprog, "a_pos");
    const u_cameraPos_pts = gl.getUniformLocation(pprog, "u_cameraPos");
    const u_scale_pts = gl.getUniformLocation(pprog, "u_scale");
    const u_resolution_pts = gl.getUniformLocation(pprog, "u_resolution");
    const u_pointSize = gl.getUniformLocation(pprog, "u_pointSize");
    const u_color_pts = gl.getUniformLocation(pprog, "u_color");

    gl.uniform2f(u_cameraPos_pts, position.x, position.y);
    gl.uniform1f(u_scale_pts, scale);
    gl.uniform2f(u_resolution_pts, canvas.width, canvas.height);

    const toPointsArray = (arr: number[]) => new Float32Array(arr);

    const pathPts: { x: number; y: number }[] = [];
    for (let i = 0; i < routePath.length; i += 2)
      pathPts.push({ x: routePath[i], y: routePath[i + 1] });
    const getSeg = (px: number, py: number) => {
      if (pathPts.length < 2) return -1;
      let best = -1,
        bestD = Infinity;
      for (let i = 0; i < pathPts.length - 1; i++) {
        const p1 = pathPts[i],
          p2 = pathPts[i + 1];
        const dx = p2.x - p1.x,
          dy = p2.y - p1.y;
        const len2 = dx * dx + dy * dy;
        if (!len2) continue;
        const t = ((px - p1.x) * dx + (py - p1.y) * dy) / len2;
        const tt = Math.max(0, Math.min(1, t));
        const cx = p1.x + tt * dx,
          cy = p1.y + tt * dy;
        const d = Math.hypot(px - cx, py - cy);
        if (d < bestD) {
          bestD = d;
          best = i;
        }
      }
      return best;
    };

    let tramSegForStations = -1;
    {
      const cLat = routeData?.center_latitude,
        cLon = routeData?.center_longitude;
      const tram = apiStore?.context?.currentCoordinates as any;
      if (tram && cLat !== undefined && cLon !== undefined) {
        const loc = coordinatesToLocal(
          tram.latitude - cLat,
          tram.longitude - cLon
        );
        const wx = loc.x * UP_SCALE,
          wy = loc.y * UP_SCALE;
        const cosR = Math.cos(rotationAngle),
          sinR = Math.sin(rotationAngle);
        const tx = wx * cosR - wy * sinR,
          ty = wx * sinR + wy * cosR;
        tramSegForStations = getSeg(tx, ty);
      }
    }

    const passedStations: number[] = [];
    const unpassedStations: number[] = [];
    for (let i = 0; i < stationPoints.length; i += 2) {
      const sx = stationPoints[i],
        sy = stationPoints[i + 1];
      const seg = getSeg(sx, sy);
      if (tramSegForStations !== -1 && seg !== -1 && seg < tramSegForStations)
        passedStations.push(sx, sy);
      else unpassedStations.push(sx, sy);
    }

    const outlineSize = 10.0 * scale * 2,
      coreSize = 8.0 * scale * 2;

    gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      toPointsArray(unpassedStations),
      gl.STREAM_DRAW
    );
    gl.enableVertexAttribArray(a_pos_pts);
    gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
    gl.uniform1f(u_pointSize, outlineSize);
    gl.uniform4f(
      u_color_pts,
      ((BACKGROUND_COLOR >> 16) & 255) / 255,
      ((BACKGROUND_COLOR >> 8) & 255) / 255,
      (BACKGROUND_COLOR & 255) / 255,
      1
    );
    if (unpassedStations.length)
      gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
    gl.uniform1f(u_pointSize, coreSize);
    gl.uniform4f(
      u_color_pts,
      ((UNPASSED_STATION_COLOR >> 16) & 255) / 255,
      ((UNPASSED_STATION_COLOR >> 8) & 255) / 255,
      (UNPASSED_STATION_COLOR & 255) / 255,
      1
    );
    if (unpassedStations.length)
      gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);

    gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      toPointsArray(passedStations),
      gl.STREAM_DRAW
    );
    gl.enableVertexAttribArray(a_pos_pts);
    gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
    gl.uniform1f(u_pointSize, outlineSize);
    gl.uniform4f(
      u_color_pts,
      ((BACKGROUND_COLOR >> 16) & 255) / 255,
      ((BACKGROUND_COLOR >> 8) & 255) / 255,
      (BACKGROUND_COLOR & 255) / 255,
      1
    );
    if (passedStations.length)
      gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
    gl.uniform1f(u_pointSize, coreSize);
    gl.uniform4f(
      u_color_pts,
      ((PATH_COLOR >> 16) & 255) / 255,
      ((PATH_COLOR >> 8) & 255) / 255,
      (PATH_COLOR & 255) / 255,
      1
    );
    if (passedStations.length)
      gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);

    if (
      stationData &&
      stationData.length > 0 &&
      routeData &&
      apiStore?.context
    ) {
      const centerLat = routeData.center_latitude;
      const centerLon = routeData.center_longitude;
      if (centerLat !== undefined && centerLon !== undefined) {
        const cos = Math.cos(rotationAngle);
        const sin = Math.sin(rotationAngle);

        const startStationData = stationData.find(
          (station) => station.id.toString() === apiStore.context?.startStopId
        );
        const endStationData = stationData.find(
          (station) => station.id.toString() === apiStore.context?.endStopId
        );

        const terminalStations: number[] = [];

        if (startStationData) {
          const startLocal = coordinatesToLocal(
            startStationData.latitude - centerLat,
            startStationData.longitude - centerLon
          );
          const startX = startLocal.x * UP_SCALE;
          const startY = startLocal.y * UP_SCALE;
          const startRx = startX * cos - startY * sin;
          const startRy = startX * sin + startY * cos;
          terminalStations.push(startRx, startRy);
        }

        if (endStationData) {
          const endLocal = coordinatesToLocal(
            endStationData.latitude - centerLat,
            endStationData.longitude - centerLon
          );
          const endX = endLocal.x * UP_SCALE;
          const endY = endLocal.y * UP_SCALE;
          const endRx = endX * cos - endY * sin;
          const endRy = endX * sin + endY * cos;
          terminalStations.push(endRx, endRy);
        }

        if (terminalStations.length > 0) {
          const terminalStationData: any[] = [];
          if (startStationData) terminalStationData.push(startStationData);
          if (endStationData) terminalStationData.push(endStationData);

          let tramSegIndex = -1;
          const coords: any = apiStore?.context?.currentCoordinates;
          if (coords && centerLat !== undefined && centerLon !== undefined) {
            const local = coordinatesToLocal(
              coords.latitude - centerLat,
              coords.longitude - centerLon
            );
            const wx = local.x * UP_SCALE;
            const wy = local.y * UP_SCALE;
            const cosR = Math.cos(rotationAngle);
            const sinR = Math.sin(rotationAngle);
            const tx = wx * cosR - wy * sinR;
            const ty = wx * sinR + wy * cosR;

            let best = -1;
            let bestD = Infinity;
            for (let i = 0; i < routePath.length - 2; i += 2) {
              const p1x = routePath[i];
              const p1y = routePath[i + 1];
              const p2x = routePath[i + 2];
              const p2y = routePath[i + 3];
              const dx = p2x - p1x;
              const dy = p2y - p1y;
              const len2 = dx * dx + dy * dy;
              if (!len2) continue;
              const t = ((tx - p1x) * dx + (ty - p1y) * dy) / len2;
              const cl = Math.max(0, Math.min(1, t));
              const px = p1x + cl * dx;
              const py = p1y + cl * dy;
              const d = Math.hypot(tx - px, ty - py);
              if (d < bestD) {
                bestD = d;
                best = i / 2;
              }
            }
            tramSegIndex = best;
          }

          const isStartPassed = startStationData
            ? (() => {
                const sx = terminalStations[0];
                const sy = terminalStations[1];
                const seg = (() => {
                  if (routePath.length < 4) return -1;
                  let best = -1;
                  let bestD = Infinity;
                  for (let i = 0; i < routePath.length - 2; i += 2) {
                    const p1x = routePath[i];
                    const p1y = routePath[i + 1];
                    const p2x = routePath[i + 2];
                    const p2y = routePath[i + 3];
                    const dx = p2x - p1x;
                    const dy = p2y - p1y;
                    const len2 = dx * dx + dy * dy;
                    if (!len2) continue;
                    const t = ((sx - p1x) * dx + (sy - p1y) * dy) / len2;
                    const cl = Math.max(0, Math.min(1, t));
                    const px = p1x + cl * dx;
                    const py = p1y + cl * dy;
                    const d = Math.hypot(sx - px, sy - py);
                    if (d < bestD) {
                      bestD = d;
                      best = i / 2;
                    }
                  }
                  return best;
                })();
                return tramSegIndex !== -1 && seg !== -1 && seg < tramSegIndex;
              })()
            : false;

          const isEndPassed = endStationData
            ? (() => {
                const ex = terminalStations[terminalStations.length - 2];
                const ey = terminalStations[terminalStations.length - 1];
                const seg = (() => {
                  if (routePath.length < 4) return -1;
                  let best = -1;
                  let bestD = Infinity;
                  for (let i = 0; i < routePath.length - 2; i += 2) {
                    const p1x = routePath[i];
                    const p1y = routePath[i + 1];
                    const p2x = routePath[i + 2];
                    const p2y = routePath[i + 3];
                    const dx = p2x - p1x;
                    const dy = p2y - p1y;
                    const len2 = dx * dx + dy * dy;
                    if (!len2) continue;
                    const t = ((ex - p1x) * dx + (ey - p1y) * dy) / len2;
                    const cl = Math.max(0, Math.min(1, t));
                    const px = p1x + cl * dx;
                    const py = p1y + cl * dy;
                    const d = Math.hypot(ex - px, ey - py);
                    if (d < bestD) {
                      bestD = d;
                      best = i / 2;
                    }
                  }
                  return best;
                })();
                return tramSegIndex !== -1 && seg !== -1 && seg < tramSegIndex;
              })()
            : false;

          gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
          gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array(terminalStations),
            gl.STREAM_DRAW
          );
          gl.enableVertexAttribArray(a_pos_pts);
          gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);

          gl.uniform1f(u_pointSize, 18.0 * scale);
          if (startStationData && endStationData) {
            if (isStartPassed) {
              gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
            } else {
              gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
            }
            gl.drawArrays(gl.POINTS, 0, 1);

            if (isEndPassed) {
              gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
            } else {
              gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
            }
            gl.drawArrays(gl.POINTS, 1, 1);
          } else {
            const isPassed = startStationData ? isStartPassed : isEndPassed;
            if (isPassed) {
              gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
            } else {
              gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
            }
            gl.drawArrays(gl.POINTS, 0, terminalStations.length / 2);
          }

          gl.uniform1f(u_pointSize, 11.0 * scale);
          const r_center = ((BACKGROUND_COLOR >> 16) & 0xff) / 255;
          const g_center = ((BACKGROUND_COLOR >> 8) & 0xff) / 255;
          const b_center = (BACKGROUND_COLOR & 0xff) / 255;
          gl.uniform4f(u_color_pts, r_center, g_center, b_center, 1.0);
          gl.drawArrays(gl.POINTS, 0, terminalStations.length / 2);
        }
      }
    }

    if (animatedYellowDotPosition) {
      const rx = animatedYellowDotPosition.x;
      const ry = animatedYellowDotPosition.y;

      gl.uniform1f(u_pointSize, 13.3333 * scale);
      gl.uniform4f(u_color_pts, 1.0, 1.0, 0.0, 1.0);
      const tmp = new Float32Array([rx, ry]);
      gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
      gl.bufferData(gl.ARRAY_BUFFER, tmp, gl.STREAM_DRAW);
      gl.enableVertexAttribArray(a_pos_pts);
      gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
      gl.drawArrays(gl.POINTS, 0, 1);
    }
  }, [
    routePath,
    stationPoints,
    sightPoints,
    position.x,
    position.y,
    scale,
    animatedYellowDotPosition?.x,
    animatedYellowDotPosition?.y,
  ]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    if (!routePath || routePath.length < 4) return;

    let minX = Infinity,
      minY = Infinity,
      maxX = -Infinity,
      maxY = -Infinity;
    for (let i = 0; i < routePath.length; i += 2) {
      const x = routePath[i];
      const y = routePath[i + 1];
      if (x < minX) minX = x;
      if (y < minY) minY = y;
      if (x > maxX) maxX = x;
      if (y > maxY) maxY = y;
    }
    if (
      !isFinite(minX) ||
      !isFinite(minY) ||
      !isFinite(maxX) ||
      !isFinite(maxY)
    )
      return;

    const worldWidth = Math.max(1, maxX - minX);
    const worldHeight = Math.max(1, maxY - minY);

    const margin = 0.1;
    const targetScale = Math.min(
      (canvas.width * (1 - margin)) / worldWidth,
      (canvas.height * (1 - margin)) / worldHeight
    );

    const centerX = (minX + maxX) / 2;
    const centerY = (minY + maxY) / 2;

    const clampedScale = clampScale(targetScale);

    setScaleRef.current(clampedScale);
    setPositionRef.current({
      x: canvas.width / 2 - centerX * clampedScale,
      y: canvas.height / 2 - centerY * clampedScale,
    });
  }, [routePath]);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    let isDragging = false;
    let startMouse = { x: 0, y: 0 };
    let startPos = { x: 0, y: 0 };

    const activePointers = new Map<number, { x: number; y: number }>();
    let isPinching = false;
    let pinchStart: {
      distance: number;
      midpoint: { x: number; y: number };
      scale: number;
      position: { x: number; y: number };
    } | null = null;

    const getDistance = (
      p1: { x: number; y: number },
      p2: { x: number; y: number }
    ) => Math.hypot(p2.x - p1.x, p2.y - p1.y);

    const getMidpoint = (
      p1: { x: number; y: number },
      p2: { x: number; y: number }
    ) => ({
      x: (p1.x + p2.x) / 2,
      y: (p1.y + p2.y) / 2,
    });

    const onPointerDown = (e: PointerEvent) => {
      updateUserActivity();
      if (isAutoMode) {
        setIsAutoMode(false);
      }
      cameraAnimationStore.stopAnimation();

      canvas.setPointerCapture(e.pointerId);
      const rect = canvas.getBoundingClientRect();
      activePointers.set(e.pointerId, {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      });
      if (activePointers.size === 1) {
        isDragging = true;
        startMouse = { x: e.clientX - rect.left, y: e.clientY - rect.top };
        startPos = { x: positionRef.current.x, y: positionRef.current.y };
      } else if (activePointers.size === 2) {
        isDragging = false;
        const [p1, p2] = Array.from(activePointers.values());
        pinchStart = {
          distance: getDistance(p1, p2),
          midpoint: getMidpoint(p1, p2),
          scale: scaleRef.current,
          position: { x: positionRef.current.x, y: positionRef.current.y },
        };
        isPinching = true;
      }
    };

    const onPointerMove = (e: PointerEvent) => {
      if (!activePointers.has(e.pointerId)) return;

      updateUserActivity();

      const rect = canvas.getBoundingClientRect();
      activePointers.set(e.pointerId, {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      });

      if (activePointers.size === 2) {
        isDragging = false;

        const pointersArray = Array.from(activePointers.values());
        if (pointersArray.length === 2) {
          const [p1, p2] = pointersArray;

          if (!isPinching || pinchStart === null) {
            isPinching = true;
            pinchStart = {
              distance: getDistance(p1, p2),
              midpoint: getMidpoint(p1, p2),
              scale: scaleRef.current,
              position: { x: positionRef.current.x, y: positionRef.current.y },
            };
          }

          if (pinchStart) {
            const currentDistance = getDistance(p1, p2);
            const zoomFactor = currentDistance / pinchStart.distance;
            const unclampedScale = pinchStart.scale * zoomFactor;
            const newScale = clampScale(Math.max(0.1, unclampedScale));

            const k = newScale / pinchStart.scale;
            const newPosition = {
              x: pinchStart.position.x * k + pinchStart.midpoint.x * (1 - k),
              y: pinchStart.position.y * k + pinchStart.midpoint.y * (1 - k),
            };
            setPositionRef.current(newPosition);
            setScaleRef.current(newScale);
          }
        }
      } else if (isDragging && activePointers.size === 1) {
        const p = Array.from(activePointers.values())[0];

        if (
          !startMouse ||
          !startPos ||
          typeof startMouse.x !== "number" ||
          typeof startMouse.y !== "number" ||
          typeof startPos.x !== "number" ||
          typeof startPos.y !== "number"
        ) {
          console.warn(
            "WebGLMap: Некорректные значения startMouse или startPos:",
            {
              startMouse,
              startPos,
              p,
            }
          );
          return;
        }

        const dx = p.x - startMouse.x;
        const dy = p.y - startMouse.y;

        setPositionRef.current({ x: startPos.x + dx, y: startPos.y + dy });
      }
    };

    const onPointerUp = (e: PointerEvent) => {
      updateUserActivity();

      canvas.releasePointerCapture(e.pointerId);
      activePointers.delete(e.pointerId);
      if (activePointers.size < 2) {
        isPinching = false;
        pinchStart = null;
      }
      if (activePointers.size === 0) {
        isDragging = false;
      } else if (activePointers.size === 1) {
        const p = Array.from(activePointers.values())[0];
        startPos = { x: positionRef.current.x, y: positionRef.current.y };
        startMouse = { x: p.x, y: p.y };
        isDragging = true;
      }
    };

    const onPointerCancel = (e: PointerEvent) => {
      updateUserActivity();
      canvas.releasePointerCapture(e.pointerId);
      activePointers.delete(e.pointerId);
      isPinching = false;
      pinchStart = null;
      if (activePointers.size === 0) {
        isDragging = false;
      }
    };

    const onWheel = (e: WheelEvent) => {
      e.preventDefault();

      updateUserActivity();
      if (isAutoMode) {
        setIsAutoMode(false);
      }
      cameraAnimationStore.stopAnimation();

      const rect = canvas.getBoundingClientRect();
      const mouseX =
        (e.clientX - rect.left) * (canvas.width / canvas.clientWidth);
      const mouseY =
        (e.clientY - rect.top) * (canvas.height / canvas.clientHeight);
      const delta = e.deltaY > 0 ? 0.9 : 1.1;
      const unclampedScale = scaleRef.current * delta;
      const newScale = clampScale(Math.max(0.1, unclampedScale));

      const k = newScale / scaleRef.current;
      const newPosition = {
        x: positionRef.current.x * k + mouseX * (1 - k),
        y: positionRef.current.y * k + mouseY * (1 - k),
      };
      setScaleRef.current(newScale);
      setPositionRef.current(newPosition);
    };

    canvas.addEventListener("pointerdown", onPointerDown);
    canvas.addEventListener("pointermove", onPointerMove);
    canvas.addEventListener("pointerup", onPointerUp);
    canvas.addEventListener("pointercancel", onPointerCancel);
    canvas.addEventListener("pointerleave", onPointerUp);
    canvas.addEventListener("wheel", onWheel, { passive: false });

    return () => {
      canvas.removeEventListener("pointerdown", onPointerDown);
      canvas.removeEventListener("pointermove", onPointerMove);
      canvas.removeEventListener("pointerup", onPointerUp);
      canvas.removeEventListener("pointercancel", onPointerCancel);
      canvas.removeEventListener("pointerleave", onPointerUp);
      canvas.removeEventListener("wheel", onWheel as any);
    };
  }, [
    updateUserActivity,
    setIsAutoMode,
    cameraAnimationStore,
    isAutoMode,
    clampScale,
  ]);

  return (
    <div
      className="map-layer"
      style={{ width: "100%", height: "100vh", position: "relative" }}
    >
      <canvas
        ref={canvasRef}
        style={{ width: "100%", height: "100%", display: "block", zIndex: 0 }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: "none",
          zIndex: 9999,
        }}
      >
        {stationLabels.map((l, idx) => (
          <div
            key={idx}
            style={{
              position: "absolute",
              left: l.x,
              top: l.y,
              transform: "translate(0, -50%)",
              color: "#fff",
              fontFamily: "Roboto",
            }}
          >
            <div style={{ fontWeight: 700, fontSize: 16 }}>{l.name}</div>
            {l.sub ? (
              <div
                style={{
                  color: "#CBCBCB",
                  fontWeight: 400,
                  fontSize: 13,
                  marginTop: 2,
                }}
              >
                {l.sub}
              </div>
            ) : null}
          </div>
        ))}
        {sightData?.map((s: any, i: number) => {
          const centerLat = routeData?.center_latitude;
          const centerLon = routeData?.center_longitude;
          if (centerLat === undefined || centerLon === undefined) return null;
          const cos = Math.cos(rotationAngle);
          const sin = Math.sin(rotationAngle);
          const local = coordinatesToLocal(
            s.latitude - centerLat,
            s.longitude - centerLon
          );
          const x = local.x * UP_SCALE;
          const y = local.y * UP_SCALE;
          const rx = x * cos - y * sin;
          const ry = x * sin + y * cos;
          const dpr = Math.max(
            1,
            (typeof window !== "undefined" && window.devicePixelRatio) || 1
          );
          const sx = (rx * scale + position.x) / dpr;
          const sy = (ry * scale + position.y) / dpr;
          const size = 30;

          const handleSightClick = () => {
            const {
              setSelectedSightId,
              setIsManualSelection,
              setIsRightWidgetSelectorOpen,
              closeGovernorModal,
            } = useGeolocationStore();
            setSelectedSightId(String(s.id));
            setIsManualSelection(true);
            setIsRightWidgetSelectorOpen(false);
            closeGovernorModal();
          };

          return (
            <img
              key={`sight-${s.id}`}
              src={sightIcon}
              alt=""
              width={size}
              height={size}
              style={{
                position: "absolute",
                left: sx - size / 2,
                top: sy - size / 2,
                pointerEvents: "auto",
                cursor: "pointer",
              }}
              onClick={handleSightClick}
            />
          );
        })}

        {(() => {
          if (!routeData) return null;
          const centerLat = routeData.center_latitude;
          const centerLon = routeData.center_longitude;
          if (centerLat === undefined || centerLon === undefined) return null;

          const coords: any = apiStore?.context?.currentCoordinates;
          if (!coords) return null;

          const local = coordinatesToLocal(
            coords.latitude - centerLat,
            coords.longitude - centerLon
          );
          const wx = local.x * UP_SCALE;
          const wy = local.y * UP_SCALE;
          const cosR = Math.cos(rotationAngle);
          const sinR = Math.sin(rotationAngle);
          const rx = wx * cosR - wy * sinR;
          const ry = wx * sinR + wy * cosR;
          const dpr2 = Math.max(
            1,
            (typeof window !== "undefined" && window.devicePixelRatio) || 1
          );
          const screenX = (rx * scale + position.x) / dpr2;
          const screenY = (ry * scale + position.y) / dpr2;

          const pathPts: { x: number; y: number }[] = [];
          for (let i = 0; i < routePath.length; i += 2)
            pathPts.push({ x: routePath[i], y: routePath[i + 1] });
          const stationsForAngle = (stationData || []).map((st: any) => {
            const loc = coordinatesToLocal(
              st.latitude - centerLat,
              st.longitude - centerLon
            );
            const x = loc.x * UP_SCALE,
              y = loc.y * UP_SCALE;
            const rx2 = x * cosR - y * sinR,
              ry2 = x * sinR + y * cosR;
            return {
              longitude: rx2,
              latitude: ry2,
              offset_x: st.offset_x,
              offset_y: st.offset_y,
            };
          });
          let tramSegIndex = -1;
          if (routePath.length >= 4) {
            let best = -1,
              bestD = Infinity;
            for (let i = 0; i < routePath.length - 2; i += 2) {
              const p1x = routePath[i],
                p1y = routePath[i + 1];
              const p2x = routePath[i + 2],
                p2y = routePath[i + 3];
              const dx = p2x - p1x,
                dy = p2y - p1y;
              const len2 = dx * dx + dy * dy;
              if (!len2) continue;
              const t = ((rx - p1x) * dx + (ry - p1y) * dy) / len2;
              const cl = Math.max(0, Math.min(1, t));
              const px = p1x + cl * dx,
                py = p1y + cl * dy;
              const d = Math.hypot(rx - px, ry - py);
              if (d < bestD) {
                bestD = d;
                best = i / 2;
              }
            }
            tramSegIndex = best;
          }
          const optimalAngle = (() => {
            const testRadiusInMap = 100 / scale;
            const minPath = 60,
              minPassed = 60,
              minStation = 50;
            let bestAng = 0,
              bestScore = Infinity;
            for (let i = 0; i < 12; i++) {
              const ang = (i * Math.PI * 2) / 12;
              const tx = rx + Math.cos(ang) * testRadiusInMap;
              const ty = ry + Math.sin(ang) * testRadiusInMap;
              const distPath = (function () {
                if (pathPts.length < 2) return Infinity;
                let md = Infinity;
                for (let k = 0; k < pathPts.length - 1; k++) {
                  const p1 = pathPts[k],
                    p2 = pathPts[k + 1];
                  const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
                  if (!L2) continue;
                  const tt =
                    ((tx - p1.x) * (p2.x - p1.x) +
                      (ty - p1.y) * (p2.y - p1.y)) /
                    L2;
                  const cl = Math.max(0, Math.min(1, tt));
                  const px = p1.x + cl * (p2.x - p1.x),
                    py = p1.y + cl * (p2.y - p1.y);
                  const d = Math.hypot(tx - px, ty - py);
                  if (d < md) md = d;
                }
                return md * scale;
              })();
              const distPassed = (function () {
                if (pathPts.length < 2 || tramSegIndex < 0) return Infinity;
                let md = Infinity;
                for (
                  let k = 0;
                  k <= Math.min(tramSegIndex, pathPts.length - 2);
                  k++
                ) {
                  const p1 = pathPts[k],
                    p2 = pathPts[k + 1];
                  const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
                  if (!L2) continue;
                  const tt =
                    ((tx - p1.x) * (p2.x - p1.x) +
                      (ty - p1.y) * (p2.y - p1.y)) /
                    L2;
                  const cl = Math.max(0, Math.min(1, tt));
                  const px = p1.x + cl * (p2.x - p1.x),
                    py = p1.y + cl * (p2.y - p1.y);
                  const d = Math.hypot(tx - px, ty - py);
                  if (d < md) md = d;
                }
                return md * scale;
              })();
              const distStation = (function () {
                if (!stationsForAngle.length) return Infinity;
                const DEFAULT_LABEL_OFFSET_X = 25,
                  DEFAULT_LABEL_OFFSET_Y = 0;
                let md = Infinity;
                for (const st of stationsForAngle) {
                  const offsetX =
                    st.offset_x === 0 && st.offset_y === 0
                      ? DEFAULT_LABEL_OFFSET_X
                      : st.offset_x || 0 * 3;
                  const offsetY =
                    st.offset_x === 0 && st.offset_y === 0
                      ? DEFAULT_LABEL_OFFSET_Y
                      : st.offset_y || 0 * 3;
                  const lx = st.longitude + offsetX,
                    ly = st.latitude + offsetY;
                  const d = Math.hypot(tx - lx, ty - ly);
                  if (d < md) md = d;
                }
                return md * scale;
              })();
              let weight = 0;
              if (distPath < minPath) weight += 100 * (1 - distPath / minPath);
              if (distPassed < minPassed)
                weight += 10 * (1 - distPassed / minPassed);
              if (distStation < minStation)
                weight += 1000 * (1 - distStation / minStation);
              if (weight < bestScore) {
                bestScore = weight;
                bestAng = ang;
              }
            }
            return bestAng;
          })();

          return (
            <TramIconWebGL
              x={screenX}
              y={screenY}
              optimalAngle={optimalAngle}
              scale={scale}
            />
          );
        })()}
      </div>
    </div>
  );
});

export default WebGLMap;