import useModalStore from "../../stores/useModalStore";
import userAgentParser from "ua-parser-js";
import AdminUserIcon from "../icons/AdminUserIcon";
import DesktopIcon from "../icons/DesktopIcon";
import ExitIcon from "../icons/ExitIcon";
import HandOffIcon from "../icons/HandOffIcon";
import HandOnIcon from "../icons/HandOnIcon";
import MobilePhoneIcon from "../icons/MobilePhoneIcon";
import UserIcon from "../icons/UserIcon";
import CloseIcon from "../icons/CloseIcon";
import useStreamUserStore from "../../stores/useStreamUserStore";
import { Trans } from "react-i18next";
import MicroOffIcon from "../icons/MicroOffIcon";
import MicroOnIcon from "../icons/MicroOnIcon";

/* eslint-disable @typescript-eslint/no-explicit-any */
interface UsersManagementModalProps {
  me: any;
  handleUpdate: (socketId: string, params: any) => void;
  handleKick: (socketId: string) => void;
}

function UsersManagementModal({
  me,
  handleUpdate,
  handleKick,
}: UsersManagementModalProps) {
  const [setModal] = useModalStore((state) => [state.setModal]);
  const [users] = useStreamUserStore((state) => [state.users]);

  return (
    <div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[360px] flex flex-col gap-2">
      <div className="flex flex-col lg:gap-8 gap-4">
        <p className="font-gilroy lg:text-2xl">
          <Trans i18nKey={"members"}>Участники</Trans>
        </p>
        <div className="flex flex-col gap-4">
          {users.map((user: any, index: number) => (
            <div key={index} className="relative">
              <div className="flex items-center gap-4 text-white">
                <div className="relative flex flex-col">
                  {user.admin ? <AdminUserIcon /> : <UserIcon />}
                </div>

                {new userAgentParser(user.ua).getDevice().type !== "mobile" ? (
                  <DesktopIcon />
                ) : (
                  <MobilePhoneIcon />
                )}

                <span className="text-sm">{user.city}</span>

                {me && me.admin && (
                  <>
                    {!user.admin && (
                      <>
                        {!user.allowControl ? (
                          <button
                            onClick={() =>
                              handleUpdate(user.id, { allowControl: true })
                            }
                            className="outline-none"
                          >
                            <HandOffIcon />
                          </button>
                        ) : (
                          <button
                            onClick={() =>
                              handleUpdate(user.id, { allowControl: false })
                            }
                            className="outline-none"
                          >
                            <HandOnIcon />
                          </button>
                        )}
                      </>
                    )}

                    {!user.muted ? (
                      <button
                        onClick={() => handleUpdate(user.id, { muted: true })}
                        className="outline-none"
                      >
                        <MicroOnIcon />
                      </button>
                    ) : (
                      <button
                        onClick={() => handleUpdate(user.id, { muted: false })}
                        className="outline-none"
                      >
                        <MicroOffIcon />
                      </button>
                    )}
                  </>
                )}

                {me && me.admin && !user.admin && (
                  <button
                    onClick={() => handleKick(user.id)}
                    className="outline-none"
                  >
                    <ExitIcon />
                  </button>
                )}

                <div>
                  {me && me.id === user.id && (
                    <span className="text-[#73788C] text-xs">
                      <Trans i18nKey={"you"}>Вы</Trans>
                    </span>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <button
        onClick={() => setModal(null)}
        className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
      >
        <CloseIcon />
      </button>
    </div>
  );
}

export default UsersManagementModal;