/**
 * ChartManager - Manages Plotly charts for multi-timeframe visualization
 */

class ChartManager {
    constructor(containerId, timeframes) {
        this.containerId = containerId;
        this.timeframes = timeframes;
        this.charts = {};
        this.annotations = {};
        this.syncedTime = null;
        this.updateTimers = {};  // Track auto-update timers
        this.autoUpdateEnabled = false;  // Auto-update state

        console.log('ChartManager initialized with timeframes:', timeframes);
    }
    
    /**
     * Start auto-updating charts
     */
    startAutoUpdate() {
        if (this.autoUpdateEnabled) {
            console.log('Auto-update already enabled');
            return;
        }
        
        this.autoUpdateEnabled = true;
        console.log('Starting chart auto-update...');
        
        // Update 1s chart every 20 seconds
        if (this.timeframes.includes('1s')) {
            this.updateTimers['1s'] = setInterval(() => {
                this.updateChart('1s');
            }, 20000);  // 20 seconds
        }
        
        // Update 1m chart - sync to whole minutes + every 20s
        if (this.timeframes.includes('1m')) {
            // Calculate ms until next whole minute
            const now = new Date();
            const msUntilNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
            
            // Update on next whole minute
            setTimeout(() => {
                this.updateChart('1m');
                
                // Then update every 20s
                this.updateTimers['1m'] = setInterval(() => {
                    this.updateChart('1m');
                }, 20000);  // 20 seconds
            }, msUntilNextMinute);
        }
        
        console.log('Auto-update enabled for:', Object.keys(this.updateTimers));
    }
    
    /**
     * Stop auto-updating charts
     */
    stopAutoUpdate() {
        if (!this.autoUpdateEnabled) {
            return;
        }
        
        this.autoUpdateEnabled = false;
        
        // Clear all timers
        Object.values(this.updateTimers).forEach(timer => clearInterval(timer));
        this.updateTimers = {};
        
        console.log('Auto-update stopped');
    }
    
    /**
     * Update a single chart with fresh data
     */
    async updateChart(timeframe) {
        try {
            const response = await fetch(`/api/chart-data?timeframe=${timeframe}&limit=1000`);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            
            const data = await response.json();
            
            if (data.success && data.data && data.data[timeframe]) {
                const chartData = data.data[timeframe];
                const plotId = `plot-${timeframe}`;
                
                // Update chart using Plotly.react (efficient update)
                const candlestickUpdate = {
                    x: [chartData.timestamps],
                    open: [chartData.open],
                    high: [chartData.high],
                    low: [chartData.low],
                    close: [chartData.close]
                };
                
                const volumeUpdate = {
                    x: [chartData.timestamps],
                    y: [chartData.volume]
                };
                
                Plotly.restyle(plotId, candlestickUpdate, [0]);
                Plotly.restyle(plotId, volumeUpdate, [1]);
                
                console.log(`Updated ${timeframe} chart at ${new Date().toLocaleTimeString()}`);
            }
        } catch (error) {
            console.error(`Error updating ${timeframe} chart:`, error);
        }
    }

    /**
     * Initialize charts for all timeframes with pivot bounds
     */
    initializeCharts(chartData, pivotBounds = null) {
        console.log('Initializing charts with data:', chartData);
        console.log('Pivot bounds:', pivotBounds);

        // Use requestAnimationFrame to batch chart creation
        let index = 0;
        const createNextChart = () => {
            if (index < this.timeframes.length) {
                const timeframe = this.timeframes[index];
                if (chartData[timeframe]) {
                    this.createChart(timeframe, chartData[timeframe], pivotBounds);
                }
                index++;
                requestAnimationFrame(createNextChart);
            } else {
                // Enable crosshair after all charts are created
                this.enableCrosshair();
            }
        };

        requestAnimationFrame(createNextChart);
    }

