<template>
  <!-- Barre de recherche animée : compacte par défaut, s'étend au focus -->
  <div class="top-search-wrapper" :class="{ expanded: isFocused || hasValue }">
    <label class="top-search-label" aria-label="Rechercher une organisation">
      <!-- Icône loupe -->
      <svg
        class="top-search-icon"
        width="16" height="16" viewBox="0 0 24 24"
        fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round"
        aria-hidden="true"
      >
        <circle cx="11" cy="11" r="8"/>
        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <!-- Input texte -->
      <input
        ref="inputEl"
        v-model="localValue"
        type="search"
        placeholder="Rechercher une organisation…"
        class="top-search-input"
        autocomplete="off"
        @focus="isFocused = true"
        @blur="isFocused = false"
        @input="onInput"
      />
      <!-- Bouton clear -->
      <button
        v-if="hasValue"
        type="button"
        class="top-search-clear"
        aria-label="Effacer la recherche"
        @click.stop="clear"
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </label>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const inputEl = ref<HTMLInputElement | null>(null)
const isFocused = ref(false)
const localValue = ref(props.modelValue)

watch(() => props.modelValue, (v) => { localValue.value = v })

const hasValue = computed(() => localValue.value.length > 0)

function onInput() {
  emit('update:modelValue', localValue.value)
}

function clear() {
  localValue.value = ''
  emit('update:modelValue', '')
  nextTick(() => inputEl.value?.focus())
}
</script>

<style scoped>
.top-search-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

.top-search-label {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--nav-bg-alt);
  border-radius: 20px;
  background: var(--nav-bg);
  padding: 5px 10px;
  cursor: text;
  width: 44px;
  overflow: hidden;
  transition: width 0.25s ease, border-color 0.2s, background 0.2s;
}

.top-search-wrapper.expanded .top-search-label {
  width: 280px;
  border-color: var(--nav-primary);
  background: var(--nav-surface);
}

@media (max-width: 640px) {
  .top-search-wrapper.expanded .top-search-label {
    width: calc(100vw - 80px);
  }
}

.top-search-icon {
  color: var(--nav-text-muted);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: color 0.2s;
}

.top-search-wrapper.expanded .top-search-icon {
  color: var(--nav-primary-solid);
}

.top-search-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--nav-text);
  font-size: 13px;
  width: 100%;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.top-search-wrapper.expanded .top-search-input {
  opacity: 1;
}

.top-search-input::placeholder {
  color: var(--nav-text-muted);
}

/* Masquer le bouton clear natif des navigateurs */
.top-search-input::-webkit-search-cancel-button {
  display: none;
}

.top-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-text-muted);
  flex-shrink: 0;
  padding: 1px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  background: transparent;
  border: none;
  cursor: pointer;
}

.top-search-clear:hover {
  color: var(--nav-text);
  background: var(--nav-bg-alt);
}
</style>
