/**
 * Календарная лента с динамическим количеством дней для фильтрации заказов
 * Сегодня всегда в центре при загрузке, количество дней зависит от ширины экрана
 */

document.addEventListener('DOMContentLoaded', function() {
    console.log('Date carousel initialized');

    // Инициализация всех календарных лент на странице
    const carousels = document.querySelectorAll('.date-carousel-container');

    carousels.forEach(container => {
        const minInputId = container.getAttribute('data-min-input');
        const maxInputId = container.getAttribute('data-max-input');

        // Инициализация с сегодняшней датой в центре
        const carousel = new DateCarousel(container, minInputId, maxInputId);
        carousel.init();

        // Пересчёт количества дней при изменении размера окна
        let resizeTimeout;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => carousel.handleResize(), 250);
        });
    });
});

/**
 * Класс для управления календарной лентой
 */
class DateCarousel {
    constructor(container, minInputId, maxInputId) {
        this.container = container;
        this.minInputId = minInputId;
        this.maxInputId = maxInputId;
        this.minInput = document.getElementById(minInputId);
        this.maxInput = document.getElementById(maxInputId);
        this.today = new Date();
        this.today.setHours(0, 0, 0, 0);
        this.daysCount = 0; // Будет рассчитано динамически

        // Проверяем, есть ли выбранная дата в фильтрах
        const selectedDate = this.getSelectedDateFromInputs();
        if (selectedDate && this.isDateInRange(selectedDate)) {
            // Если выбранная дата в пределах разумного диапазона, используем её как центр
            this.centerDate = new Date(selectedDate);
            this.centerDate.setHours(0, 0, 0, 0);
        } else {
            // Иначе устанавливаем сегодняшнюю дату как центральную
            this.centerDate = new Date();
            this.centerDate.setHours(0, 0, 0, 0); // Сбрасываем время!
        }
    }

    /**
     * Инициализация календарной ленты
     */
    init() {
        this.calculateDaysCount();
        this.render();
        this.attachNavHandlers();
        this.attachTodayHandler();
    }

    /**
     * Получение выбранной даты из input полей
     */
    getSelectedDateFromInputs() {
        // Проверяем, совпадают ли даты "от" и "до" - это означает, что выбран конкретный день
        if (this.minInput.value && this.maxInput.value && this.minInput.value === this.maxInput.value) {
            const selectedDate = new Date(this.minInput.value);
            if (!isNaN(selectedDate.getTime())) {
                return selectedDate;
            }
        }
        return null;
    }

    /**
     * Проверка, находится ли дата в разумном диапазоне (не слишком далеко от сегодня)
     */
    isDateInRange(date) {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        // Проверяем, находится ли дата в пределах примерно 1 года от сегодня
        const minDate = new Date(today);
        minDate.setFullYear(today.getFullYear() - 1);

        const maxDate = new Date(today);
        maxDate.setFullYear(today.getFullYear() + 1);

        return date >= minDate && date <= maxDate;
    }

    /**
     * Расчёт количества дней на основе доступной ширины
     */
    calculateDaysCount() {
        const containerWidth = this.container.offsetWidth;
        const dayButtonWidth = 68; // 60px min-width + 8px gap
        const maxDays = Math.floor(containerWidth / dayButtonWidth);

        // Гарантируем нечётное количество дней для центрирования
        this.daysCount = maxDays % 2 === 0 ? maxDays - 1 : maxDays;

        // Минимум 7 дней, максимум 31 день
        this.daysCount = Math.max(7, Math.min(31, this.daysCount));

        console.log(`Calculated days count: ${this.daysCount} (container width: ${containerWidth}px)`);
    }

    /**
     * Обработка изменения размера окна
     */
    handleResize() {
        const oldDaysCount = this.daysCount;
        this.calculateDaysCount();

        // Перерисовываем только если количество дней изменилось
        if (oldDaysCount !== this.daysCount) {
            this.render();
            this.attachTodayHandler(); // Восстанавливаем обработчик кнопки "Сегодня" после рендеринга
        }
    }

