<script>
    import {onMount} from "svelte";
    import { browser } from '$app/environment';
    import "$lib/css/nordtheme.css";

    // Filter props for different contexts
    let { category = null, tag = null, icon = null, season = null, favoritesOnly = false, lang = 'de' } = $props();

    const isEnglish = $derived(lang === 'en');
    const searchResultsUrl = $derived(isEnglish ? '/recipes/search' : '/rezepte/search');
    const labels = $derived({
        placeholder: isEnglish ? 'Search...' : 'Suche...',
        searchTitle: isEnglish ? 'Search' : 'Suchen',
        clearTitle: isEnglish ? 'Clear search' : 'Sucheintrag löschen'
    });

    let searchQuery = $state('');
    
    // Build search URL with current filters
    function buildSearchUrl(query) {
        if (browser) {
            const url = new URL(searchResultsUrl, window.location.origin);
            if (query) url.searchParams.set('q', query);
            if (category) url.searchParams.set('category', category);
            if (tag) url.searchParams.set('tag', tag);
            if (icon) url.searchParams.set('icon', icon);
            if (season) url.searchParams.set('season', season);
            if (favoritesOnly) url.searchParams.set('favorites', 'true');
            return url.toString();
        } else {
            // Server-side fallback - return just the base path
            return searchResultsUrl;
        }
    }
    
    function handleSubmit(event) {
        if (browser) {
            // For JS-enabled browsers, prevent default and navigate programmatically
            // This allows for future enhancements like instant search
            const url = buildSearchUrl(searchQuery);
            window.location.href = url;
        }
        // If no JS, form will submit normally
    }
    
    function clearSearch() {
        searchQuery = '';
        if (browser) {
            // Reset any client-side filtering if present
            const recipes = document.querySelectorAll(".search_me");
            recipes.forEach(recipe => {
                recipe.style.display = 'flex';
                recipe.classList.remove("matched-recipe");
            });
            document.querySelectorAll(".media_scroller_wrapper").forEach( scroller => {
                scroller.style.display= 'block'
            });
        }
    }

    onMount(() => {
        // Swap buttons for JS-enabled experience
        const submitButton = document.getElementById('submit-search');
        const clearButton = document.getElementById('clear-search');
        
        if (submitButton && clearButton) {
            submitButton.style.display = 'none';
            clearButton.style.display = 'flex';
        }
        
        // Get initial search value from URL if present
        const urlParams = new URLSearchParams(window.location.search);
        const urlQuery = urlParams.get('q');
        if (urlQuery) {
            searchQuery = urlQuery;
        }
        
        // Enhanced client-side filtering (existing functionality)
        const recipes = document.querySelectorAll(".search_me");
        const search = document.getElementById("search");
        
        if (recipes.length > 0 && search) {
            function do_search(click_only_result=false){
                const searchText = search.value.toLowerCase().trim().normalize('NFD').replace(/\p{Diacritic}/gu, "");
                const searchTerms = searchText.split(" ");
                const hasFilter = searchText.length > 0;

                let scrollers_with_results = [];
                let scrollers = [];
                
                recipes.forEach(recipe => {
                    const searchString = `${recipe.textContent} ${recipe.dataset.tags}`.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, "").replace(/&shy;|­/g, '');
                    const isMatch = searchTerms.every(term => searchString.includes(term));

                    recipe.style.display = (isMatch ? 'flex' : 'none');
                    recipe.classList.toggle("matched-recipe", hasFilter && isMatch);
                    if(!scrollers.includes(recipe.parentNode)){
                        scrollers.push(recipe.parentNode)
                    }
                    if(!scrollers_with_results.includes(recipe.parentNode) && isMatch){
                        scrollers_with_results.push(recipe.parentNode)
                    }
                })
                scrollers_with_results.forEach( scroller => {
                    scroller.parentNode.style.display= 'block'
                })
                scrollers.filter(item => !scrollers_with_results.includes(item)).forEach( scroller => {
                    scroller.parentNode.style.display= 'none'
                })
                
                let items = document.querySelectorAll(".matched-recipe");
                items = [...new Set(items)]
                if(click_only_result && scrollers_with_results.length == 1 && items.length == 1){
                    items[0].click();
                }
            }

            search.addEventListener("input", () => {
                searchQuery = search.value;
                do_search();
            })
            
            // Initial search if URL had query
            if (urlQuery) {
                do_search(true);
            }
        }
    });

</script>
<style>
input#search {
  all: unset;
  font-family: sans-serif;
  background: var(--nord0);
  color: #fff;
  padding: 0.7rem 2rem;
  border-radius: 1000px;
  width: 100%;
}
input::placeholder{
  color: var(--nord6);
}

.search {
  width: 500px;
  max-width: 85vw;
  position: relative;
  margin: 2.5rem auto 1.2rem;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  transition: 100ms;
  filter: drop-shadow(0.4em  0.5em 0.4em rgba(0,0,0,0.4))
}

.search:hover,
.search:focus-within
{
	scale: 1.02 1.02;
  	filter: drop-shadow(0.4em  0.5em 1em rgba(0,0,0,0.6))
}
.search-button {
  all: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0.5em;
  width: 1.5em;
  height: 1.5em;
  color: var(--nord6);
  cursor: pointer;
  transition: color 180ms ease-in-out;
}
.search-button:hover {
  color: white;
  scale: 1.1 1.1;
}
.search-button:active{
transition: 50ms;
scale: 0.8 0.8;
}
.search-button svg {
  width: 100%;
  height: 100%;
}
</style>
<form class="search" method="get" action={buildSearchUrl('')} on:submit|preventDefault={handleSubmit}>
  {#if category}<input type="hidden" name="category" value={category} />{/if}
  {#if tag}<input type="hidden" name="tag" value={tag} />{/if}
  {#if icon}<input type="hidden" name="icon" value={icon} />{/if}
  {#if season}<input type="hidden" name="season" value={season} />{/if}
  {#if favoritesOnly}<input type="hidden" name="favorites" value="true" />{/if}
  
  <input type="text" id="search" name="q" placeholder={labels.placeholder} bind:value={searchQuery}>

  <!-- Submit button (visible by default, hidden when JS loads) -->
  <button type="submit" id="submit-search" class="search-button" style="display: flex;">
	  <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" style="width: 100%; height: 100%;"><title>{labels.searchTitle}</title><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="m338.29 338.29 105.25 105.25"></path></svg>
  </button>

  <!-- Clear button (hidden by default, shown when JS loads) -->
  <button type="button" id="clear-search" class="search-button js-only" style="display: none;" on:click={clearSearch}>
	  <svg  xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>{labels.clearTitle}</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
  </button>
</form>
