<!DOCTYPE html>
<html>
<head>
    <title>Real-Time ETH/USDT Chart</title>
    <script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script>
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
    
    <!-- Indicator & Aggregation Scripts -->
    <script src="{{ url_for('static', filename='candle-aggregator.js') }}"></script>
    <script src="{{ url_for('static', filename='sma.js') }}"></script>
    <script src="{{ url_for('static', filename='ema.js') }}"></script>
    <script src="{{ url_for('static', filename='bb.js') }}"></script>
    <script src="{{ url_for('static', filename='hurst.js') }}"></script>
    <script src="{{ url_for('static', filename='indicators.js') }}"></script>
    <script src="{{ url_for('static', filename='indicator-manager.js') }}"></script>

    <style>
        :root {
            --background-dark: #161A25; --container-dark: #1E222D; --border-color: #2A2E39;
            --text-primary: #D1D4DC; --text-secondary: #8A91A0; --button-bg: #363A45;
            --button-hover-bg: #434651; --accent-orange: #F0B90B; --green: #26a69a; --red: #ef5350;
        }
        body {
            background-color: var(--background-dark); color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            margin: 0; padding: 20px 0; display: flex; flex-direction: column; align-items: center;
        }
        .header {
            width: 90%; max-width: 1400px; text-align: left; padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color); margin-bottom: 20px;
        }
        .header h1 { margin: 0; font-size: 24px; }
        #chart { width: 90%; max-width: 1400px; height: 500px; }
        .control-panel {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px; width: 90%; max-width: 1400px; padding: 20px 0;
        }
        .control-cell {
            background-color: var(--container-dark); border: 1px solid var(--border-color);
            border-radius: 8px; padding: 15px; display: flex; flex-direction: column;
            justify-content: flex-start; align-items: center; min-height: 80px;
        }
        .indicator-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
        .action-button, .input-field, .control-cell select {
            background-color: var(--button-bg); border: 1px solid var(--border-color);
            color: var(--text-primary); padding: 8px 12px; text-align: center;
            text-decoration: none; display: inline-block; font-size: 14px;
            border-radius: 5px; cursor: pointer; transition: background-color 0.3s, color 0.3s;
        }
        .action-button:hover, .control-cell select:hover { background-color: var(--button-hover-bg); }
        #analyzeButton:hover { color: var(--accent-orange); }
        .input-field { width: 60px; }
        .analysis-section {
            width: 90%; max-width: 1400px; background-color: var(--container-dark);
            border: 1px solid var(--border-color); border-radius: 8px; padding: 20px;
            margin-top: 10px; text-align: center;
        }
        #analysisResult {
            margin-top: 15px; font-size: 0.95rem; line-height: 1.6; text-align: left;
            white-space: pre-wrap; color: var(--text-primary); background-color: var(--background-dark);
            padding: 15px; border-radius: 5px; min-height: 50px;
        }
        #candle-timer { font-size: 2rem; font-weight: 500; color: var(--accent-orange); }
        #timeframe-select { margin-top: 10px; }
        .progress-bar-container {
            width: 80%; height: 4px; background-color: var(--button-bg);
            border-radius: 2px; margin-top: 10px; overflow: hidden;
        }
        .progress-bar {
            width: 0%; height: 100%; background-color: var(--green);
            transition: width 0.4s ease-out;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 id="chart-title">{{ symbol }} Chart</h1>
    </div>

    <div id="chart"></div>

    <div class="control-panel">
        <div class="control-cell">
            <h3>Candle Closes In</h3>
            <div id="candle-timer">--:--</div>
            <select id="timeframe-select">
                <option value="1">1m</option>
                <option value="2">2m</option>
                <option value="3">3m</option>
                <option value="4">4m</option>
                <option value="5">5m</option>
                <option value="6">6m</option>
                <option value="7">7m</option>
                <option value="8">8m</option>
                <option value="9">9m</option>
                <option value="10">10m</option>
            </select>
             <div id="progress-container" class="progress-bar-container">
                <div class="progress-bar"></div>
            </div>
        </div>
        <div class="control-cell" id="indicator-cell-1"></div>
        <div class="control-cell" id="indicator-cell-2"></div>
        <div class="control-cell" id="indicator-cell-3"></div>
        <div class="control-cell" id="indicator-cell-4"></div>
    </div>

    <div class="analysis-section">
        <h3>Analysis ✨</h3>
        <button id="analyzeButton" class="action-button">Analyze Recent Price Action</button>
        <div id="analysisResult">Click the button for AI analysis.</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const chartElement = document.getElementById('chart');
            const chart = LightweightCharts.createChart(chartElement, {
                width: chartElement.clientWidth, height: 500,
                layout: { background: { type: 'solid', color: '#1E222D' }, textColor: '#D1D4DC' },
                grid: { vertLines: { color: '#2A2E39' }, horzLines: { color: '#2A2E39' } },
                timeScale: { timeVisible: true, secondsVisible: true }
            });
            const candlestickSeries = chart.addCandlestickSeries({
                upColor: '#26a69a', downColor: '#ef5350', borderDownColor: '#ef5350',
                borderUpColor: '#26a69a', wickDownColor: '#ef5350', wickUpColor: '#26a69a',
            });

            let baseCandleData1m = [];
            let displayedCandleData = [];
            let manager;

            const timeframeSelect = document.getElementById('timeframe-select');
            const candleTimerDiv = document.getElementById('candle-timer');
            const chartTitle = document.getElementById('chart-title');
            const progressContainer = document.getElementById('progress-container');
            const progressBar = document.querySelector('.progress-bar');

            manager = createIndicatorManager(chart, baseCandleData1m, displayedCandleData);
            manager.populateDropdowns();

            const socket = io();
            socket.on('connect', () => console.log('Socket.IO connected.'));

            socket.on('history_progress', (data) => {
                if (data && data.progress) progressBar.style.width = `${data.progress}%`;
            });

            socket.on('history_finished', (data) => {
                if (!data || !data.klines_1m) return;
                
                progressBar.style.width = '100%';
                
                baseCandleData1m = data.klines_1m.map(k => ({
                    time: k[0] / 1000, open: parseFloat(k[1]), high: parseFloat(k[2]),
                    low: parseFloat(k[3]), close: parseFloat(k[4])
                }));

                updateChartForTimeframe(true); // Initial load, fit content
                setTimeout(() => { progressContainer.style.display = 'none'; }, 500);
            });

            socket.on('candle_update', (candle) => {
                candlestickSeries.update(candle);
            });

            socket.on('candle_closed', (closedCandle) => {
                const lastBaseCandle = baseCandleData1m.length > 0 ? baseCandleData1m[baseCandleData1m.length - 1] : null;
                if (lastBaseCandle && lastBaseCandle.time === closedCandle.time) {
                    baseCandleData1m[baseCandleData1m.length - 1] = closedCandle;
                } else {
                    baseCandleData1m.push(closedCandle);
                }
                updateChartForTimeframe(false); // Subsequent update, preserve zoom
            });
            
            function updateChartForTimeframe(isInitialLoad = false) {
                const selectedIntervalMinutes = parseInt(timeframeSelect.value, 10);
                if (baseCandleData1m.length === 0) return;

                const visibleRange = isInitialLoad ? null : chart.timeScale().getVisibleLogicalRange();

                const newCandleData = aggregateCandles(baseCandleData1m, selectedIntervalMinutes);
                
                if (newCandleData.length > 0) {
                    displayedCandleData = newCandleData;
                    candlestickSeries.setData(displayedCandleData);
                    chartTitle.textContent = `{{ symbol }} Chart (${selectedIntervalMinutes}m)`;
                    manager.recalculateAllAfterHistory(baseCandleData1m, displayedCandleData);
                    
                    if (visibleRange) {
                        chart.timeScale().setVisibleLogicalRange(visibleRange);
                    } else {
                        chart.timeScale().fitContent();
                    }
                }
            }

            timeframeSelect.addEventListener('change', () => updateChartForTimeframe(true));
            
            setInterval(() => {
                const selectedIntervalSeconds = parseInt(timeframeSelect.value, 10) * 60;
                const now = new Date().getTime() / 1000;
                const secondsRemaining = Math.floor(selectedIntervalSeconds - (now % selectedIntervalSeconds));
                const minutes = Math.floor(secondsRemaining / 60);
                const seconds = secondsRemaining % 60;
                candleTimerDiv.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
            }, 1000);

            window.addEventListener('resize', () => chart.resize(chartElement.clientWidth, 500));
        });
    </script>
</body>
</html>