    /**
     * Генерация и отображение дней
     */
    render() {
        this.container.innerHTML = '';
        const days = this.generateDays();

        days.forEach(dayData => {
            const btn = this.createDayButton(dayData);
            this.container.appendChild(btn);
        });
    }

    /**
     * Генерация массива дней (динамическое количество от центральной даты)
     */
    generateDays() {
        const days = [];
        const halfDays = Math.floor(this.daysCount / 2);

        for (let i = -halfDays; i <= halfDays; i++) {
            const date = new Date(this.centerDate);
            date.setDate(date.getDate() + i);
            date.setHours(0, 0, 0, 0);

            days.push({
                date: date,
                label: this.getDateLabel(date),
                isToday: date.getTime() === this.today.getTime()
            });
        }

        return days;
    }

    /**
     * Определение текстовой метки для даты
     */
    getDateLabel(date) {
        const yesterday = new Date(this.today);
        yesterday.setDate(yesterday.getDate() - 1);
        yesterday.setHours(0, 0, 0, 0);

        const tomorrow = new Date(this.today);
        tomorrow.setDate(tomorrow.getDate() + 1);
        tomorrow.setHours(0, 0, 0, 0);

        if (date.getTime() === yesterday.getTime()) return 'Вчера';
        if (date.getTime() === this.today.getTime()) return 'Сегодня';
        if (date.getTime() === tomorrow.getTime()) return 'Завтра';
        return '';
    }

    /**
     * Создание кнопки дня
     */
    createDayButton(dayData) {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'date-btn';

        if (dayData.isToday) {
            btn.classList.add('today');
        }

        // Проверка, выбрана ли эта дата
        if (this.isDateSelected(dayData.date)) {
            btn.classList.add('selected');
        }

        // Структура кнопки
        const label = document.createElement('div');
        label.className = 'date-btn-label';
        label.textContent = dayData.label;

        const day = document.createElement('div');
        day.className = 'date-btn-day';
        day.textContent = String(dayData.date.getDate()).padStart(2, '0');

        const weekday = document.createElement('div');
        weekday.className = 'date-btn-weekday';
        weekday.textContent = this.getWeekdayShort(dayData.date);

        const month = document.createElement('div');
        month.className = 'date-btn-month';
        month.textContent = this.getMonthShort(dayData.date);

        btn.appendChild(label);
        btn.appendChild(day);
        btn.appendChild(weekday);
        btn.appendChild(month);

        // Обработчик клика
        btn.addEventListener('click', () => this.selectDate(dayData.date, btn));

        return btn;
    }

    /**
     * Получить короткое название дня недели (ПН, ВТ, СР, ЧТ, ПТ, СБ, ВС)
     */
    getWeekdayShort(date) {
        const weekdays = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'];
        const dayIndex = date.getDay();
        // Сдвигаем индекс, чтобы понедельник был первым (0), а воскресенье - последним (6)
        return weekdays[(dayIndex + 6) % 7];
    }

    /**
     * Получить короткое название месяца (янв, фев, мар и т.д.)
     */
    getMonthShort(date) {
        const months = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'];
        return months[date.getMonth()];
    }

    /**
     * Форматирование даты в YYYY-MM-DD
     */
    formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    /**
     * Проверка, выбрана ли дата
     */
    isDateSelected(date) {
        const formattedDate = this.formatDate(date);
        return this.minInput.value === formattedDate && this.maxInput.value === formattedDate;
    }

