/**
 * Media Optimizer Module
 * Оптимизация загрузки медиафайлов (изображений и видео)
 */

console.log('🚀 Media Optimizer module loading...');

// Конфигурация
const MEDIA_CONFIG = {
    // Количество элементов для первой загрузки
    initialLoadCount: 10,
    
    // Количество элементов для подгрузки
    loadMoreCount: 10,
    
    // Задержка перед загрузкой (debounce)
    loadDelay: 300,
    
    // Порог для Intersection Observer (когда начинать загрузку)
    intersectionThreshold: 0.1,
    
    // Отступ для предзагрузки (px)
    rootMargin: '50px'
};

// Глобальные переменные
let intersectionObserver = null;
let loadedImagesCount = 0;
let loadedVideosCount = 0;

/**
 * Инициализация Intersection Observer для lazy loading
 */
function initMediaObserver() {
    if ('IntersectionObserver' in window) {
        intersectionObserver = new IntersectionObserver(
            (entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        loadMediaElement(entry.target);
                        intersectionObserver.unobserve(entry.target);
                    }
                });
            },
            {
                root: null,
                rootMargin: MEDIA_CONFIG.rootMargin,
                threshold: MEDIA_CONFIG.intersectionThreshold
            }
        );
        
        console.log('✅ Intersection Observer инициализирован');
    } else {
        console.warn('⚠️ Intersection Observer не поддерживается, используем обычную загрузку');
    }
}

/**
 * Загрузка медиа-элемента (изображение или видео)
 */
function loadMediaElement(element) {
    const dataSrc = element.getAttribute('data-src');
    
    if (!dataSrc) return;
    
    // Показываем индикатор загрузки
    element.classList.add('loading');
    
    if (element.tagName === 'IMG') {
        loadImage(element, dataSrc);
    } else if (element.tagName === 'VIDEO') {
        loadVideo(element, dataSrc);
    }
}

/**
 * Загрузка изображения с прогрессом
 */
function loadImage(img, src) {
    // Создаем временное изображение для предзагрузки
    const tempImg = new Image();
    
    tempImg.onload = () => {
        img.src = src;
        img.classList.remove('loading');
        img.classList.add('loaded');
        loadedImagesCount++;
        
        // Добавляем плавное появление
        img.style.opacity = '0';
        setTimeout(() => {
            img.style.transition = 'opacity 0.3s ease-in-out';
            img.style.opacity = '1';
        }, 10);
        
        console.log(`✅ Изображение загружено (${loadedImagesCount}): ${src.substring(0, 50)}...`);
    };
    
    tempImg.onerror = () => {
        img.classList.remove('loading');
        img.classList.add('error');
        console.error(`❌ Ошибка загрузки изображения: ${src}`);
        
        // Показываем placeholder
        img.alt = '❌ Ошибка загрузки';
    };
    
    tempImg.src = src;
}

/**
 * Загрузка видео с прогрессом
 */
function loadVideo(video, src) {
    video.addEventListener('loadeddata', () => {
        video.classList.remove('loading');
        video.classList.add('loaded');
        loadedVideosCount++;
        console.log(`✅ Видео загружено (${loadedVideosCount}): ${src.substring(0, 50)}...`);
    }, { once: true });
    
    video.addEventListener('error', () => {
        video.classList.remove('loading');
        video.classList.add('error');
        console.error(`❌ Ошибка загрузки видео: ${src}`);
    }, { once: true });
    
    // Устанавливаем источник
    const source = video.querySelector('source') || document.createElement('source');
    source.src = src;
    source.type = 'video/mp4';
    
    if (!video.querySelector('source')) {
        video.appendChild(source);
    }
    
    video.load();
}

/**
 * Наблюдение за медиа-элементами
 */
function observeMediaElements(container) {
    if (!intersectionObserver) {
        initMediaObserver();
    }
    
    if (!intersectionObserver) {
        // Fallback: загружаем все сразу
        const mediaElements = container.querySelectorAll('img[data-src], video[data-src]');
        mediaElements.forEach(element => loadMediaElement(element));
        return;
    }
    
    // Находим все медиа-элементы с data-src
    const mediaElements = container.querySelectorAll('img[data-src], video[data-src]');
    
    console.log(`👁️ Наблюдаем за ${mediaElements.length} медиа-элементами`);
    
    mediaElements.forEach(element => {
        intersectionObserver.observe(element);
    });
}

/**
 * Оптимизация изображения для превью (уменьшение качества)
 */
function createThumbnailUrl(originalUrl, maxWidth = 400) {
    // Если есть API для создания thumbnail, используем его
    // Пока просто возвращаем оригинал
    return originalUrl;
}

/**
 * Предзагрузка критических изображений
 */
function preloadCriticalImages(urls) {
    console.log(`⚡ Предзагрузка ${urls.length} критических изображений`);
    
    urls.forEach(url => {
        const link = document.createElement('link');
        link.rel = 'preload';
        link.as = 'image';
        link.href = url;
        document.head.appendChild(link);
    });
}

/**
 * Очистка наблюдателя
 */
function cleanupObserver() {
    if (intersectionObserver) {
        intersectionObserver.disconnect();
        console.log('🧹 Intersection Observer очищен');
    }
}

/**
 * Получение статистики загрузки
 */
function getLoadingStats() {
    return {
        images: loadedImagesCount,
        videos: loadedVideosCount,
        total: loadedImagesCount + loadedVideosCount
    };
}

/**
 * Сброс счетчиков
 */
function resetStats() {
    loadedImagesCount = 0;
    loadedVideosCount = 0;
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
    initMediaObserver();
    console.log('✅ Media Optimizer готов к работе');
});

// Экспорт функций
window.mediaOptimizer = {
    observe: observeMediaElements,
    preload: preloadCriticalImages,
    cleanup: cleanupObserver,
    stats: getLoadingStats,
    reset: resetStats,
    config: MEDIA_CONFIG
};

console.log('✅ Media Optimizer module loaded');