import React, { useState, useEffect, useMemo, useRef } from "react";
import { Line, Sphere } from "@react-three/drei";
import { useThree, useFrame } from "@react-three/fiber";
import * as THREE from "three";
import {
  useActiveLayer,
  useDeleteTool,
  useDeletePointOrLine,
  useMovePoint,
  useSocketStore,
  useToggleView,
  useToolMode,
  useRemovedLayer,
  useZones,
  useZonePoints,
} from "../../../store/store";
// import { setZonesApi } from "../../../services/factoryBuilder/zones/setZonesApi";
// import { deleteZonesApi } from "../../../services/factoryBuilder/zones/deleteZoneApi";
import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";

import * as CONSTANTS from "../../../types/world/worldConstants";

const ZoneGroup: React.FC = () => {
  const { camera, pointer, gl, raycaster, scene, controls } = useThree();
  const [startPoint, setStartPoint] = useState<THREE.Vector3 | null>(null);
  const [endPoint, setEndPoint] = useState<THREE.Vector3 | null>(null);
  const { zones, setZones } = useZones();
  const { zonePoints, setZonePoints } = useZonePoints();
  const [isDragging, setIsDragging] = useState(false);
  const [draggedSphere, setDraggedSphere] = useState<THREE.Vector3 | null>(
    null
  );
  const plane = useMemo(
    () => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0),
    []
  );
  const { toggleView } = useToggleView();
  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
  const { removedLayer, setRemovedLayer } = useRemovedLayer();
  const { toolMode, setToolMode } = useToolMode();
  const { movePoint, setMovePoint } = useMovePoint();
  const { deleteTool, setDeleteTool } = useDeleteTool();
  const { activeLayer, setActiveLayer } = useActiveLayer();
  const { socket } = useSocketStore();

  const groupsRef = useRef<any>();

  const zoneMaterial = useMemo(
    () =>
      new THREE.ShaderMaterial({
        side: THREE.DoubleSide,
        vertexShader: `
        varying vec2 vUv;
        void main(){
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            vUv = uv;
        }
        `,
        fragmentShader: `
        varying vec2 vUv;
        uniform vec3 uColor;
        void main(){
            float alpha = 1.0 - vUv.y;
            gl_FragColor = vec4(uColor, alpha);
        }
        `,
        uniforms: {
          uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) },
        },
        transparent: true,
        depthWrite: false,
    }), []);

  useEffect(() => {
    const fetchZones = async () => {
      const email = localStorage.getItem("email");
      if (!email) return;

      const organization = email.split("@")[1].split(".")[0];
      const data = await getZonesApi(organization);

      if (data.data && data.data.length > 0) {
        const fetchedZones = data.data.map((zone: any) => ({
          zoneId: zone.zoneId,
          zoneName: zone.zoneName,
          points: zone.points,
          viewPortCenter: zone.viewPortCenter,
          viewPortposition: zone.viewPortposition,
          layer: zone.layer,
        }));

        setZones(fetchedZones);

        const fetchedPoints = data.data.flatMap((zone: any) =>
          zone.points
            .slice(0, 4)
            .map(
              (point: [number, number, number]) => new THREE.Vector3(...point)
            )
        );

        setZonePoints(fetchedPoints);
      }
    };

    fetchZones();
  }, []);

  useEffect(() => {
    localStorage.setItem("zones", JSON.stringify(zones));
  }, [zones]);

  useEffect(() => {
    if (removedLayer) {
      const updatedZones = zones.filter(
        (zone: any) => zone.layer !== removedLayer
      );
      setZones(updatedZones);

      const updatedzonePoints = zonePoints.filter((_: any, index: any) => {
        const zoneIndex = Math.floor(index / 4);
        return zones[zoneIndex]?.layer !== removedLayer;
      });
      setZonePoints(updatedzonePoints);

      zones
        .filter((zone: any) => zone.layer === removedLayer)
        .forEach((zone: any) => {
          deleteZoneFromBackend(zone.zoneId);
        });

      setRemovedLayer(null);
    }
  }, [removedLayer]);

  useEffect(() => {
    if (toolMode !== "Zone") {
      setStartPoint(null);
      setEndPoint(null);
    } else {
      setDeletePointOrLine(false);
      setMovePoint(false);
      setDeleteTool(false);
    }
    if (!toggleView) {
      setStartPoint(null);
      setEndPoint(null);
    }
  }, [toolMode, toggleView]);

  const addZoneToBackend = async (zone: {
    zoneId: string;
    zoneName: string;
    points: [number, number, number][];
    layer: string;
  }) => {
    const email = localStorage.getItem("email");
    const userId = localStorage.getItem("userId");
    const organization = email!.split("@")[1].split(".")[0];

    const calculateCenter = (points: number[][]) => {
      if (!points || points.length === 0) return null;

      let sumX = 0,
        sumY = 0,
        sumZ = 0;
      const numPoints = points.length;

      points.forEach(([x, y, z]) => {
        sumX += x;
        sumY += y;
        sumZ += z;
      });

      return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [
        number,
        number,
        number
      ];
    };

    const target: [number, number, number] | null = calculateCenter(
      zone.points
    );
    if (!target) return;
    const position = [target[0], 10, target[2]];

    const input = {
      userId: userId,
      organization: organization,
      zoneData: {
        zoneName: zone.zoneName,
        zoneId: zone.zoneId,
        points: zone.points,
        viewPortCenter: target,
        viewPortposition: position,
        layer: zone.layer,
      },
    };

    socket.emit("v2:zone:set", input);
  };

  const updateZoneToBackend = async (zone: {
    zoneId: string;
    zoneName: string;
    points: [number, number, number][];
    layer: string;
  }) => {
    const email = localStorage.getItem("email");
    const userId = localStorage.getItem("userId");
    const organization = email!.split("@")[1].split(".")[0];

    const calculateCenter = (points: number[][]) => {
      if (!points || points.length === 0) return null;

      let sumX = 0,
        sumY = 0,
        sumZ = 0;
      const numPoints = points.length;

      points.forEach(([x, y, z]) => {
        sumX += x;
        sumY += y;
        sumZ += z;
      });

      return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [
        number,
        number,
        number
      ];
    };

    const target: [number, number, number] | null = calculateCenter(
      zone.points
    );
    if (!target) return;
    const position = [target[0], 10, target[2]];

    const input = {
      userId: userId,
      organization: organization,
      zoneData: {
        zoneName: zone.zoneName,
        zoneId: zone.zoneId,
        points: zone.points,
        viewPortCenter: target,
        viewPortposition: position,
        layer: zone.layer,
      },
    };

    socket.emit("v2:zone:set", input);
  };

  const deleteZoneFromBackend = async (zoneId: string) => {
    const email = localStorage.getItem("email");
    const userId = localStorage.getItem("userId");
    const organization = email!.split("@")[1].split(".")[0];

    const input = {
      userId: userId,
      organization: organization,
      zoneId: zoneId,
    };

    socket.emit("v2:zone:delete", input);
  };

  const handleDeleteZone = (zoneId: string) => {
    const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId);
    setZones(updatedZones);

    const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId);
    if (zoneIndex !== -1) {
      const zonePointsToRemove = zonePoints.slice(
        zoneIndex * 4,
        zoneIndex * 4 + 4
      );
      zonePointsToRemove.forEach((point: any) =>
        groupsRef.current.remove(point)
      );
      const updatedzonePoints = zonePoints.filter(
        (_: any, index: any) =>
          index < zoneIndex * 4 || index >= zoneIndex * 4 + 4
      );
      setZonePoints(updatedzonePoints);
    }

    deleteZoneFromBackend(zoneId);
  };

  useEffect(() => {
    if (!camera || !toggleView) return;
    const canvasElement = gl.domElement;

    let drag = false;
    let isLeftMouseDown = false;

    const onMouseDown = (evt: any) => {
      if (evt.button === 0) {
        isLeftMouseDown = true;
        drag = false;

        raycaster.setFromCamera(pointer, camera);
        const intersects = raycaster.intersectObjects(
          groupsRef.current.children,
          true
        );

        if (intersects.length > 0 && movePoint) {
          const clickedObject = intersects[0].object;
          const sphereIndex = zonePoints.findIndex((point: any) =>
            point.equals(clickedObject.position)
          );
          if (sphereIndex !== -1) {
            (controls as any).enabled = false;
            setDraggedSphere(zonePoints[sphereIndex]);
            setIsDragging(true);
          }
        }
      }
    };

    const onMouseUp = (evt: any) => {
      if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) {
        isLeftMouseDown = false;

        if (!startPoint && !movePoint) {
          raycaster.setFromCamera(pointer, camera);
          const intersectionPoint = new THREE.Vector3();
          const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
          if (point) {
            setStartPoint(point);
            setEndPoint(null);
          }
        } else if (startPoint && !movePoint) {
          raycaster.setFromCamera(pointer, camera);
          const intersectionPoint = new THREE.Vector3();
          const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
          if (!point) return;

          const points = [
            [startPoint.x, 0.15, startPoint.z],
            [point.x, 0.15, startPoint.z],
            [point.x, 0.15, point.z],
            [startPoint.x, 0.15, point.z],
            [startPoint.x, 0.15, startPoint.z],
          ] as [number, number, number][];

          const zoneName = `Zone ${zones.length + 1}`;
          const zoneId = THREE.MathUtils.generateUUID();
          const newZone = {
            zoneId,
            zoneName,
            points: points,
            layer: activeLayer,
          };

          const newZones = [...zones, newZone];

          setZones(newZones);

          const newzonePoints = [
            new THREE.Vector3(startPoint.x, 0.15, startPoint.z),
            new THREE.Vector3(point.x, 0.15, startPoint.z),
            new THREE.Vector3(point.x, 0.15, point.z),
            new THREE.Vector3(startPoint.x, 0.15, point.z),
          ];

          const updatedZonePoints = [...zonePoints, ...newzonePoints];
          setZonePoints(updatedZonePoints);

          addZoneToBackend(newZone);

          setStartPoint(null);
          setEndPoint(null);
        }
      } else if (
        evt.button === 0 &&
        !drag &&
        !isDragging &&
        deletePointOrLine
      ) {
        raycaster.setFromCamera(pointer, camera);
        const intersects = raycaster.intersectObjects(
          groupsRef.current.children,
          true
        );

        if (intersects.length > 0) {
          const clickedObject = intersects[0].object;

          const sphereIndex = zonePoints.findIndex((point: any) =>
            point.equals(clickedObject.position)
          );
          if (sphereIndex !== -1) {
            const zoneIndex = Math.floor(sphereIndex / 4);
            const zoneId = zones[zoneIndex].zoneId;
            handleDeleteZone(zoneId);
            return;
          }
        }
      }

      if (evt.button === 0) {
        if (isDragging && draggedSphere) {
          setIsDragging(false);
          setDraggedSphere(null);

          const sphereIndex = zonePoints.findIndex(
            (point: any) => point === draggedSphere
          );
          if (sphereIndex !== -1) {
            const zoneIndex = Math.floor(sphereIndex / 4);

            if (zoneIndex !== -1 && zones[zoneIndex]) {
              updateZoneToBackend(zones[zoneIndex]);
            }
          }
        }
      }
    };

    const onMouseMove = () => {
      if (isLeftMouseDown) {
        drag = true;
      }
      raycaster.setFromCamera(pointer, camera);
      const intersects = raycaster.intersectObjects(
        groupsRef.current.children,
        true
      );

      if (
        intersects.length > 0 &&
        intersects[0].object.name.includes("point")
      ) {
        gl.domElement.style.cursor = movePoint ? "pointer" : "default";
      } else {
        gl.domElement.style.cursor = "default";
      }
      if (isDragging && draggedSphere) {
        raycaster.setFromCamera(pointer, camera);
        const intersectionPoint = new THREE.Vector3();
        const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
        if (point) {
          draggedSphere.set(point.x, 0.15, point.z);

          const sphereIndex = zonePoints.findIndex(
            (point: any) => point === draggedSphere
          );
          if (sphereIndex !== -1) {
            const zoneIndex = Math.floor(sphereIndex / 4);
            const cornerIndex = sphereIndex % 4;

            const updatedZones = zones.map((zone: any, index: number) => {
              if (index === zoneIndex) {
                const updatedPoints = [...zone.points];
                updatedPoints[cornerIndex] = [point.x, 0.15, point.z];
                updatedPoints[4] = updatedPoints[0];
                return { ...zone, points: updatedPoints };
              }
              return zone;
            });

            setZones(updatedZones);
          }
        }
      }
    };

    const onContext = (event: any) => {
      event.preventDefault();
      setStartPoint(null);
      setEndPoint(null);
    };

    if (toolMode === "Zone" || deletePointOrLine || movePoint) {
      canvasElement.addEventListener("mousedown", onMouseDown);
      canvasElement.addEventListener("mouseup", onMouseUp);
      canvasElement.addEventListener("mousemove", onMouseMove);
      canvasElement.addEventListener("contextmenu", onContext);
    }
    return () => {
      canvasElement.removeEventListener("mousedown", onMouseDown);
      canvasElement.removeEventListener("mouseup", onMouseUp);
      canvasElement.removeEventListener("mousemove", onMouseMove);
      canvasElement.removeEventListener("contextmenu", onContext);
    };
  }, [
    gl,
    camera,
    startPoint,
    toggleView,
    scene,
    toolMode,
    zones,
    isDragging,
    deletePointOrLine,
    zonePoints,
    draggedSphere,
    movePoint,
    activeLayer,
  ]);

  useFrame(() => {
    if (!startPoint) return;
    raycaster.setFromCamera(pointer, camera);
    const intersectionPoint = new THREE.Vector3();
    const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
    if (point) {
      setEndPoint(point);
    }
  });
  return (
    <group ref={groupsRef} name="zoneGroup">
      <group name="zones" visible={!toggleView}>
        {zones.map((zone: any) => (
          <group key={zone.zoneId} name={zone.zoneName}>
            {zone.points
              .slice(0, -1)
              .map((point: [number, number, number], index: number) => {
                const nextPoint = zone.points[index + 1];

                const point1 = new THREE.Vector3(point[0], point[1], point[2]);
                const point2 = new THREE.Vector3(
                  nextPoint[0],
                  nextPoint[1],
                  nextPoint[2]
                );

                const planeWidth = point1.distanceTo(point2);
                const planeHeight = CONSTANTS.zoneConfig.height;

                const midpoint = new THREE.Vector3(
                  (point1.x + point2.x) / 2,
                  CONSTANTS.zoneConfig.height / 2 +
                    (zone.layer - 1) * CONSTANTS.zoneConfig.height,
                  (point1.z + point2.z) / 2
                );

                const angle = Math.atan2(
                  point2.z - point1.z,
                  point2.x - point1.x
                );

                return (
                  <mesh
                    key={index}
                    position={midpoint}
                    rotation={[0, -angle, 0]}
                  >
                    <planeGeometry args={[planeWidth, planeHeight]} />
                    <primitive
                      object={zoneMaterial.clone()}
                      attach="material"
                    />
                  </mesh>
                );
              })}
          </group>
        ))}
      </group>
      <group name="zoneLines" visible={toggleView}>
        {zones
          .filter((zone: any) => zone.layer === activeLayer)
          .map((zone: any) => (
            <Line
              key={zone.zoneId}
              points={zone.points}
              color="#007BFF"
              lineWidth={3}
              onClick={(e) => {
                e.stopPropagation();
                if (deletePointOrLine) {
                  handleDeleteZone(zone.zoneId);
                }
              }}
            />
          ))}
      </group>
      <group name="zonePoints" visible={toggleView}>
        {zones
          .filter((zone: any) => zone.layer === activeLayer)
          .flatMap((zone: any) =>
            zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
              <Sphere
                key={`${zone.zoneId}-point-${pointIndex}`}
                position={new THREE.Vector3(...point)}
                args={[0.3, 16, 16]}
                name={`point-${zone.zoneId}-${pointIndex}`}
              >
                <meshBasicMaterial color="red" />
              </Sphere>
            ))
          )}
      </group>
      <group name="tempGroup" visible={toggleView}>
        {startPoint && endPoint && (
          <Line
            points={[
              [startPoint.x, 0.15, startPoint.z],
              [endPoint.x, 0.15, startPoint.z],
              [endPoint.x, 0.15, endPoint.z],
              [startPoint.x, 0.15, endPoint.z],
              [startPoint.x, 0.15, startPoint.z],
            ]}
            color="#C164FF"
            lineWidth={3}
          />
        )}
      </group>
    </group>
  );
};

export default ZoneGroup;
