// Format RUB amount: no decimals, narrow no-break space as thousands separator
function formatRUB(amount) {
    return Math.round(amount)
        .toLocaleString('ru-RU')
        .replace(/\u00a0/g, '\u202F');
}

// Update HTML center label (month in gray, category optional, amount in black)
function updateCenterLabel(month, amount, category = null) {
    const labelEl = document.getElementById('center-label');
    if (!labelEl) return;

    labelEl.querySelector('.center-month').textContent = month;
    labelEl.querySelector('.center-category').textContent = category || '';
    labelEl.querySelector('.center-amount-num').textContent = formatRUB(amount);
    labelEl.querySelector('.center-rub').textContent = '\u202F₽';

    // Show/hide home icon based on drill-down state
    updateDrilledDownState();
}

// Update drilled-down visual state (home icon visibility)
function updateDrilledDownState() {
    const labelEl = document.getElementById('center-label');
    if (!labelEl) return;

    if (historyIndex > 0) {
        labelEl.classList.add('drilled-down');
    } else {
        labelEl.classList.remove('drilled-down');
    }
}

// Initialize the chart
const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);
let option;
let originalSunburstData = null; // Stores the original data for the current month (for reset on center click)
let showDefaultView = null; // Reference to reset details panel to default view
let currentView = 'month';  // 'month' | 'timeline'

// Drill-down history for back/forward navigation
let drillDownHistory = [];
let historyIndex = -1;
let currentDrillPath = [];  // Tracks drill-down hierarchy: ["Еда", "Рестораны", ...]

// Save current chart state to history
function saveToHistory(data, total, contextName, isInitial = false, path = []) {
    // Remove any forward history when drilling down from middle of history
    if (historyIndex < drillDownHistory.length - 1) {
        drillDownHistory = drillDownHistory.slice(0, historyIndex + 1);
    }
    drillDownHistory.push({ data, total, contextName, path: [...path] });
    historyIndex = drillDownHistory.length - 1;

    // Update current drill path
    currentDrillPath = [...path];

    // Push to browser history (use replaceState for initial state)
    const state = { drillDown: historyIndex };
    if (isInitial) {
        history.replaceState(state, '');
    } else {
        history.pushState(state, '');
    }

    saveMonthSelectionState();
}

// Reset history (called when changing months)
function resetHistory() {
    drillDownHistory = [];
    historyIndex = -1;
    currentDrillPath = [];
}

// Navigate to a specific history state
function navigateToHistoryState(state) {
    // Use multi-month label if multiple months selected, otherwise single month name
    const monthLabel = selectedMonthIndices.size > 1
        ? generateSelectedMonthsLabel()
        : getRussianMonthName(document.getElementById('month-select').value);
    option.series.data = state.data;

    myChart.setOption(option, { replaceMerge: ['series'] });
    updateCenterLabel(monthLabel, state.total, state.contextName);
    setupHoverEvents({ total: state.total, data: state.data }, state.contextName);

    // Restore drill path and update mini-charts
    currentDrillPath = state.path ? [...state.path] : [];
    updateAllMonthPreviews();
    saveMonthSelectionState();
}

// Go back in drill-down history
function navigateBack() {
    if (historyIndex > 0) {
        historyIndex--;
        navigateToHistoryState(drillDownHistory[historyIndex]);
    }
}

// Go forward in drill-down history
function navigateForward() {
    if (historyIndex < drillDownHistory.length - 1) {
        historyIndex++;
        navigateToHistoryState(drillDownHistory[historyIndex]);
    }
}

// Go directly to root level
function goToRoot() {
    if (drillDownHistory.length > 0 && historyIndex > 0) {
        historyIndex = 0;
        navigateToHistoryState(drillDownHistory[0]);
        // Update browser history to reflect root state
        history.replaceState({ drillDown: 0 }, '');
    }
}

// Listen for browser back/forward via popstate
window.addEventListener('popstate', function(e) {
    // If a modal is open, close it and push state back to prevent navigation
    const rowDetailModal = document.getElementById('row-detail-modal');
    const transactionModal = document.getElementById('transaction-modal');

    if (rowDetailModal && rowDetailModal.style.display !== 'none') {
        closeRowDetailModal();
        // Push state back to cancel the back navigation
        history.pushState(e.state, '');
        return;
    }

    if (transactionModal && transactionModal.style.display !== 'none') {
        closeTransactionModal();
        // Push state back to cancel the back navigation
        history.pushState(e.state, '');
        return;
    }

    // No modal open - handle navigation
    if (e.state && e.state.timelineDrill !== undefined) {
        // Timeline drill-down navigation (possibly with legend selection)
        if (currentView !== 'timeline') {
            currentView = 'timeline';
            document.querySelectorAll('.view-switcher-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.view === 'timeline');
            });
            document.querySelector('.container').classList.add('timeline-mode');
            myChart.resize();
        }
        renderTimelineChart(e.state.timelineDrill, 'none', e.state.legendSelected || null);
        return;
    }

    if (e.state && e.state.monthView) {
        // Month view navigation (from view switch)
        if (currentView !== 'month') {
            switchView('month');
        }
        return;
    }

    if (e.state && e.state.drillDown !== undefined) {
        // Donut drill-down navigation
        if (currentView !== 'month') {
            // Switch from timeline to month view, then re-render donut from scratch
            switchView('month');
            return;
        }
        const stateIndex = e.state.drillDown;
        if (stateIndex >= 0 && stateIndex < drillDownHistory.length) {
            historyIndex = stateIndex;
            navigateToHistoryState(drillDownHistory[historyIndex]);
        }
    } else {
        // No state or initial state - go to root
        if (drillDownHistory.length > 0) {
            historyIndex = 0;
            navigateToHistoryState(drillDownHistory[0]);
        }
    }
});

