import UserCamera from "./ui/UserCamera";
import UserDevicesControls from "./ui/UserDevicesControls";
import DraggableContainer from "./DraggableContainer";
import { useWebRTC } from "../hooks/useWebRTC";
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";

const LOCAL_CAMERAS_COUNT = 10;

interface SessionUsersPanelProps {
  roomId: string;
  autoJoin?: boolean;
  mode?: "full" | "mini";
}

function SessionUsersPanel({
  roomId,
  autoJoin = false,
  mode = "full",
}: SessionUsersPanelProps) {
  const {
    localStream,
    participants,
    isAudioMuted: isLocalAudioMuted,
    isVideoMuted: isLocalVideoMuted,
    toggleAudio,
    toggleVideo,
    updateSpeakingState,
  } = useWebRTC(roomId, autoJoin);

  const hasLocalStream = localStream !== null;

  // State для хранения состояния speaking
  const [localSpeaking, setLocalSpeaking] = useState<boolean>(false);
  const lastSentSpeakingRef = useRef<boolean>(false);
  const speakingStateTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // State для отслеживания размеров и ориентации экрана
  const [windowDimensions, setWindowDimensions] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  // Callback для получения изменений состояния speaking от UserCamera
  const handleSpeakingChange = (isSpeaking: boolean) => {
    setLocalSpeaking(isSpeaking);
  };

  // useEffect для отслеживания изменения ориентации и размеров экрана
  useEffect(() => {
    const handleResize = () => {
      setWindowDimensions({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    const handleOrientationChange = () => {
      // Небольшая задержка для корректного получения новых размеров после поворота
      setTimeout(() => {
        setWindowDimensions({
          width: window.innerWidth,
          height: window.innerHeight,
        });
      }, 100);
    };

    // Слушаем событие resize (срабатывает при изменении размера окна)
    window.addEventListener("resize", handleResize);

    // Слушаем событие orientationchange (срабатывает при повороте устройства)
    window.addEventListener("orientationchange", handleOrientationChange);

    // Также слушаем изменения в screen.orientation API (современный способ)
    if (screen.orientation) {
      screen.orientation.addEventListener("change", handleOrientationChange);
    }

    return () => {
      window.removeEventListener("resize", handleResize);
      window.removeEventListener("orientationchange", handleOrientationChange);
      if (screen.orientation) {
        screen.orientation.removeEventListener(
          "change",
          handleOrientationChange
        );
      }
    };
  }, []);

  // useEffect для throttle и отправки состояния speaking через socket
  useEffect(() => {
    // Отправляем только если состояние действительно изменилось
    if (lastSentSpeakingRef.current === localSpeaking) {
      return;
    }

    // Очищаем предыдущий таймер
    if (speakingStateTimeoutRef.current) {
      clearTimeout(speakingStateTimeoutRef.current);
    }

    // Отправляем состояние с задержкой (debounce 300ms)
    speakingStateTimeoutRef.current = setTimeout(() => {
      lastSentSpeakingRef.current = localSpeaking;
      updateSpeakingState?.(localSpeaking);
      speakingStateTimeoutRef.current = null;
    }, 300);

    return () => {
      if (speakingStateTimeoutRef.current) {
        clearTimeout(speakingStateTimeoutRef.current);
      }
    };
  }, [localSpeaking, updateSpeakingState]);

  // Вычисляем количество камер для grid
  const activeCamerasCount =
    (localStream ? LOCAL_CAMERAS_COUNT : 0) +
    participants.filter(
      (p) => p.stream != null && p.stream.getTracks().length > 0
    ).length;

  // Определяем количество колонок в зависимости от количества камер
  const getDesktopGridColumns = (count: number): number => {
    if (count <= 2) return 1;
    if (count <= 4) return 2;
    if (count <= 9) return 3;
    return 4;
  };

  const getMobilePortraitGridColumns = (count: number): number => {
    if (count <= 3) return 1;
    if (count <= 12) return 2;
    return 3;
  };

  const getMobileLandscapeGridColumns = (count: number): number => {
    if (count <= 3) return count;
    if (count <= 6) return 3;
    return 4;
  };

  const gridColumns =
    windowDimensions.width >= 1440
      ? getDesktopGridColumns(activeCamerasCount)
      : windowDimensions.height / windowDimensions.width < 1
      ? getMobileLandscapeGridColumns(activeCamerasCount)
      : getMobilePortraitGridColumns(activeCamerasCount);

  return (
    <DraggableContainer
      enableSnapping={mode === "mini"}
      enabled={mode === "mini"}
      autoAlign={true}
      initialCorner={
        windowDimensions.width >= 640 ? "bottom-right" : "top-right"
      }
      padding="1.111vw"
      className={clsx(
        "z-[100] 2xl:gap-[0.556vw] gap-2",
        mode === "mini"
          ? "flex"
          : `2xl:p-[5vw] p-4 w-full 2xl:h-dvh max-2xl:portrait:max-h-[calc(100dvh-17.778vw)] max-2xl:landscape:max-h-[calc(100dvh-8.75vw)] grid grid-cols-${gridColumns} relative bg-black`
      )}
    >
      {localStream &&
        Array.from({ length: LOCAL_CAMERAS_COUNT }).map((_, index) => (
          <UserCamera
            key={index}
            mode={mode}
            name="Вы"
            isMuted={isLocalAudioMuted}
            isVideoOff={isLocalVideoMuted}
            isControlDisabled={false}
            isAdmin={true}
            isLocal={true}
            mediaStream={localStream}
            onMute={toggleAudio}
            onVideoOff={toggleVideo}
            onCanControl={() => console.log("Toggle control")}
            onSpeakingChange={handleSpeakingChange}
            className={clsx(
              mode === "full" && activeCamerasCount <= 2
                ? "m-auto"
                : activeCamerasCount > 12
                ? "!aspect-square w-full"
                : "w-full"
            )}
          />
        ))}

      {/* Камеры удаленных участников - показываем только если есть поток с активными треками */}
      {participants
        .filter(
          (participant) =>
            participant.stream != null &&
            participant.stream.getTracks().length > 0
        )
        .map((participant) => (
          <UserCamera
            className={clsx(
              mode === "full" &&
                (activeCamerasCount <= 2
                  ? "m-auto"
                  : activeCamerasCount > 12
                  ? "!aspect-square w-full"
                  : "w-full")
            )}
            key={participant.id}
            mode={mode}
            name={participant.id}
            isMuted={participant.isMuted || false}
            isVideoOff={participant.isVideoOff || false}
            isSpeaking={participant.isSpeaking}
            isControlDisabled={true}
            isAdmin={true}
            mediaStream={participant.stream}
            hasLocalMediaPermission={hasLocalStream}
            onMute={() => console.log(`Mute user ${participant.id}`)}
            onVideoOff={() => console.log(`Video off user ${participant.id}`)}
            onCanControl={() =>
              console.log(`Can control user ${participant.id}`)
            }
          />
        ))}

      <UserDevicesControls
        mode={mode}
        toggleAudio={toggleAudio}
        toggleVideo={toggleVideo}
        isAudioMuted={isLocalAudioMuted}
        isVideoMuted={isLocalVideoMuted}
        hasLocalStream={hasLocalStream}
      />
    </DraggableContainer>
  );
  // }

  // Для режима mini используем flex-обертку для центрирования и внутри grid
  // return (
  //   <div className="flex justify-center items-center w-full h-full z-[99]a">
  //     <div
  //       className={clsx(
  //         "grid 2xl:gap-[0.556vw] gap-2",
  //         gridColumns === 1 && "grid-cols-1 2xl:w-[45vw] w-[calc(50vw-1rem)]",
  //         gridColumns === 2 && "grid-cols-2 2xl:w-[90vw] w-[calc(100vw-2rem)]",
  //         gridColumns === 3 && "grid-cols-3 2xl:w-[90vw] w-[calc(100vw-2rem)]",
  //         gridColumns === 4 && "grid-cols-4 2xl:w-[90vw] w-[calc(100vw-2rem)]",
  //         gridColumns === 5 && "grid-cols-5 2xl:w-[90vw] w-[calc(100vw-2rem)]",
  //         gridRows === 1 && "auto-rows-[calc((86vh-1.111vw)/1)]",
  //         gridRows === 2 && "auto-rows-[calc((86vh-1.667vw)/2)]",
  //         gridRows === 3 && "auto-rows-[calc((86vh-2.222vw)/3)]",
  //         gridRows === 4 && "auto-rows-[calc((86vh-2.778vw)/4)]",
  //         gridRows === 5 && "auto-rows-[calc((86vh-3.333vw)/5)]"
  //       )}
  //     >
  //       {camerasContent}
  //     </div>
  //   </div>
  // );
}

export default SessionUsersPanel;
