/**
 * Каталог товаров - JavaScript функционал
 * - Раскрытие/сворачивание категорий
 * - Фильтрация и поиск товаров
 * - Переключение вида (карточки/список)
 * - Inline-редактирование названий категорий
 */

document.addEventListener('DOMContentLoaded', function() {

    // ========================================
    // Раскрытие/сворачивание категорий
    // ========================================
    document.querySelectorAll('.category-header').forEach(header => {
        header.addEventListener('click', function(e) {
            // Игнорируем клик по кнопке переименования и полю ввода
            if (e.target.classList.contains('category-rename-btn') ||
                e.target.classList.contains('category-name-input')) {
                return;
            }

            e.stopPropagation();
            const node = this.closest('.category-node');
            const children = node.querySelector('.category-children');
            const items = node.querySelector('.category-items');
            const toggle = this.querySelector('.category-toggle');

            if (children) {
                children.classList.toggle('d-none');
            }
            if (items) {
                items.classList.toggle('d-none');
            }
            if (toggle) {
                toggle.classList.toggle('collapsed');
            }
        });
    });

    // Развернуть все
    const expandAllBtn = document.getElementById('expand-all');
    if (expandAllBtn) {
        expandAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.category-children, .category-items').forEach(el => el.classList.remove('d-none'));
            document.querySelectorAll('.category-toggle').forEach(el => el.classList.remove('collapsed'));
        });
    }

    // Свернуть все
    const collapseAllBtn = document.getElementById('collapse-all');
    if (collapseAllBtn) {
        collapseAllBtn.addEventListener('click', function() {
            document.querySelectorAll('.category-children, .category-items').forEach(el => el.classList.add('d-none'));
            document.querySelectorAll('.category-toggle').forEach(el => el.classList.add('collapsed'));
        });
    }

    // ========================================
    // Фильтрация по категории
    // ========================================
    let selectedCategoryId = null;

    // Добавляем обработчик клика на категорию для фильтрации
    document.querySelectorAll('.category-header').forEach(header => {
        header.addEventListener('click', function(e) {
            // Игнорируем клики на кнопки управления и toggle
            if (e.target.classList.contains('category-rename-btn') ||
                e.target.classList.contains('category-add-child-btn') ||
                e.target.classList.contains('category-name-input') ||
                e.target.classList.contains('category-toggle') ||
                e.target.closest('.category-toggle')) {
                return;
            }

            const categoryNode = this.closest('.category-node');
            const categoryId = categoryNode.dataset.categoryId;

            // Toggle selection
            if (selectedCategoryId === categoryId) {
                // Deselect - show all
                selectedCategoryId = null;
                document.querySelectorAll('.category-header').forEach(h => h.classList.remove('active'));
            } else {
                // Select this category
                selectedCategoryId = categoryId;
                document.querySelectorAll('.category-header').forEach(h => h.classList.remove('active'));
                this.classList.add('active');
            }

            filterProducts();
        });
    });

    // Проверяет, находится ли категория в дереве выбранной категории
    function isInCategoryTree(categoryId, rootCategoryId) {
        if (categoryId === rootCategoryId) return true;

        // Находим узел категории
        const categoryNode = document.querySelector(`.category-node[data-category-id="${categoryId}"]`);
        if (!categoryNode) return false;

        // Проверяем всех предков
        let currentNode = categoryNode;
        while (currentNode) {
            const nodeId = currentNode.dataset.categoryId;
            if (nodeId === rootCategoryId) return true;

            // Переходим к родительскому .category-node
            const parentContainer = currentNode.parentElement.closest('.category-children');
            if (parentContainer) {
                currentNode = parentContainer.closest('.category-node');
            } else {
                break;
            }
        }

        return false;
    }

    // Единая функция фильтрации товаров
    function filterProducts() {
        const catalogItems = document.querySelectorAll('.catalog-item');

        catalogItems.forEach(item => {
            let shouldShow = true;

            // Применяем фильтр по категории
            if (selectedCategoryId) {
                const itemCategories = item.dataset.categoryIds ?
                                       item.dataset.categoryIds.split(',').filter(id => id.trim()) : [];

                // Проверяем, принадлежит ли товар выбранной категории или её потомкам
                shouldShow = itemCategories.length > 0 && itemCategories.some(catId => {
                    return isInCategoryTree(catId.trim(), selectedCategoryId);
                });
            }

            // Применяем фильтр по типу
            const activeTypeBtn = document.querySelector('[data-filter].active');
            if (activeTypeBtn && shouldShow) {
                const filterType = activeTypeBtn.dataset.filter;
                if (filterType !== 'all' && item.dataset.type !== filterType) {
                    shouldShow = false;
                }
            }

            // Применяем поиск
            const searchInput = document.getElementById('catalog-search');
            if (searchInput && shouldShow) {
                const query = searchInput.value.toLowerCase();
                if (query && !item.textContent.toLowerCase().includes(query)) {
                    shouldShow = false;
                }
            }

            item.style.display = shouldShow ? '' : 'none';
        });
    }

    // ========================================
    // Фильтр по типу (товары/комплекты)
    // ========================================
    document.querySelectorAll('[data-filter]').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('[data-filter]').forEach(b => {
                b.classList.remove('active', 'btn-primary');
                b.classList.add('btn-outline-primary');
            });
            this.classList.add('active', 'btn-primary');
            this.classList.remove('btn-outline-primary');

            // Используем единую функцию фильтрации
            filterProducts();
        });
    });

    // ========================================
    // Поиск
    // ========================================
    const searchInput = document.getElementById('catalog-search');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            // Используем единую функцию фильтрации
            filterProducts();
        });
    }

    // ========================================
    // Переключение вида: карточки / список
    // ========================================
    const catalogGrid = document.getElementById('catalog-grid');
    const viewGridBtn = document.getElementById('view-grid');
    const viewListBtn = document.getElementById('view-list');

    if (viewGridBtn && viewListBtn && catalogGrid) {
        viewGridBtn.addEventListener('click', function() {
            catalogGrid.classList.remove('catalog-list');
            viewGridBtn.classList.add('active');
            viewListBtn.classList.remove('active');
            // Восстановить колонки для карточек
            document.querySelectorAll('.catalog-item').forEach(item => {
                item.className = item.className.replace(/col-\d+|col-\w+-\d+/g, '');
                item.classList.add('col-6', 'col-lg-4', 'col-xl-3', 'catalog-item');
            });
        });

        viewListBtn.addEventListener('click', function() {
            catalogGrid.classList.add('catalog-list');
            viewListBtn.classList.add('active');
            viewGridBtn.classList.remove('active');
            // Убрать колонки для списка
            document.querySelectorAll('.catalog-item').forEach(item => {
                item.className = item.className.replace(/col-\d+|col-\w+-\d+/g, '');
                item.classList.add('col-12', 'catalog-item');
            });
        });
    }

    // ========================================
    // Inline-редактирование названий категорий (через иконку карандаша)
    // ========================================
    document.querySelectorAll('.category-rename-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();

            const categoryId = this.dataset.categoryId;
            const header = this.closest('.category-header');
            const nameSpan = header.querySelector('.category-name');

            // Уже редактируется?
            if (nameSpan.querySelector('input')) return;

            const currentName = nameSpan.textContent.trim();

            // Создаем input
            const input = document.createElement('input');
            input.type = 'text';
            input.value = currentName;
            input.className = 'category-name-input';
            input.style.cssText = 'width: 100%; border: 1px solid #0d6efd; border-radius: 3px; padding: 2px 6px; font-size: inherit; outline: none;';

            // Сохраняем оригинальный текст
            nameSpan.dataset.originalName = currentName;
            nameSpan.textContent = '';
            nameSpan.appendChild(input);
            input.focus();
            input.select();

            // Функция сохранения
            const saveCategory = async () => {
                const newName = input.value.trim();

                if (!newName) {
                    // Отмена - пустое название
                    cancelEdit();
                    return;
                }

                if (newName === nameSpan.dataset.originalName) {
                    // Название не изменилось
                    cancelEdit();
                    return;
                }

                // Показываем спиннер
                input.disabled = true;
                input.style.opacity = '0.5';

                try {
                    const response = await fetch(`/products/api/categories/${categoryId}/rename/`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': getCsrfToken()
                        },
                        body: JSON.stringify({ name: newName })
                    });

                    const data = await response.json();

                    if (data.success) {
                        // Успешно сохранено
                        nameSpan.textContent = data.name;
                    } else {
                        // Ошибка
                        alert(data.error || 'Ошибка при сохранении');
                        cancelEdit();
                    }
                } catch (error) {
                    console.error('Ошибка:', error);
                    alert('Ошибка сети');
                    cancelEdit();
                }
            };

            // Функция отмены
            const cancelEdit = () => {
                nameSpan.textContent = nameSpan.dataset.originalName;
            };

            // Enter - сохранить
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    saveCategory();
                } else if (e.key === 'Escape') {
                    e.preventDefault();
                    cancelEdit();
                }
            });

            // Потеря фокуса - сохранить
            input.addEventListener('blur', function() {
                // Небольшая задержка чтобы не конфликтовать с Enter
                setTimeout(saveCategory, 100);
            });
        });
    });

    // ========================================
    // Inline-создание категорий
    // ========================================

    // Создание корневой категории
    const addRootCategoryBtn = document.getElementById('add-root-category-btn');
    if (addRootCategoryBtn) {
        addRootCategoryBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            showCategoryInput(null);
        });
    }

    // Создание подкатегории (через иконку "+")
    document.querySelectorAll('.category-add-child-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const parentId = this.dataset.parentId;
            const categoryNode = this.closest('.category-node');
            showCategoryInput(parentId, categoryNode);
        });
    });

    // Функция показа inline инпута для создания категории
    function showCategoryInput(parentId = null, parentNode = null) {
        // Проверяем, нет ли уже активного инпута
        const existingInput = document.querySelector('.category-create-input');
        if (existingInput) {
            existingInput.focus();
            return;
        }

        // Создаем контейнер для нового инпута
        const inputContainer = document.createElement('div');
        inputContainer.className = 'category-node';
        inputContainer.style.cssText = 'padding-left: ' + (parentId ? '1rem' : '0');

        const inputHeader = document.createElement('div');
        inputHeader.className = 'category-header';
        inputHeader.style.cssText = 'background-color: #e7f1ff;';

        // Иконка (точка для нового узла)
        const dotIcon = document.createElement('i');
        dotIcon.className = 'bi bi-dot text-muted';
        inputHeader.appendChild(dotIcon);

        // Иконка папки
        const folderIcon = document.createElement('i');
        folderIcon.className = 'bi bi-folder2 text-secondary';
        inputHeader.appendChild(folderIcon);

        // Создаем input
        const input = document.createElement('input');
        input.type = 'text';
        input.placeholder = 'Название категории...';
        input.className = 'category-create-input flex-grow-1';
        input.style.cssText = 'border: 1px solid #198754; border-radius: 3px; padding: 2px 6px; font-size: 0.9rem; outline: none;';
        inputHeader.appendChild(input);

        inputContainer.appendChild(inputHeader);

        // Вставляем в нужное место
        if (parentId && parentNode) {
            // Подкатегория - вставляем в children контейнер
            let childrenContainer = parentNode.querySelector('.category-children');

            // Если контейнер не существует, создаем его
            if (!childrenContainer) {
                childrenContainer = document.createElement('div');
                childrenContainer.className = 'category-children';
                parentNode.appendChild(childrenContainer);
            }

            // Раскрываем родителя, если свернут
            if (childrenContainer.classList.contains('d-none')) {
                childrenContainer.classList.remove('d-none');
                const toggle = parentNode.querySelector('.category-toggle');
                if (toggle) {
                    toggle.classList.remove('collapsed');
                }
            }

            childrenContainer.insertBefore(inputContainer, childrenContainer.firstChild);
        } else {
            // Корневая категория - вставляем в начало дерева
            const categoryTree = document.querySelector('.category-tree');
            categoryTree.insertBefore(inputContainer, categoryTree.firstChild);
        }

        input.focus();

        // Флаг для предотвращения повторного вызова
        let isSubmitted = false;
        let blurTimeoutId = null;

        // Функция создания категории
        const createCategory = async () => {
            // Проверяем, не была ли уже отправлена форма
            if (isSubmitted) return;

            const name = input.value.trim();
            if (!name) {
                inputContainer.remove();
                return;
            }

            // Отменяем blur обработчик если он запланирован
            if (blurTimeoutId) {
                clearTimeout(blurTimeoutId);
                blurTimeoutId = null;
            }

            // Устанавливаем флаг
            isSubmitted = true;

            // Показываем загрузку
            input.disabled = true;
            input.style.opacity = '0.5';

            try {
                const response = await fetch('/products/api/categories/create/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCsrfToken()
                    },
                    body: JSON.stringify({
                        name: name,
                        parent_id: parentId
                    })
                });

                const data = await response.json();

                if (data.success) {
                    // Если создали подкатегорию - сохраняем ID родителя для раскрытия после reload
                    if (parentId) {
                        location.href = `${window.location.pathname}?expand=${parentId}`;
                    } else {
                        location.reload();
                    }
                } else {
                    // Удаляем input ДО alert
                    inputContainer.remove();
                    alert(data.error || 'Ошибка при создании категории');
                }
            } catch (error) {
                console.error('Ошибка при создании категории:', error);
                inputContainer.remove();
                alert('Ошибка сети');
            }
        };

        // Функция отмены
        const cancelCreate = () => {
            if (!isSubmitted) {
                inputContainer.remove();
            }
        };

        // Enter - создать
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                createCategory();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                cancelCreate();
            }
        });

        // Потеря фокуса - сохранить или отменить
        input.addEventListener('blur', function() {
            // Небольшая задержка чтобы не конфликтовать с Enter
            blurTimeoutId = setTimeout(() => {
                if (!isSubmitted) {
                    if (input.value.trim()) {
                        createCategory();
                    } else {
                        cancelCreate();
                    }
                }
            }, 100);
        });
    }

    // ========================================
    // Автоматическое раскрытие категории после создания подкатегории
    // ========================================
    const urlParams = new URLSearchParams(window.location.search);
    const expandCategoryId = urlParams.get('expand');

    if (expandCategoryId) {
        // Находим целевую категорию
        const targetNode = document.querySelector(`.category-node[data-category-id="${expandCategoryId}"]`);

        if (targetNode) {
            // Рекурсивно раскрываем всех предков (от корня до целевой категории)
            function expandAncestors(node) {
                // Ищем родительский .category-children контейнер
                const parentChildrenContainer = node.closest('.category-children');

                if (parentChildrenContainer) {
                    // Раскрываем этот контейнер
                    parentChildrenContainer.classList.remove('d-none');

                    // Находим родительский .category-node
                    const parentNode = parentChildrenContainer.closest('.category-node');

                    if (parentNode) {
                        // Раскрываем chevron родителя
                        const toggle = parentNode.querySelector(':scope > .category-header > .category-toggle');
                        if (toggle) {
                            toggle.classList.remove('collapsed');
                        }

                        // Рекурсивно раскрываем предков выше
                        expandAncestors(parentNode);
                    }
                }
            }

            // Раскрываем всех предков
            expandAncestors(targetNode);

            // Раскрываем children самой целевой категории
            const childrenContainer = targetNode.querySelector(':scope > .category-children');
            if (childrenContainer) {
                childrenContainer.classList.remove('d-none');

                const toggle = targetNode.querySelector(':scope > .category-header > .category-toggle');
                if (toggle) {
                    toggle.classList.remove('collapsed');
                }
            }

            // Плавный скролл к целевой категории
            targetNode.scrollIntoView({ behavior: 'smooth', block: 'center' });

            // Очищаем URL от параметра expand
            const cleanUrl = window.location.pathname + window.location.hash;
            window.history.replaceState({}, document.title, cleanUrl);
        }
    }

    // ========================================
    // Inline-редактирование цен (только для Product, не для ProductKit)
    // ========================================

    // Обработчик клика на цене (редактирование)
    document.addEventListener('click', function(e) {
        const priceSpan = e.target.closest('.editable-price');
        if (!priceSpan) return;

        // Уже редактируется?
        if (priceSpan.querySelector('input')) return;

        const productId = priceSpan.dataset.productId;
        const field = priceSpan.dataset.field; // 'price' или 'sale_price'
        const currentValue = priceSpan.dataset.currentValue;

        // Создаем input
        const input = document.createElement('input');
        input.type = 'number';
        input.step = '0.01';
        input.min = '0';
        input.value = currentValue;
        input.className = 'price-edit-input';

        // Сохраняем оригинальный HTML
        const originalHTML = priceSpan.innerHTML;
        priceSpan.innerHTML = '';
        priceSpan.appendChild(input);
        input.focus();
        input.select();

        // Функция сохранения
        const savePrice = async () => {
            const newValue = input.value.trim();

            // Валидация
            if (!newValue || parseFloat(newValue) < 0) {
                // Отмена - пустое или отрицательное значение
                priceSpan.innerHTML = originalHTML;
                return;
            }

            // Проверяем, изменилось ли значение
            if (parseFloat(newValue) === parseFloat(currentValue)) {
                // Значение не изменилось
                priceSpan.innerHTML = originalHTML;
                return;
            }

            // Показываем загрузку
            input.disabled = true;
            input.style.opacity = '0.5';

            try {
                const response = await fetch(`/products/api/products/${productId}/update-price/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCsrfToken()
                    },
                    body: JSON.stringify({
                        field: field,
                        value: newValue
                    })
                });

                const data = await response.json();

                if (data.success) {
                    // Обновляем весь контейнер с ценами
                    updatePriceDisplay(productId, data.price, data.sale_price);
                } else {
                    alert(data.error || 'Ошибка при обновлении цены');
                    priceSpan.innerHTML = originalHTML;
                }
            } catch (error) {
                console.error('Ошибка:', error);
                alert('Ошибка сети');
                priceSpan.innerHTML = originalHTML;
            }
        };

        // Функция отмены
        const cancelEdit = () => {
            priceSpan.innerHTML = originalHTML;
        };

        // Enter - сохранить
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                savePrice();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                cancelEdit();
            }
        });

        // Потеря фокуса - сохранить
        input.addEventListener('blur', function() {
            setTimeout(savePrice, 100);
        });
    });

    // Добавление скидочной цены
    document.addEventListener('click', function(e) {
        const addBtn = e.target.closest('.add-sale-price');
        if (!addBtn) return;

        const productId = addBtn.dataset.productId;
        const priceContainer = addBtn.closest('.price-edit-container');
        const regularPriceSpan = priceContainer.querySelector('.editable-price[data-field="price"]');
        const currentPrice = parseFloat(regularPriceSpan.dataset.currentValue);

        // Запрашиваем скидочную цену
        const salePriceInput = prompt('Введите скидочную цену (меньше ' + currentPrice.toFixed(2) + ' руб.):', '');

        if (!salePriceInput) return; // Отменено

        const salePrice = parseFloat(salePriceInput);

        // Валидация
        if (isNaN(salePrice) || salePrice <= 0) {
            alert('Некорректная цена');
            return;
        }

        if (salePrice >= currentPrice) {
            alert('Скидочная цена должна быть меньше обычной цены (' + currentPrice.toFixed(2) + ' руб.)');
            return;
        }

        // Сохраняем
        updatePriceViaAPI(productId, 'sale_price', salePrice.toFixed(2));
    });

    // Удаление скидочной цены
    document.addEventListener('click', function(e) {
        const removeBtn = e.target.closest('.remove-sale-price');
        if (!removeBtn) return;

        const productId = removeBtn.dataset.productId;

        if (!confirm('Убрать скидочную цену?')) return;

        // Отправляем null для удаления sale_price
        updatePriceViaAPI(productId, 'sale_price', null);
    });

    // Вспомогательная функция для обновления цены через API
    async function updatePriceViaAPI(productId, field, value) {
        try {
            const response = await fetch(`/products/api/products/${productId}/update-price/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()
                },
                body: JSON.stringify({
                    field: field,
                    value: value
                })
            });

            const data = await response.json();

            if (data.success) {
                // Обновляем отображение
                updatePriceDisplay(productId, data.price, data.sale_price);
            } else {
                alert(data.error || 'Ошибка при обновлении цены');
            }
        } catch (error) {
            console.error('Ошибка:', error);
            alert('Ошибка сети');
        }
    }

    // Функция обновления отображения цен
    function updatePriceDisplay(productId, price, salePrice) {
        // Находим контейнер с ценами для этого товара
        const catalogItem = document.querySelector(`.catalog-item .editable-price[data-product-id="${productId}"]`)?.closest('.price-edit-container');

        if (!catalogItem) return;

        // Формируем новый HTML
        let newHTML = '';

        if (salePrice) {
            // Есть скидочная цена
            newHTML = `
                <span class="editable-price sale-price fw-bold text-success small"
                      data-product-id="${productId}"
                      data-field="sale_price"
                      data-current-value="${salePrice}"
                      title="Скидочная цена (клик для редактирования)">
                    ${parseFloat(salePrice).toFixed(2)} руб.
                </span>
                <span class="editable-price regular-price text-muted text-decoration-line-through small"
                      data-product-id="${productId}"
                      data-field="price"
                      data-current-value="${price}"
                      title="Обычная цена (клик для редактирования)">
                    ${parseFloat(price).toFixed(2)} руб.
                </span>
                <i class="bi bi-x-circle text-danger remove-sale-price"
                   data-product-id="${productId}"
                   title="Убрать скидку"
                   style="cursor: pointer; font-size: 0.85rem;"></i>
            `;
        } else {
            // Только обычная цена
            newHTML = `
                <span class="editable-price fw-bold text-primary small"
                      data-product-id="${productId}"
                      data-field="price"
                      data-current-value="${price}"
                      title="Цена (клик для редактирования)">
                    ${parseFloat(price).toFixed(2)} руб.
                </span>
                <button class="btn btn-outline-secondary btn-sm add-sale-price py-0 px-1"
                        data-product-id="${productId}"
                        title="Добавить скидочную цену"
                        style="font-size: 0.7rem; line-height: 1.2;">
                    + скидка
                </button>
            `;
        }

        catalogItem.innerHTML = newHTML;
    }

    // Получение CSRF токена
    function getCsrfToken() {
        const cookieValue = document.cookie
            .split('; ')
            .find(row => row.startsWith('csrftoken='))
            ?.split('=')[1];
        return cookieValue || '';
    }
});