// Function to parse CSV data
async function parseCSV(file) {
    const response = await fetch(file);
    const data = await response.text();
    
    // Split the CSV into rows
    const rows = data.split('\n');
    
    // Extract headers and remove quotes
    const headers = rows[0].split(',').map(header => header.replace(/"/g, ''));
    
    // Parse the data rows
    const result = [];
    for (let i = 1; i < rows.length; i++) {
        if (!rows[i].trim()) continue;
        
        // Handle commas within quoted fields
        const row = [];
        let inQuote = false;
        let currentValue = '';
        
        for (let j = 0; j < rows[i].length; j++) {
            const char = rows[i][j];
            
            if (char === '"') {
                inQuote = !inQuote;
            } else if (char === ',' && !inQuote) {
                row.push(currentValue.replace(/"/g, ''));
                currentValue = '';
            } else {
                currentValue += char;
            }
        }
        
        // Push the last value
        row.push(currentValue.replace(/"/g, ''));
        
        // Create an object from headers and row values
        const obj = {};
        for (let j = 0; j < headers.length; j++) {
            obj[headers[j]] = row[j];
        }
        
        result.push(obj);
    }
    
    return result;
}

// Function to transform data into a sunburst format
function transformToSunburst(data) {
    // Calculate total spending
    let totalSpending = 0;
    
    // Group by categories
    const categories = [];
    const categoryMap = {};
    
    // Store raw transactions for each microcategory to display in details
    const transactionMap = {};
    
    // Predefined colors for categories
    const colors = [
        '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
        '#2d8041', '#fc8452', '#7b4d90', '#ea7ccc', '#4cae72',
        '#d56358', '#82b1ff', '#f19143', '#addf84', '#6f7787'
    ];
    
    // Debug counter
    let lekarstvaCount = 0;
    let emptyMicroCount = 0;
    
    data.forEach(item => {
        const category = item.category || '';
        const subcategory = item.subcategory || '';
        // Get original microcategory value - important for transaction filtering later
        const originalMicrocategory = item.microcategory || '';
        const amount = Math.abs(parseFloat(item.amount_rub));
        
        // For display in the chart, we might use simple_name for transactions >=1000RUB
        let displayMicrocategory = originalMicrocategory;
        if (displayMicrocategory === '' && amount >= 1000 && item.simple_name) {
            displayMicrocategory = item.simple_name;
        }
        
        // Debug Лекарства category
        /*if (subcategory === "Лекарства") {
            lekarstvaCount++;
            console.log(`Transaction in Лекарства: ${item.simple_name}, originalMicro="${originalMicrocategory}", displayMicro="${displayMicrocategory}", amount=${amount}`);
            if (originalMicrocategory === '') {
                emptyMicroCount++;
            }
        }*/
        
        const transactionKey = `${category}|${subcategory}|${displayMicrocategory}`;
        
        if (!isNaN(amount)) {
            totalSpending += amount;
            
            // Create transaction object and include displayMicrocategory property
            const transactionObj = {
                name: item.simple_name || 'Transaction',
                value: amount,
                date: item.date,
                microCategory: originalMicrocategory,  // Store ORIGINAL value
                hasNoMicroCategory: originalMicrocategory === '', // Flag for easy filtering (legacy)
                displayMicrocategory: displayMicrocategory,
                originalRow: item  // Store full CSV row for modal display
            };
            
            // Save transaction data for detail box with ORIGINAL microcategory
            if (!transactionMap[transactionKey]) {
                transactionMap[transactionKey] = [];
            }
            transactionMap[transactionKey].push(transactionObj);
            
            if (!categoryMap[category] && category !== '') {
                categoryMap[category] = {
                    name: category,
                    value: 0,
                    children: {},
                    itemStyle: {},
                    transactions: [] // Will be populated with ALL transactions
                };
                categories.push(categoryMap[category]);
            }
            
            if (category !== '') {
                if (!categoryMap[category].children[subcategory] && subcategory !== '') {
                    categoryMap[category].children[subcategory] = {
                        name: subcategory,
                        value: 0,
                        children: {},
                        itemStyle: {},
                        transactions: [] // Will be populated with ALL transactions
                    };
                }
                
                // Add transaction to category directly
                if (categoryMap[category].transactions) {
                    categoryMap[category].transactions.push(transactionObj);
                }
                
                if (subcategory !== '') {
                    // Add transaction to subcategory directly
                    if (categoryMap[category].children[subcategory].transactions) {
                        categoryMap[category].children[subcategory].transactions.push(transactionObj);
                    }
                    
                    if (!categoryMap[category].children[subcategory].children[displayMicrocategory] && displayMicrocategory !== '') {
                        categoryMap[category].children[subcategory].children[displayMicrocategory] = {
                            name: displayMicrocategory,
                            value: 0,
                            itemStyle: {},
                            transactions: []
                        };
                    }
                    
                    // Add transaction to microcategory if there is one
                    if (displayMicrocategory !== '' && 
                        categoryMap[category].children[subcategory].children[displayMicrocategory].transactions) {
                        categoryMap[category].children[subcategory].children[displayMicrocategory].transactions.push(transactionObj);
                    }
                    
                    categoryMap[category].value += amount;
                    categoryMap[category].children[subcategory].value += amount;
                    
                    if (displayMicrocategory !== '') {
                        categoryMap[category].children[subcategory].children[displayMicrocategory].value += amount;
                    }
                } else {
                    categoryMap[category].value += amount;
                }
            }
        }
    });
    
    console.log(`Found ${lekarstvaCount} transactions in Лекарства category, ${emptyMicroCount} with empty microcategory`);
    
    // Define fixed order for top categories
    const categoryOrder = [
        'Квартира', 
        'Еда', 
        'Технологии', 
        'Развлечения', 
        'Семьи', 
        'Здоровье', 
        'Логистика', 
        'Расходники', 
        'Красота'
    ];
    
    // Sort categories by the predefined order
    categories.sort((a, b) => {
        const indexA = categoryOrder.indexOf(a.name);
        const indexB = categoryOrder.indexOf(b.name);
        
        // If both categories are in our predefined list, sort by that order
        if (indexA !== -1 && indexB !== -1) {
            return indexA - indexB;
        }
        // If only a is in the list, it comes first
        else if (indexA !== -1) {
            return -1;
        }
        // If only b is in the list, it comes first
        else if (indexB !== -1) {
            return 1;
        }
        // For categories not in our list, sort by value (largest to smallest)
        else {
            return b.value - a.value;
        }
    });
    
    // Convert the map to an array structure for ECharts
    const result = [];
    
    // Assign colors to categories
    categories.forEach((category, index) => {
        const colorIndex = index % colors.length;
        const baseColor = colors[colorIndex];
        const categoryNode = {
            name: category.name,
            value: category.value,
            children: [],
            itemStyle: {
                color: baseColor
            },
            transactions: category.transactions
        };
        
        // Get subcategories and sort by value
        const subcategories = [];
        for (const subcatKey in category.children) {
            subcategories.push(category.children[subcatKey]);
        }
        subcategories.sort((a, b) => b.value - a.value);
        
        // Generate color variations for subcategories based on their size
        const subcatColors = generateColorGradient(baseColor, subcategories.length || 1);
        
        // Process each subcategory
        subcategories.forEach((subcategory, subIndex) => {
            // Adjust subcategory color based on its relative size within category
            const subcatColor = subcatColors[subIndex];
            
            const subcategoryNode = {
                name: subcategory.name,
                value: subcategory.value,
                children: [],
                itemStyle: {
                    color: subcatColor
                },
                transactions: subcategory.transactions
            };
            
            // Get microcategories and sort by value
            const microcategories = [];
            for (const microKey in subcategory.children) {
                microcategories.push(subcategory.children[microKey]);
            }
            microcategories.sort((a, b) => b.value - a.value);
            
            // Generate color variations for microcategories based on their size
            const microColors = generateColorGradient(subcatColor, microcategories.length || 1);
            
            // Add microcategories to subcategory
            microcategories.forEach((micro, microIndex) => {
                subcategoryNode.children.push({
                    name: micro.name,
                    value: micro.value,
                    itemStyle: {
                        color: microColors[microIndex]
                    },
                    transactions: micro.transactions
                });
            });
            
            if (subcategoryNode.children.length > 0) {
                categoryNode.children.push(subcategoryNode);
            } else {
                categoryNode.children.push({
                    name: subcategory.name,
                    value: subcategory.value,
                    itemStyle: {
                        color: subcatColor
                    },
                    transactions: subcategory.transactions
                });
            }
        });
        
        result.push(categoryNode);
    });
    
    return {
        total: totalSpending,
        data: result
    };
}

// Build ECharts stacked bar option for timeline view
// drillPath: array like [] (categories), ['Cat'] (subcategories), ['Cat','Sub'] (microcategories)
function buildTimelineOption(drillPath) {
    drillPath = drillPath || [];
    const depth = drillPath.length; // 0=category, 1=subcategory, 2=microcategory
    const months = availableMonths;
    const xLabels = months.map(m => formatMonthLabel(m));

    const seriesList = [];
    const legendData = [];

    const emphLabel = {
        show: true, position: 'top',
        formatter: (p) => p.value >= 1000 ? Math.round(p.value / 1000) + 'к' : '',
        fontSize: 14, fontWeight: 'bold',
        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif',
        color: '#555', backgroundColor: 'rgba(255,255,255,0.9)', borderRadius: 2, padding: [2, 4]
    };

    // Hierarchy fields in order: category → subcategory → microcategory
    const hierarchyFields = ['category', 'subcategory', 'microcategory'];

    // Collect totals grouped by the next level in the hierarchy
    const groupTotals = {};

    months.forEach((month, mi) => {
        const data = monthDataCache[month];
        if (!data) return;
        data.forEach(item => {
            const amount = Math.abs(parseFloat(item.amount_rub));
            if (isNaN(amount)) return;

            // Filter: item must match all path segments
            for (let i = 0; i < depth; i++) {
                const field = hierarchyFields[i];
                const itemVal = item[field] || '';
                if (itemVal !== drillPath[i]) return;
            }

            // Group by the next field in the hierarchy
            const groupField = hierarchyFields[depth];
            const groupName = item[groupField] || 'Другое';
            if (!groupTotals[groupName]) {
                groupTotals[groupName] = new Array(months.length).fill(0);
            }
            groupTotals[groupName][mi] += amount;
        });
    });

    // Build series with appropriate ordering and colors per depth level
    if (depth === 0) {
        // Level 0: use categoryOrder and categoryColors
        const usedCategories = new Set();
        categoryOrder.forEach((catName, ci) => {
            if (!groupTotals[catName]) return;
            usedCategories.add(catName);
            legendData.push(catName);
            seriesList.push({
                name: catName,
                type: 'bar',
                stack: 'total',
                barMaxWidth: 50,
                barCategoryGap: '35%',
                data: groupTotals[catName],
                itemStyle: { color: categoryColors[ci] },
                label: { show: false },
                emphasis: { focus: 'series', label: emphLabel },
                blur: { itemStyle: { opacity: 0.15 } }
            });
        });

        Object.keys(groupTotals).forEach(catName => {
            if (usedCategories.has(catName)) return;
            legendData.push(catName);
            seriesList.push({
                name: catName,
                type: 'bar',
                stack: 'total',
                barMaxWidth: 50,
                barCategoryGap: '35%',
                data: groupTotals[catName],
                label: { show: false },
                emphasis: { focus: 'series', label: emphLabel },
                blur: { itemStyle: { opacity: 0.15 } }
            });
        });
    } else if (depth === 1) {
        // Level 1: use subcategoryOrder and getSubcategoryColor
        const parentCategory = drillPath[0];
        const order = subcategoryOrder[parentCategory] || [];
        const usedSubs = new Set();
        let unknownIdx = 0;

        order.forEach((subName, si) => {
            if (!groupTotals[subName]) return;
            usedSubs.add(subName);
            legendData.push(subName);
            seriesList.push({
                name: subName,
                type: 'bar',
                stack: 'total',
                barMaxWidth: 50,
                barCategoryGap: '35%',
                data: groupTotals[subName],
                itemStyle: { color: getSubcategoryColor(parentCategory, subName, si) },
                label: { show: false },
                emphasis: { focus: 'series', label: emphLabel },
                blur: { itemStyle: { opacity: 0.15 } }
            });
        });

        Object.keys(groupTotals).forEach(subName => {
            if (usedSubs.has(subName)) return;
            legendData.push(subName);
            seriesList.push({
                name: subName,
                type: 'bar',
                stack: 'total',
                barMaxWidth: 50,
                barCategoryGap: '35%',
                data: groupTotals[subName],
                itemStyle: { color: getSubcategoryColor(parentCategory, subName, 0, unknownIdx++) },
                label: { show: false },
                emphasis: { focus: 'series', label: emphLabel },
                blur: { itemStyle: { opacity: 0.15 } }
            });
        });
    } else {
        // Level 2 (microcategory): auto-colors from defaultColorPalette
        let colorIdx = 0;
        // Sort by total value descending for consistent ordering
        const sortedNames = Object.keys(groupTotals).sort((a, b) => {
            const sumA = groupTotals[a].reduce((s, v) => s + v, 0);
            const sumB = groupTotals[b].reduce((s, v) => s + v, 0);
            return sumB - sumA;
        });

        sortedNames.forEach(name => {
            legendData.push(name);
            seriesList.push({
                name: name,
                type: 'bar',
                stack: 'total',
                barMaxWidth: 50,
                barCategoryGap: '35%',
                data: groupTotals[name],
                itemStyle: { color: defaultColorPalette[colorIdx % defaultColorPalette.length] },
                label: { show: false },
                emphasis: { focus: 'series', label: emphLabel },
                blur: { itemStyle: { opacity: 0.15 } }
            });
            colorIdx++;
        });
    }

    // Build per-series data map for dynamic total recalculation
    const seriesDataMap = {};
    seriesList.forEach(s => { seriesDataMap[s.name] = s.data; });

    // Invisible "total" series on top — shows sum labels that update with legend selection
    const totalPerMonth = new Array(months.length).fill(0);
    seriesList.forEach(s => { s.data.forEach((v, i) => { totalPerMonth[i] += v; }); });

    seriesList.push({
        name: '__total__',
        type: 'bar',
        stack: 'total',
        barMaxWidth: 50,
        data: totalPerMonth.map(() => 1),
        itemStyle: { color: 'transparent' },
        label: {
            show: true,
            position: 'top',
            formatter: (params) => Math.round(totalPerMonth[params.dataIndex] / 1000) + 'к',
            fontSize: (window.innerWidth <= 850 && window.innerHeight > window.innerWidth) ? 12 : 14,
            fontWeight: 'bold',
            fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif',
            color: '#666'
        },
        emphasis: { disabled: true },
        blur: { label: { show: false }, itemStyle: { opacity: 0 } }
    });



    const isDrilled = drillPath.length > 0;
    const isMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;

    const chartTitle = isDrilled ? {
        text: '← ' + drillPath.join(' › '),
        left: 'center',
        top: 6,
        textStyle: {
            fontSize: isMobile ? 16 : 22,
            fontWeight: 'bold',
            fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif',
            color: '#333'
        },
        triggerEvent: true
    } : { show: false };

    const legendItemWidth = isMobile ? 10 : 12;
    const legendItemHeight = isMobile ? 10 : 12;
    const legendItemGap = isMobile ? 6 : 8;
    const legendPadding = isMobile ? [4, 8] : [8, 12];
    const legendFontSize = isMobile ? 11 : 13;

    const legendPosition = isMobile
        ? { bottom: 20, left: 'center' }
        : { top: isDrilled ? 42 : 10, right: 10 };

    return {
        backgroundColor: '#fff',
        title: chartTitle,
        tooltip: { show: false },
        legend: {
            data: legendData,
            ...legendPosition,
            orient: isMobile ? 'horizontal' : 'vertical',
            itemWidth: legendItemWidth,
            itemHeight: legendItemHeight,
            textStyle: { fontSize: legendFontSize },
            itemGap: legendItemGap,
            backgroundColor: isMobile ? 'transparent' : 'rgba(255,255,255,0.85)',
            borderRadius: isMobile ? 0 : 6,
            padding: legendPadding,
            selector: false
        },
        grid: {
            left: isMobile ? 10 : 30,
            right: isMobile ? 25 : 180,
            top: isMobile ? (isDrilled ? 40 : 10) : (isDrilled ? 55 : 40),
            bottom: isMobile ? 100 : 30,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xLabels,
            axisLabel: { fontSize: isMobile ? 11 : 13, rotate: isMobile ? -90 : -45 }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function(val) {
                    if (val >= 1000) return Math.round(val / 1000) + 'к\u202F₽';
                    return val;
                },
                fontSize: isMobile ? 11 : 13
            }
        },
        series: seriesList,
        _seriesDataMap: seriesDataMap,
        _monthCount: months.length,
        _legendLayout: {
            isMobile: isMobile,
            orient: isMobile ? 'horizontal' : 'vertical',
            top: legendPosition.top,
            right: legendPosition.right,
            itemWidth: legendItemWidth,
            itemHeight: legendItemHeight,
            itemGap: legendItemGap,
            padding: legendPadding,
            fontSize: legendFontSize
        }
    };
}

let timelineDrillPath = [];
let _lastTimelineMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;

// Render (or re-render) the timeline chart, optionally drilled into a category path
// historyAction: 'push' (default, user drill-down), 'replace' (initial/view switch), 'none' (popstate restore)
function renderTimelineChart(drillPath, historyAction, legendSelected) {
    _lastTimelineMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;
    drillPath = drillPath || [];
    historyAction = historyAction || 'push';
    timelineDrillPath = drillPath;
    window._timelineResetLegend = null;

    myChart.off('click');
    myChart.off('mouseover');
    myChart.off('mouseout');
    myChart.off('globalout');
    myChart.off('legendselectchanged');
    // Clean up previous zrender label-click handler
    if (window._timelineZrLabelHandler) {
        myChart.getZr().off('click', window._timelineZrLabelHandler);
        window._timelineZrLabelHandler = null;
    }

    const tlOption = buildTimelineOption(drillPath);
    myChart.clear();
    myChart.setOption(tlOption, true);

    // Restore legend selection if provided (from popstate)
    if (legendSelected) {
        window._suppressLegendHistory = true;
        Object.keys(legendSelected).forEach(name => {
            myChart.dispatchAction({
                type: legendSelected[name] === false ? 'legendUnSelect' : 'legendSelect',
                name: name
            });
        });
        window._suppressLegendHistory = false;
        // Update totals and reset button for the restored selection
        updateTotalsAndResetBtn(legendSelected);
    }

    // Update browser history state
    const histState = { timelineDrill: drillPath };
    if (legendSelected) histState.legendSelected = legendSelected;
    if (historyAction === 'replace') {
        history.replaceState(histState, '');
    } else if (historyAction === 'push') {
        history.pushState(histState, '');
    }
    // 'none': skip history manipulation (popstate restore)

    saveMonthSelectionState();

    // Highlight entire series on hover so all bars show emphasis.label
    // Also highlight the corresponding legend item
    const legendNames = tlOption.legend.data;
    let hlSeries = null;

    function updateLegend(activeName) {
        myChart.setOption({
            legend: {
                data: legendNames.map(name => {
                    if (!activeName) return { name, textStyle: { fontWeight: 'normal', color: '#333' }, itemStyle: { opacity: 1 } };
                    if (name === activeName) return { name, textStyle: { fontWeight: 'bold', color: '#333' }, itemStyle: { opacity: 1 } };
                    return { name, textStyle: { fontWeight: 'normal', color: '#ccc' }, itemStyle: { opacity: 0.15 } };
                })
            }
        });
    }

    myChart.on('mouseover', function(params) {
        if (params.componentType !== 'series' || params.seriesName === '__total__') return;
        if (hlSeries === params.seriesName) return;
        if (hlSeries) myChart.dispatchAction({ type: 'downplay', seriesName: hlSeries });
        hlSeries = params.seriesName;
        myChart.dispatchAction({ type: 'highlight', seriesName: params.seriesName });
        updateLegend(params.seriesName);
    });
    myChart.on('mouseout', function(params) {
        if (params.componentType !== 'series' || !hlSeries) return;
        myChart.dispatchAction({ type: 'downplay', seriesName: hlSeries });
        hlSeries = null;
        updateLegend(null);
    });
    myChart.on('globalout', function() {
        if (hlSeries) {
            myChart.dispatchAction({ type: 'downplay', seriesName: hlSeries });
            hlSeries = null;
            updateLegend(null);
        }
    });

    // Track whether all series are selected
    function updateTotalsAndResetBtn(selected) {
        const dataMap = tlOption._seriesDataMap;
        const n = tlOption._monthCount;
        const visibleTotals = new Array(n).fill(0);
        const allNames = tlOption.legend.data;
        const legendLayout = tlOption._legendLayout;
        let allSelected = true;
        Object.keys(dataMap).forEach(name => {
            if (selected[name] !== false) {
                dataMap[name].forEach((v, i) => { visibleTotals[i] += v; });
            } else {
                allSelected = false;
            }
        });
        const resetFontSize = Math.max(11, legendLayout.fontSize - 1);

        const resetLegendSelection = function() {
            window._suppressLegendHistory = true;
            allNames.forEach(name => {
                myChart.dispatchAction({ type: 'legendSelect', name: name });
            });
            window._suppressLegendHistory = false;
            const resetSelected = {};
            allNames.forEach(name => { resetSelected[name] = true; });
            updateTotalsAndResetBtn(resetSelected);
            history.pushState({ timelineDrill: drillPath }, '');
        };
        window._timelineResetLegend = allSelected ? null : resetLegendSelection;

        const resetGraphic = {
            type: 'text',
            id: 'resetBtn',
            z: 100,
            zlevel: 1,
            style: {
                text: allSelected ? '' : '× сбросить',
                fontSize: resetFontSize,
                fill: '#999',
                fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif'
            },
            cursor: 'pointer',
            onmouseover: function() {
                if (this && this.setStyle) this.setStyle({ fill: '#000' });
            },
            onmouseout: function() {
                if (this && this.setStyle) this.setStyle({ fill: '#999' });
            },
            onclick: resetLegendSelection
        };

        const legendView = (myChart._componentsViews || []).find(v => v && v.__model && v.__model.mainType === 'legend');

        if (legendLayout.isMobile) {
            // Mobile: center reset button below horizontal legend
            let resetTop;
            if (legendView && legendView.group) {
                const groupRect = legendView.group.getBoundingRect();
                resetTop = legendView.group.y + groupRect.y + groupRect.height + 2;
            }
            resetGraphic.left = 'center';
            if (resetTop !== undefined) {
                resetGraphic.top = resetTop;
            } else {
                resetGraphic.bottom = 2;
            }
        } else {
            // Desktop: position below vertical legend, left-aligned with legend box
            const legendFont = `${legendLayout.fontSize}px sans-serif`;
            const resetXOffset = 3;
            const maxLegendTextWidth = allNames.reduce((maxWidth, name) => {
                return Math.max(maxWidth, echarts.format.getTextRect(name, legendFont).width);
            }, 0);
            const iconTextGap = 5;
            const legendBoxWidth =
                legendLayout.padding[1] * 2 +
                legendLayout.itemWidth +
                iconTextGap +
                maxLegendTextWidth;
            const resetTextWidth = echarts.format.getTextRect('× сбросить', `${resetFontSize}px sans-serif`).width;
            const resetRight =
                legendLayout.right +
                legendBoxWidth -
                legendLayout.padding[1] -
                resetTextWidth -
                resetXOffset;
            const resetLeft = legendView && legendView.group ? legendView.group.x : null;
            let resetTop;
            if (legendView && legendView.group && legendView._contentGroup) {
                const legendItems = legendView._contentGroup.children();
                if (legendItems.length > 0) {
                    const lastItem = legendItems[legendItems.length - 1];
                    const prevItem = legendItems.length > 1 ? legendItems[legendItems.length - 2] : null;
                    const rowStep = prevItem ? (lastItem.y - prevItem.y) : (legendLayout.itemHeight + legendLayout.itemGap);
                    const lastRect = lastItem.getBoundingRect();
                    resetTop =
                        legendView.group.y +
                        (legendView._contentGroup.y || 0) +
                        lastItem.y +
                        lastRect.y +
                        rowStep;
                }
            }
            if (resetTop === undefined) {
                const nextRowTop =
                    legendLayout.top +
                    legendLayout.padding[0] +
                    allNames.length * (legendLayout.itemHeight + legendLayout.itemGap);
                resetTop = nextRowTop + 11;
            }
            resetGraphic.top = resetTop;
            if (resetLeft !== null) {
                resetGraphic.left = resetLeft + resetXOffset;
            } else {
                resetGraphic.right = resetRight;
            }
        }

        myChart.setOption({
            series: [{ name: '__total__', label: {
                formatter: (p) => Math.round(visibleTotals[p.dataIndex] / 1000) + 'к'
            }}],
            graphic: [resetGraphic]
        });
    }

    // Update total labels when legend selection changes (cmd-click / opt-click / legend click)
    myChart.on('legendselectchanged', function(params) {
        updateTotalsAndResetBtn(params.selected);
        // Push legend selection to browser history (skip during popstate restore)
        if (!window._suppressLegendHistory) {
            history.pushState({ timelineDrill: drillPath, legendSelected: params.selected }, '');
        }
    });

    // Click handler: drill deeper or go up via title
    myChart.on('click', function(params) {
        if (params.componentType === 'title') {
            // Go up one level
            renderTimelineChart(drillPath.slice(0, -1));
            return;
        }
        if (params.componentType === 'series' && params.seriesName !== '__total__') {
            const nativeEvent = params.event && params.event.event;
            // Cmd-click: select only this series (hide all others)
            if (nativeEvent && nativeEvent.metaKey) {
                const allNames = tlOption.legend.data;
                window._suppressLegendHistory = true;
                allNames.forEach(name => {
                    myChart.dispatchAction({
                        type: name === params.seriesName ? 'legendSelect' : 'legendUnSelect',
                        name: name
                    });
                });
                window._suppressLegendHistory = false;
                // Build selected map and push once
                const selected = {};
                allNames.forEach(name => { selected[name] = name === params.seriesName; });
                updateTotalsAndResetBtn(selected);
                history.pushState({ timelineDrill: drillPath, legendSelected: selected }, '');
                return;
            }
            // Opt-click: toggle this series off (single action — legendselectchanged handles push)
            if (nativeEvent && nativeEvent.altKey) {
                myChart.dispatchAction({ type: 'legendToggleSelect', name: params.seriesName });
                return;
            }
            // Plain click: drill deeper if not at max depth (2 = microcategory level)
            if (drillPath.length < 2) {
                renderTimelineChart([...drillPath, params.seriesName]);
            }
        }
    });

    // Zrender-level click: detect clicks in the x-axis label area → switch to that month
    window._timelineZrLabelHandler = function(e) {
        const y = e.offsetY;
        const yBottom = myChart.convertToPixel({yAxisIndex: 0}, 0);
        // Click must be below the bar area (in the label zone) but above the legend
        if (y > yBottom + 5 && y < yBottom + 60) {
            const x = e.offsetX;
            // Find nearest bar index
            let bestIdx = -1, bestDist = Infinity;
            for (let i = 0; i < availableMonths.length; i++) {
                const barX = myChart.convertToPixel({xAxisIndex: 0}, i);
                const dist = Math.abs(x - barX);
                if (dist < bestDist) { bestDist = dist; bestIdx = i; }
            }
            // Accept if within half the bar spacing
            const spacing = availableMonths.length > 1
                ? Math.abs(myChart.convertToPixel({xAxisIndex: 0}, 1) - myChart.convertToPixel({xAxisIndex: 0}, 0))
                : 100;
            if (bestIdx >= 0 && bestDist < spacing * 0.6) {
                history.pushState({ monthView: true }, '');
                switchView('month');
                selectSingleMonth(bestIdx);
            }
        }
    };
    myChart.getZr().on('click', window._timelineZrLabelHandler);
}

// Switch between month (sunburst) and timeline (stacked bar) views
function switchView(viewName) {
    if (viewName === currentView) return;
    currentView = viewName;

    // Update switcher button active state
    document.querySelectorAll('.view-switcher-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.view === viewName);
    });

    const container = document.querySelector('.container');

    if (viewName === 'timeline') {
        container.classList.add('timeline-mode');
        // Remove all chart event listeners
        myChart.off('click');
        myChart.off('mouseover');
        myChart.off('mouseout');
        myChart.off('globalout');
        myChart.off('legendselectchanged');
        // Resize after layout change, then render stacked bar
        myChart.resize();
        renderTimelineChart(timelineDrillPath, 'replace');
        // Ensure resize after CSS layout fully settles (needed for deferred restore)
        requestAnimationFrame(() => myChart.resize());
    } else {
        container.classList.remove('timeline-mode');
        window._timelineResetLegend = null;
        // Remove all chart event listeners
        myChart.off('click');
        myChart.off('mouseover');
        myChart.off('mouseout');
        myChart.off('globalout');
        myChart.off('legendselectchanged');
        // Clear chart completely so no bar chart remnants remain
        myChart.clear();
        option = null;
        // Resize after layout change, then re-render sunburst from scratch
        myChart.resize();
        renderSelectedMonths();
    }

    saveMonthSelectionState();
}

// Function to get Russian month name from YYYY-MM format
function getRussianMonthName(dateStr) {
    const monthNum = parseInt(dateStr.split('-')[1]);
    const russianMonths = [
        'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
        'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
    ];
    return russianMonths[monthNum - 1];
}

// Function to render the chart
function renderChart(data) {
    const sunburstData = transformToSunburst(data);
    const restoredPath = [...currentDrillPath];

    // Store the original data for resetting (module-level variable)
    originalSunburstData = JSON.parse(JSON.stringify(sunburstData));

    // Reset and initialize history with the root state
    resetHistory();
    saveToHistory(sunburstData.data, sunburstData.total, null, true, []);
    
    // Get the currently selected month label
    const selectedMonth = document.getElementById('month-select').value;
    const russianMonth = selectedMonthIndices.size > 1
        ? generateSelectedMonthsLabel()
        : getRussianMonthName(selectedMonth);
    
    // Calculate the correct center position first
    const screenWidth = window.innerWidth;
    let centerPosition;

    if (screenWidth <= 850) {
        // Stacked layout: center the chart since details box is below
        centerPosition = 50;
    } else if (screenWidth >= 1000) {
        // For screens 1000px and wider, keep centered at 50%
        centerPosition = 50;
    } else {
        // Gradual transition between 850-1000px (side-by-side layout)
        const transitionProgress = (screenWidth - 850) / 150; // 0 to 1
        centerPosition = 40 + (transitionProgress * 10); // 40 to 50
    }

    // Mobile: scale chart to fill container, hide outside labels
    const isMobile = screenWidth <= 500;

    // Mobile: extend layers to fill container, keeping same hole size as desktop
    // Hole stays at 20%, layers scaled to fill remaining 80% (vs 55% on desktop)
    const level1Inner = '20%';
    const level1Outer = isMobile ? '56%' : '45%';
    const level2Outer = isMobile ? '93%' : '70%';
    const level3Outer = isMobile ? '100%' : '75%';
    const outerRadius = isMobile ? '100%' : '95%';

    // Smaller font sizes on mobile, bolder for readability
    const level1FontSize = isMobile ? 10 : 13;
    const level1LineHeight = isMobile ? 12 : 15;
    const level1FontWeight = isMobile ? 600 : 500;
    const level2FontSize = isMobile ? 9 : 11;
    const level2FontWeight = isMobile ? 600 : 400;

    option = {
        backgroundColor: '#fff',
        grid: {
            left: '10%',
            containLabel: true
        },
        animation: true,
        //animationThreshold: 2000,
        //animationDuration: 1000,
        //animationEasing: 'cubicOut',
        //animationDurationUpdate: 500,
        //animationEasingUpdate: 'cubicInOut',
        series: {
            type: 'sunburst',
            radius: [0, outerRadius],
            center: [`${centerPosition}%`, '50%'],
            startAngle: 0,
            nodeClick: false,
            data: sunburstData.data,
            sort: null, // Use 'null' to maintain the sorting we did in the data transformation
            label: {
                show: true,
                formatter: function(param) {
                    if (param.depth === 0) {
                        // No word wrapping for top-level categories
                        return param.name;
                    } else {
                        return '';
                    }
                },
                minAngle: 5,
                align: 'center',
                verticalAlign: 'middle',
                position: 'inside'
            },
            itemStyle: {
                borderWidth: 1,
                borderColor: '#fff'
            },
            levels: [
                {},
                {
                    // First level - Categories
                    r0: level1Inner,
                    r: level1Outer,
                    label: {
                        show: true,
                        rotate: 'radial',
                        fontSize: level1FontSize,
                        lineHeight: level1LineHeight,
                        fontWeight: level1FontWeight,
                        verticalAlign: 'center',
                        position: 'inside',
                        formatter: function(param) {
                            // No special formatting for level 1
                            return param.name;
                        }
                    },
                    itemStyle: {
                        borderWidth: 2
                    }
                },
                {
                    // Second level - Subcategories
                    r0: level1Outer,
                    r: level2Outer,
                    label: {
                        show: function(param) {
                            // Show labels for sectors that are at least 5% of the total
                            return param.percent >= 0.05;
                        },
                        fontSize: level2FontSize,
                        fontWeight: level2FontWeight,
                        align: 'center',
                        position: 'inside',
                        distance: 5,
               
                        formatter: function(param) {
                            // If there's only one word, never wrap it
                            if (!param.name.includes(' ')) {
                                return param.name;
                            }
                            
                            // If the text contains spaces, consider word wrapping for better visibility
                            const words = param.name.split(' ');
                            
                            // Skip wrapping for single words or very small sectors
                            // Estimate sector size from value percentage
                            if (words.length === 1 || param.percent < 0.03) {
                                return param.name;
                            }
                            
                            // Process words to keep short prepositions (< 4 chars) with the next word
                            const processedWords = [];
                            let i = 0;
                            while (i < words.length) {
                                if (i < words.length - 1 && words[i].length < 4) {
                                    // Combine short word with the next word
                                    processedWords.push(words[i] + ' ' + words[i+1]);
                                    i += 2;
                                } else {
                                    processedWords.push(words[i]);
                                    i++;
                                }
                            }
                            
                            // Skip wrapping if we're down to just one processed word
                            if (processedWords.length === 1) {
                                return processedWords[0];
                            }
                            
                            // If only 2 processed words, put one on each line
                            if (processedWords.length == 2) {
                                return processedWords[0] + '\n' + processedWords[1];
                            }
                            // If 3 processed words, put each word on its own line
                            else if (processedWords.length == 3) {
                                return processedWords[0] + '\n' + processedWords[1] + '\n' + processedWords[2];
                            }
                            // For more words, split more aggressively
                            else if (processedWords.length > 3) {
                                // Try to create 3 relatively even lines
                                const part1 = Math.floor(processedWords.length / 3);
                                const part2 = Math.floor(processedWords.length * 2 / 3);
                                
                                return processedWords.slice(0, part1).join(' ') + '\n' + 
                                       processedWords.slice(part1, part2).join(' ') + '\n' + 
                                       processedWords.slice(part2).join(' ');
                            }
                            
                            return param.name;
                        }
                    },
                    itemStyle: {
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            show: true,
                            distance: 20
                        }
                    }
                },
                {
                    // Third level - Microcategories
                    r0: level2Outer,
                    r: level3Outer,
                    label: {
                        // Only show labels conditionally based on segment size
                        // On mobile, hide outside labels to maximize chart size
                        show: isMobile ? false : function(param) {
                            // Show label if segment is wide enough (>1%)
                            return param.percent > 0.000;
                        },
                        position: isMobile ? 'inside' : 'outside',
                        padding: 3,
                        minAngle: 3,  // Add this - default is 5, reducing it will show more labels
                        silent: false,
                        fontSize: 10,
                        formatter: function(param) {
                            // If there's only one word, never wrap it
                            if (!param.name.includes(' ')) {
                                return param.name;
                            }
                            
                            // If the text contains spaces, consider word wrapping for better visibility
                            const words = param.name.split(' ');
                            
                            // Skip wrapping for single words or very small sectors
                            // Estimate sector size from value percentage
                            if (words.length === 1 || param.percent < 0.02) {
                                return param.name;
                            }
                            
                            // Process words to keep short prepositions (< 4 chars) with the next word
                            const processedWords = [];
                            let i = 0;
                            while (i < words.length) {
                                if (i < words.length - 1 && words[i].length < 4) {
                                    // Combine short word with the next word
                                    processedWords.push(words[i] + ' ' + words[i+1]);
                                    i += 2;
                                } else {
                                    processedWords.push(words[i]);
                                    i++;
                                }
                            }
                            
                            // Skip wrapping if we're down to just one processed word
                            if (processedWords.length === 1) {
                                return processedWords[0];
                            }
                            
                            // If only 2 processed words, put one on each line
                            if (processedWords.length == 2) {
                                return processedWords[0] + '\n' + processedWords[1];
                            }
                            // If 3 processed words, put each word on its own line
                            else if (processedWords.length == 3) {
                                return processedWords[0] + '\n' + processedWords[1] + '\n' + processedWords[2];
                            }
                            // For more words, split more aggressively
                            else if (processedWords.length > 3) {
                                // Try to create 3 relatively even lines
                                const part1 = Math.floor(processedWords.length / 3);
                                const part2 = Math.floor(processedWords.length * 2 / 3);
                                
                                return processedWords.slice(0, part1).join(' ') + '\n' + 
                                       processedWords.slice(part1, part2).join(' ') + '\n' + 
                                       processedWords.slice(part2).join(' ');
                            }
                            
                            return param.name;
                        }
                    },
                    itemStyle: {
                        borderWidth: 3
                    }
                }
            ],
            emphasis: {
                focus: 'relative'
            },
            // Add more space between wedges
            gap: 2,
            tooltip: {
                trigger: 'item',
                formatter: function(info) {
                    const value = formatRUB(info.value);
                    const name = info.name;

                    // Calculate percentage of total
                    const percentage = ((info.value / sunburstData.total) * 100).toFixed(1);

                    return `${name}<br/>Amount: ${value}\u202F₽<br/>Percentage: ${percentage}%`;
                }
            }
        },
        graphic: {
            elements: []  // Center label is now HTML overlay
        }
    };
    
    // Handle chart events - drill-down on click
    myChart.off('click');
    myChart.on('click', function(params) {
        if (!params.data) return; // Skip if no data

        const colorPalette = [
            '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
            '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#4cae72'
        ];

        // If we have children or transactions, drill down
        if ((params.data.children && params.data.children.length > 0) || (params.data.transactions && params.data.transactions.length > 0)) {
            // Transform the data structure for drill-down
            const newData = [];
            
            // Handle different cases based on the type of node clicked
            if (params.data.children && params.data.children.length > 0) {
                // Case 1: Node has children (category or subcategory)
                const sortedChildren = sortBySubcategoryOrder(params.data.children, params.name);
                const predefinedOrder = subcategoryOrder[params.name] || [];

                // Process each child, tracking unknown item count for color assignment
                let unknownCount = 0;
                sortedChildren.forEach((child, i) => {
                    const isUnknown = !predefinedOrder.includes(child.name);
                    const color = getSubcategoryColor(params.name, child.name, i, isUnknown ? unknownCount++ : null);
                    const newCategory = {
                        name: child.name,
                        value: child.value,
                        transactions: child.transactions,  // Preserve for modal
                        itemStyle: {
                            color: color
                        },
                        children: []
                    };
                    
                    // If child has children (microcategories), they become subcategories
                    if (child.children && child.children.length > 0) {
                        const sortedMicros = [...child.children].sort((a, b) => b.value - a.value);
                        const microColors = generateColorGradient(color, sortedMicros.length);
                        
                        sortedMicros.forEach((micro, j) => {
                            const microCategory = {
                                name: micro.name,
                                value: micro.value,
                                transactions: micro.transactions,  // Preserve for modal
                                itemStyle: {
                                    color: microColors[j]
                                },
                                children: [] // Will hold transactions
                            };
                            
                            // If micro has transactions, add them as children
                            if (micro.transactions && micro.transactions.length > 0) {
                                const sortedTransactions = [...micro.transactions].sort((a, b) => b.value - a.value);
                                const transactionColors = generateColorGradient(microColors[j], sortedTransactions.length);
                                
                                sortedTransactions.forEach((transaction, k) => {
                                    microCategory.children.push({
                                        name: transaction.name,
                                        value: transaction.value,
                                        itemStyle: {
                                            color: transactionColors[k]
                                        },
                                        originalRow: transaction.originalRow
                                    });
                                });
                            }
                            
                            newCategory.children.push(microCategory);
                        });
                    }
                    
                    // Add transactions without microcategory as subcategories
                    if (child.transactions) {
                        const transactionsWithoutMicro = child.transactions.filter(t => t.displayMicrocategory === '');
                        if (transactionsWithoutMicro.length > 0) {
                            // Group similar transactions
                            const transactionGroups = {};
                            transactionsWithoutMicro.forEach(t => {
                                if (!transactionGroups[t.name]) {
                                    transactionGroups[t.name] = {
                                        name: t.name,
                                        value: 0,
                                        transactions: []
                                    };
                                }
                                transactionGroups[t.name].value += t.value;
                                transactionGroups[t.name].transactions.push(t);
                            });
                            
                            // Add transaction groups as subcategories
                            const groups = Object.values(transactionGroups).sort((a, b) => b.value - a.value);
                            const transactionColors = generateColorGradient(color, groups.length);
                            
                            groups.forEach((group, j) => {
                                const transactionCategory = {
                                    name: group.name,
                                    value: group.value,
                                    transactions: group.transactions,  // Preserve for modal
                                    itemStyle: {
                                        color: transactionColors[j]
                                    },
                                    children: [] // Will hold individual transactions
                                };

                                // Add individual transactions as the third level
                                if (group.transactions.length > 0) {
                                    const sortedTransactions = [...group.transactions].sort((a, b) => b.value - a.value);
                                    const individualColors = generateColorGradient(transactionColors[j], sortedTransactions.length);

                                    sortedTransactions.forEach((transaction, k) => {
                                        transactionCategory.children.push({
                                            name: transaction.name,
                                            value: transaction.value,
                                            itemStyle: {
                                                color: individualColors[k]
                                            },
                                            originalRow: transaction.originalRow
                                        });
                                    });
                                }

                                newCategory.children.push(transactionCategory);
                            });
                        }
                    }
                    
                    newData.push(newCategory);
                });
            } else if (params.data.transactions && params.data.transactions.length > 0) {
                // Case 2: Node has transactions but no children (microcategory)
                // Group transactions by name
                const transactionGroups = {};
                params.data.transactions.forEach(t => {
                    if (!transactionGroups[t.name]) {
                        transactionGroups[t.name] = {
                            name: t.name,
                            value: 0,
                            transactions: []
                        };
                    }
                    transactionGroups[t.name].value += t.value;
                    transactionGroups[t.name].transactions.push(t);
                });
                
                // Create categories from transaction groups
                const groups = Object.values(transactionGroups).sort((a, b) => b.value - a.value);
                groups.forEach((group, i) => {
                    const color = colorPalette[i % colorPalette.length];
                    const transactionCategory = {
                        name: group.name,
                        value: group.value,
                        transactions: group.transactions,  // Preserve for modal
                        itemStyle: {
                            color: color
                        },
                        children: [] // Will hold individual transactions
                    };

                    // Add individual transactions as subcategories
                    if (group.transactions.length > 0) {
                        const sortedTransactions = [...group.transactions].sort((a, b) => b.value - a.value);
                        const transactionColors = generateColorGradient(color, sortedTransactions.length);

                        sortedTransactions.forEach((transaction, j) => {
                            transactionCategory.children.push({
                                name: transaction.name,
                                value: transaction.value,
                                itemStyle: {
                                    color: transactionColors[j]
                                },
                                originalRow: transaction.originalRow
                            });
                        });
                    }

                    newData.push(transactionCategory);
                });
            }
            
            // Build the new path by appending the clicked category
            const newPath = [...currentDrillPath, params.name];
            saveToHistory(newData, params.value, params.name, false, newPath);

            // Update the chart with the new data structure
            option.series.data = newData;

            // Update the center text to show the drilled-down category
            const monthLabel = selectedMonthIndices.size > 1
                ? generateSelectedMonthsLabel()
                : getRussianMonthName(document.getElementById('month-select').value);
            myChart.setOption(option, { replaceMerge: ['series'] });
            updateCenterLabel(monthLabel, params.value, params.name);

            // Update hover events with the new data structure, passing the drilled-down name
            setupHoverEvents({ total: params.value, data: newData }, params.name);

            // Update mini-chart previews to reflect drill-down
            updateAllMonthPreviews();
        }
    });
    
    myChart.setOption(option);

    // Try to restore drill-down path on initial render (e.g., after page reload)
    const restoredState = navigateToPath(sunburstData, restoredPath);
    if (restoredState) {
        option.series.data = restoredState.data;
        myChart.setOption(option, { replaceMerge: ['series'] });
        saveToHistory(restoredState.data, restoredState.total, restoredState.contextName, false, restoredState.path);
        updateCenterLabel(russianMonth, restoredState.total, restoredState.contextName);
        setupHoverEvents({ total: restoredState.total, data: restoredState.data }, restoredState.contextName);
        updateAllMonthPreviews();
    } else {
        // Update HTML center label
        updateCenterLabel(russianMonth, sunburstData.total);
        // Set up hover events for the details box
        setupHoverEvents(sunburstData);
    }

    // Add click handler for the center to go back in history
    const zr = myChart.getZr();
    zr.on('click', function(params) {
        const x = params.offsetX;
        const y = params.offsetY;

        // Calculate center and inner radius
        const chartWidth = myChart.getWidth();
        const chartHeight = myChart.getHeight();
        const centerX = chartWidth * (parseFloat(option.series.center[0]) / 100);
        const centerY = chartHeight * (parseFloat(option.series.center[1]) / 100);
        const innerRadius = Math.min(chartWidth, chartHeight) * 0.2; // 20% of chart size

        // Check if click is within the center circle
        const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
        if (distance < innerRadius && historyIndex > 0) {
            history.back();  // Use browser history - triggers popstate
        }
    });
    
    // Ensure chart is properly sized after rendering
    adjustChartSize();
    myChart.resize();
}

// Function to generate a color gradient
function generateColorGradient(baseColor, steps) {
    const result = [];
    const base = tinycolor(baseColor);
    
    // Get the base hue value (0-360)
    const baseHue = base.toHsl().h;
    
    // Create a more dramatic gradient based on size
    for (let i = 0; i < steps; i++) {
        // Calculate percentage position in the sequence (0 to 1)
        const position = i / (steps - 1 || 1);
        
        let color = base.clone();
        
        // Modify hue - shift around the color wheel based on size
        // Smaller items (position closer to 0): shift hue towards cooler colors (-30 degrees)
        // Larger items (position closer to 1): shift hue towards warmer colors (+30 degrees)
        const hueShift = 15-(position*15); // Ranges from -30 to +30
        
        // Apply HSL transformations
        const hsl = color.toHsl();
        //hsl.h = (baseHue + hueShift) % 360; // Keep hue within 0-360 range
        
        // Also adjust saturation and lightness for even more distinction
       /* if (position < 0.5) {
            // Smaller items: more saturated, darker
            hsl.s = Math.min(1, hsl.s * (1.3 - position * 0.6)); // Increase saturation up to 30%
            hsl.l = Math.max(0.2, hsl.l * (0.85 + position * 0.3)); // Slightly darker
        } else {
            // Larger items: slightly less saturated, brighter
            hsl.s = Math.min(1, hsl.s * (0.9 + position * 0.2)); // Slightly reduce saturation 
            hsl.l = Math.min(0.9, hsl.l * (1.1 + (position - 0.5) * 0.2)); // Brighter
        }*/
        
        result.push(tinycolor(hsl).toString());
    }
    
    return result;
}

// Load TinyColor library for color manipulation
function loadTinyColor() {
    return new Promise((resolve, reject) => {
        if (window.tinycolor) {
            resolve();
            return;
        }
        
        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.2/tinycolor.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

// Global state for month navigation
let availableMonths = [];
let currentMonthIndex = 0;
let selectedMonthIndices = new Set(); // Track all selected months for multi-selection
let monthDataCache = {}; // Cache for month data previews
const MONTH_SELECTION_STORAGE_KEY = 'visual-spending:month-selection';

function saveMonthSelectionState() {
    try {
        const selectedMonths = [...selectedMonthIndices]
            .map(index => availableMonths[index])
            .filter(Boolean);
        const currentMonth = availableMonths[currentMonthIndex] || null;

        localStorage.setItem(MONTH_SELECTION_STORAGE_KEY, JSON.stringify({
            currentMonth,
            selectedMonths,
            drillPath: [...currentDrillPath],
            view: currentView,
            timelineDrillPath: [...timelineDrillPath]
        }));
    } catch (error) {
        // Ignore storage failures (private mode, disabled storage, etc.)
    }
}

function restoreMonthSelectionState() {
    try {
        const raw = localStorage.getItem(MONTH_SELECTION_STORAGE_KEY);
        if (!raw) return false;

        const saved = JSON.parse(raw);
        if (!saved || !Array.isArray(saved.selectedMonths) || saved.selectedMonths.length === 0) {
            return false;
        }

        const restoredIndices = saved.selectedMonths
            .map(month => availableMonths.indexOf(month))
            .filter(index => index >= 0);

        if (restoredIndices.length === 0) {
            return false;
        }

        selectedMonthIndices = new Set(restoredIndices);

        const restoredCurrentIndex = availableMonths.indexOf(saved.currentMonth);
        if (restoredCurrentIndex >= 0 && selectedMonthIndices.has(restoredCurrentIndex)) {
            currentMonthIndex = restoredCurrentIndex;
        } else {
            currentMonthIndex = Math.max(...selectedMonthIndices);
        }

        if (Array.isArray(saved.drillPath)) {
            currentDrillPath = [...saved.drillPath];
        } else {
            currentDrillPath = [];
        }

        // Restore timeline drill path if saved
        if (Array.isArray(saved.timelineDrillPath)) {
            timelineDrillPath = [...saved.timelineDrillPath];
        }

        // Defer timeline restore so chart is initialized first
        if (saved.view === 'timeline') {
            requestAnimationFrame(() => switchView('timeline'));
        }

        return true;
    } catch (error) {
        return false;
    }
}

// Predefined colors for categories (same as in transformToSunburst)
const categoryColors = [
    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
    '#2d8041', '#fc8452', '#7b4d90', '#ea7ccc', '#4cae72',
    '#d56358', '#82b1ff', '#f19143', '#addf84', '#6f7787'
];

// Fixed order for categories
const categoryOrder = [
    'Квартира', 'Еда', 'Технологии', 'Развлечения', 'Семьи',
    'Здоровье', 'Логистика', 'Расходники', 'Красота'
];

// Fixed subcategory colors based on December 2025 data (sorted by value)
// This ensures consistent colors across all months
const subcategoryColors = {
    'Квартира': {
        'ЖКХ': '#5470c6',
        'Лев Петрович': '#91cc75'
    },
    'Еда': {
        'Продукты': '#5470c6',
        'Готовая': '#91cc75'
    },
    'Технологии': {
        'Инфраструктура домашнего интернета': '#5470c6',
        'Умный дом': '#91cc75',
        'AI': '#fac858',
        'Мобильная связь': '#ee6666'
    },
    'Развлечения': {
        'Подарки': '#5470c6',
        'Хобби Антона': '#91cc75',
        'Хобби Залины': '#fac858',
        'Подписки': '#ee6666',
        'Чтение': '#73c0de',
        'Работа Залины': '#3ba272',
        'Девайсы': '#fc8452'
    },
    'Семьи': {
        'Залина': '#5470c6',
        'Антон': '#91cc75'
    },
    'Здоровье': {
        'Терапия': '#5470c6',
        'Лекарства': '#91cc75',
        'Спортивное питание': '#fac858'
    },
    'Логистика': {
        'Такси': '#5470c6',
        'Доставка': '#91cc75',
        'Чаевые': '#fac858'
    },
    'Расходники': {
        'Замена разных фильтров': '#5470c6',
        'Санитарное': '#91cc75',
        'Батарейки': '#fac858',
        'Мелкий ремонт': '#ee6666',
        'Средства для посудомоек': '#73c0de'
    },
    'Красота': {
        'Одежда': '#5470c6',
        'Салоны красоты': '#91cc75',
        'Кремы': '#fac858'
    }
};

// Color palette for items not in the predefined mapping
const defaultColorPalette = [
    '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
    '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#4cae72'
];

// Fixed subcategory order derived from subcategoryColors (December 2025 order)
const subcategoryOrder = {};
for (const category in subcategoryColors) {
    subcategoryOrder[category] = Object.keys(subcategoryColors[category]);
}

// Get color for a subcategory, using fixed mapping or fallback to index-based
// unknownIndex: for unknown subcategories, pass the count of unknown items before this one
function getSubcategoryColor(category, subcategory, index, unknownIndex = null) {
    if (subcategoryColors[category] && subcategoryColors[category][subcategory]) {
        return subcategoryColors[category][subcategory];
    }
    // For unknown subcategories, use colors starting after the predefined ones
    const predefinedCount = subcategoryOrder[category] ? subcategoryOrder[category].length : 0;
    // Use unknownIndex if provided, otherwise calculate from index minus predefined items that might be before
    const colorIndex = unknownIndex !== null ? unknownIndex : index;
    return defaultColorPalette[(predefinedCount + colorIndex) % defaultColorPalette.length];
}

// Sort items by fixed subcategory order, with unknown items at the end sorted by value
function sortBySubcategoryOrder(items, parentCategory, nameGetter = (item) => item.name) {
    const order = subcategoryOrder[parentCategory] || [];
    return [...items].sort((a, b) => {
        const aName = nameGetter(a);
        const bName = nameGetter(b);
        const aIndex = order.indexOf(aName);
        const bIndex = order.indexOf(bName);

        // Both in predefined order - sort by that order
        if (aIndex !== -1 && bIndex !== -1) {
            return aIndex - bIndex;
        }
        // Only a is in predefined order - a comes first
        if (aIndex !== -1) return -1;
        // Only b is in predefined order - b comes first
        if (bIndex !== -1) return 1;
        // Neither in predefined order - sort by value descending
        const aValue = typeof a === 'object' ? (a.value || 0) : 0;
        const bValue = typeof b === 'object' ? (b.value || 0) : 0;
        return bValue - aValue;
    });
}

// Generate conic-gradient CSS for a month's category breakdown
function generateMonthPreviewGradient(data) {
    // Group by category and sum amounts
    const categoryTotals = {};
    let total = 0;

    data.forEach(item => {
        const category = item.category || '';
        const amount = Math.abs(parseFloat(item.amount_rub));
        if (!isNaN(amount) && category) {
            categoryTotals[category] = (categoryTotals[category] || 0) + amount;
            total += amount;
        }
    });

    if (total === 0) return 'conic-gradient(from 90deg, #eee 0deg 360deg)';

    // Sort categories by predefined order
    const sortedCategories = Object.keys(categoryTotals).sort((a, b) => {
        const indexA = categoryOrder.indexOf(a);
        const indexB = categoryOrder.indexOf(b);
        if (indexA !== -1 && indexB !== -1) return indexA - indexB;
        if (indexA !== -1) return -1;
        if (indexB !== -1) return 1;
        return categoryTotals[b] - categoryTotals[a];
    });

    // Build conic-gradient
    const gradientStops = [];
    let currentAngle = 0;

    sortedCategories.forEach((category, index) => {
        const percentage = categoryTotals[category] / total;
        const angle = percentage * 360;
        const colorIndex = categoryOrder.indexOf(category);
        const color = colorIndex !== -1 ? categoryColors[colorIndex] : categoryColors[index % categoryColors.length];

        gradientStops.push(`${color} ${currentAngle}deg ${currentAngle + angle}deg`);
        currentAngle += angle;
    });

    return `conic-gradient(from 90deg, ${gradientStops.join(', ')})`;
}

// Find category data at a given path in month's transaction data
function findCategoryDataAtPath(monthData, path) {
    if (!path || path.length === 0) {
        return null;  // No drill-down, use full data
    }

    // Group transactions by the hierarchy at this path level
    const categoryName = path[0];

    // Filter transactions belonging to this category
    const filteredTransactions = monthData.filter(item => item.category === categoryName);

    if (filteredTransactions.length === 0) {
        return { empty: true };  // Category doesn't exist in this month
    }

    if (path.length === 1) {
        // Return subcategory breakdown
        return { transactions: filteredTransactions, level: 'subcategory' };
    }

    // Path length >= 2, filter by subcategory
    const subcategoryName = path[1];
    const subFiltered = filteredTransactions.filter(item => item.subcategory === subcategoryName);

    if (subFiltered.length === 0) {
        return { empty: true };
    }

    if (path.length === 2) {
        // Return microcategory breakdown
        return { transactions: subFiltered, level: 'microcategory' };
    }

    // Path length >= 3, filter by microcategory
    const microcategoryName = path[2];
    const microFiltered = subFiltered.filter(item => item.microcategory === microcategoryName);

    if (microFiltered.length === 0) {
        return { empty: true };
    }

    // Return transaction-level breakdown
    return { transactions: microFiltered, level: 'transaction' };
}

// Get the base color for a drill-down path
function getPathBaseColor(path) {
    if (!path || path.length === 0) {
        return categoryColors[0];
    }

    const categoryName = path[0];
    const categoryIndex = categoryOrder.indexOf(categoryName);

    if (categoryIndex !== -1) {
        return categoryColors[categoryIndex];
    }

    return categoryColors[0];
}

// Generate gradient for a month at the current drill-down path
function generateDrilledDownGradient(monthData, path) {
    const result = findCategoryDataAtPath(monthData, path);

    // No drill-down - use original function
    if (!result) {
        return generateMonthPreviewGradient(monthData);
    }

    // Empty state - category doesn't exist
    if (result.empty) {
        return 'conic-gradient(from 90deg, #e0e0e0 0deg 360deg)';
    }

    const { transactions, level } = result;

    // Group by the appropriate field based on level
    const groupField = level === 'subcategory' ? 'subcategory'
                     : level === 'microcategory' ? 'microcategory'
                     : 'simple_name';

    const totals = {};
    let total = 0;

    transactions.forEach(item => {
        const key = item[groupField] || '(без категории)';
        const amount = Math.abs(parseFloat(item.amount_rub));
        if (!isNaN(amount)) {
            totals[key] = (totals[key] || 0) + amount;
            total += amount;
        }
    });

    if (total === 0) {
        return 'conic-gradient(from 90deg, #e0e0e0 0deg 360deg)';
    }

    // Get the parent category for color lookup and ordering
    const parentCategory = path.length > 0 ? path[0] : null;

    // Sort by fixed subcategory order (for first level), fallback to value for unknown items
    const order = subcategoryOrder[parentCategory] || [];
    const sortedKeys = Object.keys(totals).sort((a, b) => {
        const aIndex = order.indexOf(a);
        const bIndex = order.indexOf(b);

        // Both in predefined order - sort by that order
        if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
        // Only a is in predefined order - a comes first
        if (aIndex !== -1) return -1;
        // Only b is in predefined order - b comes first
        if (bIndex !== -1) return 1;
        // Neither in predefined order - sort by value descending
        return totals[b] - totals[a];
    });

    const gradientStops = [];
    let currentAngle = 0;
    const predefinedOrder = parentCategory ? (subcategoryOrder[parentCategory] || []) : [];

    let unknownCount = 0;
    sortedKeys.forEach((key, index) => {
        const percentage = totals[key] / total;
        const angle = percentage * 360;
        // Use fixed subcategory colors for first level, fallback to palette for deeper levels
        let color;
        if (level === 'subcategory' && parentCategory) {
            const isUnknown = !predefinedOrder.includes(key);
            color = getSubcategoryColor(parentCategory, key, index, isUnknown ? unknownCount++ : null);
        } else {
            color = defaultColorPalette[index % defaultColorPalette.length];
        }

        gradientStops.push(`${color} ${currentAngle}deg ${currentAngle + angle}deg`);
        currentAngle += angle;
    });

    return `conic-gradient(from 90deg, ${gradientStops.join(', ')})`;
}

// Update all month preview gradients based on current drill path
function updateAllMonthPreviews() {
    const buttons = document.querySelectorAll('.month-btn');

    buttons.forEach(btn => {
        const month = btn.dataset.month;
        const preview = btn.querySelector('.month-preview');

        if (preview && monthDataCache[month]) {
            preview.style.background = generateDrilledDownGradient(monthDataCache[month], currentDrillPath);
        }
    });
}

// Format month for display: "2025-01" -> "Январь'25"
function formatMonthLabel(dateStr) {
    const [year, month] = dateStr.split('-');
    const shortYear = year.slice(-2);
    const russianMonths = [
        'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
        'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
    ];
    const monthName = russianMonths[parseInt(month) - 1];
    return `${monthName}'${shortYear}`;
}

// Load all available month files
async function loadAvailableMonths() {
    // Load TinyColor first
    await loadTinyColor();

    // Fetch available months from server
    const response = await fetch('/api/months');
    availableMonths = await response.json();

    if (availableMonths.length === 0) {
        console.error('No month data files found');
        return;
    }

    const select = document.getElementById('month-select');
    const monthList = document.getElementById('month-list');

    // Clear existing options
    select.innerHTML = '';
    monthList.innerHTML = '';

    // Populate hidden select (for compatibility with renderChart)
    availableMonths.forEach(month => {
        const option = document.createElement('option');
        option.value = month;
        option.textContent = month;
        select.appendChild(option);
    });

    // Load data for all months and create buttons with previews
    await Promise.all(availableMonths.map(async (month, index) => {
        const data = await parseCSV(`altcats-${month}.csv`);
        monthDataCache[month] = data;
    }));

    // Create month buttons with previews
    availableMonths.forEach((month, index) => {
        const btn = document.createElement('button');
        btn.className = 'month-btn';
        btn.dataset.month = month;
        btn.dataset.index = index;

        // Create preview circle
        const preview = document.createElement('div');
        preview.className = 'month-preview';
        preview.style.background = generateMonthPreviewGradient(monthDataCache[month]);

        // Create label
        const label = document.createElement('span');
        label.className = 'month-label';
        label.textContent = formatMonthLabel(month);

        btn.appendChild(preview);
        btn.appendChild(label);
        btn.addEventListener('click', (event) => {
            if (event.metaKey || event.ctrlKey) {
                // Cmd/Ctrl+click: toggle individual month
                toggleMonthSelection(index);
            } else if (event.shiftKey) {
                // Shift+click: select interval from current to clicked
                selectMonthInterval(index);
            } else {
                selectSingleMonth(index);
            }
        });
        monthList.appendChild(btn);
    });

    // Restore previous month selection when possible, otherwise default to latest month
    if (restoreMonthSelectionState()) {
        if (selectedMonthIndices.size > 1) {
            await renderSelectedMonths();
        } else {
            await selectMonth(currentMonthIndex);
        }
    } else {
        currentMonthIndex = availableMonths.length - 1;
        selectedMonthIndices.clear();
        selectedMonthIndices.add(currentMonthIndex);
        await selectMonth(currentMonthIndex);
        saveMonthSelectionState();
    }

    // Set up arrow button handlers
    document.getElementById('prev-month').addEventListener('click', (event) => {
        if (currentMonthIndex > 0) {
            if (event.metaKey || event.ctrlKey) {
                // Cmd/Ctrl+arrow: toggle previous month
                toggleMonthSelection(currentMonthIndex - 1);
            } else if (event.shiftKey) {
                // Shift+arrow: extend selection to previous month
                selectMonthInterval(currentMonthIndex - 1);
            } else {
                selectSingleMonth(currentMonthIndex - 1);
            }
        }
    });

    document.getElementById('next-month').addEventListener('click', (event) => {
        if (currentMonthIndex < availableMonths.length - 1) {
            if (event.metaKey || event.ctrlKey) {
                // Cmd/Ctrl+arrow: toggle next month
                toggleMonthSelection(currentMonthIndex + 1);
            } else if (event.shiftKey) {
                // Shift+arrow: extend selection to next month
                selectMonthInterval(currentMonthIndex + 1);
            } else {
                selectSingleMonth(currentMonthIndex + 1);
            }
        }
    });

    // Set up home icon click handler (go back to root)
    const homeIcon = document.querySelector('.center-home');
    if (homeIcon) {
        homeIcon.addEventListener('click', () => {
            if (historyIndex > 0) {
                history.back();
            }
        });
    }

    // Set up view switcher
    document.querySelectorAll('.view-switcher-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const target = btn.dataset.view;
            if (target !== currentView) {
                history.pushState(target === 'timeline' ? { timelineDrill: timelineDrillPath } : { monthView: true }, '');
            }
            switchView(target);
        });
    });
}

// Transform children data for drill-down (extracted from click handler)
function transformDrillDownData(parentNode, parentCategoryName) {
    const newData = [];
    const sortedChildren = sortBySubcategoryOrder(parentNode.children, parentCategoryName);
    const predefinedOrder = subcategoryOrder[parentCategoryName] || [];

    let unknownCount = 0;
    sortedChildren.forEach((child, i) => {
        const isUnknown = !predefinedOrder.includes(child.name);
        const color = getSubcategoryColor(parentCategoryName, child.name, i, isUnknown ? unknownCount++ : null);
        const newCategory = {
            name: child.name,
            value: child.value,
            transactions: child.transactions,
            itemStyle: { color: color },
            children: []
        };

        if (child.children && child.children.length > 0) {
            const sortedMicros = [...child.children].sort((a, b) => b.value - a.value);
            const microColors = generateColorGradient(color, sortedMicros.length);

            sortedMicros.forEach((micro, j) => {
                const microCategory = {
                    name: micro.name,
                    value: micro.value,
                    transactions: micro.transactions,
                    itemStyle: { color: microColors[j] },
                    children: []
                };

                if (micro.transactions && micro.transactions.length > 0) {
                    const sortedTransactions = [...micro.transactions].sort((a, b) => b.value - a.value);
                    const transactionColors = generateColorGradient(microColors[j], sortedTransactions.length);

                    sortedTransactions.forEach((transaction, k) => {
                        microCategory.children.push({
                            name: transaction.name,
                            value: transaction.value,
                            itemStyle: { color: transactionColors[k] },
                            originalRow: transaction.originalRow
                        });
                    });
                }

                newCategory.children.push(microCategory);
            });
        }

        if (child.transactions) {
            const transactionsWithoutMicro = child.transactions.filter(t => t.displayMicrocategory === '');
            if (transactionsWithoutMicro.length > 0) {
                const transactionGroups = {};
                transactionsWithoutMicro.forEach(t => {
                    if (!transactionGroups[t.name]) {
                        transactionGroups[t.name] = { name: t.name, value: 0, transactions: [] };
                    }
                    transactionGroups[t.name].value += t.value;
                    transactionGroups[t.name].transactions.push(t);
                });

                const groups = Object.values(transactionGroups).sort((a, b) => b.value - a.value);
                const transactionColors = generateColorGradient(color, groups.length);

                groups.forEach((group, j) => {
                    const transactionCategory = {
                        name: group.name,
                        value: group.value,
                        transactions: group.transactions,
                        itemStyle: { color: transactionColors[j] },
                        children: []
                    };

                    if (group.transactions.length > 0) {
                        const sortedTransactions = [...group.transactions].sort((a, b) => b.value - a.value);
                        const individualColors = generateColorGradient(transactionColors[j], sortedTransactions.length);

                        sortedTransactions.forEach((transaction, k) => {
                            transactionCategory.children.push({
                                name: transaction.name,
                                value: transaction.value,
                                itemStyle: { color: individualColors[k] },
                                originalRow: transaction.originalRow
                            });
                        });
                    }

                    newCategory.children.push(transactionCategory);
                });
            }
        }

        newData.push(newCategory);
    });

    return newData;
}

// Transform transaction-only data for drill-down
function transformTransactionData(node) {
    const colorPalette = [
        '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
        '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#4cae72'
    ];

    const transactionGroups = {};
    node.transactions.forEach(t => {
        if (!transactionGroups[t.name]) {
            transactionGroups[t.name] = { name: t.name, value: 0, transactions: [] };
        }
        transactionGroups[t.name].value += t.value;
        transactionGroups[t.name].transactions.push(t);
    });

    const newData = [];
    const groups = Object.values(transactionGroups).sort((a, b) => b.value - a.value);

    groups.forEach((group, i) => {
        const color = colorPalette[i % colorPalette.length];
        const transactionCategory = {
            name: group.name,
            value: group.value,
            transactions: group.transactions,
            itemStyle: { color: color },
            children: []
        };

        if (group.transactions.length > 0) {
            const sortedTransactions = [...group.transactions].sort((a, b) => b.value - a.value);
            const transactionColors = generateColorGradient(color, sortedTransactions.length);

            sortedTransactions.forEach((transaction, j) => {
                transactionCategory.children.push({
                    name: transaction.name,
                    value: transaction.value,
                    itemStyle: { color: transactionColors[j] },
                    originalRow: transaction.originalRow
                });
            });
        }

        newData.push(transactionCategory);
    });

    return newData;
}

// Navigate to a path in the given sunburst data, returns drilled data or null if path not found
function navigateToPath(sunburstData, path) {
    if (!path || path.length === 0) {
        return null;  // Stay at root
    }

    // Try to find each level of the path
    let currentData = sunburstData.data;
    let currentTotal = sunburstData.total;
    let currentName = null;
    let validPath = [];

    for (let i = 0; i < path.length; i++) {
        const targetName = path[i];
        const found = currentData.find(item => item.name === targetName);

        if (!found) {
            // Path level not found, return what we have so far
            break;
        }

        validPath.push(targetName);
        currentName = targetName;
        currentTotal = found.value;

        // Transform this level's children to become top-level (same as click handler logic)
        if (found.children && found.children.length > 0) {
            currentData = transformDrillDownData(found, targetName);
        } else if (found.transactions && found.transactions.length > 0) {
            currentData = transformTransactionData(found);
        } else {
            // No more levels to drill into
            break;
        }
    }

    if (validPath.length === 0) {
        return null;  // Couldn't match any part of path
    }

    return {
        data: currentData,
        total: currentTotal,
        contextName: currentName,
        path: validPath
    };
}

// Toggle a month in/out of multi-selection (Cmd/Ctrl+click behavior)
async function toggleMonthSelection(index) {
    if (selectedMonthIndices.has(index)) {
        // Don't allow deselecting the last month
        if (selectedMonthIndices.size > 1) {
            selectedMonthIndices.delete(index);
            // If we removed the current navigation index, update it to another selected month
            if (index === currentMonthIndex) {
                currentMonthIndex = Math.max(...selectedMonthIndices);
            }
        }
    } else {
        selectedMonthIndices.add(index);
        currentMonthIndex = index; // Update navigation index to the newly added month
    }
    await renderSelectedMonths();
    saveMonthSelectionState();
}

// Select a single month (normal click behavior)
async function selectSingleMonth(index) {
    selectedMonthIndices.clear();
    selectedMonthIndices.add(index);
    await selectMonth(index);
    saveMonthSelectionState();
}

// Select interval from current month to target (Shift+click behavior)
async function selectMonthInterval(targetIndex) {
    const start = Math.min(currentMonthIndex, targetIndex);
    const end = Math.max(currentMonthIndex, targetIndex);

    selectedMonthIndices.clear();
    for (let i = start; i <= end; i++) {
        selectedMonthIndices.add(i);
    }
    currentMonthIndex = targetIndex;
    await renderSelectedMonths();
    saveMonthSelectionState();
}

// Merge transaction data from multiple months
function mergeMonthsData(monthIndices) {
    const allTransactions = [];
    for (const index of monthIndices) {
        const month = availableMonths[index];
        const data = monthDataCache[month];
        if (data) {
            allTransactions.push(...data);
        }
    }
    return allTransactions;
}

// Generate label for selected months
function generateSelectedMonthsLabel() {
    if (selectedMonthIndices.size === 1) {
        const index = [...selectedMonthIndices][0];
        return getRussianMonthName(availableMonths[index]);
    }

    const sortedIndices = [...selectedMonthIndices].sort((a, b) => a - b);

    // Check if consecutive
    let isConsecutive = true;
    for (let i = 1; i < sortedIndices.length; i++) {
        if (sortedIndices[i] !== sortedIndices[i - 1] + 1) {
            isConsecutive = false;
            break;
        }
    }

    if (isConsecutive && sortedIndices.length > 1) {
        // Range: "Январь - Март"
        const firstMonth = getRussianMonthName(availableMonths[sortedIndices[0]]);
        const lastMonth = getRussianMonthName(availableMonths[sortedIndices[sortedIndices.length - 1]]);
        return `${firstMonth} – ${lastMonth}`;
    } else {
        // Non-consecutive: "3 месяца"
        const count = sortedIndices.length;
        // Russian plural rules for "месяц"
        if (count === 1) return '1 месяц';
        if (count >= 2 && count <= 4) return `${count} месяца`;
        return `${count} месяцев`;
    }
}

// Render chart with data from all selected months
async function renderSelectedMonths() {
    // Merge data from all selected months
    const mergedData = mergeMonthsData(selectedMonthIndices);
    const savedPath = [...currentDrillPath];

    // Update UI
    updateMonthNavigator();

    // Update hidden select for compatibility (use first selected month)
    const sortedIndices = [...selectedMonthIndices].sort((a, b) => a - b);
    const select = document.getElementById('month-select');
    select.value = availableMonths[sortedIndices[0]];

    // Generate month label
    const monthLabel = generateSelectedMonthsLabel();

    // Transform merged data to sunburst
    const sunburstData = transformToSunburst(mergedData);

    // Update the module-level original data for center-click reset
    originalSunburstData = JSON.parse(JSON.stringify(sunburstData));

    // Reset history for the new selection
    resetHistory();

    // Try to restore the same drill-down path in merged view
    const navigatedState = navigateToPath(sunburstData, savedPath);

    let targetData, targetTotal, targetName, targetPath;

    if (navigatedState) {
        saveToHistory(sunburstData.data, sunburstData.total, null, true, []);
        targetData = navigatedState.data;
        targetTotal = navigatedState.total;
        targetName = navigatedState.contextName;
        targetPath = navigatedState.path;
        saveToHistory(targetData, targetTotal, targetName, false, targetPath);
    } else {
        targetData = sunburstData.data;
        targetTotal = sunburstData.total;
        targetName = null;
        targetPath = [];
        saveToHistory(targetData, targetTotal, targetName, true, targetPath);
    }

    // Update the chart
    if (option && option.series && option.series.data) {
        option.series.data = targetData;

        myChart.setOption({
            series: [{
                type: 'sunburst',
                data: targetData,
                layoutAnimation: true,
                animationDuration: 500,
                animationEasing: 'cubicInOut'
            }]
        }, {
            lazyUpdate: false,
            silent: false
        });

        updateCenterLabel(monthLabel, targetTotal, targetName);
        setupHoverEvents({ total: targetTotal, data: targetData }, targetName);
        updateAllMonthPreviews();
    } else {
        // Initial render
        renderChart(mergedData);
    }

    // Scroll to show the current navigation month
    const activeBtn = document.querySelector('.month-btn.active');
    if (activeBtn) {
        activeBtn.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    }

    saveMonthSelectionState();
}

// Select and load a specific month
async function selectMonth(index) {
    const month = availableMonths[index];

    // If clicking on the already-selected month while drilled down, reset to root
    if (index === currentMonthIndex && currentDrillPath.length > 0 && drillDownHistory.length > 0) {
        goToRoot();
        return;
    }

    currentMonthIndex = index;

    // Update hidden select for compatibility
    const select = document.getElementById('month-select');
    select.value = month;

    // Update month button active states
    updateMonthNavigator();

    // Load and render data
    const data = monthDataCache[month] || await parseCSV(`altcats-${month}.csv`);

    // Check if chart already has data (for animation)
    if (option && option.series && option.series.data) {
        const sunburstData = transformToSunburst(data);

        // Update the module-level original data for center-click reset
        originalSunburstData = JSON.parse(JSON.stringify(sunburstData));

        // Save the current drill path before modifying state
        const savedPath = [...currentDrillPath];

        // Reset history for the new month
        resetHistory();

        // Try to navigate to the same path in the new month
        const navigatedState = navigateToPath(sunburstData, savedPath);

        let targetData, targetTotal, targetName, targetPath;

        if (navigatedState) {
            // Successfully navigated to (part of) the path
            // First save the root state so we can go back to it
            saveToHistory(sunburstData.data, sunburstData.total, null, true, []);

            targetData = navigatedState.data;
            targetTotal = navigatedState.total;
            targetName = navigatedState.contextName;
            targetPath = navigatedState.path;

            // Save the drilled-down state
            saveToHistory(targetData, targetTotal, targetName, false, targetPath);
        } else {
            // Stay at root level
            targetData = sunburstData.data;
            targetTotal = sunburstData.total;
            targetName = null;
            targetPath = [];

            // Save initial state
            saveToHistory(targetData, targetTotal, targetName, true, targetPath);
        }

        // Update the data
        option.series.data = targetData;

        // Update the total amount in the center text
        const russianMonth = getRussianMonthName(month);

        myChart.setOption({
            series: [{
                type: 'sunburst',
                data: targetData,
                layoutAnimation: true,
                animationDuration: 500,
                animationEasing: 'cubicInOut'
            }]
        }, {
            lazyUpdate: false,
            silent: false
        });

        updateCenterLabel(russianMonth, targetTotal, targetName);

        // Update hover events
        setupHoverEvents({ total: targetTotal, data: targetData }, targetName);

        // Update mini-chart previews
        updateAllMonthPreviews();
    } else {
        // Initial render
        renderChart(data);
    }

    // Scroll selected month button into view
    const activeBtn = document.querySelector('.month-btn.active');
    if (activeBtn) {
        activeBtn.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    }

    saveMonthSelectionState();
}

// Update month navigator UI state
function updateMonthNavigator() {
    // Update button active states
    const buttons = document.querySelectorAll('.month-btn');

    buttons.forEach((btn, index) => {
        if (selectedMonthIndices.has(index)) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });

    // Update arrow disabled states
    const prevBtn = document.getElementById('prev-month');
    const nextBtn = document.getElementById('next-month');

    prevBtn.disabled = currentMonthIndex === 0;
    nextBtn.disabled = currentMonthIndex === availableMonths.length - 1;
}

// Initialize the visualization
async function initVisualization() {
    await loadAvailableMonths();

    // Ensure the chart is properly sized on initial load
    myChart.resize();
}

// Start the application
initVisualization();

// Handle window resize
let _resizeDebounceTimer = null;
window.addEventListener('resize', function() {
    if (currentView === 'month') {
        adjustChartSize();
    }
    myChart.resize();

    // Re-render timeline when crossing the mobile breakpoint
    if (currentView === 'timeline') {
        const nowMobile = window.innerWidth <= 850 && window.innerHeight > window.innerWidth;
        if (nowMobile !== _lastTimelineMobile) {
            _lastTimelineMobile = nowMobile;
            clearTimeout(_resizeDebounceTimer);
            _resizeDebounceTimer = setTimeout(function() {
                const currentOption = myChart.getOption();
                const legendSelected = currentOption && currentOption.legend
                    && currentOption.legend[0] && currentOption.legend[0].selected
                    ? currentOption.legend[0].selected
                    : null;
                renderTimelineChart(timelineDrillPath, 'replace', legendSelected);
            }, 150);
        }
    }
});

// Function to adjust chart size based on screen width
function adjustChartSize() {
    // Check if option is defined
    if (!option) return;

    const screenWidth = window.innerWidth;
    const isMobile = screenWidth <= 500;
    const isLandscapePhone = window.innerHeight < window.innerWidth && window.innerHeight <= 500;
    const isCompact = isMobile || isLandscapePhone;

    // Compact mode (portrait phones + landscape phones): extend layers to fill container
    // Hole stays at 20%, layers scaled to fill remaining 80% (vs 55% on desktop)
    const level1Inner = '20%';
    const level1Outer = isCompact ? '56%' : '45%';
    const level2Outer = isCompact ? '93%' : '70%';
    const level3Outer = isCompact ? '100%' : '75%';
    const outerRadius = isCompact ? '100%' : '95%';

    // Smaller font sizes on compact, bolder for readability
    const level1FontSize = isCompact ? 10 : 13;
    const level1LineHeight = isCompact ? 12 : 15;
    const level1FontWeight = isCompact ? 600 : 500;
    const level2FontSize = isCompact ? 9 : 11;
    const level2FontWeight = isCompact ? 600 : 400;

    // Update layer proportions
    option.series.levels[1].r0 = level1Inner;
    option.series.levels[1].r = level1Outer;
    option.series.levels[2].r0 = level1Outer;
    option.series.levels[2].r = level2Outer;
    option.series.levels[3].r0 = level2Outer;
    option.series.levels[3].r = level3Outer;
    option.series.radius = [0, outerRadius];

    // Update font sizes and weights
    option.series.levels[1].label.fontSize = level1FontSize;
    option.series.levels[1].label.lineHeight = level1LineHeight;
    option.series.levels[1].label.fontWeight = level1FontWeight;
    option.series.levels[2].label.fontSize = level2FontSize;
    option.series.levels[2].label.fontWeight = level2FontWeight;

    // Update level 3 labels: hide on compact/small screens, show on desktop
    if (isCompact) {
        option.series.levels[3].label.show = false;
        option.series.levels[3].label.position = 'inside';
    } else if (screenWidth < 950) {
        option.series.levels[3].label.show = false;
        option.series.levels[3].label.position = 'outside';
    } else {
        option.series.levels[3].label.show = function(param) {
            return param.percent > 0.000;
        };
        option.series.levels[3].label.position = 'outside';
    }

    // Calculate center position
    let centerPosition;
    if (screenWidth <= 850 || isCompact) {
        // Stacked layout or compact landscape: center the chart
        centerPosition = 50;
    } else if (screenWidth >= 1000) {
        centerPosition = 50;
    } else {
        // Gradual transition between 850-1000px (side-by-side layout)
        const transitionProgress = (screenWidth - 850) / 150;
        centerPosition = 40 + (transitionProgress * 10);
    }

    // Update chart center position
    option.series.center = [`${centerPosition}%`, '50%'];

    myChart.setOption(option);
}

// Add mouseover handler to update details box
function setupHoverEvents(sunburstData, contextName = null) {
    const topItemsElement = document.getElementById('top-items');
    
    // Create a container for details header with name and amount
    const detailsHeader = document.getElementById('details-header') || document.createElement('div');
    detailsHeader.id = 'details-header';
    detailsHeader.className = 'details-header';
    
    if (!document.getElementById('details-header')) {
        const detailsBox = document.querySelector('.details-box');
        detailsBox.insertBefore(detailsHeader, detailsBox.firstChild);
    }

    // Variables to track the circular boundary - will be recalculated when needed
    let chartCenterX, chartCenterY, chartRadius;
    
    // Function to recalculate chart center and radius for hover detection
    function recalculateChartBoundary() {
        const chartCenter = option.series.center;
        chartCenterX = chartDom.offsetWidth * (parseFloat(chartCenter[0]) / 100);
        chartCenterY = chartDom.offsetHeight * (parseFloat(chartCenter[1]) / 100);
        chartRadius = Math.min(chartDom.offsetWidth, chartDom.offsetHeight) * 
                      (parseFloat(option.series.radius[1]) / 100);
    }
    
    // Initial calculation of chart boundary
    recalculateChartBoundary();
    
    // Update chart boundary on resize
    window.addEventListener('resize', recalculateChartBoundary);
    
    // Check if point is inside the sunburst chart circle
    function isInsideChart(x, y) {
        const dx = x - chartCenterX;
        const dy = y - chartCenterY;
        const distance = Math.sqrt(dx * dx + dy * dy);
        return distance <= chartRadius;
    }

    // Floating eye button for chart
    const chartEyeBtn = document.getElementById('chart-eye-btn');
    let currentHoveredSectorData = null;
    let hideButtonTimeout = null;
    let isOverEyeButton = false;
    let isOverChartSector = false;  // Track if mouse is over any chart sector
    let lastMouseX = 0;
    let lastMouseY = 0;
    let mouseMovingTimeout = null;  // Timer to detect mouse inactivity
    let isMouseMoving = false;  // Track if mouse is actively moving

    // Calculate the center angle of a sector based on its data
    function getSectorLayoutFromChart(params) {
        // Use ECharts internal data model to get actual rendered layout
        try {
            const seriesModel = myChart.getModel().getSeriesByIndex(0);
            if (!seriesModel) return null;

            const data = seriesModel.getData();
            if (!data) return null;

            // Get the layout for this specific data item
            const layout = data.getItemLayout(params.dataIndex);
            if (layout) {
                return {
                    startAngle: layout.startAngle,
                    endAngle: layout.endAngle,
                    r: layout.r,  // outer radius
                    r0: layout.r0, // inner radius
                    cx: layout.cx, // center x
                    cy: layout.cy  // center y
                };
            }
        } catch (e) {
            console.log('Could not get layout from chart model:', e);
        }
        return null;
    }

    // Track current hovered sector for persistent button display
    let currentHoveredSectorParams = null;
    let pendingButtonPosition = null;  // Store button position when mouse stops

    // Update button visibility based on mouse movement state
    function updateButtonVisibility() {
        if (!chartEyeBtn) return;

        // Show button if mouse is moving OR hovering over the button itself
        if ((isMouseMoving || isOverEyeButton) && pendingButtonPosition) {
            chartEyeBtn.style.left = pendingButtonPosition.left;
            chartEyeBtn.style.top = pendingButtonPosition.top;
            chartEyeBtn.style.transform = pendingButtonPosition.transform;
            chartEyeBtn.style.opacity = '1';
            chartEyeBtn.style.pointerEvents = 'auto';
        } else if (!isOverEyeButton) {
            chartEyeBtn.style.opacity = '0';
            chartEyeBtn.style.pointerEvents = 'none';
        }
    }

    // Handle mouse movement on chart - show button while moving, hide after 0.5s of inactivity
    function onChartMouseMove() {
        isMouseMoving = true;
        updateButtonVisibility();

        // Clear existing timeout
        if (mouseMovingTimeout) {
            clearTimeout(mouseMovingTimeout);
        }

        // Set timeout to hide button after 0.5 second of no movement
        mouseMovingTimeout = setTimeout(() => {
            isMouseMoving = false;
            updateButtonVisibility();
        }, 500);
    }

    // Add mousemove listener to chart container
    chartDom.addEventListener('mousemove', onChartMouseMove);

    // Position and show the floating eye button near the hovered sector
    function showChartEyeButton(params) {
        if (!chartEyeBtn || !params.event) return;

        // Clear any pending hide timeout
        if (hideButtonTimeout) {
            clearTimeout(hideButtonTimeout);
            hideButtonTimeout = null;
        }

        currentHoveredSectorData = params.data;
        currentHoveredSectorParams = params;
        isOverChartSector = true;

        // Get actual layout from ECharts internal model
        const layout = getSectorLayoutFromChart(params);

        if (layout && layout.cx !== undefined) {
            // Calculate mid-angle of the sector
            const midAngle = (layout.startAngle + layout.endAngle) / 2;

            // Normalize angle to determine which side of the chart
            let normalizedAngle = midAngle % (2 * Math.PI);
            if (normalizedAngle < 0) normalizedAngle += 2 * Math.PI;

            // Left side: angle between π/2 and 3π/2 (90° to 270°)
            // On left side, labels read from edge to center, so button goes near inner edge
            // On right side, labels read from center to edge, so button goes near outer edge
            const isLeftSide = normalizedAngle > Math.PI / 2 && normalizedAngle < 3 * Math.PI / 2;

            // Position button at the appropriate edge based on label reading direction
            const buttonRadius = isLeftSide
                ? layout.r0 + 15  // Inner edge for left side (labels read inward)
                : layout.r - 15;  // Outer edge for right side (labels read outward)

            // Calculate button position at the sector's mid-angle
            const buttonX = layout.cx + buttonRadius * Math.cos(midAngle);
            const buttonY = layout.cy + buttonRadius * Math.sin(midAngle);

            // Calculate rotation for the icon to match sector orientation
            let rotationDeg = (midAngle * 180 / Math.PI);
            if (isLeftSide) {
                rotationDeg += 180;
            }

            // Store the button position
            pendingButtonPosition = {
                left: (buttonX - 12) + 'px',
                top: (buttonY - 12) + 'px',
                transform: `rotate(${rotationDeg}deg)`
            };

            // Only show if mouse is moving or hovering over button
            updateButtonVisibility();
        } else {
            // Fallback: clear pending position if we can't get layout
            pendingButtonPosition = null;
            chartEyeBtn.style.opacity = '0';
            chartEyeBtn.style.pointerEvents = 'none';
        }
    }

    // Hide the floating eye button with a delay
    function hideChartEyeButton(force = false) {
        // Don't hide if mouse is over the button
        if (isOverEyeButton && !force) return;

        // Clear existing timeout
        if (hideButtonTimeout) {
            clearTimeout(hideButtonTimeout);
        }

        // Use longer delay if mouse is still in chart area (gives time for sector re-hover)
        const stillInChart = isInsideChart(lastMouseX, lastMouseY);
        const delay = stillInChart ? 400 : 200;

        hideButtonTimeout = setTimeout(() => {
            // Double-check: don't hide if now over button or still over a chart sector
            if (!isOverEyeButton && !isOverChartSector && chartEyeBtn) {
                chartEyeBtn.style.opacity = '0';
                chartEyeBtn.style.pointerEvents = 'none';
                currentHoveredSectorData = null;
                currentHoveredSectorParams = null;
            }
        }, delay);
    }

    // Handle click on floating eye button
    if (chartEyeBtn) {
        chartEyeBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            if (currentHoveredSectorData) {
                openTransactionModal(currentHoveredSectorData);
                // Hide button after opening modal
                chartEyeBtn.style.opacity = '0';
                chartEyeBtn.style.pointerEvents = 'none';
                isOverEyeButton = false;
            }
        });

        // Track when mouse is over the button
        chartEyeBtn.addEventListener('mouseenter', () => {
            isOverEyeButton = true;
            isInsideSection = true;  // Keep details panel showing sector info
            if (hideButtonTimeout) {
                clearTimeout(hideButtonTimeout);
                hideButtonTimeout = null;
            }
            // Keep the sector highlighted while hovering over eye button
            if (currentHoveredSectorParams && currentHoveredSectorParams.dataIndex !== undefined) {
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentHoveredSectorParams.dataIndex
                });
            }
        });

        chartEyeBtn.addEventListener('mouseleave', (e) => {
            isOverEyeButton = false;

            // Check if we're still in the chart area
            const rect = chartDom.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;

            if (isInsideChart(mouseX, mouseY)) {
                // Still in chart - wait longer for ECharts to potentially re-trigger mouseover
                // The delay in hideChartEyeButton will handle this
                isOverChartSector = true;  // Assume still over sector until proven otherwise
            } else {
                // Leaving chart area - remove highlight
                if (currentHoveredSectorParams && currentHoveredSectorParams.dataIndex !== undefined) {
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: currentHoveredSectorParams.dataIndex
                    });
                }
            }

            hideChartEyeButton();
        });
    }

    // Function to display items in the details box
    function displayDetailsItems(items, parentValue) {
        // Clear previous top items
        topItemsElement.innerHTML = '';
        
        // If we have items to show
        if (items.length > 0) {
            // Create elements for each item
            items.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'top-item';
                
                const nameSpan = document.createElement('span');
                nameSpan.className = 'top-item-name';
                
                // Add colored circle
                const colorCircle = document.createElement('span');
                colorCircle.className = 'color-circle';
                
                // Use the item's color if available, otherwise use a default
                if (item.itemStyle && item.itemStyle.color) {
                    colorCircle.style.backgroundColor = item.itemStyle.color;
                } else if (item.color) {
                    colorCircle.style.backgroundColor = item.color;
                } else {
                    colorCircle.style.backgroundColor = '#cccccc';
                }
                
                nameSpan.appendChild(colorCircle);
                nameSpan.appendChild(document.createTextNode(item.name));
                itemDiv.appendChild(nameSpan);

                // Add percentage after name if we have a parent value
                if (parentValue) {
                    const percentSpan = document.createElement('span');
                    percentSpan.className = 'top-item-percent';
                    const percentage = ((item.value / parentValue) * 100).toFixed(1);
                    percentSpan.textContent = percentage + '%';
                    itemDiv.appendChild(percentSpan);
                }

                // Add eye button for viewing transaction details
                const eyeBtn = document.createElement('button');
                eyeBtn.className = 'eye-btn';
                eyeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
                eyeBtn.title = 'View transaction details';
                eyeBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    openTransactionModal(item);
                });
                itemDiv.appendChild(eyeBtn);

                const amountSpan = document.createElement('span');
                amountSpan.className = 'top-item-amount';
                amountSpan.textContent = formatRUB(item.value) + '\u202F₽';
                itemDiv.appendChild(amountSpan);
                topItemsElement.appendChild(itemDiv);
            });
        } else {
            // No items to show
            topItemsElement.innerHTML = '<div>No details available</div>';
        }
    }
    
    // Variable to store currently hovered data for the header eye button
    let currentHoveredData = null;

    // Helper function to update the details header
    function updateDetailsHeader(name, value, color, data) {
        currentHoveredData = data;
        detailsHeader.innerHTML = `
            <span class="hover-name">
                <span class="color-circle" style="background-color: ${color};"></span>
                ${name}
            </span>
            <button class="eye-btn header-eye-btn" title="View transaction details">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
            </button>
            <span class="hover-amount">${formatRUB(value)}\u202F₽</span>
        `;
        // Add click handler to header eye button
        const headerEyeBtn = detailsHeader.querySelector('.header-eye-btn');
        if (headerEyeBtn && data) {
            headerEyeBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                openTransactionModal(data);
            });
        }
    }

    // Show the default view with top categories
    // Assign to global so it can be called from closeTransactionModal
    showDefaultView = function() {
        // Use context name (drilled-down sector) if provided, otherwise use month name
        const selectedMonth = document.getElementById('month-select').value;
        const monthName = getRussianMonthName(selectedMonth);
        const displayName = contextName || monthName;

        // Create a virtual "data" object for the total view that contains all transactions
        const allTransactions = [];
        sunburstData.data.forEach(category => {
            if (category.transactions) {
                allTransactions.push(...category.transactions);
            }
        });
        const totalData = { name: displayName, transactions: allTransactions };
        currentHoveredData = totalData;

        detailsHeader.innerHTML = `
            <span class="hover-name">
                <span class="color-circle" style="background-color: #5470c6;"></span>
                ${displayName}
            </span>
            <button class="eye-btn header-eye-btn" title="View all transactions">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
            </button>
            <span class="hover-amount">${formatRUB(sunburstData.total)}\u202F₽</span>
        `;

        // Add click handler to header eye button
        const headerEyeBtn = detailsHeader.querySelector('.header-eye-btn');
        if (headerEyeBtn) {
            headerEyeBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                openTransactionModal(totalData);
            });
        }

        // Show items - sort by value for root level, use fixed order for drilled-down
        const itemsToDisplay = contextName
            ? [...sunburstData.data]  // Drilled down: use fixed subcategory order
            : [...sunburstData.data].sort((a, b) => b.value - a.value);  // Root level: sort by value
        displayDetailsItems(itemsToDisplay, sunburstData.total);
    }
    
    // Show default view initially
    showDefaultView();
    
    // Track if we're inside a section to handle sector exit properly
    let isInsideSection = false;

    // Prevent details panel reset when user is interacting with it (touch devices)
    let isInteractingWithDetails = false;
    const detailsBox = document.getElementById('details-box');
    if (detailsBox) {
        detailsBox.addEventListener('pointerdown', () => {
            isInteractingWithDetails = true;
        });
        // Clear after a short delay to allow click handlers to fire
        detailsBox.addEventListener('pointerup', () => {
            setTimeout(() => { isInteractingWithDetails = false; }, 300);
        });
    }

    // Add general mousemove event listener to detect when outside chart circle
    chartDom.addEventListener('mousemove', function(e) {
        // Get mouse position relative to chart container
        const rect = chartDom.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const mouseY = e.clientY - rect.top;

        // Track mouse position for eye button hide logic
        lastMouseX = mouseX;
        lastMouseY = mouseY;

        // If not inside the chart circle and we were inside a section, show default view
        if (!isInsideChart(mouseX, mouseY) && isInsideSection && !isInteractingWithDetails) {
            isInsideSection = false;
            // Reset details immediately when leaving a section
            showDefaultView();
        }
    });
    
    // Add mouseover event listener for sectors
    myChart.on('mouseover', function(params) {
        if (params.data) {
            // Show floating eye button at end of sector label
            showChartEyeButton(params);

            // Compute depth from treePathInfo instead of using params.depth
            let depth = params.treePathInfo ? params.treePathInfo.length - 1 : 0;
            // Debug log for every mouseover event using computed depth
            console.log('Hovered node:', { depth: depth, name: params.name, transactionsLength: (params.data.transactions ? params.data.transactions.length : 0), childrenLength: (params.data.children ? params.data.children.length : 0) });
            
            // Handle subcategory nodes (depth 2): show microcategories and transactions without microcategory
            if (depth === 2) {
                isInsideSection = true;
                console.log('DEBUG: Hovered subcategory node:', params.name, 'Transactions:', params.data.transactions, 'Children:', params.data.children);
                const itemColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
                updateDetailsHeader(params.name, params.value, itemColor, params.data);
                const MAX_DETAIL_ITEMS = 10;
                let itemsToShow = [];
                if (params.data.children && params.data.children.length > 0) {
                    itemsToShow = [...params.data.children];
                }
                if (itemsToShow.length < MAX_DETAIL_ITEMS && params.data.transactions) {
                    const currentColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
                    // Create a slightly transparent effect by mixing with white
                    const modifiedColor = tinycolor.mix(currentColor, '#ffffff', 60).toString();
                    const remaining = MAX_DETAIL_ITEMS - itemsToShow.length;
                    const transactionsWithoutMicro = (params.data.transactions || [])
                        .filter(t => t.displayMicrocategory === '')
                        .map(t => ({ ...t, itemStyle: { color: modifiedColor } }));
                    itemsToShow = itemsToShow.concat(transactionsWithoutMicro.slice(0, remaining));
                }
                displayDetailsItems(itemsToShow, params.value);
                return;
            }
            // Handle category nodes (depth 1): show subcategories and transactions without microcategory
            if (depth === 1) {
                isInsideSection = true;
                const itemColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
                updateDetailsHeader(params.name, params.value, itemColor, params.data);
                const MAX_DETAIL_ITEMS = 10;
                let itemsToShow = [];
                if (params.data.children && params.data.children.length > 0) {
                    itemsToShow = [...params.data.children];
                }
                if (itemsToShow.length < MAX_DETAIL_ITEMS && params.data.transactions) {
                    const currentColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
                    // Create a slightly transparent effect by mixing with white
                    const modifiedColor = tinycolor.mix(currentColor, '#ffffff', 30).toString();
                    const remaining = MAX_DETAIL_ITEMS - itemsToShow.length;
                    const transactionsWithoutMicro = (params.data.transactions || [])
                        .filter(t => t.displayMicrocategory === '')
                        .map(t => ({ ...t, itemStyle: { color: modifiedColor } }));
                    itemsToShow = itemsToShow.concat(transactionsWithoutMicro.slice(0, remaining));
                }
                displayDetailsItems(itemsToShow, params.value);
                return;
            }
            // For other depths, continue with existing behaviour
            isInsideSection = true;
            const itemColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
            updateDetailsHeader(params.name, params.value, itemColor, params.data);
            const MAX_DETAIL_ITEMS = 10;
            let itemsToShow = [];
            if (params.data.children && params.data.children.length > 0) {
                const sortedChildren = [...params.data.children];
                const allMicrocategories = [];
                const displayedNames = new Set();
                for (const child of sortedChildren) {
                    if (child.children && child.children.length > 0) {
                        const childMicros = [...child.children].sort((a, b) => b.value - a.value);
                        for (const micro of childMicros) {
                            if (!displayedNames.has(micro.name)) {
                                allMicrocategories.push(micro);
                                displayedNames.add(micro.name);
                                if (micro.transactions) {
                                    micro.transactions.forEach(t => {
                                        displayedNames.add(t.name);
                                    });
                                }
                            }
                        }
                    }
                }
                if (allMicrocategories.length > 0) {
                    itemsToShow = allMicrocategories.slice(0, MAX_DETAIL_ITEMS);
                } else {
                    itemsToShow = sortedChildren.slice(0, MAX_DETAIL_ITEMS);
                }
                if (itemsToShow.length < MAX_DETAIL_ITEMS) {
                    const allTransactions = [];
                    for (const subcategory of sortedChildren) {
                        if (subcategory.transactions && subcategory.transactions.length > 0) {
                            subcategory.transactions.forEach(transaction => {
                                if (!displayedNames.has(transaction.name)) {
                                    allTransactions.push({
                                        name: transaction.name,
                                        value: transaction.value,
                                        displayMicrocategory: transaction.displayMicrocategory,
                                        itemStyle: { color: subcategory.itemStyle ? subcategory.itemStyle.color : '#cccccc' }
                                    });
                                    displayedNames.add(transaction.name);
                                }
                            });
                        }
                    }
                    allTransactions.sort((a, b) => b.value - a.value);
                    const transactionsWithoutMicro = allTransactions.filter(t => t.displayMicrocategory === '');
                    if (transactionsWithoutMicro.length > 0) {
                        const currentColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
                        // Create a slightly transparent effect by mixing with white
                        const modifiedColor = tinycolor.mix(currentColor, '#ffffff', 30).toString();
                        const remaining = MAX_DETAIL_ITEMS - itemsToShow.length;
                        const filteredTransactions = transactionsWithoutMicro
                            .filter(t => !allMicrocategories.some(m => m.name === t.name))
                            .map(t => ({ ...t, itemStyle: { color: modifiedColor } }));
                        itemsToShow = itemsToShow.concat(filteredTransactions.slice(0, remaining));
                    }
                }
            } else if (params.data.transactions) {
                const sortedTransactions = [...params.data.transactions].sort((a, b) => b.value - a.value);
                const coloredTransactions = sortedTransactions.map(t => ({
                    ...t,
                    color: params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc')
                }));
                itemsToShow = coloredTransactions.slice(0, MAX_DETAIL_ITEMS);
            }
            displayDetailsItems(itemsToShow, params.value);
        }
    });
    
    // When mouse leaves a section but is still within the chart, we'll handle it with mousemove
    myChart.on('mouseout', function(params) {
        if (params.data) {
            isOverChartSector = false;
            isInsideSection = false;
            // Hide the floating eye button (unless hovering over it)
            hideChartEyeButton();
            // Reset details with a small delay to allow mouseover of next sector to fire first
            setTimeout(() => {
                if (!isOverEyeButton && !isInsideSection && !isInteractingWithDetails) {
                    showDefaultView();
                }
            }, 50);
        }
    });

    // Also reset when mouse leaves the chart container entirely
    chartDom.addEventListener('mouseleave', function(e) {
        // Don't reset if moving to the eye button
        if (e.relatedTarget === chartEyeBtn || (e.relatedTarget && chartEyeBtn.contains(e.relatedTarget))) {
            return;
        }
        if (isInteractingWithDetails) return;
        isInsideSection = false;
        showDefaultView();
    });

    // Add back the downplay event handler - this is triggered when sections lose emphasis
    myChart.on('downplay', function(params) {
        // Reset to default view when a section is no longer emphasized (unless hovering eye button or still in section)
        setTimeout(() => {
            if (!isOverEyeButton && !isInsideSection && !isInteractingWithDetails) {
                showDefaultView();
            }
        }, 50);
    });
}

