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');
	
// Function to populate the asset select dropdown (no await)
    function populateAssetSelect() {
        fetch('/api?cmd=getAssets')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                // Clear existing options
                assetSelect.innerHTML = '';

                // Populate the dropdown with fetched data
                data.forEach(asset => {
                    const option = document.createElement('option');
                    option.value = asset; // Assuming data is an array of strings
                    option.textContent = 'KNOLIX / '+asset;
                    assetSelect.appendChild(option);
                });

                // Set the initial value
                if (selectedAsset) {
                    // If URL has an asset parameter, use it
                    assetSelect.value = selectedAsset;
                }
            })
            .catch(error => {
                console.error('Error fetching assets:', error);
                assetSelect.innerHTML = '<option value="">Failed to load assets</option>';
            });
    }

    // Populate the dropdown on page load
    populateAssetSelect();
	if( selectedAsset===null ) {
		selectedAsset = 'TRX';
	}

    // 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-warning').innerHTML = 'Send only KNOLIX to this address, any other asset will be lost';
					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-warning').innerHTML = 'Send only '+selectedAsset+' to this address, any other asset will be lost';
					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.amount_coin.toFixed(8)}</td>
                <td>${trade.amount_knolix.toFixed(8)}</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);
			const usd_price = parseFloat(data.usd_price);

			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(8)} KNOLIX`;
			document.getElementById('effective-usd-price').textContent = ((1/(balanceKnolix / balanceCoin))*usd_price).toFixed(2)+' USD';
		} 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);

	function amm_a( x, y, a) {
		k = x * y;
		return y - k / ( x + a );
	}

    document.getElementById('buy-amount-sent').addEventListener('change', () => {
		let a = parseFloat(document.getElementById('buy-amount-sent').value);
		let x =	parseFloat(document.getElementById('pooled-knolix').textContent);
		let y = parseFloat(document.getElementById('pooled-asset').textContent);
		let received = amm_a( x, y, a*0.99);
		document.getElementById('buy-amount-received').value = received.toFixed(8);
    });	
    document.getElementById('sell-amount-sent').addEventListener('change', () => {
		let a = parseFloat(document.getElementById('sell-amount-sent').value);
		let x = parseFloat(document.getElementById('pooled-asset').textContent);
		let y =	parseFloat(document.getElementById('pooled-knolix').textContent);
		let received = amm_a( x, y, a*0.99);
		document.getElementById('sell-amount-received').value = received.toFixed(8);
    });	

});