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 minorChords = {
		'C':  ['C', 'D#', 'G'],
		'C#': ['C#', 'E', 'G#'],
		'D':  ['D', 'F', 'A'],
		'D#': ['D#', 'F#', 'A#'],
		'E':  ['E', 'G', 'B'],
		'F':  ['F', 'G#', 'C'],
		'F#': ['F#', 'A', 'C#'],
		'G':  ['G', 'A#', 'D'],
		'G#': ['G#', 'B', 'D#'],
		'A':  ['A', 'C', 'E'],
		'A#': ['A#', 'C#', 'F'],
		'B':  ['B', 'D', 'F#']
	};
	
	selectMinorElement.addEventListener('change', (event) => {
		const selectedChord = event.target.value;
		selectMajorElement.selectedIndex = 0;
		selectDiminishedElement.selectedIndex = 0;
		selectAugmentedElement.selectedIndex = 0;
		
		selectMajorScaleElement.selectedIndex = 0;
		selectMinorScaleElement.selectedIndex = 0;
		
		// pianoKeys should be a NodeList or array of <li class="key ...">
		pianoKeys.forEach(keyElement => keyElement.classList.remove('mark'));

		if (minorChords[selectedChord]) {
			const notes = minorChords[selectedChord];
			pianoKeys.forEach(keyElement => {
				if (notes.some(note => matchNote(keyElement, note))) {
					keyElement.classList.add('mark');  // Highlight whole key
				}
			});
			showchord.value = `${selectedChord} MINOR`;
		}

		
	});

});