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') ? '🌞' : '🌙';
    });


	// Select all buttons with class 'vote-btn'
    const voteButtons = document.querySelectorAll('.vote-btn');
    // Add click event listener to each button
    voteButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Get the value from the data-value attribute
            const value = this.getAttribute('data-value');
            // Handle the click event with the specific value
            handleVote(value);
        });
    });

	function handleVote(Asset) {
		fetch(`/api.php`, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({ action: 'vote', asset: Asset })
		})
		.then(response => response.json())
		.then(data => {
			if (data.address) {
				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 = 'VOTE';
				document.getElementById('out-address').innerHTML = 'VOTE for '+Asset;
			}
			if (data.err) {
				alert(data.err);
			}
		})
		.catch(error => {
			console.error('Error:', error);
			alert(error);
		});
	 
	}

	// Select all buttons with class 'donate-btn'
    const donateButtons = document.querySelectorAll('.donate-btn');
    // Add click event listener to each button
    donateButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Get the value from the data-value attribute
            const value = this.getAttribute('data-value');
            // Handle the click event with the specific value
            handleDonate(value);
        });
    });

	function handleDonate(Asset) {
		fetch(`/api.php`, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({ action: 'donate', asset: Asset })
		})
		.then(response => response.json())
		.then(data => {
			if (data.address) {
				document.getElementById('modalpay').style.display='block';
				document.getElementById('in-name').innerHTML = Asset;
				document.getElementById('in-address').innerHTML = data.address;
				document.getElementById('in-qr').src = 'https://quickchart.io/qr?text='+data.address;
				
				document.getElementById('out-name').innerHTML = 'DONATE';
				document.getElementById('out-address').innerHTML = 'DONATE '+Asset;
			}
			if (data.err) {
				alert(data.err);
			}
		})
		.catch(error => {
			console.error('Error:', error);
			alert(error);
		});
	 
	}


});