document.addEventListener('DOMContentLoaded', () => {
	const selectMajorScaleElement = document.getElementById('majorscale');
	const selectMinorScaleElement = document.getElementById('minorscale');
	
    const selectMajorElement = document.getElementById('majorchord');
	const selectMinorElement = document.getElementById('minorchord');
	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 getDiminishedChord(rootNote) {
		const rootIndex = chromaticNotes.indexOf(rootNote);
		if (rootIndex === -1) return [];

		const minorThird = chromaticNotes[(rootIndex + 3) % 12];
		const diminishedFifth = chromaticNotes[(rootIndex + 6) % 12];

		return [rootNote, minorThird, diminishedFifth];
	}

	
   selectDiminishedElement.addEventListener('change', (event) => {
	   // console.log('Diminished chord selector changed');
		const selectedChordValue = event.target.value.toUpperCase(); // e.g. "C", "D#", etc.
		selectMajorElement.selectedIndex = 0;
		selectMinorElement.selectedIndex = 0;
		selectAugmentedElement.selectedIndex = 0;

		selectMajorScaleElement.selectedIndex = 0;
		selectMinorScaleElement.selectedIndex = 0;		

		// Get diminished chord notes
		const dimchordNotes = getDiminishedChord(selectedChordValue);
		
		// pianoKeys should be a NodeList or array of <li class="key ...">
		pianoKeys.forEach(keyElement => keyElement.classList.remove('mark'));
		
		// Highlight chord notes on piano
		pianoKeys.forEach(keyElement => {
			if (dimchordNotes.some(note => matchNote(keyElement, note))) {
				keyElement.classList.add('mark');
			}
			
			// Update chord name display
			if (dimchordNotes.length) {
				showchord.value = `${selectedChordValue} DIM`;
			} else {
				showchord.value = '';
			}
		
		});
	});

});