export class DateRangePicker {
    constructor({ containerId, onChange, initialStartDate = '', initialEndDate = '' }) {
        this.container = document.getElementById(containerId);
        if (!this.container) return;

        this.trigger = this.container.querySelector('#date-picker-trigger');
        this.popover = this.container.querySelector('#date-picker-popover');
        this.backdrop = this.container.querySelector('#date-picker-backdrop');
        this.label = this.container.querySelector('#date-picker-label');
        
        this.startDisplay = this.container.querySelector('#picker-start-display');
        this.endDisplay = this.container.querySelector('#picker-end-display');
        
        this.prevBtn = this.container.querySelector('#prev-month-btn');
        this.nextBtn = this.container.querySelector('#next-month-btn');
        this.leftMonthLabel = this.container.querySelector('#left-month-label');
        this.rightMonthLabel = this.container.querySelector('#right-month-label');
        
        this.leftMonthName = this.container.querySelector('#left-month-name');
        this.rightMonthName = this.container.querySelector('#right-month-name');
        this.leftYearSelect = this.container.querySelector('#left-year-select');
        this.rightYearSelect = this.container.querySelector('#right-year-select');
        
        this.leftPane = this.container.querySelector('#left-calendar-pane');
        this.rightPane = this.container.querySelector('#right-calendar-pane');
        
        this.leftDaysContainer = this.container.querySelector('#left-days-container');
        this.rightDaysContainer = this.container.querySelector('#right-days-container');
        
        this.cancelBtn = this.container.querySelector('#picker-cancel-btn');
        this.applyBtn = this.container.querySelector('#picker-apply-btn');
        
        this.onChange = onChange;
        
        // Active dates (saved)
        this.startDate = initialStartDate ? new Date(initialStartDate) : null;
        this.endDate = initialEndDate ? new Date(initialEndDate) : null;
        
        // Temporary dates (being edited)
        this.tempStartDate = this.startDate ? new Date(this.startDate) : null;
        this.tempEndDate = this.endDate ? new Date(this.endDate) : null;
        
        // Calendar view month/year
        const today = new Date();
        if (this.endDate) {
            this.currentLeftMonth = this.endDate.getMonth();
            this.currentLeftYear = this.endDate.getFullYear();
        } else {
            this.currentLeftMonth = today.getMonth();
            this.currentLeftYear = today.getFullYear();
        }
        
        this.isOpen = false;
        this._init();
    }

    _init() {
        this._populateYearSelects();
        this._bindEvents();
        this._bindDisplayInputs();
        this._updateTriggerLabel();
        
        // Listen to language changes
        document.addEventListener('languageChanged', () => {
            if (this.isOpen) {
                this._renderCalendars();
            }
            this._updateTriggerLabel();
        });
    }

    _isEnglish() {
        if (typeof window.getLang === 'function') {
            const l = window.getLang();
            if (l === 'id' || l === 'en') return l === 'en';
        }
        try {
            const saved = localStorage.getItem('if_untan_lang');
            if (saved === 'id' || saved === 'en') return saved === 'en';
        } catch (e) {}
        const nav = (navigator.language || 'id').toLowerCase();
        return nav.startsWith('en');
    }

    _clearTime(date) {
        if (!date) return null;
        const d = new Date(date);
        d.setHours(0, 0, 0, 0);
        return d;
    }

    _datesEqual(d1, d2) {
        if (!d1 || !d2) return false;
        return d1.getFullYear() === d2.getFullYear() &&
               d1.getMonth() === d2.getMonth() &&
               d1.getDate() === d2.getDate();
    }

    _getRightMonthYear() {
        let m = this.currentLeftMonth + 1;
        let y = this.currentLeftYear;
        if (m > 11) {
            m = 0;
            y += 1;
        }
        return { month: m, year: y };
    }

    _navigateMonths(direction) {
        this.currentLeftMonth += direction;
        if (this.currentLeftMonth > 11) {
            this.currentLeftMonth = 0;
            this.currentLeftYear += 1;
        } else if (this.currentLeftMonth < 0) {
            this.currentLeftMonth = 11;
            this.currentLeftYear -= 1;
        }
        this._renderCalendars();
    }

