document.addEventListener('DOMContentLoaded', function() {
    const sections = document.querySelectorAll('section');
    const navLinks = document.querySelectorAll('nav a');

    function showSection(target) {
        sections.forEach(section => {
            section.classList.remove('active');
        });
        document.getElementById(target).classList.add('active');
    }

    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            showSection(this.dataset.target);
        });
    });

    // Інтерактивна форма для додавання подій
    const eventForm = document.getElementById('eventForm');
    const eventsList = document.getElementById('eventsList');
    const repeatEventCheckbox = document.getElementById('repeatEvent');
    const repeatOptions = document.getElementById('repeatOptions');

    eventForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const eventName = eventForm.querySelector('input[type="text"]').value;
        // ... інші поля ...

        // Обробка повторюваних подій
        const repeatType = repeatEventCheckbox.checked ? repeatOptions.querySelector('input[name="repeatType"]:checked').value : null;

        // Створюємо новий елемент події
        const eventElement = document.createElement('div');
        eventElement.classList.add('event');
        eventElement.innerHTML = `<strong>Назва: </strong>${eventName}

                              <!-- ... інші поля ... -->`;

        // Додаємо подію до списку
        eventsList.appendChild(eventElement);

        // Очищуємо форму
        eventForm.reset();
    });

    // Інтеграція календаря з FullCalendar
    const calendarEl = document.getElementById('calendarContainer');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: [
            // Додайте події тут
        ]
    });
    calendar.render();

    // Інтеграція Lightbox для галереї
    const lightbox = new SimpleLightbox('.gallery a', {
        captionsData: 'alt',
        captionsPosition: 'outside',
        captionDelay: 200
    });

    // Інтерактивні ігри
    const gameButtons = document.querySelectorAll('.game-button');
    const gameContainer = document.querySelector('.game-container');

    gameButtons.forEach(button => {
        button.addEventListener('click', function() {
            const gameType = button.getAttribute('data-game');
            gameContainer.innerHTML = ''; // Очищуємо попередню гру

            switch(gameType) {
                case 'crossword':
                    // Відображаємо кросворд
                    break;
                // Додайте обробку для інших ігор
            }
        });
    });

    // Інтеграція чату
    const chatInput = document.getElementById('chatInput');
    const sendButton = document.getElementById('sendButton');
    const chatMessages = document.querySelector('.chat-messages');
    const socket = new WebSocket('ws://localhost:8080');

    socket.addEventListener('open', () => {
        console.log('Підключено до WebSocket');
    });

    socket.addEventListener('message', event => {
        const message = JSON.parse(event.data);
        displayMessage(message);
    });

    sendButton.addEventListener('click', () => {
        const message = chatInput.value;
        if (message) {
            socket.send(JSON.stringify({ sender: 'User', message }));
            chatInput.value = '';
        }
    });

    function displayMessage(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = `${message.sender}: ${message.message}`;
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    // Інші функції, такі як запис відео, аналітика настрою, рекомендації тощо.
});