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.');
		}
	});


    // Render the graph
    const ctx = document.getElementById('asset-graph').getContext('2d');

    // Dummy data for demonstration
    const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; // Example labels
    const prices = [1.0, 1.1, 1.2, 1.15, 1.25, 1.3, 1.35]; // Example prices

    // Initialize Chart.js
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: `Price of ${selectedAsset}`, // Display selected asset or default
                data: prices,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderWidth: 2,
                tension: 0.4, // Makes the line smooth
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                },
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Last 30 Days',
                    },
                },
                y: {
                    title: {
                        display: true,
                        text: 'Price in Knolix',
                    },
                },
            },
        }
    });


    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);
	

});