import React, { useEffect, useState, useRef } from "react";
import { lerpAngle } from "../../utils/animationUtils";
import tramBase from "../../assets/tramPosition/Tram Base.svg";
import tramSvg from "../../assets/tramPosition/Tram_Second.svg";
import { getMediaUrl } from "../../api/apiConfig";

const LERP_SPEED = 0.1;

interface TramIconWebGLProps {
  x: number;
  y: number;
  optimalAngle: number;
  scale: number;
  routeIcon?: string | null;
}

export const TramIconWebGL: React.FC<TramIconWebGLProps> = ({
  x,
  y,
  optimalAngle,
  scale,
  routeIcon,
}) => {
  const tramIconSrc = routeIcon
    ? getMediaUrl(routeIcon)
    : tramSvg;
  const [smoothOptimalAngle, setSmoothOptimalAngle] = useState(optimalAngle);
  const animationRef = useRef<number | undefined>(undefined);

  useEffect(() => {
    const animate = () => {
      setSmoothOptimalAngle((prev) => {
        const newAngle = lerpAngle(prev, optimalAngle, LERP_SPEED);
        return Math.abs(newAngle - optimalAngle) < 0.01
          ? optimalAngle
          : newAngle;
      });

      if (Math.abs(smoothOptimalAngle - optimalAngle) > 0.01) {
        animationRef.current = requestAnimationFrame(animate);
      }
    };

    animationRef.current = requestAnimationFrame(animate);

    return () => {
      if (animationRef.current !== undefined) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [optimalAngle, smoothOptimalAngle]);

  const backgroundWidth = 111 / (scale * 12);
  const backgroundHeight = 82 / (scale * 12);
  const tramWidth = 31 / (scale * 12);
  const tramHeight = 52 / (scale * 12);

  const outerRotation = ((smoothOptimalAngle + Math.PI) * 180) / Math.PI;
  const innerRotation = ((-smoothOptimalAngle - Math.PI) * 180) / Math.PI;

  const bgWidth = Math.max(backgroundWidth, 100);
  const bgHeight = Math.max(backgroundHeight, 100);

  const minTramWidth = Math.max(tramWidth, 31);
  const minTramHeight = Math.max(tramHeight, 52);

  return (
    <div
      style={{
        position: "absolute",
        left: x,
        top: y,
        zIndex: 10000,
        pointerEvents: "none",
        width: 0,
        height: 0,
      }}
    >
      <div
        style={{
          position: "absolute",
          transform: `rotate(${outerRotation}deg)`,
          transformOrigin: "0 0",
        }}
      >
        <img
          src={tramBase}
          alt="Tram Base"
          style={{
            width: bgWidth,
            height: bgHeight,
            maxWidth: "none",
            display: "block",
            position: "absolute",
            left: -bgWidth,
            top: -bgHeight / 2,
          }}
        />

        <div
          style={{
            position: "absolute",
            left: bgWidth > 53.7 ? -bgWidth / 1.42 : -bgWidth / 0.98,
            top: 0,
            transform: `translate(-50%, -50%) rotate(${innerRotation}deg)`,
            width: minTramWidth,
            height: minTramHeight,
          }}
        >
          <img
            src={tramIconSrc}
            alt="Tram"
            style={{
              width: "100%",
              height: "100%",
              maxWidth: "none",
            }}
          />
        </div>
      </div>
    </div>
  );
};
