document.addEventListener('DOMContentLoaded', () => {
    const assetSelect = document.getElementById('asset-select');
    const toggleButton = document.getElementById('day-night-toggle');
    const body = document.body;

    // Parse query parameters from the URL
    const params = new URLSearchParams(window.location.search);
    let selectedAsset = params.get('asset');

    // Set the selected option in the dropdown if 'asset' query parameter exists
    if (selectedAsset) {
        assetSelect.value = selectedAsset;
    } else {
		selectedAsset = assetSelect.value;
	}

    // Handle asset selection change
    assetSelect.addEventListener('change', () => {
        const newAsset = assetSelect.value;
        window.location.href = `/?asset=${newAsset}`;
    });

    // Toggle Night/Day Mode
    toggleButton.addEventListener('click', () => {
        body.classList.toggle('night-mode');
        toggleButton.textContent = body.classList.contains('night-mode') ? '🌞' : '🌙';
    });

	// Buy / Sell
	buyButton.addEventListener('click', () => {
		const assetAddress = prompt(`Enter ${selectedAsset} address:`);
		if (assetAddress) {
			fetch(`/api.php`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({ action: 'buy', address: assetAddress, asset: selectedAsset })
			})
			.then(response => response.json())
			.then(data => {
				if (data.address) {
					//alert(`Buy confirmed for ${selectedAsset} at address: ${assetAddress}`);
					document.getElementById('modalpay').style.display='block';
					document.getElementById('in-name').innerHTML = 'KNOLIX';
					document.getElementById('in-address').innerHTML = data.address;
					document.getElementById('in-qr').src = 'https://quickchart.io/qr?text='+data.address;
					
					document.getElementById('out-name').innerHTML = selectedAsset;
					document.getElementById('out-address').innerHTML = assetAddress;
				}
				if (data.err) {
					alert(data.err);
				}
			})
			.catch(error => {
				console.error('Error:', error);
				alert(`An error occurred while validating ${selectedAsset} address.`);
			});
		} else {
			alert(' ${selectedAsset} address is required to proceed.');
		}
	});

	sellButton.addEventListener('click', () => {
		const knolixAddress = prompt(`Enter KNOLIX address:`);
		if (knolixAddress) {
			fetch(`/api.php`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({ action: 'sell', address: knolixAddress, asset: selectedAsset })
			})
			.then(response => response.json())
			.then(data => {
				if (data.address) {
					//alert(`Sell confirmed for ${selectedAsset} at address: ${knolixAddress}`);
					document.getElementById('modalpay').style.display='block';
					document.getElementById('in-name').innerHTML = selectedAsset;
					document.getElementById('in-address').innerHTML = data.address;
					document.getElementById('in-qr').src = 'https://quickchart.io/qr?text='+data.address;
					
					document.getElementById('out-name').innerHTML = 'KNOLIX';
					document.getElementById('out-address').innerHTML = knolixAddress;
				}
				if (data.err) {
					alert(data.err);
				}
			})
			.catch(error => {
				console.error('Error:', error);
				alert(`An error occurred while validating KNOLIX address.`);
			});
		} else {
			alert(' KNOLIX address is required to proceed.');
		}
	});


    const tradesTable = document.getElementById('trades-table').querySelector('tbody');

    // Function to render trade rows
    function renderTrades(trades) {
        tradesTable.innerHTML = ''; // Clear the table
        trades.forEach(trade => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${trade.price.toFixed(8)}</td>
                <td>${trade.impact}</td>
                <td>${trade.amount.toFixed(4)}</td>
                <td>${trade.time}</td>
                <td>${trade.type}</td>
            `;
            tradesTable.appendChild(row);
        });
    }


	// Function to fetch trade history
	async function fetchTradeHistory(asset) {
		try {
			const response = await fetch(`/api.php?asset=${asset}&cmd=getTradeHistory`);
			const trades = await response.json();
			renderTrades(trades); // Reuse your renderTrades function
		} catch (error) {
			console.error('Error fetching trade history:', error);
		}
	}

	// Fetch trade history after DOMContentLoaded
	fetchTradeHistory(selectedAsset);

	// Function to fetch pooled data
	async function fetchPooledData(asset) {
		try {
			const response = await fetch(`/api.php?asset=${asset}&cmd=getReserves`);
			const data = await response.json();

			// Parse the values and validate them
			const balanceCoin = parseFloat(data.balance_coin);
			const balanceKnolix = parseFloat(data.balance_knolix);

			if (isNaN(balanceCoin) || isNaN(balanceKnolix)) {
				throw new Error('Invalid data received: balance_coin or balance_knolix is not a number.');
			}

			// Update DOM elements with the data
			document.getElementById('pooled-asset').textContent = balanceCoin.toFixed(8);
			document.getElementById('pooled-knolix').textContent = balanceKnolix.toFixed(8);
			document.getElementById('effective-price').textContent = `${(balanceKnolix / balanceCoin).toFixed(10)} KNOLIX`;
		} catch (error) {
			console.error('Error fetching pooled data:', error);
		}
	}

	// Call the function after DOMContentLoaded with the selected asset
	fetchPooledData(selectedAsset);




	// Function to fetch price_graph
	async function fetch_price_graph(asset) {
		try {
			const response = await fetch(`/api.php?asset=${asset}&cmd=price_graph`);
			const price_data = await response.json();

			// Create chart with responsive layout
			const chart = LightweightCharts.createChart(document.getElementById('chart'), {
				layout: {
					background: { color: '#000' },
					textColor: '#fff'
				},
				grid: {
					vertLines: { color: '#333' },
					horzLines: { color: '#333' }
				},
				timeScale: {
					timeVisible: true,
					secondsVisible: false
				}
			});

			// Add candlestick series with price scale formatting
			const candleSeries = chart.addCandlestickSeries({
				upColor: '#26a69a',
				downColor: '#ef5350',
				borderVisible: false,
				priceScaleId: 'right', // Explicitly attach to right scale
				priceFormat: {
					type: 'price',
					precision: 8,      // Show 8 decimals
					minMove: 0.00000001 // Smallest price movement (1e-8)
				}
			});

			// Format data for chart (using date strings directly)
			const formattedData = price_data.map(item => ({
				time: item.time,
				open: item.open,
				high: item.high,
				low: item.low,
				close: item.close
			}));

			// Set data and auto-scale
			candleSeries.setData(formattedData);
			chart.timeScale().fitContent();

			// Handle window resizing
			window.addEventListener('resize', () => {
				chart.applyOptions({ width: document.getElementById('chart').clientWidth });
			});


		} catch (error) {
			console.error('Error fetching price_graph:', error);
		}
	}

	// Fetch trade history after DOMContentLoaded
	fetch_price_graph(selectedAsset);
	

});