---
// Import necessary utilities
import { t, getLanguageFromPath, type SupportedLanguage } from "../lib/i18n";

// Define the props interface
export interface Props {
  placeholder?: string;
  onSearch?: (query: string) => void;
}

// Destructure props
const { placeholder, onSearch } = Astro.props;

// Get current language
const currentLang = getLanguageFromPath(Astro.url.pathname);
const defaultPlaceholder = t('elements.searchPlaceholder', currentLang);

// Get current search query from URL
const currentSearchQuery = Astro.url.searchParams.get('search') || '';
---

<div class="mb-6">
  <div class="relative">
    <input
      type="text"
      id="search-input"
      placeholder={placeholder || defaultPlaceholder}
      value={currentSearchQuery}
      class="w-full px-4 py-3 pl-12 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
    />
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
      <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>
    <button
      id="clear-search"
      class="absolute inset-y-0 right-0 pr-3 flex items-center opacity-0 pointer-events-none transition-opacity duration-200 hover:text-gray-600"
      aria-label="Clear search"
    >
      <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</div>

<script>
  // Client-side search functionality with API calls
  const searchInput = document.getElementById('search-input') as HTMLInputElement;
  const clearButton = document.getElementById('clear-search') as HTMLButtonElement;
  const elementsContainer = document.querySelector('[data-elements-container]');
  
  if (searchInput && elementsContainer) {
    let searchTimeout: NodeJS.Timeout;
    
    // Function to update clear button visibility
    const updateClearButton = () => {
      const hasValue = searchInput.value.length > 0;
      clearButton.style.opacity = hasValue ? '1' : '0';
      clearButton.style.pointerEvents = hasValue ? 'auto' : 'none';
    };
    
    // Function to fetch filtered data from API
    const fetchFilteredElements = async (query: string) => {
      try {
        // Show loading state
        if (elementsContainer) {
          elementsContainer.innerHTML = '<div class="text-center py-8"><p class="text-gray-500 text-lg">Searching...</p></div>';
        }
        
        // Build the API URL with search parameters
        const currentUrl = new URL(window.location.href);
        if (query.trim()) {
          currentUrl.searchParams.set('search', query.trim());
        } else {
          currentUrl.searchParams.delete('search');
        }
        
        // Fetch the new page content
        const response = await fetch(currentUrl.toString());
        const html = await response.text();
        
        // Parse the HTML and extract the elements container
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newElementsContainer = doc.querySelector('[data-elements-container]');
        
        if (newElementsContainer && elementsContainer) {
          elementsContainer.innerHTML = newElementsContainer.innerHTML;
        }
        
        // Update URL without page reload
        window.history.pushState({}, '', currentUrl.toString());
        
      } catch (error) {
        console.error('Error fetching filtered elements:', error);
        if (elementsContainer) {
          elementsContainer.innerHTML = '<div class="text-center py-8"><p class="text-red-500 text-lg">Error loading results</p></div>';
        }
      }
    };
    
    // Search input event listener with debouncing
    searchInput.addEventListener('input', (e) => {
      const query = (e.target as HTMLInputElement).value;
      updateClearButton();
      
      // Clear previous timeout
      clearTimeout(searchTimeout);
      
      // Set new timeout for debounced search
      searchTimeout = setTimeout(() => {
        fetchFilteredElements(query);
      }, 300); // 300ms delay
    });
    
    // Clear button event listener
    clearButton.addEventListener('click', () => {
      searchInput.value = '';
      updateClearButton();
      fetchFilteredElements('');
      searchInput.focus();
    });
    
    // Initialize clear button state
    updateClearButton();
  }
</script>