// CSV column labels for human-readable display
const csvColumnLabels = {
    transaction_date: 'Date',
    processing_date: 'Processing Date',
    transaction_description: 'Description',
    comment: 'Comment',
    mcc: 'MCC',
    card_info: 'Card',
    account: 'Account',
    merchant_name: 'Merchant',
    location: 'Location',
    info_source: 'Source',
    amount_original: 'Original Amount',
    currency_original: 'Original Currency',
    amount_rub: 'Amount (₽)',
    category: 'Category',
    subcategory: 'Subcategory',
    microcategory: 'Microcategory',
    simple_name: 'Name'
};

// Preferred column order (most important first)
const csvColumnOrder = ['transaction_date', 'simple_name', 'amount_rub', 'category', 'subcategory', 'microcategory', 'transaction_description', 'merchant_name', 'account', 'card_info', 'location', 'amount_original', 'currency_original', 'mcc', 'info_source', 'processing_date', 'comment'];

// Modal state
let currentTransactions = [];
let currentColumns = [];
let currentSortColumn = null;
let currentSortDirection = 'desc';

// Open transaction modal
function openTransactionModal(item) {
    const modal = document.getElementById('transaction-modal');
    const modalTitle = document.getElementById('modal-title');

    // Set title
    modalTitle.textContent = item.name;

    // Gather transactions
    let transactions = [];
    if (item.transactions && item.transactions.length > 0) {
        transactions = item.transactions.filter(t => t.originalRow);
    } else if (item.originalRow) {
        transactions = [item];
    }

    if (transactions.length === 0) {
        const modalTbody = document.getElementById('modal-tbody');
        const modalThead = document.getElementById('modal-thead');
        modalThead.innerHTML = '';
        modalTbody.innerHTML = '<tr><td colspan="100%">No transaction data available</td></tr>';
        modal.style.display = 'flex';
        setupModalListeners();
        return;
    }

    // Get columns from first transaction
    const sampleRow = transactions[0].originalRow;
    currentColumns = csvColumnOrder.filter(col => col in sampleRow);
    currentTransactions = transactions;

    // Initial sort by amount descending
    currentSortColumn = 'amount_rub';
    currentSortDirection = 'desc';

    renderTransactionTable();
    modal.style.display = 'flex';

    // Reset scroll position to top-left
    const tableContainer = document.querySelector('.modal-table-container');
    tableContainer.scrollTop = 0;
    tableContainer.scrollLeft = 0;

    setupModalListeners();
}

