import PopupWrapper from "../PopupWrapper";
import ActionsPopover from "../ui/ActionsPopover";
import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon";
import VideoOffFilledIcon from "../icons/VideoOffFilledIcon";
import HandRaisedFilledIcon from "../icons/HandRaisedFilledIcon";
import XMarkFilledIcon from "../icons/XMarkFilledIcon";
import Avatar from "../ui/Avatar";
import Button from "../ui/Button";
import ShareFilledIcon from "../icons/ShareFilledIcon";
import MicrophoneOffFilledIcon from "../icons/MicrophoneOffFilledIcon";
import { Fragment, useRef } from "react";
import DraggableContainer from "../DraggableContainer";
import { useWebRTC } from "../../hooks/useWebRTC";
import type { Participant } from "../../lib/webrtc";
import type { Session } from "../../types/Session";
import { getGuestId } from "../../lib/guestId";
import { useMe } from "../../hooks/useAuth";

interface ParticipantsPopupProps {
  session: Session;
}

export default function ParticipantsPopup({ session }: ParticipantsPopupProps) {
  const { participants, currentUserId, localStream } = useWebRTC();
  const { data: user } = useMe();
  const headerRef = useRef<HTMLDivElement>(null);

  // Определяем, является ли текущий пользователь организатором
  const isOrganizer =
    !!(session.userId && user?.id === session.userId) ||
    !!(session.guestId && getGuestId() === session.guestId);

  // Добавляем локального пользователя в начало списка
  const allParticipants: (Participant & { isLocal?: boolean })[] = [
    {
      id: currentUserId,
      stream: localStream || undefined,
      isLocal: true,
    },
    ...participants,
  ];

  return (
    <DraggableContainer
      enabled={window.innerWidth >= 640}
      centerVertical
      constrainToBounds
      initialPosition={{ right: "5vw" }}
      dragHandleRef={headerRef}
    >
      <PopupWrapper title="Участники" headerRef={headerRef}>
        <div className="flex flex-col 2xl:gap-[1.667vw] gap-6 2xl:-mt-[1.389vw] -mt-5">
          <div className="flex flex-col gap-4 2xl:gap-[1.111vw] 2xl:max-h-[calc(11.944vw+1.389vw)] max-h-[73.75dvh] overflow-y-auto 2xl:pt-[1.389vw] pt-5">
            {allParticipants.length === 0 ? (
              <div className="py-8 text-center text-gray-500">
                Нет участников
              </div>
            ) : (
              allParticipants.map((participant) => (
                <Fragment key={participant.id}>
                  <ParticipantItem
                    participant={participant}
                    isLocal={participant.isLocal || false}
                    isOrganizer={isOrganizer}
                    session={session}
                  />
                  <hr className="w-full 2xl:h-[0.69vw] h-px border-[#F6F6F6] last:hidden" />
                </Fragment>
              ))
            )}
          </div>
          <Button
            variant="primary"
            onClick={() => {
              if (navigator.share) {
                navigator.share({
                  title: "Участники",
                  text: "Присоединяйся к моей встрече",
                  url: window.location.href,
                });
              } else {
                navigator.clipboard.writeText(window.location.href);
              }
            }}
          >
            <p>Поделиться ссылкой</p>
            <div className="2xl:size-[1.111vw] size-4">
              <ShareFilledIcon />
            </div>
          </Button>
        </div>
      </PopupWrapper>
    </DraggableContainer>
  );
}

function ParticipantItem({
  participant,
  isLocal,
  isOrganizer,
  session,
}: {
  participant: Participant & { isLocal?: boolean };
  isLocal: boolean;
  isOrganizer: boolean;
  session: Session;
}) {
  const parentRef = useRef<HTMLDivElement>(null);

  // Проверяем наличие аудио/видео треков
  const hasAudio =
    participant.stream?.getAudioTracks().some((track) => track.enabled) ??
    false;
  const hasVideo =
    participant.stream?.getVideoTracks().some((track) => track.enabled) ??
    false;
  const isMuted = !hasAudio;
  const isVideoOff = !hasVideo;

  // Определяем, является ли этот конкретный участник организатором сессии
  const isThisParticipantOrganizer =
    (session.userId && participant.id === session.userId) ||
    (session.guestId && participant.id === session.guestId);

  // Определяем статус участника для аватара
  const status: "admin" | "caution" | undefined = isThisParticipantOrganizer
    ? "admin"
    : undefined;

  return (
    <div ref={parentRef} className="flex justify-between items-center w-full">
      <div className="flex items-center 2xl:gap-[0.833vw] gap-3">
        <Avatar size="medium" status={status} />
        <div className="flex flex-col 2xl:gap-[0.278vw] gap-1">
          <span className="button-m">
            {isLocal
              ? "Вы"
              : participant.name || `Участник ${participant.id.slice(0, 8)}`}
          </span>
          <span className="caption-s text-[#CCCCCC]">
            {isThisParticipantOrganizer ? "Организатор" : "Участник"}
          </span>
        </div>
      </div>

      <div className="flex 2xl:gap-[0.556vw] gap-2 items-center">
        {isMuted && (
          <div className="2xl:size-[1.111vw] size-4 text-[#FF4517]">
            <MicrophoneOffFilledIcon />
          </div>
        )}
        {isVideoOff && (
          <div className="2xl:size-[1.111vw] size-4 text-[#FF4517]">
            <VideoOffFilledIcon />
          </div>
        )}

        {/* Действия только для удаленных участников и только для организатора */}
        {!isLocal && isOrganizer && (
          <ActionsPopover
            options={[
              {
                icon: <MicrophoneFilledIcon />,
                label: "Выключить микрофон",
                onClick: () => {
                  console.log("Mute participant:", participant.id);
                },
              },
              {
                icon: <VideoOffFilledIcon />,
                label: "Выключить камеру",
                onClick: () => {
                  console.log("Turn off video:", participant.id);
                },
              },
              {
                icon: <HandRaisedFilledIcon />,
                label: "Передать управление",
                onClick: () => {
                  console.log("Grant control:", participant.id);
                },
              },
              {
                icon: <XMarkFilledIcon />,
                label: "Удалить со встречи",
                onClick: () => {
                  console.log("Remove participant:", participant.id);
                },
              },
            ]}
          />
        )}
      </div>
    </div>
  );
}
