package web

templ SearchForm() {
	@Base() {
		<button id="dark-mode-toggle">🌙</button>
		<input id="search_term" name="search_term" type="text" hx-post="/find" hx-trigger="load, keyup changed delay:0.25s" hx-target="#soundtracks-container"/>
		<button type="button" id="clear" name="clear">Clear</button>
		<div id="soundtracks-container"></div>
		<script>
			document.addEventListener('readystatechange', () => {    
				if (document.readyState == 'complete') {
					document.getElementById("search_term").focus();
					
					// Initialize theme from localStorage (default to dark)
					const savedTheme = localStorage.getItem('theme') || 'dark';
					document.documentElement.setAttribute('data-theme', savedTheme);
					document.getElementById('dark-mode-toggle').textContent = savedTheme === 'dark' ? '☀️' : '🌙';
				}
			});
			
			// Dark mode toggle functionality
			document.getElementById("dark-mode-toggle").addEventListener("click", function() {
				const html = document.documentElement;
				const currentTheme = html.getAttribute('data-theme');
				const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
				
				html.setAttribute('data-theme', newTheme);
				localStorage.setItem('theme', newTheme);
				
				// Update toggle button text
				this.textContent = newTheme === 'dark' ? '☀️' : '🌙';
			});
			
			document.getElementById("clear").addEventListener("click", function (event) {
				document.getElementById("search_term").value = "";
				htmx.ajax('POST', '/find', '#soundtracks-container');
				document.getElementById("search_term").focus();
			});
		</script>
	}
}

templ FoundSoundtracks(soundtracks []SearchResult) {
	for _, soundtrack := range soundtracks {
		<div class="bg-green-100 p-4 shadow-md rounded-lg mt-6">
			<p class="soundtrack-text">{ soundtrack.Name }</p>
			if soundtrack.MatchedName != "" {
				<p class="matched-name">Also known as { soundtrack.MatchedName }</p>
			}
		</div>
	}
}