RepoDructor/components/SearchFilter.client.vue

<template>
  <div class="search-filter">
    <div class="search-container" :class="{ expanded: isExpanded }">
      <IconButton
        :icon="Search"
        title="Buscar canciones"
        size="small"
        @click="toggleSearch"
        class="search-btn"
        :active="isExpanded || searchQuery.length > 0"
      />

      <transition name="search-input">
        <div v-if="isExpanded" class="input-wrapper">
          <input
            ref="searchInput"
            v-model="searchQuery"
            type="text"
            placeholder="Buscar por nombre..."
            class="search-input"
            @blur="handleBlur"
            @keydown.escape="closeSearch"
          />
          <button
            v-if="searchQuery.length > 0"
            @click="clearSearch"
            class="clear-btn"
            title="Limpiar búsqueda"
          >
            <X :size="16" />
          </button>
        </div>
      </transition>
    </div>

    <transition name="results-badge">
      <div v-if="searchQuery.length > 0 && resultsCount !== null" class="results-badge">
        {{ resultsCount }} resultado{{ resultsCount !== 1 ? 's' : '' }}
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { Search, X } from 'lucide-vue-next'
import IconButton from './IconButton.client.vue'

const props = defineProps({
  resultsCount: {
    type: Number,
    default: null
  }
})

const emit = defineEmits(['search'])

const isExpanded = ref(false)
const searchQuery = ref('')
const searchInput = ref(null)

const toggleSearch = async () => {
  isExpanded.value = !isExpanded.value

  if (isExpanded.value) {
    await nextTick()
    searchInput.value?.focus()
  } else if (searchQuery.value.length === 0) {
    // Solo colapsar si no hay búsqueda activa
    emit('search', '')
  }
}

const closeSearch = () => {
  if (searchQuery.value.length === 0) {
    isExpanded.value = false
  }
}

const handleBlur = () => {
  // Mantener expandido si hay una búsqueda activa
  if (searchQuery.value.length === 0) {
    setTimeout(() => {
      isExpanded.value = false
    }, 200)
  }
}

const clearSearch = () => {
  searchQuery.value = ''
  searchInput.value?.focus()
}

// Emitir el término de búsqueda cuando cambie
watch(searchQuery, (newValue) => {
  emit('search', newValue.toLowerCase().trim())
})
</script>

<style scoped>
.search-filter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-btn:hover {
  animation: pulse-search 0.6s ease-in-out;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-input {
  width: 200px;
  padding: 8px 32px 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: all 0.3s ease;
}

.search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.clear-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.results-badge {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-glass);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  white-space: nowrap;
}

/* Animations */
.search-input-enter-active,
.search-input-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-input-enter-from {
  opacity: 0;
  transform: translateX(-10px);
  width: 0;
}

.search-input-leave-to {
  opacity: 0;
  transform: translateX(-10px);
  width: 0;
}

.results-badge-enter-active,
.results-badge-leave-active {
  transition: all 0.2s ease;
}

.results-badge-enter-from,
.results-badge-leave-to {
  opacity: 0;
  transform: translateY(-5px);
}

@keyframes pulse-search {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Responsive design */
@media (max-width: 768px) {
  .search-input {
    width: 160px;
    font-size: 0.85rem;
    padding: 6px 28px 6px 10px;
  }

  .results-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

@media (max-width: 520px) {
  .search-filter {
    align-items: center;
  }

  .search-input {
    width: 140px;
  }
}
</style>