---
export interface Props {
  placeholder?: string;
  className?: string;
}

const { placeholder, className } = Astro.props;
---

<div class={`search ${className || ''}`}>
  <button
    type='button'
    class='search-trigger'
    id='searchTrigger'
    aria-label='Open search'>
    <svg
      class='search-trigger__icon'
      width='16'
      height='16'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      stroke-width='2'>
      <circle
        cx='11'
        cy='11'
        r='8'
      ></circle>
      <path d='m21 21-4.35-4.35'></path>
    </svg>

    <span class='search-trigger__text'>Search...</span>

    <kbd
      class='search-trigger__shortcut'
      aria-label='Press Cmd+K to search'
      >⌘K</kbd
    >
  </button>

  <!-- Search Modal -->
  <div
    class='search-modal'
    id='searchModal'
    role='dialog'
    aria-labelledby='search-title'
    aria-modal='true'>
    <div
      class='search-modal__overlay'
      id='searchOverlay'
    ></div>

    <div class='search-modal__dialog'>
      <div class='search-modal__header'>
        <div class='search-input-wrapper'>
          <svg
            class='search-icon'
            width='20'
            height='20'
            viewBox='0 0 24 24'
            fill='none'
            stroke='currentColor'
            stroke-width='2'>
            <circle
              cx='11'
              cy='11'
              r='8'
            ></circle>
            <path d='m21 21-4.35-4.35'></path>
          </svg>
          <input
            type='search'
            placeholder='Search posts, tutorials, and guides...'
            class='search-input'
            id='searchInput'
            autocomplete='off'
            aria-label='Search'
          />
          <div class='search-shortcut'>⌘K</div>
        </div>

        <button
          type='button'
          class='search-close'
          id='searchClose'
          aria-label='Close search'>
          <svg
            width='16'
            height='16'
            viewBox='0 0 24 24'
            fill='none'
            stroke='currentColor'
            stroke-width='2'>
            <path d='m18 6-12 12'></path>
            <path d='m6 6 12 12'></path>
          </svg>
        </button>
      </div>

      <div
        class='search-content'
        id='searchContent'>
        <!-- Default state -->
        <div
          class='search-default'
          id='searchDefault'>
          <div class='quick-access'>
            <h3 class='section-title'>Quick Access</h3>
            <div class='quick-links'>
              <a
                href='/'
                class='quick-link'>
                <div class='quick-link-icon posts-icon'>
                  <svg
                    width='16'
                    height='16'
                    viewBox='0 0 24 24'
                    fill='none'
                    stroke='currentColor'
                    stroke-width='2'>
                    <path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'></path>
                    <polyline points='14,2 14,8 20,8'></polyline>
                  </svg>
                </div>
                <div class='quick-link-content'>
                  <span class='quick-link-title'>All Posts</span>
                  <span class='quick-link-desc'>Browse our latest articles</span>
                </div>
              </a>

              <a
                href='/howto/'
                class='quick-link'>
                <div class='quick-link-icon howtos-icon'>
                  <svg
                    width='16'
                    height='16'
                    viewBox='0 0 24 24'
                    fill='none'
                    stroke='currentColor'
                    stroke-width='2'>
                    <path
                      d='M9.663 17h4.673M12 3v1m6.364 1.636-.707.707M21 12h-1M4 12H3m3.343-5.657-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'
                    ></path>
                  </svg>
                </div>
                <div class='quick-link-content'>
                  <span class='quick-link-title'>How-to Guides</span>
                  <span class='quick-link-desc'>Step-by-step tutorials</span>
                </div>
              </a>

              <a
                href='/snippets/'
                class='quick-link'>
                <div class='quick-link-icon snippets-icon'>
                  <svg
                    width='16'
                    height='16'
                    viewBox='0 0 24 24'
                    fill='none'
                    stroke='currentColor'
                    stroke-width='2'>
                    <path d='M8 4v16m8-16v16M4 8h16M4 16h16'></path>
                  </svg>
                </div>
                <div class='quick-link-content'>
                  <span class='quick-link-title'>Code Snippets</span>
                  <span class='quick-link-desc'>Reusable code examples</span>
                </div>
              </a>

              <a
                href='/friday/'
                class='quick-link'>
                <div class='quick-link-icon fridays-icon'>
                  <svg
                    width='16'
                    height='16'
                    viewBox='0 0 24 24'
                    fill='none'
                    stroke='currentColor'
                    stroke-width='2'>
                    <path
                      d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'
                    ></path>
                  </svg>
                </div>
                <div class='quick-link-content'>
                  <span class='quick-link-title'>Friday Links</span>
                  <span class='quick-link-desc'>Weekly curated content</span>
                </div>
              </a>
            </div>
          </div>
        </div>

        <!-- Search results -->
        <div
          class='search-results hidden'
          id='searchResults'>
          <div id='searchResultsContent'></div>
        </div>

        <!-- No results -->
        <div
          class='search-empty hidden'
          id='searchEmpty'>
          <div class='empty-state'>
            <svg
              width='48'
              height='48'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              stroke-width='1.5'>
              <circle
                cx='11'
                cy='11'
                r='8'
              ></circle>
              <path d='m21 21-4.35-4.35'></path>
            </svg>
            <h3>No results found</h3>
            <p>Try different keywords or check the spelling</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style is:global>
  /* Search Trigger */
  .search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 240px;
    height: 36px;
    padding: 0 12px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-size: 14px;
  }

  .search-trigger:hover {
    border-color: hsl(var(--primary) / 0.5);
    background: hsl(var(--muted) / 0.5);
  }

  .search-trigger:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
  }

  .search-trigger__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .search-trigger__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-trigger__shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 6px;
    background: #374151;
    color: #f9fafb;
    border-color: #6b7280;
    border-radius: var(--radius);
    font-size: 11px;
    font-family: monospace;
    font-weight: 500;
  }

  .search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;

    transform: scale(0.95);

    transition:
      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform, opacity;
  }

  .search-modal.open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  .search-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }

  .search-modal__dialog {
    position: relative;
    width: 90vw;
    max-width: 640px;
    max-height: 80vh;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
  }

  .search-modal.open .search-modal__dialog {
    transform: scale(1);
  }

  .search-modal__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--background));
  }

  .search-input-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    transition: border-color 0.2s ease;
  }

  .search-input-wrapper:focus-within {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
  }

  .search-icon {
    margin-left: 12px;
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
  }

  .search-input {
    flex: 1;
    padding: 12px;
    border: none;
    outline: none;
    background: transparent;
    color: hsl(var(--foreground));
    font-size: 16px;
  }

  .search-input::placeholder {
    color: hsl(var(--muted-foreground));
  }

  .search-shortcut {
    margin-right: 12px;
    padding: 2px 8px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: 4px;
    color: hsl(var(--muted-foreground));
    font-size: 12px;
    font-family: monospace;
  }

  .search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .search-close:hover {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
  }

  .search-content {
    max-height: calc(80vh - 80px);
    overflow-y: auto;
  }

  .search-default {
    padding: 1.5rem;
  }

  .quick-access .section-title {
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 1rem 0;
  }

  .quick-links {
    display: grid;
    gap: 8px;
  }

  .quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius);
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
  }

  .quick-link:hover {
    background: hsl(var(--muted));
    border-color: hsl(var(--border));
  }

  .quick-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    flex-shrink: 0;
  }

  .posts-icon {
    background: hsl(221 83% 53% / 0.1);
    color: hsl(221 83% 53%);
  }
  .howtos-icon {
    background: hsl(142 76% 36% / 0.1);
    color: hsl(142 76% 36%);
  }
  .snippets-icon {
    background: hsl(48 96% 53% / 0.1);
    color: hsl(48 96% 53%);
  }
  .fridays-icon {
    background: hsl(262 83% 58% / 0.1);
    color: hsl(262 83% 58%);
  }

  .quick-link-content {
    flex: 1;
  }

  .quick-link-title {
    display: block;
    font-weight: 500;
    color: hsl(var(--foreground));
  }

  .quick-link-desc {
    display: block;
    font-size: 14px;
    color: hsl(var(--muted-foreground));
    margin-top: 2px;
  }

  .search-results {
    padding: 0;
  }

  .search-category {
    margin-bottom: 20px;
  }

  .search-category:last-child {
    margin-bottom: 0;
  }

  .category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: hsl(var(--muted) / 0.3);
    border-bottom: 1px solid hsl(var(--border));
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .category-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .category-title {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--foreground));
    letter-spacing: 0.025em;
    line-height: 1;
    margin: 0;
  }

  .category-count {
    font-size: 11px;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--background));
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: auto;
    font-weight: 500;
    border: 1px solid hsl(var(--border));
  }

  .search-category[data-category='posts'] .category-header {
    border-left: 3px solid hsl(221 83% 53%);
  }

  .search-category[data-category='howtos'] .category-header {
    border-left: 3px solid hsl(142 76% 36%);
  }

  .search-category[data-category='snippets'] .category-header {
    border-left: 3px solid hsl(48 96% 53%);
  }

  .search-category[data-category='fridays'] .category-header {
    border-left: 3px solid hsl(262 83% 58%);
  }

  .category-items {
    padding: 8px 24px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .search-item {
    display: block;
    padding: 12px 16px;
    color: hsl(var(--foreground));
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    margin: 0;
    border-radius: 6px;
    border: 1px solid transparent;
  }

  .search-item:hover {
    background: hsl(var(--muted) / 0.4);
    border-color: hsl(var(--border));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }

  .search-category[data-category='posts'] .search-item:hover {
    background: hsl(221 83% 53% / 0.05);
    border-color: hsl(221 83% 53% / 0.2);
  }

  .search-category[data-category='howtos'] .search-item:hover {
    background: hsl(142 76% 36% / 0.05);
    border-color: hsl(142 76% 36% / 0.2);
  }

  .search-category[data-category='snippets'] .search-item:hover {
    background: hsl(48 96% 53% / 0.05);
    border-color: hsl(48 96% 53% / 0.2);
  }

  .search-category[data-category='fridays'] .search-item:hover {
    background: hsl(262 83% 58% / 0.05);
    border-color: hsl(262 83% 58% / 0.2);
  }

  .search-item-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
    color: hsl(var(--foreground));
  }

  .search-item-excerpt {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }

  :global(.search-highlight) {
    background: hsl(48 96% 53% / 0.25);
    color: hsl(25 95% 53%);
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
  }

  .search-empty {
    padding: 3rem 1.5rem;
  }

  .empty-state {
    text-align: center;
    color: hsl(var(--muted-foreground));
  }

  .empty-state svg {
    margin: 0 auto 1rem;
    opacity: 0.5;
  }

  .empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: hsl(var(--foreground));
  }

  .empty-state p {
    margin: 0;
    font-size: 14px;
  }

  .hidden {
    display: none !important;
  }

  :global(.dark) .search-modal__dialog {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  :global(.dark) .search-highlight {
    background: hsl(48 96% 53% / 0.3);
    color: hsl(48 96% 53%);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .search-trigger {
      max-width: 200px;
    }

    .search-trigger__shortcut {
      display: none;
    }

    .search-modal.open {
      padding-top: 5vh;
    }

    .search-modal__dialog {
      width: 95vw;
      max-height: 85vh;
    }

    .search-shortcut {
      display: none;
    }

    .quick-links {
      gap: 4px;
    }

    .quick-link {
      padding: 10px;
    }

    .quick-link-icon {
      width: 36px;
      height: 36px;
    }

    .category-header {
      padding: 10px 20px;
    }

    .category-items {
      padding: 6px 20px 12px 20px;
    }

    .search-item {
      padding: 10px 12px;
    }

    .search-item-title {
      font-size: 13px;
    }

    .search-item-excerpt {
      font-size: 11px;
    }
    .search-trigger__text {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .search-trigger {
      max-width: 160px;
    }

    .search-trigger__text {
      display: none;
    }

    .search-trigger {
      width: 36px;
      padding: 0;
      justify-content: center;
    }
  }
</style>

<script>
  import { KeyboardManager } from '../lib/keyboard.js';
  import { debounce, getCategoryDisplayName, getCategoryIcon } from '../lib/utils.js';
  import { SearchStore } from '../model/store.js';

  class SearchController {
    constructor() {
      this.searchStore = new SearchStore();
      this.keyboardManager = new KeyboardManager();
      this.debouncedSearch = debounce(this.handleSearch.bind(this), 300);
      this.init();
    }

    async init() {
      await this.loadSearchData();
      this.bindEvents();
      this.setupKeyboardShortcuts();
    }

    async loadSearchData() {
      if (window.searchData) {
        this.searchStore.updateData(window.searchData);
      }
    }

    bindEvents() {
      const trigger = document.getElementById('searchTrigger');
      const modal = document.getElementById('searchModal');
      const overlay = document.getElementById('searchOverlay');
      const closeBtn = document.getElementById('searchClose');
      const input = document.getElementById('searchInput');

      trigger?.addEventListener('click', () => this.openModal());
      closeBtn?.addEventListener('click', () => this.closeModal());
      overlay?.addEventListener('click', () => this.closeModal());
      input?.addEventListener('input', e => this.debouncedSearch(e.target.value));
    }

    setupKeyboardShortcuts() {
      this.keyboardManager.addShortcut({
        key: '/',
        preventDefault: true,
        action: () => this.openModal(),
      });

      this.keyboardManager.addShortcut({
        key: 'k',
        metaKey: true,
        preventDefault: true,
        action: () => this.openModal(),
      });

      this.keyboardManager.addShortcut({
        key: 'Escape',
        action: () => this.closeModal(),
      });

      this.keyboardManager.startListening();
    }

    openModal() {
      const modal = document.getElementById('searchModal');
      const input = document.getElementById('searchInput');

      modal?.classList.add('open');
      document.body.style.overflow = 'hidden';

      setTimeout(() => {
        input?.focus();
      }, 100);
    }

    closeModal() {
      const modal = document.getElementById('searchModal');
      const input = document.getElementById('searchInput');

      modal?.classList.remove('open');
      document.body.style.overflow = '';

      if (input) {
        input.value = '';
        this.showDefaultState();
      }
    }

    handleSearch(query) {
      const startTime = performance.now();

      if (!query || query.length < 2) {
        this.showDefaultState();
        return;
      }

      const results = this.searchStore.search(query);
      const groupedResults = this.searchStore.groupByCategory(results);

      const endTime = performance.now();
      const searchTime = endTime - startTime;

      if (window.searchMetrics) {
        window.searchMetrics.recordSearch(query, results.length, searchTime);
      }

      if (Object.keys(groupedResults).length === 0) {
        this.showEmptyState();
      } else {
        this.showResults(groupedResults);
      }
    }

    showDefaultState() {
      document.getElementById('searchDefault')?.classList.remove('hidden');
      document.getElementById('searchResults')?.classList.add('hidden');
      document.getElementById('searchEmpty')?.classList.add('hidden');
    }

    showEmptyState() {
      document.getElementById('searchDefault')?.classList.add('hidden');
      document.getElementById('searchResults')?.classList.add('hidden');
      document.getElementById('searchEmpty')?.classList.remove('hidden');
    }

    showResults(groupedResults) {
      document.getElementById('searchDefault')?.classList.add('hidden');
      document.getElementById('searchEmpty')?.classList.add('hidden');
      document.getElementById('searchResults')?.classList.remove('hidden');

      const resultsContent = document.getElementById('searchResultsContent');
      if (resultsContent) {
        resultsContent.innerHTML = this.renderResults(groupedResults);
      }
    }

    renderResults(groupedResults) {
      let html = '';

      Object.entries(groupedResults).forEach(([category, items]) => {
        const displayName = getCategoryDisplayName(category);
        const icon = getCategoryIcon(category);
        const count = items.length;

        html += `
          <div class="search-category" data-category="${category}">
            <div class="category-header">
              <svg class="category-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                ${icon}
              </svg>
              <span class="category-title">${displayName}</span>
              <span class="category-count">${count} result${count !== 1 ? 's' : ''}</span>
            </div>
            <div class="category-items">
              ${items.map(item => this.renderSearchItem(item)).join('')}
            </div>
          </div>
        `;
      });

      return html;
    }

    renderSearchItem(item) {
      const excerpt = item.excerpt ? `<div class="search-item-excerpt">${item.excerpt}</div>` : '';

      return `
        <a href="${item.href}" class="search-item">
          <div class="search-item-title">${item.highlightedTitle}</div>
          ${excerpt}
        </a>
      `;
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    window.searchController = new SearchController();
  });
</script>