    /**
     * Create a single chart for a timeframe
     */
    createChart(timeframe, data, pivotBounds = null) {
        const plotId = `plot-${timeframe}`;
        const plotElement = document.getElementById(plotId);

        if (!plotElement) {
            console.error(`Plot element not found: ${plotId}`);
            return;
        }

        // Create candlestick trace
        const candlestickTrace = {
            x: data.timestamps,
            open: data.open,
            high: data.high,
            low: data.low,
            close: data.close,
            type: 'candlestick',
            name: 'Price',
            increasing: {
                line: { color: '#10b981', width: 1 },
                fillcolor: '#10b981'
            },
            decreasing: {
                line: { color: '#ef4444', width: 1 },
                fillcolor: '#ef4444'
            },
            xaxis: 'x',
            yaxis: 'y'
        };

        // Create volume trace with color based on price direction
        const volumeColors = data.close.map((close, i) => {
            if (i === 0) return '#3b82f6';
            return close >= data.open[i] ? '#10b981' : '#ef4444';
        });

        const volumeTrace = {
            x: data.timestamps,
            y: data.volume,
            type: 'bar',
            name: 'Volume',
            yaxis: 'y2',
            marker: {
                color: volumeColors,
                opacity: 0.3
            },
            hoverinfo: 'y'
        };

        const layout = {
            title: '',
            showlegend: false,
            xaxis: {
                rangeslider: { visible: false },
                gridcolor: '#374151',
                color: '#9ca3af',
                showgrid: true,
                zeroline: false
            },
            yaxis: {
                title: {
                    text: 'Price (USD)',
                    font: { size: 10 }
                },
                gridcolor: '#374151',
                color: '#9ca3af',
                showgrid: true,
                zeroline: false,
                domain: [0.3, 1]
            },
            yaxis2: {
                title: {
                    text: 'Volume',
                    font: { size: 10 }
                },
                gridcolor: '#374151',
                color: '#9ca3af',
                showgrid: false,
                zeroline: false,
                domain: [0, 0.25]
            },
            plot_bgcolor: '#1f2937',
            paper_bgcolor: '#1f2937',
            font: { color: '#f8f9fa', size: 11 },
            margin: { l: 60, r: 20, t: 10, b: 40 },
            hovermode: 'x unified',
            dragmode: 'pan',
            // Performance optimizations
            autosize: true,
            staticPlot: false
        };

        const config = {
            responsive: true,
            displayModeBar: true,
            modeBarButtonsToRemove: ['lasso2d', 'select2d', 'autoScale2d'],
            displaylogo: false,
            scrollZoom: true,
            // Performance optimizations
            doubleClick: false,
            showAxisDragHandles: false,
            showAxisRangeEntryBoxes: false
        };

        // Prepare chart data with pivot bounds
        const chartData = [candlestickTrace, volumeTrace];

        // Add pivot markers from chart data
        const shapes = [];
        const annotations = [];
        const pivotDots = { x: [], y: [], text: [], marker: { color: [], size: [], symbol: [] }, mode: 'markers', hoverinfo: 'text', showlegend: false };

        if (data.pivot_markers && Object.keys(data.pivot_markers).length > 0) {
            const xMin = data.timestamps[0];
            const xMax = data.timestamps[data.timestamps.length - 1];

            // Process each timestamp that has pivot markers
            Object.entries(data.pivot_markers).forEach(([timestamp, pivots]) => {
                // Process high pivots
                if (pivots.highs && pivots.highs.length > 0) {
                    pivots.highs.forEach(pivot => {
                        const color = this._getPivotColor(pivot.level, 'high');

                        // Draw dot on the pivot candle (above the high)
                        pivotDots.x.push(timestamp);
                        pivotDots.y.push(pivot.price);
                        pivotDots.text.push(`L${pivot.level} High Pivot<br>Price: $${pivot.price.toFixed(2)}<br>Strength: ${(pivot.strength * 100).toFixed(0)}%`);
                        pivotDots.marker.color.push(color);
                        pivotDots.marker.size.push(this._getPivotMarkerSize(pivot.level));
                        pivotDots.marker.symbol.push('triangle-down');

                        // Draw horizontal line ONLY for last pivot of this level
                        if (pivot.is_last) {
                            shapes.push({
                                type: 'line',
                                x0: xMin,
                                y0: pivot.price,
                                x1: xMax,
                                y1: pivot.price,
                                line: {
                                    color: color,
                                    width: 1,
                                    dash: 'dash'
                                },
                                layer: 'below'
                            });

                            // Add label for the level
                            annotations.push({
                                x: xMax,
                                y: pivot.price,
                                text: `L${pivot.level}H`,
                                showarrow: false,
                                xanchor: 'left',
                                font: {
                                    size: 9,
                                    color: color
                                },
                                bgcolor: '#1f2937',
                                borderpad: 2
                            });
                        }
                    });
                }

                // Process low pivots
                if (pivots.lows && pivots.lows.length > 0) {
                    pivots.lows.forEach(pivot => {
                        const color = this._getPivotColor(pivot.level, 'low');

                        // Draw dot on the pivot candle (below the low)
                        pivotDots.x.push(timestamp);
                        pivotDots.y.push(pivot.price);
                        pivotDots.text.push(`L${pivot.level} Low Pivot<br>Price: $${pivot.price.toFixed(2)}<br>Strength: ${(pivot.strength * 100).toFixed(0)}%`);
                        pivotDots.marker.color.push(color);
                        pivotDots.marker.size.push(this._getPivotMarkerSize(pivot.level));
                        pivotDots.marker.symbol.push('triangle-up');

                        // Draw horizontal line ONLY for last pivot of this level
                        if (pivot.is_last) {
                            shapes.push({
                                type: 'line',
                                x0: xMin,
                                y0: pivot.price,
                                x1: xMax,
                                y1: pivot.price,
                                line: {
                                    color: color,
                                    width: 1,
                                    dash: 'dash'
                                },
                                layer: 'below'
                            });

                            // Add label for the level
                            annotations.push({
                                x: xMax,
                                y: pivot.price,
                                text: `L${pivot.level}L`,
                                showarrow: false,
                                xanchor: 'left',
                                font: {
                                    size: 9,
                                    color: color
                                },
                                bgcolor: '#1f2937',
                                borderpad: 2
                            });
                        }
                    });
                }
            });

            // Add pivot dots trace if we have any
            if (pivotDots.x.length > 0) {
                chartData.push(pivotDots);
            }

            console.log(`Added ${shapes.length} pivot levels to ${timeframe} chart`);
        }

        // Add shapes and annotations to layout
        if (shapes.length > 0) {
            layout.shapes = shapes;
        }
        if (annotations.length > 0) {
            layout.annotations = annotations;
        }

        // Use Plotly.react for better performance on updates
        Plotly.newPlot(plotId, chartData, layout, config).then(() => {
            // Optimize rendering after initial plot
            plotElement._fullLayout._replotting = false;
        });

        // Store chart reference
        this.charts[timeframe] = {
            plotId: plotId,
            data: data,
            element: plotElement,
            annotations: []
        };

        // Add click handler for chart and annotations
        plotElement.on('plotly_click', (eventData) => {
            // Check if this is an annotation click by looking at the clicked element
            if (eventData.points && eventData.points.length > 0) {
                const point = eventData.points[0];
                // If it's a shape click (annotation line), try to find the annotation
                if (point.data && point.data.name && point.data.name.startsWith('line_')) {
                    const annotationId = point.data.name.replace('line_', '');
                    console.log('Line annotation clicked:', annotationId);
                    this.handleAnnotationClick(annotationId, 'edit');
                    return; // Don't process as regular chart click
                }
            }

            // Regular chart click for annotation marking
            this.handleChartClick(timeframe, eventData);
        });

        // Add click handler for annotations
        plotElement.on('plotly_clickannotation', (eventData) => {
            console.log('=== plotly_clickannotation event fired ===');
            console.log('Event data:', eventData);
            console.log('Annotation:', eventData.annotation);

            const annotationName = eventData.annotation.name;
            console.log('Annotation name:', annotationName);

            if (annotationName) {
                const parts = annotationName.split('_');
                const action = parts[0]; // 'entry', 'exit', or 'delete'
                const annotationId = parts[1];

                console.log(`Parsed - Action: ${action}, ID: ${annotationId}`);

                if (action === 'delete') {
                    this.handleAnnotationClick(annotationId, 'delete');
                } else {
                    this.handleAnnotationClick(annotationId, 'edit');
                }
            } else {
                console.log('No annotation name found in click event');
            }
        });

        // Add hover handler to update info
        plotElement.on('plotly_hover', (eventData) => {
            this.updateChartInfo(timeframe, eventData);
        });

        // Add relayout handler for infinite scroll (load more data when zooming/panning)
        plotElement.on('plotly_relayout', (eventData) => {
            this.handleChartRelayout(timeframe, eventData);
        });

        console.log(`Chart created for ${timeframe} with ${data.timestamps.length} candles`);
    }

