const Player = ({ roomId, nickname, VideoUrl, setVideoUrl }) => {
    const [showChat, setShowChat] = useState(false);
    const playerRef = useRef(null);
    const lockSeek = useRef(false);
    const RUSSIA = {
    };
    const toggleChat = () => {
        setShowChat((prevShowChat) => !prevShowChat);
    };

    useEffect(() => {
        const player = playerRef.current;

        const sendCurrentTime = () => {
            const currentTime = player.currentTime;
            if (parseInt(currentTime) !== 0) {
                socket.emit('videoControl', { roomId, action: 'sync', data: parseInt(currentTime) });
            }
        };

        const intervalId = setInterval(sendCurrentTime, 5000);

        const handlePlay = () => {
            socket.emit('videoControl', { roomId, action: 'play' });
        };

        const handlePause = () => {
            socket.emit('videoControl', { roomId, action: 'pause' });
        };

        const handleSeeked = () => {
            if (!lockSeek.current) {
                socket.emit('videoControl', { roomId, action: 'seek', data: parseInt(player.currentTime) });
            }
        };

        player.addEventListener('play', handlePlay);
        player.addEventListener('pause', handlePause);
        player.addEventListener('seeked', handleSeeked);

        const handleVideoControl = (data) => {
            if (data) {
                if (data.action === 'setUrl') {
                    setVideoUrl(data.data);
                } else if (data.action === 'play') {
                    player.play();
                } else if (data.action === 'pause') {
                    player.pause();
                } else if (data.action === 'seek' || data.action === 'sync') {
                    lockSeek.current = true;
                    if (Math.abs(player.currentTime - data.data) > 2) {
                        player.currentTime = data.data;
                    }
                    lockSeek.current = false;
                }
            }
        };

        socket.on('videoControl', handleVideoControl);

        return () => {
            clearInterval(intervalId);
            socket.off('videoControl', handleVideoControl);
            player.removeEventListener('play', handlePlay);
            player.removeEventListener('pause', handlePause);
            player.removeEventListener('seeked', handleSeeked);
        };
    }, [roomId, setVideoUrl]);

    // Стили контейнера плеера
    const playerContainerStyle = {
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
    };

    // Стили для MediaPlayer
    const mediaPlayerStyle = {
        width: '100%',
        height: '100%',
        flex: '1',
        position: 'relative',
    };

    // Стили для видео
    const videoStyle = {
        width: '100%',
        height: '100%',
        objectFit: 'contain',
    };

    // Стили для кнопки чата
    const chatToggleButtonStyle = {
        position: 'absolute',
        top: '50%', // Вертикальное центрирование
        transform: 'translateY(-50%)',
        right: showChat ? 'calc(30% + 20px)' : '20px', // Смещаем кнопку влево, когда чат открыт
        zIndex: 15, // zIndex выше, чтобы кнопка была поверх чата
        color: 'white',
    };

    // Стили для контейнера чата
    const chatContainerStyle = {
        position: 'absolute',
        top: '0',
        right: '0',
        width: '30%',
        height: '100%',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        zIndex: 10,
        overflowY: 'auto',
        display: 'flex',
        flexDirection: 'column',
    };

    // Стили для кнопки закрытия внутри чата
    const chatCloseButtonStyle = {
        alignSelf: 'flex-end',
        color: 'white',
    };

    return (
        <div style={playerContainerStyle}>
            <MediaPlayer
                ref={playerRef}
                src={VideoUrl || 'https://files.vidstack.io/sprite-fight/720p.mp4'}
                viewType='video'
                streamType='on-demand'
                logLevel='warn'
                crossOrigin
                playsInline
                title='Sprite Fight'
                poster='https://files.vidstack.io/sprite-fight/poster.webp'
                aspectRatio='none'
                style={mediaPlayerStyle}
                controls={showChat} // Скрываем панель управления при открытии чата
            >
                <MediaProvider>
                    {(props) => (
                        <video {...props} style={videoStyle}>
                            {props.children}
                        </video>
                    )}
                </MediaProvider>
                <DefaultAudioLayout icons={defaultLayoutIcons} />
                <DefaultVideoLayout icons={defaultLayoutIcons} translations={RUSSIA} title={'Матрица'} />

                {/* Кнопка переключения чата */}
                <IconButton onClick={toggleChat} style={chatToggleButtonStyle}>
                    <ChatIcon />
                </IconButton>

                {/* Отображение чата поверх плеера */}
                {showChat && (
                    <div style={chatContainerStyle}>
                        {/* Кнопка закрытия внутри чата */}

                        {/* Сам чат */}
                        <Chat roomId={roomId} nickname={nickname} />
                    </div>
                )}
            </MediaPlayer>
        </div>
    );
};

