import { getStrategy, registerStrategy } from '../strategies/index.js';
import { PingPongStrategy } from '../strategies/ping-pong.js';

// Register available strategies
registerStrategy('ping_pong', PingPongStrategy);

let activeIndicators = [];

function formatDisplayDate(timestamp) {
    if (!timestamp) return '';
    const date = new Date(timestamp);
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const year = date.getFullYear();
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${day}/${month}/${year} ${hours}:${minutes}`;
}

export function initStrategyPanel() {
    window.renderStrategyPanel = renderStrategyPanel;
    renderStrategyPanel();
    
    // Listen for indicator changes to update the signal selection list
    const originalAddIndicator = window.addIndicator;
    window.addIndicator = function(...args) {
        const res = originalAddIndicator.apply(this, args);
        setTimeout(renderStrategyPanel, 100);
        return res;
    };
    
    const originalRemoveIndicator = window.removeIndicatorById;
    window.removeIndicatorById = function(...args) {
        const res = originalRemoveIndicator.apply(this, args);
        setTimeout(renderStrategyPanel, 100);
        return res;
    };
}

export function renderStrategyPanel() {
    const container = document.getElementById('strategyPanel');
    if (!container) return;

    activeIndicators = window.getActiveIndicators?.() || [];
    
    // For now, we only have Ping-Pong. Later we can add a strategy selector.
    const currentStrategyId = 'ping_pong'; 
    const strategy = getStrategy(currentStrategyId);

    if (!strategy) {
        container.innerHTML = `<div class="sidebar-section">Strategy not found.</div>`;
        return;
    }

    container.innerHTML = `
        <div class="sidebar-section">
            <div class="sidebar-section-header">
                <span>⚙️</span> ${strategy.name} Strategy
            </div>
            <div class="sidebar-section-content">
                ${strategy.renderUI(activeIndicators, formatDisplayDate)}
                <button class="sim-run-btn" id="runSimulationBtn">Run Simulation</button>
            </div>
        </div>
        
        <div id="simulationResults" class="sim-results" style="display: none;">
            <!-- Results will be injected here -->
        </div>
    `;
    
    // Attach strategy specific listeners (like disabling dropdowns when auto-detect is on)
    if (strategy.attachListeners) {
        strategy.attachListeners();
    }

    document.getElementById('runSimulationBtn').addEventListener('click', () => {
        strategy.runSimulation(activeIndicators, displayResults);
    });
}

// Keep the display logic here so all strategies can use the same rendering for results
let equitySeries = null;
let equityChart = null;
let posSeries = null;
let posSizeChart = null;
let tradeMarkers = [];

function displayResults(trades, equityData, config, endPrice, avgPriceData, posSizeData) {
    const resultsDiv = document.getElementById('simulationResults');
    resultsDiv.style.display = 'block';
    
    if (window.dashboard) {
        window.dashboard.setAvgPriceData(avgPriceData);
    }

    const entryTrades = trades.filter(t => t.recordType === 'entry').length;
    const exitTrades = trades.filter(t => t.recordType === 'exit').length;
    const profitableTrades = trades.filter(t => t.recordType === 'exit' && t.pnl > 0).length;
    const winRate = exitTrades > 0 ? (profitableTrades / exitTrades * 100).toFixed(1) : 0;
    
    const startPrice = equityData.usd[0].value / equityData.btc[0].value;
    const startBtc = config.capital / startPrice;
    
    const finalUsd = equityData.usd[equityData.usd.length - 1].value;
    const finalBtc = finalUsd / endPrice;
    
    const totalPnlUsd = finalUsd - config.capital;
    const roi = (totalPnlUsd / config.capital * 100).toFixed(2);
    
    const roiBtc = ((finalBtc - startBtc) / startBtc * 100).toFixed(2);
    
    resultsDiv.innerHTML = `
        <div class="sidebar-section">
            <div class="sidebar-section-header">Results</div>
            <div class="sidebar-section-content">
                <div class="results-summary">
                    <div class="result-stat">
                        <div class="result-stat-value ${totalPnlUsd >= 0 ? 'positive' : 'negative'}">${roi}%</div>
                        <div class="result-stat-label">ROI (USD)</div>
                    </div>
                    <div class="result-stat">
                        <div class="result-stat-value ${parseFloat(roiBtc) >= 0 ? 'positive' : 'negative'}">${roiBtc}%</div>
                        <div class="result-stat-label">ROI (BTC)</div>
                    </div>
                </div>
                
                <div class="sim-stat-row">
                    <span>Starting Balance</span>
                    <span class="sim-value">$${config.capital.toFixed(0)} / ${startBtc.toFixed(4)} BTC</span>
                </div>
                <div class="sim-stat-row">
                    <span>Final Balance</span>
                    <span class="sim-value">$${finalUsd.toFixed(2)} / ${finalBtc.toFixed(4)} BTC</span>
                </div>
                <div class="sim-stat-row">
                    <span>Trades (Entry / Exit)</span>
                    <span class="sim-value">${entryTrades} / ${exitTrades}</span>
                </div>
                
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 12px;">
                    <span style="font-size: 11px; color: var(--tv-text-secondary);">Equity Chart</span>
                    <div class="chart-toggle-group">
                        <button class="toggle-btn active" data-unit="usd">USD</button>
                        <button class="toggle-btn" data-unit="btc">BTC</button>
                    </div>
                </div>
                <div class="equity-chart-container" id="equityChart"></div>

                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 12px;">
                    <span style="font-size: 11px; color: var(--tv-text-secondary);" id="posSizeLabel">Position Size (BTC)</span>
                    <div class="chart-toggle-group">
                        <button class="toggle-btn active" data-unit="usd">USD</button>
                        <button class="toggle-btn" data-unit="btc">BTC</button>
                    </div>
                </div>
                <div class="equity-chart-container" id="posSizeChart"></div>
                
                <div class="results-actions">
                    <button class="action-btn secondary" id="toggleTradeMarkers">Show Markers</button>
                    <button class="action-btn secondary" id="clearSim">Clear</button>
                </div>
            </div>
        </div>
    `;
    
    // Create Charts
    const initCharts = () => {
        const equityContainer = document.getElementById('equityChart');
        if (equityContainer) {
            equityContainer.innerHTML = '';
            equityChart = LightweightCharts.createChart(equityContainer, {
                layout: { background: { color: '#131722' }, textColor: '#d1d4dc' },
                grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } },
                rightPriceScale: { borderColor: '#2a2e39', autoScale: true },
                timeScale: { 
                    borderColor: '#2a2e39', 
                    visible: true, 
                    timeVisible: true, 
                    secondsVisible: false,
                    tickMarkFormatter: (time, tickMarkType, locale) => {
                        return window.TimezoneConfig ? window.TimezoneConfig.formatTickMark(time) : new Date(time * 1000).toLocaleDateString();
                    },
                },
                localization: {
                    timeFormatter: (timestamp) => {
                        return window.TimezoneConfig ? window.TimezoneConfig.formatDate(timestamp * 1000) : new Date(timestamp * 1000).toLocaleString();
                    },
                },
                handleScroll: true,
                handleScale: true
            });
            
            equitySeries = equityChart.addSeries(LightweightCharts.AreaSeries, {
                lineColor: totalPnlUsd >= 0 ? '#26a69a' : '#ef5350',
                topColor: totalPnlUsd >= 0 ? 'rgba(38, 166, 154, 0.4)' : 'rgba(239, 83, 80, 0.4)',
                bottomColor: 'rgba(0, 0, 0, 0)',
                lineWidth: 2,
            });
            
            equitySeries.setData(equityData['usd']);
            equityChart.timeScale().fitContent();
        }

        const posSizeContainer = document.getElementById('posSizeChart');
        if (posSizeContainer) {
            posSizeContainer.innerHTML = '';
            posSizeChart = LightweightCharts.createChart(posSizeContainer, {
                layout: { background: { color: '#131722' }, textColor: '#d1d4dc' },
                grid: { vertLines: { visible: false }, horzLines: { color: '#2a2e39' } },
                rightPriceScale: { borderColor: '#2a2e39', autoScale: true },
                timeScale: { 
                    borderColor: '#2a2e39', 
                    visible: true, 
                    timeVisible: true, 
                    secondsVisible: false,
                    tickMarkFormatter: (time, tickMarkType, locale) => {
                        return window.TimezoneConfig ? window.TimezoneConfig.formatTickMark(time) : new Date(time * 1000).toLocaleDateString();
                    },
                },
                localization: {
                    timeFormatter: (timestamp) => {
                        return window.TimezoneConfig ? window.TimezoneConfig.formatDate(timestamp * 1000) : new Date(timestamp * 1000).toLocaleString();
                    },
                },
                handleScroll: true,
                handleScale: true
            });
            
            posSeries = posSizeChart.addSeries(LightweightCharts.AreaSeries, {
                lineColor: '#00bcd4',
                topColor: 'rgba(0, 188, 212, 0.4)',
                bottomColor: 'rgba(0, 0, 0, 0)',
                lineWidth: 2,
            });
            
            posSeries.setData(posSizeData['usd']);
            posSizeChart.timeScale().fitContent();
            
            const label = document.getElementById('posSizeLabel');
            if (label) label.textContent = 'Position Size (USD)';
        }

        if (equityChart && posSizeChart) {
            let isSyncing = false;
            
            const syncCharts = (source, target) => {
                if (isSyncing) return;
                isSyncing = true;
                const range = source.timeScale().getVisibleRange();
                target.timeScale().setVisibleRange(range);
                isSyncing = false;
            };

            equityChart.timeScale().subscribeVisibleTimeRangeChange(() => syncCharts(equityChart, posSizeChart));
            posSizeChart.timeScale().subscribeVisibleTimeRangeChange(() => syncCharts(posSizeChart, equityChart));
        }

        const syncToMain = (param) => {
            if (!param.time || !window.dashboard || !window.dashboard.chart) return;
            
            const timeScale = window.dashboard.chart.timeScale();
            const currentRange = timeScale.getVisibleRange();
            if (!currentRange) return;
            
            const width = currentRange.to - currentRange.from;
            const halfWidth = width / 2;
            
            timeScale.setVisibleRange({
                from: param.time - halfWidth,
                to: param.time + halfWidth
            });
        };

        if (equityChart) equityChart.subscribeClick(syncToMain);
        if (posSizeChart) posSizeChart.subscribeClick(syncToMain);
    };

    setTimeout(initCharts, 100);
    
    resultsDiv.querySelectorAll('.toggle-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const unit = btn.dataset.unit;
            
            resultsDiv.querySelectorAll(`.toggle-btn`).forEach(b => {
                if (b.dataset.unit === unit) b.classList.add('active');
                else b.classList.remove('active');
            });

            if (equitySeries) {
                equitySeries.setData(equityData[unit]);
                equityChart.timeScale().fitContent();
            }
            if (posSeries) {
                posSeries.setData(posSizeData[unit]);
                posSizeChart.timeScale().fitContent();
                
                const label = document.getElementById('posSizeLabel');
                if (label) label.textContent = `Position Size (${unit.toUpperCase()})`;
            }
        });
    });
    
    document.getElementById('toggleTradeMarkers').addEventListener('click', () => {
        toggleSimulationMarkers(trades);
    });
    
    document.getElementById('clearSim').addEventListener('click', () => {
        resultsDiv.style.display = 'none';
        clearSimulationMarkers();
        if (window.dashboard) {
            window.dashboard.clearAvgPriceData();
        }
    });
}

function toggleSimulationMarkers(trades) {
    if (tradeMarkers.length > 0) {
        clearSimulationMarkers();
        document.getElementById('toggleTradeMarkers').textContent = 'Show Markers';
        return;
    }
    
    const markers = [];
    trades.forEach(t => {
        const usdVal = t.currentUsd !== undefined ? `$${t.currentUsd.toFixed(0)}` : '0';
        const qtyVal = t.currentQty !== undefined ? `${t.currentQty.toFixed(4)} BTC` : '0';
        const sizeStr = ` (${usdVal} / ${qtyVal})`;
        
        if (t.recordType === 'entry') {
            markers.push({
                time: t.time,
                position: t.type === 'long' ? 'belowBar' : 'aboveBar',
                color: t.type === 'long' ? '#2962ff' : '#9c27b0',
                shape: t.type === 'long' ? 'arrowUp' : 'arrowDown',
                text: `Entry ${t.type.toUpperCase()}${sizeStr}`
            });
        }
        
        if (t.recordType === 'exit') {
            markers.push({
                time: t.time,
                position: t.type === 'long' ? 'aboveBar' : 'belowBar',
                color: t.pnl >= 0 ? '#26a69a' : '#ef5350',
                shape: t.type === 'long' ? 'arrowDown' : 'arrowUp',
                text: `Exit ${t.reason}${sizeStr}`
            });
        }
    });
    
    markers.sort((a, b) => a.time - b.time);
    
    if (window.dashboard) {
        window.dashboard.setSimulationMarkers(markers);
        tradeMarkers = markers;
        document.getElementById('toggleTradeMarkers').textContent = 'Hide Markers';
    }
}

function clearSimulationMarkers() {
    if (window.dashboard) {
        window.dashboard.clearSimulationMarkers();
        tradeMarkers = [];
    }
}

window.clearSimulationResults = function() {
    const resultsDiv = document.getElementById('simulationResults');
    if (resultsDiv) resultsDiv.style.display = 'none';
    clearSimulationMarkers();
};