    /**
     * Обновление состояния selected для всех кнопок без перерисовки
     */
    updateSelectedState() {
        const buttons = this.container.querySelectorAll('.date-btn');
        buttons.forEach(btn => {
            // Получаем дату из кнопки (день месяца)
            const dayElement = btn.querySelector('.date-btn-day');
            const monthElement = btn.querySelector('.date-btn-month');
            if (dayElement && monthElement) {
                const day = parseInt(dayElement.textContent);
                const monthShort = monthElement.textContent;

                // Находим дату кнопки, сравнивая с датами в generateDays
                const days = this.generateDays();
                const matchingDay = days.find(d =>
                    d.date.getDate() === day &&
                    this.getMonthShort(d.date) === monthShort
                );

                if (matchingDay && this.isDateSelected(matchingDay.date)) {
                    btn.classList.add('selected');
                } else {
                    btn.classList.remove('selected');
                }
            }
        });
    }

    /**
     * Выбор даты (установка в оба поля фильтра)
     */
    selectDate(date, btn) {
        const formattedDate = this.formatDate(date);

        this.minInput.value = formattedDate;
        this.maxInput.value = formattedDate;

        // НЕ меняем centerDate - оставляем карусель на месте
        // Только обновляем визуальное выделение

        // Визуальная обратная связь
        btn.classList.add('clicked');
        setTimeout(() => btn.classList.remove('clicked'), 300);

        // Обновление визуального состояния (только класс selected)
        this.updateSelectedState();

        console.log(`Selected date: ${formattedDate}, center stays at: ${this.formatDate(this.centerDate)}`);

        // Сохраняем текущую позицию карусели на время сессии
        this.saveCenterDate();

        // Автоматическая отправка формы
        const form = this.minInput.closest('form');
        if (form) {
            form.submit();
        }
    }

    /**
     * Подключение обработчиков для стрелок навигации
     */
    attachNavHandlers() {
        const prevBtn = this.container.parentElement.querySelector('.carousel-prev');
        const nextBtn = this.container.parentElement.querySelector('.carousel-next');

        if (prevBtn) {
            prevBtn.addEventListener('click', () => this.shiftDays(-1));
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', () => this.shiftDays(1));
        }
    }

    /**
     * Подключение обработчиков для кнопок "Сегодня", "Завтра" и "Сбросить"
     * Вынесено в отдельный метод, чтобы можно было вызывать после полной отрисовки компонента
     */
    attachTodayHandler() {
        const filterContainer = this.container.closest('.date-range-filter');

        // Кнопка "Сегодня"
        const todayBtn = filterContainer.querySelector('.today-btn');
        if (todayBtn) {
            todayBtn.removeEventListener('click', this.boundGoToToday);
            this.boundGoToToday = this.goToToday.bind(this);
            todayBtn.addEventListener('click', this.boundGoToToday);
        }

        // Кнопка "Завтра"
        const tomorrowBtn = filterContainer.querySelector('.tomorrow-btn');
        if (tomorrowBtn) {
            tomorrowBtn.removeEventListener('click', this.boundGoToTomorrow);
            this.boundGoToTomorrow = this.goToTomorrow.bind(this);
            tomorrowBtn.addEventListener('click', this.boundGoToTomorrow);
        }

        // Кнопка "Сбросить"
        const clearBtn = filterContainer.querySelector('.clear-date-btn');
        if (clearBtn) {
            clearBtn.removeEventListener('click', this.boundClearDate);
            this.boundClearDate = this.clearDate.bind(this);
            clearBtn.addEventListener('click', this.boundClearDate);
        }

        // Календарный выбор даты
        const calendarBtn = filterContainer.querySelector('.calendar-picker-btn');
        const calendarInput = filterContainer.querySelector('.calendar-picker-input');
        if (calendarBtn && calendarInput) {
            calendarBtn.removeEventListener('click', this.boundOpenCalendar);
            this.boundOpenCalendar = () => {
                if (calendarInput.showPicker) {
                    calendarInput.showPicker();
                } else {
                    calendarInput.click();
                }
            };
            calendarBtn.addEventListener('click', this.boundOpenCalendar);

            calendarInput.removeEventListener('change', this.boundCalendarSelect);
            this.boundCalendarSelect = this.selectFromCalendar.bind(this);
            calendarInput.addEventListener('change', this.boundCalendarSelect);
        }
    }

