<template>
  <div class="hashtag-filter" style="padding: 8px 12px; background: var(--nav-surface);">
    <!-- Filtres famille -->
    <div style="margin-bottom: 6px;">
      <span class="filter-label">FAMILLES</span>
      <div class="chips-row">
        <span
          v-for="fam in FAMILLES"
          :key="fam.id"
          class="chip"
          :style="selectedFamille === fam.id
            ? `background: ${fam.color}; color: white; font-weight: 600; border: 2px solid ${fam.color};`
            : `background: var(--nav-bg-alt); color: ${fam.color}; border: 2px solid ${fam.color}; font-weight: 600;`"
          @click="toggleFamille(fam.id)"
        >{{ fam.shortLabel }}</span>
      </div>
    </div>

    <!-- Filtres hashtags avec toggle -->
    <div>
      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
        <span class="filter-label">HASHTAGS</span>
        <button
          @click="hashtagsVisible = !hashtagsVisible"
          style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
        >{{ hashtagsVisible ? 'Replier' : 'Afficher (' + props.allHashtags.length + ')' }}</button>
      </div>
      <div v-if="hashtagsVisible" class="chips-row">
        <span
          v-for="tag in props.allHashtags"
          :key="tag"
          class="chip chip-small"
          :style="selectedHashtags.includes(tag)
            ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
            : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
          @click="toggleHashtag(tag)"
        >{{ tag }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const FAMILLES = [
  { id: 1, shortLabel: 'Réemploi', color: '#a85d3e' },
  { id: 2, shortLabel: 'Frugalité', color: '#c4a472' },
  { id: 3, shortLabel: 'Social', color: '#d4a017' },
  { id: 4, shortLabel: 'Collectifs', color: '#5a7a4a' },
  { id: 5, shortLabel: 'Urbanisme', color: '#3d6a8c' },
  { id: 6, shortLabel: 'Recherche', color: '#6b3fa0' },
]

const props = defineProps<{
  allHashtags: string[]
  selectedHashtags: string[]
  selectedFamille: number | null
}>()

const emit = defineEmits<{
  'update:selectedHashtags': [v: string[]]
  'update:selectedFamille': [v: number | null]
}>()

const hashtagsVisible = ref(false)

function toggleFamille(id: number) {
  emit('update:selectedFamille', props.selectedFamille === id ? null : id)
}

function toggleHashtag(tag: string) {
  const current = props.selectedHashtags
  emit('update:selectedHashtags',
    current.includes(tag) ? current.filter(t => t !== tag) : [...current, tag]
  )
}
</script>

<style scoped>
.filter-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nav-text-muted);
  display: block;
  margin-bottom: 4px;
}
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.chip {
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  transition: all 0.15s;
  user-select: none;
}
.chip-small { font-size: 0.7rem; padding: 2px 8px; }
</style>
