document.addEventListener('DOMContentLoaded', () => {
	const selectMajorScaleElement = document.getElementById('majorscale');
	const selectMinorScaleElement = document.getElementById('minorscale');
	
    const selectMinorElement = document.getElementById('minorchord');
	const selectMajorElement = document.getElementById('majorchord');
	const selectDiminishedElement = document.getElementById('diminishedchord');
	const selectAugmentedElement = document.getElementById('augmentedchord');
	
	var showchord = document.getElementById('showchord');
	
    const pianoKeys = document.querySelectorAll('.piano-keys .key');
	
	// Mapping letters → solfège
	const solfegeMap = {
		'C': 'Do', 'C#': 'Do#',
		'D': 'Re', 'D#': 'Re#',
		'E': 'Mi',
		'F': 'Fa', 'F#': 'Fa#',
		'G': 'So', 'G#': 'So#',
		'A': 'La', 'A#': 'La#',
		'B': 'Ti'
	};
	const indianMap = {
		'C': 'सा','C#': 'रे♭',
		'D': 'रे', 'D#': 'गा♭',
		'E': 'गा','F': 'मा',
		'F#': 'मा#','G': 'प',
		'G#': 'धा♭','A': 'धा',
		'A#': 'नि♭', 'B': 'नि'
	};

	function matchNote(keyElement, noteLetter) {
			// keyElement is the <li> representing the key
			const keyNote = keyElement.dataset.note;

			// Check if the key's note matches the noteLetter
			if (keyNote === noteLetter) {
				return true;
			}

			// Optionally check the spans inside the key for solfege or Indian mappings
			const noteLabelSpan = keyElement.querySelector('.note-label');
			if (!noteLabelSpan) return false;

			const label = noteLabelSpan.textContent;

			return (
				label === solfegeMap[noteLetter] ||
				label === indianMap[noteLetter]
			);
		}
	
	const chromaticNotes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
	
	function getAugmentedChord(rootNote) {
		const rootIndex = chromaticNotes.indexOf(rootNote);
		if (rootIndex === -1) return [];

		const majorThird = chromaticNotes[(rootIndex + 4) % 12];
		const augmentedFifth = chromaticNotes[(rootIndex + 8) % 12];

		return [rootNote, majorThird, augmentedFifth];
	}

	
	selectAugmentedElement.addEventListener('change', (event) => {
		//console.log('Agu chord selector changed');
		const selectedChordValue = event.target.value.toUpperCase(); // e.g. "C", "D#", etc.
		selectMajorElement.selectedIndex = 0;
		selectMinorElement.selectedIndex = 0;
		selectDiminishedElement.selectedIndex = 0;
		
		selectMajorScaleElement.selectedIndex = 0;
		selectMinorScaleElement.selectedIndex = 0;		
		
		
		const aguchordNotes = getAugmentedChord(selectedChordValue);
		
		// pianoKeys should be a NodeList or array of <li class="key ...">
		pianoKeys.forEach(keyElement => keyElement.classList.remove('mark'));
				
		// Highlight matching piano keys
			pianoKeys.forEach(keyElement => {
				if (aguchordNotes.some(note => matchNote(keyElement, note))) {
					keyElement.classList.add('mark');
				}
			});

		// Update display
			// Update chord name display
			if (aguchordNotes.length) {
				showchord.value = `${selectedChordValue} AGU`;
			} else {
				showchord.value = '';
			}		

	});

});