import { Graphics } from "pixi.js";
import { useCallback, useMemo } from "react";
import {
  BACKGROUND_COLOR,
  PATH_COLOR,
  STATION_RADIUS,
  STATION_OUTLINE_WIDTH,
  UNPASSED_STATION_COLOR,
} from "./Constants";
import { StationData } from "./types";
import { useTransform } from "./transformContext";
import { observer } from "mobx-react-lite";
import { useGeolocationStore } from "../../stores/hooks/useGeolocationStore";
import { apiStore } from "../../api/ApiStore/store";

interface StationProps {
  station: StationData;
  stationEn?: StationData | null;
  stationZh?: StationData | null;
  isPassed: boolean;
}

const BASE_FONT_SIZE = 16;
const POINT_LABEL_FONT_SIZE = 13;
const DEFAULT_LABEL_OFFSET_X = 25;
const DEFAULT_LABEL_OFFSET_Y = 0;

const getAnchorFromOffset = (
  offsetX: number,
  offsetY: number
): { x: number; y: number } => {
  if (offsetX === 0 && offsetY === 0) {
    return { x: 0, y: 0.5 };
  }

  const length = Math.hypot(offsetX, offsetY);
  const nx = offsetX / length;
  const ny = offsetY / length;

  return { x: (1 - nx) / 2, y: (1 - ny) / 2 };
};

export const Station = observer(
  ({ station, stationEn, stationZh, isPassed }: Readonly<StationProps>) => {
    const { scale } = useTransform();
    const { context } = apiStore;

    const { selectedLanguage } = useGeolocationStore();

    const ZOOM_THRESHOLD_FOR_HIGH_RESOLUTION = 2; // Порог масштаба (в 2 раза)
    const HIGH_RESOLUTION_VALUE = 4;
    const LOW_RESOLUTION_VALUE = 2;

    const dynamicResolution =
      scale > ZOOM_THRESHOLD_FOR_HIGH_RESOLUTION
        ? HIGH_RESOLUTION_VALUE
        : LOW_RESOLUTION_VALUE;

    const draw = useCallback(
      (g: Graphics) => {
        g.clear();

        // Проверяем, является ли станция начальной или конечной
        const isTerminalStation =
          context &&
          (station.id.toString() === (context as any)?.startStopId ||
            station.id.toString() === (context as any)?.endStopId);

        // Определяем радиус станции
        const stationRadius = isTerminalStation
          ? STATION_RADIUS * 1.5
          : STATION_RADIUS;

        // Рисуем основной круг станции
        g.circle(station.longitude, station.latitude, stationRadius);
        g.fill({ color: isPassed ? PATH_COLOR : UNPASSED_STATION_COLOR });
        g.stroke({ color: BACKGROUND_COLOR, width: STATION_OUTLINE_WIDTH });

        // Если это терминальная станция, рисуем дополнительный круг по центру
        if (isTerminalStation) {
          const centerCircleRadius = stationRadius * 0.5; // 50% от радиуса станции
          g.circle(station.longitude, station.latitude, centerCircleRadius);
          g.fill({ color: BACKGROUND_COLOR });
        }
      },
      [station.latitude, station.longitude, station.id, context, isPassed]
    );

    const dynamicFontSize = BASE_FONT_SIZE;
    const dynamicPointLabelFontSize = POINT_LABEL_FONT_SIZE;

    // Определяем фактические смещения. Если station.offset_x и station.offset_y оба равны 0,
    // используем дефолтный отступ для обеспечения видимости.
    const labelOffsetX =
      station.offset_x === 0 && station.offset_y === 0
        ? DEFAULT_LABEL_OFFSET_X
        : station.offset_x / 3;
    const labelOffsetY =
      station.offset_x === 0 && station.offset_y === 0
        ? DEFAULT_LABEL_OFFSET_Y
        : station.offset_y / 3;

    // Вычисляем позицию текстового блока. Это прямые координаты карты.
    const textBlockPositionX = station.longitude + labelOffsetX / 3;
    const textBlockPositionY = station.latitude + labelOffsetY;

    // Используем useMemo для запоминания dynamicAnchor на основе *фактически используемого* отступа.
    const dynamicAnchor = useMemo(
      () => getAnchorFromOffset(labelOffsetX, labelOffsetY),
      [labelOffsetX, labelOffsetY]
    );

    return (
      <pixiContainer>
        <pixiGraphics draw={draw} zIndex={0} />

        <pixiText
          anchor={dynamicAnchor} // Используем динамический якорь
          text={station.name}
          position={{
            x: textBlockPositionX,
            y: textBlockPositionY,
          }}
          style={{
            fontSize: dynamicFontSize,
            fontFamily: "Roboto",
            fontWeight: "bold",
            fill: "#fff",
          }}
          resolution={dynamicResolution}
          zIndex={100}
        />

        {(selectedLanguage === "en" || selectedLanguage === "ru") && (
          <pixiText
            anchor={dynamicAnchor} // Используем динамический якорь
            text={stationEn?.name}
            position={{
              x: textBlockPositionX,
              y: textBlockPositionY + 14, // Это смещение второй надписи относительно первой
            }}
            style={{
              fontSize: dynamicPointLabelFontSize,
              fontFamily: "Roboto",
              fontWeight: "normal",
              fill: "#CBCBCB",
            }}
            resolution={dynamicResolution}
            zIndex={100}
          />
        )}

        {selectedLanguage === "zh" && (
          <pixiText
            anchor={dynamicAnchor} // Используем динамический якорь
            text={stationZh?.name}
            position={{
              x: textBlockPositionX,
              y: textBlockPositionY + 14, // Это смещение второй надписи относительно первой
            }}
            style={{
              fontSize: dynamicPointLabelFontSize,
              fontFamily: "Roboto",
              fontWeight: "normal",
              fill: "#CBCBCB",
            }}
            resolution={dynamicResolution}
            zIndex={100}
          />
        )}
      </pixiContainer>
    );
  }
);
