import { state } from './state.js';
import { initChart, getSeries, generateSmartMarkers } from './chart.js'; // Import the new function
import { startSocket, stopSocket } from './socket.js';
import { toggleReplay, playReplay, step } from './replay.js';
import { detectTimezone, initFootprint, setStatus } from './ui.js';

const loader = document.getElementById('loader');

async function loadPair() {
    loader.style.display = 'flex';
    stopSocket();
    
    const symbol = document.getElementById('inp-symbol').value.toUpperCase();
    const exchange = document.getElementById('sel-exchange').value;

    state.symbol = symbol;
    state.exchange = exchange;
    document.getElementById('feed-label').innerText = `${exchange} FEED`;
    document.getElementById('dom-box').innerHTML = ''; 

    try {
        let candles = [];
        
        if(exchange === 'BINANCE') {
            const res = await fetch(`https://api.binance.com/api/v3/klines?symbol=${symbol}USDT&interval=1m&limit=500`);
            if(!res.ok) throw new Error("Invalid Symbol");
            const raw = await res.json();
            candles = raw.map(k => ({
                time: k[0] / 1000,
                open: parseFloat(k[1]),
                high: parseFloat(k[2]),
                low: parseFloat(k[3]),
                close: parseFloat(k[4])
            }));
        } 
        else if(exchange === 'COINBASE') {
            try {
                const res = await fetch(`https://api.exchange.coinbase.com/products/${symbol}-USD/candles?granularity=60`);
                if(!res.ok) throw new Error("Data restricted");
                const raw = await res.json();
                candles = raw.map(k => ({
                    time: k[0], open: k[3], high: k[2], low: k[1], close: k[4]
                })).reverse(); 
            } catch(e) { candles = []; }
        }

        state.candles = candles;
        getSeries().setData(candles);
        
        // --- CALL THE NEW FEATURE HERE ---
        generateSmartMarkers(candles);
        // --------------------------------
        
        loader.style.display = 'none';
        startSocket();

    } catch(err) {
        console.error(err);
        loader.innerText = 'ERROR LOADING';
        setStatus('ERROR', 'warn');
    }
}

function initApp() {
    initChart();
    detectTimezone();
    initFootprint();
    
    document.getElementById('btn-load').onclick = loadPair;
    document.getElementById('inp-symbol').addEventListener('keypress', (e) => {
        if(e.key === 'Enter') loadPair();
    });
    
    document.getElementById('btn-replay').onclick = toggleReplay;
    document.getElementById('btn-replay-exit').onclick = toggleReplay;
    document.getElementById('btn-replay-play').onclick = playReplay;
    document.getElementById('btn-replay-step').onclick = step;

    loadPair();
}

initApp();