// Render the transaction table with current sort
function renderTransactionTable() {
    const modalThead = document.getElementById('modal-thead');
    const modalTbody = document.getElementById('modal-tbody');

    // Sort transactions
    const sortedTransactions = [...currentTransactions].sort((a, b) => {
        const aVal = a.originalRow?.[currentSortColumn] ?? '';
        const bVal = b.originalRow?.[currentSortColumn] ?? '';

        // Numeric sort for amount columns
        if (currentSortColumn === 'amount_rub' || currentSortColumn === 'amount_original') {
            const aNum = parseFloat(aVal) || 0;
            const bNum = parseFloat(bVal) || 0;
            return currentSortDirection === 'asc' ? aNum - bNum : bNum - aNum;
        }

        // String sort for other columns
        const aStr = String(aVal);
        const bStr = String(bVal);
        const cmp = aStr.localeCompare(bStr);
        return currentSortDirection === 'asc' ? cmp : -cmp;
    });

    // Clear content
    modalThead.innerHTML = '';
    modalTbody.innerHTML = '';

    // Build header with sort indicators
    const headerRow = document.createElement('tr');
    currentColumns.forEach(col => {
        const th = document.createElement('th');
        th.textContent = csvColumnLabels[col] || col;
        th.dataset.column = col;

        // Add sort class
        if (col === currentSortColumn) {
            th.classList.add(currentSortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
        }

        // Click to sort
        th.addEventListener('click', () => {
            if (currentSortColumn === col) {
                currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
            } else {
                currentSortColumn = col;
                currentSortDirection = 'asc';
            }
            renderTransactionTable();
        });

        headerRow.appendChild(th);
    });
    modalThead.appendChild(headerRow);

    // Build rows
    sortedTransactions.forEach(transaction => {
        const row = document.createElement('tr');

        currentColumns.forEach(col => {
            const td = document.createElement('td');
            let value = transaction.originalRow[col];

            if ((col === 'amount_rub' || col === 'amount_original') && typeof value === 'number') {
                value = formatRUB(value);
            }

            td.textContent = value !== undefined && value !== null ? value : '';
            td.title = td.textContent;
            row.appendChild(td);
        });

        // Row click opens detail modal
        row.addEventListener('click', () => openRowDetailModal(transaction));
        modalTbody.appendChild(row);
    });
}

// Open the row detail modal
function openRowDetailModal(transaction) {
    const modal = document.getElementById('row-detail-modal');
    const title = document.getElementById('row-detail-title');
    const body = document.getElementById('row-detail-body');

    const name = transaction.originalRow?.simple_name || transaction.name || 'Transaction';
    title.textContent = name;

    body.innerHTML = '';

    currentColumns.forEach(col => {
        // Skip simple_name since it's already shown in the title
        if (col === 'simple_name') return;

        const value = transaction.originalRow[col];

        const itemDiv = document.createElement('div');
        itemDiv.className = 'row-detail-item';

        const labelSpan = document.createElement('span');
        labelSpan.className = 'row-detail-label';
        labelSpan.textContent = csvColumnLabels[col] || col;

        const valueSpan = document.createElement('span');
        valueSpan.className = 'row-detail-value';
        valueSpan.textContent = value;

        itemDiv.appendChild(labelSpan);
        itemDiv.appendChild(valueSpan);
        body.appendChild(itemDiv);
    });

    modal.style.display = 'flex';
    setupRowDetailModalListeners();
}

// Close row detail modal
function closeRowDetailModal() {
    const modal = document.getElementById('row-detail-modal');
    modal.style.display = 'none';
}

// Setup row detail modal listeners
function setupRowDetailModalListeners() {
    const modal = document.getElementById('row-detail-modal');
    const closeBtn = document.getElementById('row-detail-close');

    closeBtn.onclick = (e) => {
        e.stopPropagation();
        closeRowDetailModal();
    };

    modal.onclick = function(e) {
        if (e.target === modal) {
            closeRowDetailModal();
        }
    };
}

// Close transaction modal
function closeTransactionModal() {
    const modal = document.getElementById('transaction-modal');
    modal.style.display = 'none';
    // Remove any chart highlight and reset details panel
    myChart.dispatchAction({ type: 'downplay' });
    if (showDefaultView) showDefaultView();
}

// Global escape key handler for all modals
function handleGlobalEscape(e) {
    if (e.key === 'Escape') {
        const rowDetailModal = document.getElementById('row-detail-modal');
        const transactionModal = document.getElementById('transaction-modal');

        // Close row detail first if open, then transaction modal
        if (rowDetailModal.style.display !== 'none') {
            closeRowDetailModal();
        } else if (transactionModal.style.display !== 'none') {
            closeTransactionModal();
        } else if (currentView === 'timeline' && typeof window._timelineResetLegend === 'function') {
            window._timelineResetLegend();
            e.preventDefault();
        }
    }
}

// Setup global escape listener once
document.addEventListener('keydown', handleGlobalEscape);

// Setup modal close listeners
function setupModalListeners() {
    const modal = document.getElementById('transaction-modal');
    const closeBtn = document.getElementById('modal-close');

    closeBtn.onclick = closeTransactionModal;

    modal.onclick = function(e) {
        if (e.target === modal) {
            closeTransactionModal();
        }
    };
}