    /**
     * Handle chart click for annotation
     */
    handleChartClick(timeframe, eventData) {
        if (!eventData.points || eventData.points.length === 0) return;

        const point = eventData.points[0];

        // Get the actual price from candlestick data
        let price;
        if (point.data.type === 'candlestick') {
            // For candlestick, use close price
            price = point.data.close[point.pointIndex];
        } else if (point.data.type === 'bar') {
            // Skip volume bar clicks
            return;
        } else {
            price = point.y;
        }

        const clickData = {
            timeframe: timeframe,
            timestamp: point.x,
            price: price,
            index: point.pointIndex
        };

        console.log('Chart clicked:', clickData);

        // Trigger annotation manager
        if (window.appState && window.appState.annotationManager) {
            window.appState.annotationManager.handleChartClick(clickData);
        }
    }

    /**
     * Update charts with new data including pivot levels
     */
    updateCharts(newData, pivotBounds = null) {
        Object.keys(newData).forEach(timeframe => {
            if (this.charts[timeframe]) {
                const plotId = this.charts[timeframe].plotId;
                const data = newData[timeframe];

                // Create volume colors
                const volumeColors = data.close.map((close, i) => {
                    if (i === 0) return '#3b82f6';
                    return close >= data.open[i] ? '#10b981' : '#ef4444';
                });

                // Prepare chart data
                const chartData = [
                    {
                        x: data.timestamps,
                        open: data.open,
                        high: data.high,
                        low: data.low,
                        close: data.close,
                        type: 'candlestick',
                        name: 'Price',
                        increasing: {
                            line: { color: '#10b981', width: 1 },
                            fillcolor: '#10b981'
                        },
                        decreasing: {
                            line: { color: '#ef4444', width: 1 },
                            fillcolor: '#ef4444'
                        }
                    },
                    {
                        x: data.timestamps,
                        y: data.volume,
                        type: 'bar',
                        yaxis: 'y2',
                        name: 'Volume',
                        marker: {
                            color: volumeColors,
                            opacity: 0.3
                        },
                        hoverinfo: 'y'
                    }
                ];

                // Add pivot markers from chart data
                const shapes = [];
                const annotations = [];
                const pivotDots = { x: [], y: [], text: [], marker: { color: [], size: [], symbol: [] }, mode: 'markers', hoverinfo: 'text', showlegend: false };

                if (data.pivot_markers && Object.keys(data.pivot_markers).length > 0) {
                    const xMin = data.timestamps[0];
                    const xMax = data.timestamps[data.timestamps.length - 1];

                    // Process each timestamp that has pivot markers
                    Object.entries(data.pivot_markers).forEach(([timestamp, pivots]) => {
                        // Process high pivots
                        if (pivots.highs && pivots.highs.length > 0) {
                            pivots.highs.forEach(pivot => {
                                const color = this._getPivotColor(pivot.level, 'high');

                                // Draw dot on the pivot candle
                                pivotDots.x.push(timestamp);
                                pivotDots.y.push(pivot.price);
                                pivotDots.text.push(`L${pivot.level} High Pivot<br>Price: $${pivot.price.toFixed(2)}<br>Strength: ${(pivot.strength * 100).toFixed(0)}%`);
                                pivotDots.marker.color.push(color);
                                pivotDots.marker.size.push(this._getPivotMarkerSize(pivot.level));
                                pivotDots.marker.symbol.push('triangle-down');

                                // Draw horizontal line ONLY for last pivot
                                if (pivot.is_last) {
                                    shapes.push({
                                        type: 'line',
                                        x0: xMin,
                                        y0: pivot.price,
                                        x1: xMax,
                                        y1: pivot.price,
                                        line: {
                                            color: color,
                                            width: 1,
                                            dash: 'dash'
                                        },
                                        layer: 'below'
                                    });

                                    annotations.push({
                                        x: xMax,
                                        y: pivot.price,
                                        text: `L${pivot.level}H`,
                                        showarrow: false,
                                        xanchor: 'left',
                                        font: {
                                            size: 9,
                                            color: color
                                        },
                                        bgcolor: '#1f2937',
                                        borderpad: 2
                                    });
                                }
                            });
                        }

                        // Process low pivots
                        if (pivots.lows && pivots.lows.length > 0) {
                            pivots.lows.forEach(pivot => {
                                const color = this._getPivotColor(pivot.level, 'low');

                                // Draw dot on the pivot candle
                                pivotDots.x.push(timestamp);
                                pivotDots.y.push(pivot.price);
                                pivotDots.text.push(`L${pivot.level} Low Pivot<br>Price: $${pivot.price.toFixed(2)}<br>Strength: ${(pivot.strength * 100).toFixed(0)}%`);
                                pivotDots.marker.color.push(color);
                                pivotDots.marker.size.push(this._getPivotMarkerSize(pivot.level));
                                pivotDots.marker.symbol.push('triangle-up');

                                // Draw horizontal line ONLY for last pivot
                                if (pivot.is_last) {
                                    shapes.push({
                                        type: 'line',
                                        x0: xMin,
                                        y0: pivot.price,
                                        x1: xMax,
                                        y1: pivot.price,
                                        line: {
                                            color: color,
                                            width: 1,
                                            dash: 'dash'
                                        },
                                        layer: 'below'
                                    });

                                    annotations.push({
                                        x: xMax,
                                        y: pivot.price,
                                        text: `L${pivot.level}L`,
                                        showarrow: false,
                                        xanchor: 'left',
                                        font: {
                                            size: 9,
                                            color: color
                                        },
                                        bgcolor: '#1f2937',
                                        borderpad: 2
                                    });
                                }
                            });
                        }
                    });

                    // Add pivot dots trace if we have any
                    if (pivotDots.x.length > 0) {
                        chartData.push(pivotDots);
                    }
                }

                // Use Plotly.react for efficient updates
                const update = {
                    shapes: shapes,
                    annotations: annotations
                };
                Plotly.react(plotId, chartData, update);
            }
        });
    }

