{{ define "main" }}
<header class="page-header">
  <h1 class="page-title">Search Results</h1>
  <p class="page-description">Search through all posts</p>
</header>

<section class="search-section">
  <div id="search-results" class="search-results" role="region" aria-live="polite" aria-label="Search results">
    <p class="search-placeholder">Enter a search term in the navigation above to find posts</p>
  </div>
</section>
{{ end }}

{{ define "scripts" }}
<script>
document.addEventListener("DOMContentLoaded", () => {
  const params = new URLSearchParams(location.search);
  const query = params.get("q") || "";
  const resultsDiv = document.getElementById('search-results');
  
  // Update search input with query if present
  const searchInputs = document.querySelectorAll('input[type="search"]');
  searchInputs.forEach(input => {
    if (query) input.value = query;
  });
  
  if (query) {
    performSearch(query);
  }
  
  function performSearch(q) {
    const searchQuery = q.toLowerCase();
    resultsDiv.innerHTML = '<p class="search-loading">Searching...</p>';
    
    fetch("{{ "index.json" | relURL }}")
      .then(r => r.json())
      .then(posts => {
        const hits = posts.filter(p =>
          p.title.toLowerCase().includes(searchQuery) ||
          p.summary.toLowerCase().includes(searchQuery) ||
          p.content.toLowerCase().includes(searchQuery)
        );
        
        if (!hits.length) {
          resultsDiv.innerHTML = `<div class="search-no-results">
            <p>No results found for "<strong>${escapeHtml(q)}</strong>"</p>
            <p><a href="{{ "" | relURL }}">← Back to homepage</a></p>
          </div>`;
          return;
        }
        
        resultsDiv.innerHTML = `
          <p class="search-count">${hits.length} result${hits.length === 1 ? '' : 's'} found for "<strong>${escapeHtml(q)}</strong>"</p>
          <ul class="search-results-list" role="list">
            ${hits.map(item => {
              const snippetSource = item.summary + "\n" + item.content;
              const idx = snippetSource.toLowerCase().indexOf(searchQuery);
              const start = Math.max(0, idx - 50);
              let snippet = snippetSource.substring(start, start + 200);
              snippet = snippet.replace(new RegExp(escapeRegex(searchQuery), "gi"), match => `<mark>${match}</mark>`);
              
              return `<li class="search-result-item" role="listitem">
                <article class="search-result">
                  <div class="post-meta">
                    <span class="entry-no">№ ${item.no}</span>
                    <time datetime="${item.date}">${item.date}</time>
                    <span>${item.readingTime} min</span>
                  </div>
                  <h2 class="search-result-title">
                    <a href="${item.relPermalink}" class="search-result-link">${item.title}</a>
                  </h2>
                  <p class="search-result-snippet">${snippet}…</p>
                </article>
              </li>`;
            }).join("")}
          </ul>
        `;
      })
      .catch(error => {
        resultsDiv.innerHTML = '<p class="search-error">Sorry, there was an error performing the search. Please try again.</p>';
        console.error('Search error:', error);
      });
  }
  
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
  
  function escapeRegex(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
});
</script>
{{ end }}