    /**
     * Выбор даты через календарь
     */
    selectFromCalendar(event) {
        const selectedDate = event.target.value;
        if (!selectedDate) return;

        const date = new Date(selectedDate);
        date.setHours(0, 0, 0, 0);

        const formattedDate = this.formatDate(date);
        this.minInput.value = formattedDate;
        this.maxInput.value = formattedDate;

        this.centerDate = date;
        this.saveCenterDate();
        this.render();
        this.attachTodayHandler();

        const form = this.minInput.closest('form');
        if (form) {
            form.submit();
        }
    }

    /**
     * Переход к сегодняшней дате
     */
    goToToday() {
        console.log('Today button clicked');

        // Проверяем существование элементов
        if (!this.minInput || !this.maxInput) {
            console.error('minInput or maxInput not found!');
            return;
        }

        const today = new Date();
        today.setHours(0, 0, 0, 0);

        // Устанавливаем сегодняшнюю дату в фильтр
        const formattedDate = this.formatDate(today);
        this.minInput.value = formattedDate;
        this.maxInput.value = formattedDate;

        console.log(`Set values - Min: ${this.minInput.value}, Max: ${this.maxInput.value}`);

        // Устанавливаем сегодняшнюю дату как центральную
        this.centerDate = today;

        // Сохраняем новую центральную дату
        this.saveCenterDate();

        // Очищаем выделение с других кнопок и обновляем визуальное состояние
        this.render();

        // Обновляем обработчик после перерисовки
        this.attachTodayHandler();

        console.log(`Navigated to today: ${formattedDate}`);

        // Автоматическая отправка формы
        const form = this.minInput.closest('form');
        if (form) {
            form.submit();
        }
    }

    /**
     * Переход к завтрашней дате
     */
    goToTomorrow() {
        const tomorrow = new Date();
        tomorrow.setHours(0, 0, 0, 0);
        tomorrow.setDate(tomorrow.getDate() + 1);

        const formattedDate = this.formatDate(tomorrow);
        this.minInput.value = formattedDate;
        this.maxInput.value = formattedDate;

        this.centerDate = tomorrow;
        this.saveCenterDate();
        this.render();
        this.attachTodayHandler();

        const form = this.minInput.closest('form');
        if (form) {
            form.submit();
        }
    }

    /**
     * Сброс фильтра по дате
     */
    clearDate() {
        this.minInput.value = '';
        this.maxInput.value = '';

        // Возвращаем карусель к сегодняшней дате
        this.centerDate = new Date();
        this.centerDate.setHours(0, 0, 0, 0);
        this.saveCenterDate();
        this.render();
        this.attachTodayHandler();

        const form = this.minInput.closest('form');
        if (form) {
            form.submit();
        }
    }

    /**
     * Сохранение центральной даты в sessionStorage (только на время сессии)
     */
    saveCenterDate() {
        const key = `date_carousel_center_${this.minInputId}`;
        // Используем formatDate вместо toISOString для избежания проблем с часовыми поясами
        const centerDateStr = this.formatDate(this.centerDate);
        sessionStorage.setItem(key, centerDateStr);
    }

    /**
     * Загрузка центральной даты из sessionStorage
     */
    loadSavedCenterDate() {
        const key = `date_carousel_center_${this.minInputId}`;
        const savedDateStr = sessionStorage.getItem(key);

        if (savedDateStr) {
            const savedDate = new Date(savedDateStr);
            savedDate.setHours(0, 0, 0, 0);

            // Проверяем, что дата валидна
            if (!isNaN(savedDate.getTime())) {
                return { centerDate: savedDate };
            }
        }

        return null;
    }

    /**
     * Сдвиг диапазона дней на N дней
     */
    shiftDays(offset) {
        this.centerDate.setDate(this.centerDate.getDate() + offset);
        this.saveCenterDate(); // Сохраняем новую центральную дату (без смещения для прокрутки)
        this.render();
    }
}