    /**
     * Add annotation to charts
     */
    addAnnotation(annotation) {
        console.log('Adding annotation to charts:', annotation);

        // Store annotation
        this.annotations[annotation.annotation_id] = annotation;

        // Add markers to relevant timeframe chart
        const timeframe = annotation.timeframe;
        if (this.charts[timeframe]) {
            // TODO: Add visual markers using Plotly annotations
            this.updateChartAnnotations(timeframe);
        }
    }

    /**
     * Remove annotation from charts
     */
    removeAnnotation(annotationId) {
        if (this.annotations[annotationId]) {
            const annotation = this.annotations[annotationId];
            delete this.annotations[annotationId];

            // Update chart
            if (this.charts[annotation.timeframe]) {
                this.updateChartAnnotations(annotation.timeframe);
            }
        }
    }

    /**
     * Update chart annotations
     */
    updateChartAnnotations(timeframe) {
        const chart = this.charts[timeframe];
        if (!chart) return;

        // Get annotations for this timeframe
        const timeframeAnnotations = Object.values(this.annotations)
            .filter(ann => ann.timeframe === timeframe);

        // Build Plotly annotations and shapes
        const plotlyAnnotations = [];
        const plotlyShapes = [];

        timeframeAnnotations.forEach(ann => {
            const entryTime = ann.entry.timestamp;
            const exitTime = ann.exit.timestamp;
            const entryPrice = ann.entry.price;
            const exitPrice = ann.exit.price;

            // Entry marker (clickable)
            plotlyAnnotations.push({
                x: entryTime,
                y: entryPrice,
                text: '▲',
                showarrow: false,
                font: {
                    size: 20,
                    color: ann.direction === 'LONG' ? '#10b981' : '#ef4444'
                },
                xanchor: 'center',
                yanchor: 'bottom',
                captureevents: true,
                name: `entry_${ann.annotation_id}`
            });

            // Exit marker (clickable)
            plotlyAnnotations.push({
                x: exitTime,
                y: exitPrice,
                text: '▼',
                showarrow: false,
                font: {
                    size: 20,
                    color: ann.direction === 'LONG' ? '#10b981' : '#ef4444'
                },
                xanchor: 'center',
                yanchor: 'top',
                captureevents: true,
                name: `exit_${ann.annotation_id}`
            });

            // P&L label with delete button
            const midTime = new Date((new Date(entryTime).getTime() + new Date(exitTime).getTime()) / 2);
            const midPrice = (entryPrice + exitPrice) / 2;
            const pnlColor = ann.profit_loss_pct >= 0 ? '#10b981' : '#ef4444';

            plotlyAnnotations.push({
                x: midTime,
                y: midPrice,
                text: `${ann.profit_loss_pct >= 0 ? '+' : ''}${ann.profit_loss_pct.toFixed(2)}% 🗑️`,
                showarrow: true,
                arrowhead: 0,
                ax: 0,
                ay: -40,
                font: {
                    size: 12,
                    color: pnlColor,
                    family: 'monospace'
                },
                bgcolor: '#1f2937',
                bordercolor: pnlColor,
                borderwidth: 1,
                borderpad: 4,
                captureevents: true,
                name: `delete_${ann.annotation_id}`
            });

            // Connecting line (clickable for selection)
            plotlyShapes.push({
                type: 'line',
                x0: entryTime,
                y0: entryPrice,
                x1: exitTime,
                y1: exitPrice,
                line: {
                    color: ann.direction === 'LONG' ? '#10b981' : '#ef4444',
                    width: 2,
                    dash: 'dash'
                },
                name: `line_${ann.annotation_id}`
            });
        });

        // Get existing pivot annotations (they have specific names like L1H, L2L)
        const existingLayout = chart.element.layout || {};
        const existingAnnotations = existingLayout.annotations || [];
        const pivotAnnotations = existingAnnotations.filter(ann =>
            ann.text && ann.text.match(/^L\d+[HL]$/)
        );

        // Merge pivot annotations with trade annotations
        const allAnnotations = [...pivotAnnotations, ...plotlyAnnotations];

        // Get existing pivot shapes
        const existingShapes = existingLayout.shapes || [];
        const pivotShapes = existingShapes.filter(shape =>
            shape.layer === 'below' && shape.line && shape.line.dash === 'dash'
        );

        // Merge pivot shapes with trade annotation shapes
        const allShapes = [...pivotShapes, ...plotlyShapes];

        // Update chart layout with merged annotations and shapes
        Plotly.relayout(chart.plotId, {
            annotations: allAnnotations,
            shapes: allShapes
        });

        console.log(`Updated ${timeframeAnnotations.length} trade annotations for ${timeframe} (preserved ${pivotAnnotations.length} pivot annotations)`);
    }

    /**
     * Handle annotation click for editing/deleting
     */
    handleAnnotationClick(annotationId, action) {
        console.log(`=== handleAnnotationClick called ===`);
        console.log(`  Action: ${action}`);
        console.log(`  Annotation ID: ${annotationId}`);
        console.log(`  window.deleteAnnotation type: ${typeof window.deleteAnnotation}`);

        if (action === 'delete') {
            console.log('Delete action confirmed, showing confirm dialog...');
            if (confirm('Delete this annotation?')) {
                console.log('User confirmed deletion');
                if (window.deleteAnnotation) {
                    console.log('Calling window.deleteAnnotation...');
                    window.deleteAnnotation(annotationId);
                } else {
                    console.error('window.deleteAnnotation is not available!');
                    alert('Delete function not available. Please refresh the page.');
                }
            } else {
                console.log('User cancelled deletion');
            }
        } else if (action === 'edit') {
            console.log('Edit action');
            if (window.appState && window.appState.chartManager) {
                window.appState.chartManager.editAnnotation(annotationId);
            }
        }
    }

    /**
     * Highlight annotation
     */
    highlightAnnotation(annotationId) {
        const annotation = this.annotations[annotationId];
        if (!annotation) return;

        const timeframe = annotation.timeframe;
        const chart = this.charts[timeframe];
        if (!chart) return;

        // Flash the annotation by temporarily changing its color
        const originalAnnotations = chart.element.layout.annotations || [];
        const highlightedAnnotations = originalAnnotations.map(ann => {
            // Create a copy with highlighted color
            return {
                ...ann,
                font: {
                    ...ann.font,
                    color: '#fbbf24' // Yellow highlight
                }
            };
        });

        Plotly.relayout(chart.plotId, { annotations: highlightedAnnotations });

        // Restore original colors after 1 second
        setTimeout(() => {
            this.updateChartAnnotations(timeframe);
        }, 1000);

        console.log('Highlighted annotation:', annotationId);
    }