export default Player; const PlayerCollaps = ({ roomId, videoUrl, setVideoUrl }) => {
    const iframeRef = useRef(null);
    const lockSeekRef = useRef(false);
    const lockStartRef = useRef(false);
    // Хранилище текущего сезона и эпизода
    const currentSeasonRef = useRef("");
    const currentEpisodeRef = useRef("")



    let ts;
    const remoteControl = useRef({
        play: false,
        pause: false,
        seek: false,
        changeEpisode: false,
    });

    const [offset, setOffset] = useState(null);
    const [currentTime, setCurrentTime] = useState(null);
    const [loading, setLoading] = useState(true);

    // Обработчик сообщений из iframe, обернутый в useCallback
    const handleMessage = useCallback((event) => {
        const data = event.data;
        if (data && data.type) {

            const timestamp = ts.now() / 1000;
            const controlPayload = { roomId, action: data.type, data: data.time, timestamp };

            switch (data.type) {
                case 'play':
                    if (remoteControl.current.play) {
                        remoteControl.current.play = false; // Сбрасываем флаг
                        break;
                    }
                    //remoteControl.current.play = true;
                    socket.emit('videoControl', controlPayload);
                    break;
                case 'pause':
                    if (remoteControl.current.pause) {
                        remoteControl.current.pause = false; // Сбрасываем флаг
                        break;
                    }
                    //remoteControl.current.pause = true;
                    socket.emit('videoControl', controlPayload);
                    break;
                case 'seeking':
                    if (remoteControl.current.seek) {
                        remoteControl.current.seek = false; // Сбрасываем флаг
                        break;
                    }
                    //remoteControl.current.seek = true;
                    socket.emit('videoControl', { ...controlPayload, action: 'seek' });
                    break;
                case 'sync':
                    if (remoteControl.current.play) {

                        break;
                    }
                    socket.emit('videoControl', controlPayload);
                    break;
                case 'playlistItem':
                    //remoteControl.current.changeEpisode = true;
                    if (remoteControl.current.changeEpisode) {
                        remoteControl.current.changeEpisode = false; // Сбрасываем флаг
                        break;
                    }
                    currentSeasonRef.current = data.season;
                    currentEpisodeRef.current = data.episode;
                    socket.emit('videoControl', {
                        roomId,
                        action: "changeEpisode",
                        data: { season: data.season, episode: data.episode },
                        timestamp,
                    });
                    break;
                default:
                    break;
            }
        }
    }, [roomId, socket]);

    // Добавление и удаление слушателя сообщений из iframe
    useEffect(() => {
        const loadScript = (src) => {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                script.async = true;
                script.onload = () => resolve();
                script.onerror = () => reject(new Error(`Не удалось загрузить скрипт ${src}`));
                document.head.appendChild(script);
            });
        };

        // Асинхронная функция для загрузки всех необходимых скриптов
        const loadScripts = async () => {
            try {
                // Загрузка полифиллов для старых браузеров
                await loadScript('https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js');
                await loadScript('https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.23.0/es6-shim.min.js');

                // Загрузка timesync
                await loadScript('https://cdn.jsdelivr.net/npm/timesync@1.0.11/dist/timesync.min.js');

                if (window.timesync) {
                    // Создание экземпляра timesync
                    ts = window.timesync.create({
                        server: 'http://192.168.31.55:3001/timesync',
                        interval: 10000
                    });

                    // Обработчик изменения смещения
                    ts.on('change', (newOffset) => {

                    });

                    // Обновление текущего времени каждую секунду
                    const intervalId = setInterval(() => {
                        const now = new Date(ts.now());
                        setCurrentTime(now);
                    }, 1000);

                    // Установка состояния загрузки
                    setLoading(false);

                    // Очистка при размонтировании компонента
                    return () => {
                        ts.destroy();
                        clearInterval(intervalId);
                    };
                } else {
                    throw new Error('timesync не доступен на window');
                }
            } catch (error) {
                console.error(error);
                setLoading(false);
            }
        };

        loadScripts();
        window.addEventListener('message', handleMessage);
        return () => {
            window.removeEventListener('message', handleMessage);
        };
    }, [handleMessage]);

    // Обработчик событий сокета, обернутый в useCallback
    const handleVideoControl = useCallback((data) => {
        if (iframeRef.current) {
            const message = {};
            const currentTimestamp = ts.now() / 1000;

            switch (data.action) {
                case "setUrl":
                    setVideoUrl(data.data);
                    break;
                case "play":
                    remoteControl.current.play = true;
                    message.action = "play";
                    break;
                case "pause":
                    remoteControl.current.pause = true;
                    message.action = "pause";
                    break;
                case "seek":
                    remoteControl.current.seek = true;
                    message.action = 'seek';
                    message.time = data.data + (currentTimestamp - data.timestamp);
                    break;
                case "sync":
                    remoteControl.current.seek = true;
                    message.action = 'seek';
                    message.time = data.data + (currentTimestamp - data.timestamp);
                    break;
                case "changeEpisode":
                    remoteControl.current.changeEpisode = true;
                    if (
                        currentSeasonRef.current?.toString() !== data.data.season.toString() ||
                        currentEpisodeRef.current?.toString() !== data.data.episode.toString()
                    ) {
                        message.action = 'changeEpisode';
                        message.season = data.data.season;
                        message.episode = data.data.episode;
                        // Обновляем текущий сезон и серию
                        currentSeasonRef.current = data.data.season;
                        currentEpisodeRef.current = data.data.episode;
                    }
                    break;
                default:
                    break;
            }

            // Отправка дополнительных сообщений для play и pause
            if (data.action === "play") {
                const adjustedTime = data.data + (currentTimestamp - data.timestamp);
                iframeRef.current.contentWindow.postMessage({ action: "seek", time: adjustedTime }, '*');
            }
            if (data.action === "pause") {
                const adjustedTime = data.data ;
                iframeRef.current.contentWindow.postMessage({ action: "seek", time: adjustedTime }, '*');
            }

            // Отправка основного сообщения, если оно заполнено
            if (Object.keys(message).length > 0) {
                console.log("Отправка сообщения в iframe:", message);
                iframeRef.current.contentWindow.postMessage(message, '*');
            }
        }
    }, [iframeRef]);

    // Функция для привязки слушателей
    const bindSocketListeners = useCallback(() => {
        socket.on('videoControl', handleVideoControl);
    }, [handleVideoControl]);

    // Функция для отвязки слушателей
    const unbindSocketListeners = useCallback(() => {
        socket.off('videoControl', handleVideoControl);
    }, [handleVideoControl]);

    // Привязка и отвязка слушателей сокета при изменении roomId или при подключении/реконнекте
    useEffect(() => {
        // Привязка слушателей при подключении
        socket.on('connect', bindSocketListeners);
        socket.on('reconnect', bindSocketListeners);

        // Первоначальная привязка, если уже подключено
        if (socket.connected) {
            bindSocketListeners();
        }

        // Очистка при размонтировании или изменении зависимостей
        return () => {
            socket.off('connect', bindSocketListeners);
            socket.off('reconnect', bindSocketListeners);
            unbindSocketListeners();
        };
    }, [bindSocketListeners, unbindSocketListeners]);

    return (
        <>
            {videoUrl ? (
                <iframe
                    key={videoUrl} // Ключ для пересоздания iframe при изменении videoId
                    ref={iframeRef}
                    src={`http://192.168.31.55:3002/api/collaps/${videoUrl}`}
                    style={{ width: '100%', height: '100%', border: 'none' }}
                    allow="autoplay; encrypted-media"
                    allowFullScreen
                    title="Video Player"
                />
            ) : (
                <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <p>Выберите видео для воспроизведения.</p>
                </div>
            )}
        </>
    );
};

export default PlayerCollaps; необходимо вынести логику синхронизации текущего времени с сервером в отдельный файл и возможно еще что-то. нужно взять логику из PlayerCollaps и добавить ее в Player