    _renderCalendars() {
        const isEn = this._isEnglish();
        const monthNames = isEn ? 
          ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] :
          ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

        const dayHeaders = isEn ?
          ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] :
          ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'];

        if (this.leftMonthName) {
            this.leftMonthName.textContent = monthNames[this.currentLeftMonth];
        }
        if (this.leftYearSelect) {
            this.leftYearSelect.value = this.currentLeftYear;
        }
        
        const rightMY = this._getRightMonthYear();
        if (this.rightMonthName) {
            this.rightMonthName.textContent = monthNames[rightMY.month];
        }
        if (this.rightYearSelect) {
            this.rightYearSelect.value = rightMY.year;
        }
        
        const drawHeaders = (pane) => {
            if (!pane) return;
            const dayHeadersEl = pane.querySelector('.day-headers');
            if (!dayHeadersEl) return;
            dayHeadersEl.innerHTML = '';
            dayHeaders.forEach(day => {
                const span = document.createElement('span');
                span.textContent = day;
                dayHeadersEl.appendChild(span);
            });
        };
        
        drawHeaders(this.leftPane);
        drawHeaders(this.rightPane);
        
        if (this.leftDaysContainer) {
            this._populateDaysContainer(this.leftDaysContainer, this.currentLeftMonth, this.currentLeftYear);
        }
        if (this.rightDaysContainer) {
            this._populateDaysContainer(this.rightDaysContainer, rightMY.month, rightMY.year);
        }
        
        this._updateDisplayInputs();
        this._updatePresetSelectionVisuals();
    }

    _populateDaysContainer(container, month, year) {
        container.innerHTML = '';
        
        const firstDay = new Date(year, month, 1);
        const numDays = new Date(year, month + 1, 0).getDate();
        
        let offset = (firstDay.getDay() + 6) % 7;
        
        for (let i = 0; i < offset; i++) {
            const cell = document.createElement('div');
            cell.className = 'day-cell empty';
            container.appendChild(cell);
        }
        
        const today = new Date();
        today.setHours(23, 59, 59, 999);
        
        for (let day = 1; day <= numDays; day++) {
            const cell = document.createElement('div');
            cell.className = 'day-cell';
            cell.textContent = day;
            
            const cellDate = new Date(year, month, day);
            cellDate.setHours(0, 0, 0, 0);
            
            if (cellDate > today) {
                cell.classList.add('disabled');
            } else {
                if (this.tempStartDate && this.tempEndDate) {
                    const start = this._clearTime(this.tempStartDate);
                    const end = this._clearTime(this.tempEndDate);
                    
                    if (this._datesEqual(cellDate, start)) {
                        cell.classList.add('range-start');
                    }
                    if (this._datesEqual(cellDate, end)) {
                        cell.classList.add('range-end');
                    }
                    if (cellDate > start && cellDate < end) {
                        cell.classList.add('range-between');
                    }
                } else if (this.tempStartDate && this._datesEqual(cellDate, this._clearTime(this.tempStartDate))) {
                    cell.classList.add('range-start');
                    cell.classList.add('range-end');
                }
                
                cell.addEventListener('click', () => {
                    this._handleDayClick(cellDate);
                });
            }
            
            container.appendChild(cell);
        }
    }

    _handleDayClick(date) {
        if (!this.tempStartDate || (this.tempStartDate && this.tempEndDate)) {
            this.tempStartDate = new Date(date);
            this.tempEndDate = null;
        } else {
            if (date < this.tempStartDate) {
                this.tempStartDate = new Date(date);
                this.tempEndDate = null;
            } else {
                this.tempEndDate = new Date(date);
            }
        }
        this._renderCalendars();
    }

    _formatDateDisplay(date) {
        if (!date) return '';
        const d = new Date(date);
        const dd = String(d.getDate()).padStart(2, '0');
        const mm = String(d.getMonth() + 1).padStart(2, '0');
        const yyyy = d.getFullYear();
        return `${dd}/${mm}/${yyyy}`;
    }

    _updateDisplayInputs() {
        if (this.startDisplay) {
            this.startDisplay.value = this._formatDateDisplay(this.tempStartDate);
        }
        if (this.endDisplay) {
            this.endDisplay.value = this._formatDateDisplay(this.tempEndDate);
        }
    }

    _calculatePreset(presetName) {
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        let start = null;
        let end = null;
        
        switch (presetName) {
            case 'today':
                start = new Date(today);
                end = new Date(today);
                break;
            case 'yesterday':
                start = new Date(today);
                start.setDate(today.getDate() - 1);
                end = new Date(start);
                break;
            case 'last7':
                end = new Date(today);
                start = new Date(today);
                start.setDate(today.getDate() - 6);
                break;
            case 'last14':
                end = new Date(today);
                start = new Date(today);
                start.setDate(today.getDate() - 13);
                break;
            case 'last30':
                end = new Date(today);
                start = new Date(today);
                start.setDate(today.getDate() - 29);
                break;
            case 'thisWeek':
                end = new Date(today);
                start = new Date(today);
                const day = today.getDay();
                const diff = today.getDate() - day + (day === 0 ? -6 : 1);
                start.setDate(diff);
                break;
            case 'lastWeek':
                const temp = new Date(today);
                const tempDay = temp.getDay();
                const tempDiff = temp.getDate() - tempDay + (tempDay === 0 ? -6 : 1);
                start = new Date(temp);
                start.setDate(tempDiff - 7);
                end = new Date(temp);
                end.setDate(tempDiff - 1);
                break;
            case 'thisMonth':
                start = new Date(today.getFullYear(), today.getMonth(), 1);
                end = new Date(today);
                break;
            case 'lastMonth':
                start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                end = new Date(today.getFullYear(), today.getMonth(), 0);
                break;
            case 'all':
            default:
                start = null;
                end = null;
                break;
        }
        return { start, end };
    }

    _handlePresetClick(presetName) {
        const { start, end } = this._calculatePreset(presetName);
        this.tempStartDate = start;
        this.tempEndDate = end;
        
        const today = new Date();
        if (this.tempEndDate) {
            this.currentLeftMonth = this.tempEndDate.getMonth();
            this.currentLeftYear = this.tempEndDate.getFullYear();
        } else {
            this.currentLeftMonth = today.getMonth();
            this.currentLeftYear = today.getFullYear();
        }
        this._renderCalendars();
    }

    _updatePresetSelectionVisuals() {
        this.container.querySelectorAll('.preset-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        
        if (!this.tempStartDate && !this.tempEndDate) {
            this.container.querySelector('[data-preset="all"]')?.classList.add('active');
            return;
        }
        
        if (this.tempStartDate && this.tempEndDate) {
            const activePreset = ['today', 'yesterday', 'last7', 'last14', 'last30', 'thisWeek', 'lastWeek', 'thisMonth', 'lastMonth'].find(preset => {
                const { start, end } = this._calculatePreset(preset);
                return start && end &&
                       this._datesEqual(this.tempStartDate, start) &&
                       this._datesEqual(this.tempEndDate, end);
            });
            
            if (activePreset) {
                this.container.querySelector(`[data-preset="${activePreset}"]`)?.classList.add('active');
            }
        }
    }

    _updateTriggerLabel() {
        if (!this.startDate && !this.endDate) {
            if (this.label) {
                this.label.textContent = window.tpT?.('filter_all_time') || 'Semua Waktu';
                this.label.setAttribute('data-tp-i18n', 'filter_all_time');
            }
        } else {
            if (this.label) {
                this.label.removeAttribute('data-tp-i18n');
                const startFormatted = this._formatDateDisplay(this.startDate);
                const endFormatted = this._formatDateDisplay(this.endDate);
                if (this._datesEqual(this.startDate, this.endDate)) {
                    this.label.textContent = startFormatted;
                } else {
                    this.label.textContent = `${startFormatted} - ${endFormatted}`;
                }
            }
        }
    }

    _bindEvents() {
        this.trigger.addEventListener('click', (e) => {
            e.stopPropagation();
            this.toggle();
        });
        
        this.popover.addEventListener('click', (e) => {
            e.stopPropagation();
        });
        
        if (this.prevBtn) {
            this.prevBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                this._navigateMonths(-1);
            });
        }
        if (this.nextBtn) {
            this.nextBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                this._navigateMonths(1);
            });
        }
        
        const presetsList = this.container.querySelector('.presets-list');
        if (presetsList) {
            presetsList.addEventListener('click', (e) => {
                const btn = e.target.closest('.preset-btn');
                if (!btn) return;
                e.stopPropagation();
                const preset = btn.getAttribute('data-preset');
                this._handlePresetClick(preset);
            });
        }
        
        if (this.cancelBtn) {
            this.cancelBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                this._handleCancel();
            });
        }
        
        if (this.applyBtn) {
            this.applyBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                this._handleApply();
            });
        }
        
        if (this.backdrop) {
            this.backdrop.addEventListener('click', (e) => {
                e.stopPropagation();
                this._handleCancel();
            });
        }
        
        document.addEventListener('click', () => {
            if (this.isOpen) {
                this._handleCancel();
            }
        });
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isOpen) {
                this._handleCancel();
            }
        });
    }

    _bindDisplayInputs() {
        const parseDate = (val) => {
            const m = val.trim().match(/^(\d{1,2})[\/\-.](\d{1,2})[\/\-.](\d{4})$/);
            if (!m) return null;
            const d = parseInt(m[1], 10);
            const mon = parseInt(m[2], 10) - 1;
            const y = parseInt(m[3], 10);
            
            if (mon < 0 || mon > 11 || d < 1 || d > 31 || y < 1000 || y > 9999) return null;
            
            const testDate = new Date(y, mon, d);
            if (testDate.getFullYear() !== y || testDate.getMonth() !== mon || testDate.getDate() !== d) {
                return null;
            }
            return testDate;
        };

        const setupInput = (input, isStart) => {
            if (!input) return;
            
            input.addEventListener('keydown', (e) => {
                const CTRL_KEYS = new Set(['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter']);
                if (!/^\d$/.test(e.key) && e.key !== '/' && e.key !== '-' && e.key !== '.' && !CTRL_KEYS.has(e.key)) {
                    e.preventDefault();
                }
            });

            input.addEventListener('input', (e) => {
                if (e.inputType && e.inputType.startsWith('delete')) {
                    return;
                }
                
                let val = input.value.replace(/[^\d]/g, '');
                let formatted = val;
                if (val.length > 2) {
                    formatted = val.substring(0, 2) + '/' + val.substring(2);
                }
                if (val.length > 4) {
                    formatted = val.substring(0, 2) + '/' + val.substring(2, 4) + '/' + val.substring(4, 8);
                }
                input.value = formatted;

                const parsed = parseDate(formatted);
                if (parsed) {
                    const today = new Date();
                    today.setHours(23, 59, 59, 999);
                    if (parsed <= today) {
                        if (isStart) {
                            this.tempStartDate = parsed;
                            if (this.tempEndDate && this.tempEndDate < this.tempStartDate) {
                                this.tempEndDate = new Date(this.tempStartDate);
                            }
                        } else {
                            this.tempEndDate = parsed;
                            if (this.tempStartDate && this.tempStartDate > this.tempEndDate) {
                                this.tempStartDate = new Date(this.tempEndDate);
                            }
                        }
                        
                        this.currentLeftMonth = parsed.getMonth();
                        this.currentLeftYear = parsed.getFullYear();
                        
                        const rightMY = this._getRightMonthYear();
                        const isEn = this._isEnglish();
                        const monthNames = isEn ? 
                          ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] :
                          ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        if (this.leftMonthName) this.leftMonthName.textContent = monthNames[this.currentLeftMonth];
                        if (this.leftYearSelect) this.leftYearSelect.value = this.currentLeftYear;
                        if (this.rightMonthName) this.rightMonthName.textContent = monthNames[rightMY.month];
                        if (this.rightYearSelect) this.rightYearSelect.value = rightMY.year;
                        if (this.leftDaysContainer) this._populateDaysContainer(this.leftDaysContainer, this.currentLeftMonth, this.currentLeftYear);
                        if (this.rightDaysContainer) this._populateDaysContainer(this.rightDaysContainer, rightMY.month, rightMY.year);
                        this._updatePresetSelectionVisuals();
                    }
                }
            });
            
            input.addEventListener('blur', () => {
                const parsed = parseDate(input.value);
                if (!parsed) {
                    if (isStart) {
                        input.value = this._formatDateDisplay(this.tempStartDate);
                    } else {
                        input.value = this._formatDateDisplay(this.tempEndDate);
                    }
                }
            });
        };

        setupInput(this.startDisplay, true);
        setupInput(this.endDisplay, false);
    }

    _populateYearSelects() {
        if (!this.leftYearSelect || !this.rightYearSelect) return;
        
        this.leftYearSelect.innerHTML = '';
        this.rightYearSelect.innerHTML = '';
        
        const startYear = 2020;
        const endYear = new Date().getFullYear() + 4;
        
        for (let y = startYear; y <= endYear; y++) {
            const optLeft = document.createElement('option');
            optLeft.value = y;
            optLeft.textContent = y;
            this.leftYearSelect.appendChild(optLeft);
            
            const optRight = document.createElement('option');
            optRight.value = y;
            optRight.textContent = y;
            this.rightYearSelect.appendChild(optRight);
        }
        
        this.leftYearSelect.addEventListener('change', () => {
            this._handleYearChange(parseInt(this.leftYearSelect.value, 10), true);
        });
        
        this.rightYearSelect.addEventListener('change', () => {
            this._handleYearChange(parseInt(this.rightYearSelect.value, 10), false);
        });
    }

    _handleYearChange(year, isLeft) {
        if (isLeft) {
            this.currentLeftYear = year;
        } else {
            const rightMY = this._getRightMonthYear();
            const rightMonth = rightMY.month;
            if (rightMonth === 0) {
                this.currentLeftYear = year - 1;
            } else {
                this.currentLeftYear = year;
            }
        }
        this._renderCalendars();
    }

    toggle() {
        if (this.isOpen) {
            this.close();
        } else {
            this.open();
        }
    }

    open() {
        document.querySelectorAll('.custom-dropdown.active').forEach(dd => {
            dd.classList.remove('active');
            dd.querySelector('.custom-dropdown-trigger')?.setAttribute('aria-expanded', 'false');
        });
        
        this.isOpen = true;
        this.container.classList.add('active');
        this.trigger.setAttribute('aria-expanded', 'true');
        
        this.tempStartDate = this.startDate ? new Date(this.startDate) : null;
        this.tempEndDate = this.endDate ? new Date(this.endDate) : null;
        
        const today = new Date();
        if (this.endDate) {
            this.currentLeftMonth = this.endDate.getMonth();
            this.currentLeftYear = this.endDate.getFullYear();
        } else {
            this.currentLeftMonth = today.getMonth();
            this.currentLeftYear = today.getFullYear();
        }
        
        this._renderCalendars();
        
        if (window.innerWidth <= 768) {
            document.body.classList.add('date-picker-open');
        }
    }

    close() {
        this.isOpen = false;
        this.container.classList.remove('active');
        this.trigger.setAttribute('aria-expanded', 'false');
        document.body.classList.remove('date-picker-open');
    }

    _handleCancel() {
        this.tempStartDate = this.startDate ? new Date(this.startDate) : null;
        this.tempEndDate = this.endDate ? new Date(this.endDate) : null;
        this.close();
    }

    _handleApply() {
        this.startDate = this.tempStartDate;
        this.endDate = this.tempEndDate;
        
        this._updateTriggerLabel();
        this.close();
        
        const startStr = this._getDateString(this.startDate);
        const endStr = this._getDateString(this.endDate);
        if (this.onChange) {
            this.onChange(startStr, endStr);
        }
    }
    
    _getDateString(date) {
        if (!date) return '';
        const y = date.getFullYear();
        const m = String(date.getMonth() + 1).padStart(2, '0');
        const d = String(date.getDate()).padStart(2, '0');
        return `${y}-${m}-${d}`;
    }
}