    /**
     * Edit annotation - allows moving entry/exit points
     */
    editAnnotation(annotationId) {
        const annotation = this.annotations[annotationId];
        if (!annotation) return;

        // Create a better edit dialog using Bootstrap modal
        this.showEditDialog(annotationId, annotation);
    }

    /**
     * Show edit dialog for annotation
     */
    showEditDialog(annotationId, annotation) {
        // Create modal HTML
        const modalHtml = `
            <div class="modal fade" id="editAnnotationModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Annotation</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <strong>Current Annotation:</strong>
                                <div class="mt-2">
                                    <div class="row">
                                        <div class="col-6">
                                            <small class="text-muted">Entry:</small><br>
                                            <span class="badge bg-success">▲</span> 
                                            ${new Date(annotation.entry.timestamp).toLocaleString()}<br>
                                            <small>$${annotation.entry.price.toFixed(2)}</small>
                                        </div>
                                        <div class="col-6">
                                            <small class="text-muted">Exit:</small><br>
                                            <span class="badge bg-danger">▼</span> 
                                            ${new Date(annotation.exit.timestamp).toLocaleString()}<br>
                                            <small>$${annotation.exit.price.toFixed(2)}</small>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <small class="text-muted">P&L:</small>
                                        <span class="badge ${annotation.profit_loss_pct >= 0 ? 'bg-success' : 'bg-danger'}">
                                            ${annotation.profit_loss_pct >= 0 ? '+' : ''}${annotation.profit_loss_pct.toFixed(2)}%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">What would you like to edit?</label>
                                <div class="btn-group w-100" role="group">
                                    <button type="button" class="btn btn-outline-primary" id="edit-entry-btn">
                                        <i class="fas fa-arrow-up"></i> Move Entry
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" id="edit-exit-btn">
                                        <i class="fas fa-arrow-down"></i> Move Exit
                                    </button>
                                    <button type="button" class="btn btn-outline-danger" id="delete-annotation-btn">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Remove existing modal if any
        const existingModal = document.getElementById('editAnnotationModal');
        if (existingModal) {
            existingModal.remove();
        }

        // Add modal to page
        document.body.insertAdjacentHTML('beforeend', modalHtml);

        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('editAnnotationModal'));
        modal.show();

        // Add event listeners
        document.getElementById('edit-entry-btn').addEventListener('click', () => {
            modal.hide();
            this.startEditMode(annotationId, annotation, 'entry');
        });

        document.getElementById('edit-exit-btn').addEventListener('click', () => {
            modal.hide();
            this.startEditMode(annotationId, annotation, 'exit');
        });

        document.getElementById('delete-annotation-btn').addEventListener('click', () => {
            modal.hide();
            this.handleAnnotationClick(annotationId, 'delete');
        });

        // Clean up modal when hidden
        document.getElementById('editAnnotationModal').addEventListener('hidden.bs.modal', () => {
            document.getElementById('editAnnotationModal').remove();
        });
    }

    /**
     * Start edit mode for annotation
     */
    startEditMode(annotationId, annotation, editMode) {
        const message = editMode === 'entry' ? 'Click on chart to set new entry point' : 'Click on chart to set new exit point';
        window.showSuccess(message);

        // Store annotation for editing
        if (window.appState && window.appState.annotationManager) {
            window.appState.annotationManager.editingAnnotation = {
                annotation_id: annotationId,
                original: annotation,
                editMode: editMode
            };

            // Remove current annotation from display
            this.removeAnnotation(annotationId);

            // Show reference marker
            const chart = this.charts[annotation.timeframe];
            if (chart) {
                const referencePoint = editMode === 'entry' ? annotation.exit : annotation.entry;
                const markerText = editMode === 'entry' ? '▼ (exit)' : '▲ (entry)';
                const arrowDirection = editMode === 'entry' ? 40 : -40;

                Plotly.relayout(chart.plotId, {
                    annotations: [{
                        x: referencePoint.timestamp,
                        y: referencePoint.price,
                        text: markerText,
                        showarrow: true,
                        arrowhead: 2,
                        ax: 0,
                        ay: arrowDirection,
                        font: { size: 14, color: '#9ca3af' },
                        bgcolor: 'rgba(31, 41, 55, 0.8)',
                        borderpad: 4
                    }]
                });
            }
        }
    }

    /**
     * Clear all annotations from charts
     */
    clearAllAnnotations() {
        console.log('Clearing all annotations from charts');

        // Clear from memory
        this.annotations = {};

        // Update all charts
        Object.keys(this.charts).forEach(timeframe => {
            this.updateChartAnnotations(timeframe);
        });

        console.log('All annotations cleared from charts');
    }

    /**
     * Update chart layout when charts are minimized/maximized
     */
    updateChartLayout() {
        const chartContainer = document.getElementById('chart-container');
        const visibleCharts = document.querySelectorAll('.timeframe-chart:not(.minimized)');
        const minimizedCharts = document.querySelectorAll('.timeframe-chart.minimized');

        // Remove scroll if all charts are visible or if some are minimized
        if (minimizedCharts.length > 0) {
            chartContainer.classList.add('no-scroll');

            // Calculate available height for visible charts
            const containerHeight = chartContainer.clientHeight;
            const headerHeight = 50; // Approximate header height
            const availableHeight = containerHeight - (visibleCharts.length * headerHeight);
            const chartHeight = Math.max(200, availableHeight / visibleCharts.length);

            // Update visible chart heights
            visibleCharts.forEach(chart => {
                const plotElement = chart.querySelector('.chart-plot');
                if (plotElement) {
                    plotElement.style.height = `${chartHeight}px`;

                    // Trigger Plotly resize
                    const plotId = plotElement.id;
                    if (plotId) {
                        Plotly.Plots.resize(plotId);
                    }
                }
            });
        } else {
            chartContainer.classList.remove('no-scroll');

            // Reset to default heights
            visibleCharts.forEach(chart => {
                const plotElement = chart.querySelector('.chart-plot');
                if (plotElement) {
                    plotElement.style.height = '300px';

                    // Trigger Plotly resize
                    const plotId = plotElement.id;
                    if (plotId) {
                        Plotly.Plots.resize(plotId);
                    }
                }
            });
        }

        console.log(`Updated chart layout: ${visibleCharts.length} visible, ${minimizedCharts.length} minimized`);
    }

    /**
     * Get color for pivot level
     */
    _getPivotColor(level, type) {
        // Different colors for different levels
        const highColors = ['#dc3545', '#ff6b6b', '#ff8787', '#ffa8a8', '#ffc9c9'];
        const lowColors = ['#28a745', '#51cf66', '#69db7c', '#8ce99a', '#b2f2bb'];

        const colors = type === 'high' ? highColors : lowColors;
        return colors[Math.min(level - 1, colors.length - 1)];
    }

    /**
     * Get marker size for pivot level
     * L1 = smallest (6px), L5 = largest (14px)
     */
    _getPivotMarkerSize(level) {
        const sizes = [6, 8, 10, 12, 14];  // L1 to L5
        return sizes[Math.min(level - 1, sizes.length - 1)];
    }

    /**
     * Enable crosshair cursor
     */
    enableCrosshair() {
        // Crosshair is enabled via hovermode in layout
        console.log('Crosshair enabled');
    }

    /**
     * Handle zoom
     */
    handleZoom(zoomFactor) {
        Object.values(this.charts).forEach(chart => {
            Plotly.relayout(chart.plotId, {
                'xaxis.range[0]': null,
                'xaxis.range[1]': null
            });
        });
    }

    /**
     * Reset zoom
     */
    resetZoom() {
        Object.values(this.charts).forEach(chart => {
            Plotly.relayout(chart.plotId, {
                'xaxis.autorange': true,
                'yaxis.autorange': true
            });
        });
    }

    /**
     * Synchronize time navigation across charts
     */
    syncTimeNavigation(timestamp) {
        this.syncedTime = timestamp;

        // Update all charts to center on this timestamp
        Object.values(this.charts).forEach(chart => {
            const data = chart.data;
            const timestamps = data.timestamps;

            // Find index closest to target timestamp
            const targetTime = new Date(timestamp);
            let closestIndex = 0;
            let minDiff = Infinity;

            timestamps.forEach((ts, i) => {
                const diff = Math.abs(new Date(ts) - targetTime);
                if (diff < minDiff) {
                    minDiff = diff;
                    closestIndex = i;
                }
            });

            // Center the view on this index
            const rangeSize = 100; // Show 100 candles
            const startIndex = Math.max(0, closestIndex - rangeSize / 2);
            const endIndex = Math.min(timestamps.length - 1, closestIndex + rangeSize / 2);

            Plotly.relayout(chart.plotId, {
                'xaxis.range': [timestamps[startIndex], timestamps[endIndex]]
            });
        });

        console.log('Synced charts to timestamp:', timestamp);
    }

    /**
     * Update chart info display on hover
     */
    updateChartInfo(timeframe, eventData) {
        if (!eventData.points || eventData.points.length === 0) return;

        const point = eventData.points[0];
        const infoElement = document.getElementById(`info-${timeframe}`);

        if (infoElement && point.data.type === 'candlestick') {
            const open = point.data.open[point.pointIndex];
            const high = point.data.high[point.pointIndex];
            const low = point.data.low[point.pointIndex];
            const close = point.data.close[point.pointIndex];

            infoElement.textContent = `O: ${open.toFixed(2)} H: ${high.toFixed(2)} L: ${low.toFixed(2)} C: ${close.toFixed(2)}`;
        }
    }

    /**
     * Handle chart relayout for infinite scroll
     * Detects when user scrolls/zooms to edges and loads more data
     */
    handleChartRelayout(timeframe, eventData) {
        const chart = this.charts[timeframe];
        if (!chart || !chart.data) return;

        // Check if this is a range change (zoom/pan)
        if (!eventData['xaxis.range[0]'] && !eventData['xaxis.range']) return;

        // Get current visible range
        const xRange = eventData['xaxis.range'] || [eventData['xaxis.range[0]'], eventData['xaxis.range[1]']];
        if (!xRange || xRange.length !== 2) return;

        const visibleStart = new Date(xRange[0]);
        const visibleEnd = new Date(xRange[1]);

        // Get data boundaries
        const dataStart = new Date(chart.data.timestamps[0]);
        const dataEnd = new Date(chart.data.timestamps[chart.data.timestamps.length - 1]);

        // Calculate threshold (10% of visible range from edge)
        const visibleRange = visibleEnd - visibleStart;
        const threshold = visibleRange * 0.1;

        // Check if we're near the left edge (need older data)
        const nearLeftEdge = (visibleStart - dataStart) < threshold;

        // Check if we're near the right edge (need newer data)
        const nearRightEdge = (dataEnd - visibleEnd) < threshold;

        console.log(`Relayout ${timeframe}: visible=${visibleStart.toISOString()} to ${visibleEnd.toISOString()}, data=${dataStart.toISOString()} to ${dataEnd.toISOString()}, nearLeft=${nearLeftEdge}, nearRight=${nearRightEdge}`);

        // Load more data if near edges
        if (nearLeftEdge) {
            this.loadMoreData(timeframe, 'before', dataStart);
        } else if (nearRightEdge) {
            this.loadMoreData(timeframe, 'after', dataEnd);
        }
    }

    /**
     * Load more historical data for a timeframe
     */
    async loadMoreData(timeframe, direction, referenceTime) {
        const chart = this.charts[timeframe];
        if (!chart) return;

        // Prevent multiple simultaneous loads
        if (chart.loading) {
            console.log(`Already loading data for ${timeframe}, skipping...`);
            return;
        }

        chart.loading = true;
        this.showLoadingIndicator(timeframe, direction);

        try {
            // Fetch more candles - no limit, get as much as available
            let startTime, endTime;

            if (direction === 'before') {
                // Load older data: get candles BEFORE the first candle we have
                // Use the actual first timestamp from our data
                const firstTimestamp = chart.data.timestamps[0];
                endTime = new Date(firstTimestamp).toISOString();
                startTime = null;

                console.log(`Loading older data before ${endTime} for ${timeframe}`);
            } else {
                // Load newer data: get candles AFTER the last candle we have
                // Use the actual last timestamp from our data
                const lastTimestamp = chart.data.timestamps[chart.data.timestamps.length - 1];
                startTime = new Date(lastTimestamp).toISOString();
                endTime = null;

                console.log(`Loading newer data after ${startTime} for ${timeframe}`);
            }

            // Fetch more data from backend (no limit - get all available)
            const response = await fetch('/api/chart-data', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    symbol: window.appState?.currentSymbol || 'ETH/USDT',
                    timeframes: [timeframe],
                    start_time: startTime,
                    end_time: endTime,
                    limit: 1000,  // Request 1000 candles at a time
                    direction: direction
                })
            });

            const result = await response.json();

            console.log(`📊 API Response for ${timeframe} ${direction}:`, {
                success: result.success,
                hasChartData: !!result.chart_data,
                hasTimeframeData: result.chart_data ? !!result.chart_data[timeframe] : false,
                dataLength: result.chart_data && result.chart_data[timeframe] ? result.chart_data[timeframe].timestamps.length : 0,
                error: result.error
            });

            if (result.success && result.chart_data && result.chart_data[timeframe]) {
                const newData = result.chart_data[timeframe];

                // Check if we got any new data
                if (newData.timestamps.length === 0) {
                    console.warn(`No more data available for ${timeframe} ${direction}`);
                    window.showWarning('No more historical data available');
                    return;
                }

                // Log data ranges for debugging
                console.log(`📥 New data: ${newData.timestamps[0]} to ${newData.timestamps[newData.timestamps.length - 1]}`);
                console.log(`📦 Existing: ${chart.data.timestamps[0]} to ${chart.data.timestamps[chart.data.timestamps.length - 1]}`);

                // Merge with existing data
                this.mergeChartData(timeframe, newData, direction);

                console.log(` Loaded ${newData.timestamps.length} new candles for ${timeframe}`);
                window.showSuccess(`Loaded ${newData.timestamps.length} more candles`);
            } else {
                console.warn(` No more data available for ${timeframe} ${direction}`);
                console.warn('Full result:', result);
                window.showWarning('No more historical data available');
            }

        } catch (error) {
            console.error(`Error loading more data for ${timeframe}:`, error);
            window.showError('Failed to load more data');
        } finally {
            chart.loading = false;
            this.hideLoadingIndicator(timeframe);
        }
    }

    /**
     * Merge new data with existing chart data (with deduplication)
     */
    mergeChartData(timeframe, newData, direction) {
        const chart = this.charts[timeframe];
        if (!chart || !chart.data) return;

        const existingData = chart.data;

        // Create a set of existing timestamps for deduplication
        const existingTimestamps = new Set(existingData.timestamps);

        // Filter out duplicate timestamps from new data
        const uniqueIndices = [];
        newData.timestamps.forEach((ts, idx) => {
            if (!existingTimestamps.has(ts)) {
                uniqueIndices.push(idx);
            }
        });

        // If no unique data, nothing to merge
        if (uniqueIndices.length === 0) {
            console.log(`No unique data to merge for ${timeframe}`);
            return;
        }

        // Extract only unique data points
        const uniqueNewData = {
            timestamps: uniqueIndices.map(i => newData.timestamps[i]),
            open: uniqueIndices.map(i => newData.open[i]),
            high: uniqueIndices.map(i => newData.high[i]),
            low: uniqueIndices.map(i => newData.low[i]),
            close: uniqueIndices.map(i => newData.close[i]),
            volume: uniqueIndices.map(i => newData.volume[i]),
            pivot_markers: newData.pivot_markers || {}
        };

        console.log(`Merging ${uniqueIndices.length} unique candles (filtered ${newData.timestamps.length - uniqueIndices.length} duplicates)`);

        let mergedData;

        if (direction === 'before') {
            // Prepend older data
            mergedData = {
                timestamps: [...uniqueNewData.timestamps, ...existingData.timestamps],
                open: [...uniqueNewData.open, ...existingData.open],
                high: [...uniqueNewData.high, ...existingData.high],
                low: [...uniqueNewData.low, ...existingData.low],
                close: [...uniqueNewData.close, ...existingData.close],
                volume: [...uniqueNewData.volume, ...existingData.volume],
                pivot_markers: { ...uniqueNewData.pivot_markers, ...existingData.pivot_markers }
            };
        } else {
            // Append newer data
            mergedData = {
                timestamps: [...existingData.timestamps, ...uniqueNewData.timestamps],
                open: [...existingData.open, ...uniqueNewData.open],
                high: [...existingData.high, ...uniqueNewData.high],
                low: [...existingData.low, ...uniqueNewData.low],
                close: [...existingData.close, ...uniqueNewData.close],
                volume: [...existingData.volume, ...uniqueNewData.volume],
                pivot_markers: { ...existingData.pivot_markers, ...uniqueNewData.pivot_markers }
            };
        }

        // Update stored data
        chart.data = mergedData;

        // Recalculate pivot points for the merged data
        this.recalculatePivots(timeframe, mergedData);

        // Update the chart with merged data
        this.updateSingleChart(timeframe, mergedData);
    }

    /**
     * Recalculate pivot points for merged data
     */
    async recalculatePivots(timeframe, data) {
        try {
            console.log(` Recalculating pivots for ${timeframe} with ${data.timestamps.length} candles...`);

            const response = await fetch('/api/recalculate-pivots', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    symbol: window.appState?.currentSymbol || 'ETH/USDT',
                    timeframe: timeframe,
                    timestamps: data.timestamps,
                    ohlcv: {
                        open: data.open,
                        high: data.high,
                        low: data.low,
                        close: data.close,
                        volume: data.volume
                    }
                })
            });

            const result = await response.json();

            if (result.success && result.pivot_markers) {
                // Update pivot markers in chart data
                const chart = this.charts[timeframe];
                if (chart && chart.data) {
                    chart.data.pivot_markers = result.pivot_markers;
                    console.log(` Pivots recalculated: ${Object.keys(result.pivot_markers).length} pivot candles`);
                    
                    // Redraw the chart with updated pivots
                    this.redrawChartWithPivots(timeframe, chart.data);
                }
            } else {
                console.warn('Failed to recalculate pivots:', result.error);
            }

        } catch (error) {
            console.error(`Error recalculating pivots for ${timeframe}:`, error);
        }
    }

    /**
     * Redraw chart with updated pivot markers
     */
    redrawChartWithPivots(timeframe, data) {
        const chart = this.charts[timeframe];
        if (!chart) return;

        // Build pivot shapes and annotations
        const shapes = [];
        const annotations = [];
        const pivotDots = { 
            x: [], y: [], text: [], 
            marker: { color: [], size: [], symbol: [] }, 
            mode: 'markers', 
            hoverinfo: 'text', 
            showlegend: false 
        };

        if (data.pivot_markers && Object.keys(data.pivot_markers).length > 0) {
            const xMin = data.timestamps[0];
            const xMax = data.timestamps[data.timestamps.length - 1];

            // Process each timestamp that has pivot markers
            Object.entries(data.pivot_markers).forEach(([timestamp, pivots]) => {
                // Process high pivots
                if (pivots.highs && pivots.highs.length > 0) {
                    pivots.highs.forEach(pivot => {
                        const color = this._getPivotColor(pivot.level, 'high');

                        pivotDots.x.push(timestamp);
                        pivotDots.y.push(pivot.price);
                        pivotDots.text.push(`L${pivot.level} High Pivot<br>Price: ${pivot.price.toFixed(2)}<br>Strength: ${(pivot.strength * 100).toFixed(0)}%`);
                        pivotDots.marker.color.push(color);
                        pivotDots.marker.size.push(this._getPivotMarkerSize(pivot.level));
                        pivotDots.marker.symbol.push('triangle-down');

                        if (pivot.is_last) {
                            shapes.push({
                                type: 'line',
                                x0: xMin, y0: pivot.price,
                                x1: xMax, y1: pivot.price,
                                line: { color: color, width: 1, dash: 'dash' },
                                layer: 'below'
                            });

                            annotations.push({
                                x: xMax, y: pivot.price,
                                text: `L${pivot.level}H`,
                                showarrow: false,
                                xanchor: 'left',
                                font: { size: 9, color: color },
                                bgcolor: '#1f2937',
                                borderpad: 2
                            });
                        }
                    });
                }

                // Process low pivots
                if (pivots.lows && pivots.lows.length > 0) {
                    pivots.lows.forEach(pivot => {
                        const color = this._getPivotColor(pivot.level, 'low');

                        pivotDots.x.push(timestamp);
                        pivotDots.y.push(pivot.price);
                        pivotDots.text.push(`L${pivot.level} Low Pivot<br>Price: ${pivot.price.toFixed(2)}<br>Strength: ${(pivot.strength * 100).toFixed(0)}%`);
                        pivotDots.marker.color.push(color);
                        pivotDots.marker.size.push(this._getPivotMarkerSize(pivot.level));
                        pivotDots.marker.symbol.push('triangle-up');

                        if (pivot.is_last) {
                            shapes.push({
                                type: 'line',
                                x0: xMin, y0: pivot.price,
                                x1: xMax, y1: pivot.price,
                                line: { color: color, width: 1, dash: 'dash' },
                                layer: 'below'
                            });

                            annotations.push({
                                x: xMax, y: pivot.price,
                                text: `L${pivot.level}L`,
                                showarrow: false,
                                xanchor: 'left',
                                font: { size: 9, color: color },
                                bgcolor: '#1f2937',
                                borderpad: 2
                            });
                        }
                    });
                }
            });
        }

        // Update chart layout with new pivots
        Plotly.relayout(chart.plotId, {
            shapes: shapes,
            annotations: annotations
        });

        // Update pivot dots trace
        if (pivotDots.x.length > 0) {
            Plotly.restyle(chart.plotId, {
                x: [pivotDots.x],
                y: [pivotDots.y],
                text: [pivotDots.text],
                'marker.color': [pivotDots.marker.color],
                'marker.size': [pivotDots.marker.size],
                'marker.symbol': [pivotDots.marker.symbol]
            }, [2]); // Trace index 2 is pivot dots
        }

        console.log(`🎨 Redrawn ${timeframe} chart with updated pivots`);
    }

    /**
     * Update a single chart with new data
     */
    updateSingleChart(timeframe, data) {
        const chart = this.charts[timeframe];
        if (!chart) return;

        const plotId = chart.plotId;

        // Create volume colors
        const volumeColors = data.close.map((close, i) => {
            if (i === 0) return '#3b82f6';
            return close >= data.open[i] ? '#10b981' : '#ef4444';
        });

        // Update traces
        const update = {
            x: [data.timestamps, data.timestamps],
            open: [data.open],
            high: [data.high],
            low: [data.low],
            close: [data.close],
            y: [undefined, data.volume],
            'marker.color': [undefined, volumeColors]
        };

        Plotly.restyle(plotId, update, [0, 1]);

        console.log(`Updated ${timeframe} chart with ${data.timestamps.length} candles`);
    }

    /**
     * Show loading indicator on chart
     */
    showLoadingIndicator(timeframe, direction) {
        const chart = this.charts[timeframe];
        if (!chart) return;

        const plotElement = chart.element;
        const loadingDiv = document.createElement('div');
        loadingDiv.id = `loading-${timeframe}`;
        loadingDiv.className = 'chart-loading-indicator';
        loadingDiv.innerHTML = `
            <div class="spinner-border spinner-border-sm text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <span class="ms-2">Loading ${direction === 'before' ? 'older' : 'newer'} data...</span>
        `;
        loadingDiv.style.cssText = `
            position: absolute;
            top: 10px;
            ${direction === 'before' ? 'left' : 'right'}: 10px;
            background: rgba(31, 41, 55, 0.9);
            color: #f8f9fa;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 1000;
            display: flex;
            align-items: center;
        `;

        plotElement.parentElement.style.position = 'relative';
        plotElement.parentElement.appendChild(loadingDiv);
    }

    /**
     * Hide loading indicator
     */
    hideLoadingIndicator(timeframe) {
        const loadingDiv = document.getElementById(`loading-${timeframe}`);
        if (loadingDiv) {
            loadingDiv.remove();
        }
    }
}