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

		// Natural Minor Scale Intervals: W-H-W-W-H-W-W (2-1-2-2-1-2-2)
		const minorScaleIntervals = [2, 1, 2, 2, 1, 2, 2];
		const allNotes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
		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]
			);
		}

		function getMinorScale(rootNote) {
			let scale = [];
			let startIndex = allNotes.indexOf(rootNote);
			if (startIndex === -1) return scale;

			scale.push(allNotes[startIndex]);
			let currentIndex = startIndex;

			for (let i = 0; i < minorScaleIntervals.length; i++) {
				currentIndex = (currentIndex + minorScaleIntervals[i]) % allNotes.length;
				scale.push(allNotes[currentIndex]);
			}

			return scale;
		}
		
		const commonMinorProgressions = {
		  'A':  ['Am', 'F', 'C', 'G'],
		  'A#': ['A#m', 'G#', 'D#', 'A#'],
		  'B':  ['Bm', 'G', 'D', 'A'],
		  'C':  ['Cm', 'Ab', 'Eb', 'Bb'],
		  'C#': ['C#m', 'A', 'E', 'B'],
		  'D':  ['Dm', 'Bb', 'F', 'C'],
		  'D#': ['D#m', 'B', 'F#', 'C#'],		  
		  'E':  ['Em', 'C', 'G', 'D'],
		  'F':  ['Fm', 'Db', 'Ab', 'Eb'],
		  'F#': ['F#m', 'D', 'A', 'E'],
		  'G':  ['Gm', 'Eb', 'Bb', 'F'],
		  'G#': ['G#m', 'E', 'B', 'F#'],		 
		};

		
		selectMinorScaleElement.addEventListener('change', (event) => {
			const selectedScale = event.target.value;
			const scaleNotes = getMinorScale(selectedScale);
			
			// Reset other dropdowns
			selectMajorElement.selectedIndex = 0;
			selectMinorElement.selectedIndex = 0;
			selectDiminishedElement.selectedIndex = 0;
			selectAugmentedElement.selectedIndex = 0;			
			selectMajorScaleElement.selectedIndex = 0;
			
			// 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 (scaleNotes.some(note => matchNote(keyElement, note))) {
				keyElement.classList.add('mark');
			}
			
			// Update chord name display
			if (scaleNotes.length) {
				showchord.value = `${selectedScale} MAJOR SCALE`;
			} else {
				showchord.value = '';
			}
		
			});
			
			// ✅ Focus the first piano key (always)
			const firstKey = document.querySelector('.piano-keys .key');
			if (firstKey) {
				firstKey.focus();
				firstKey.scrollIntoView({ behavior: 'smooth', block: 'center' });
			}
			
			// Display common chord progression
			const progressionEl = document.getElementById('common-progression');
			if (commonMinorProgressions[selectedScale]) {
				const progression = commonMinorProgressions[selectedScale].join(' → ');
				progressionEl.textContent = `Common Progression: ${progression}`;
			} else {
				progressionEl.textContent = '';
			}
			
		});
});

