<template>
  <section
    v-if="categories.length > 0"
    :class="containerClass"
    :aria-labelledby="headingId"
  >
    <div class="flex items-center justify-between mb-2 sm:mb-3">
      <div class="flex items-center gap-2 sm:gap-4">
        <h3 :id="headingId" class="text-sm sm:text-lg font-semibold text-gray-700">
          {{ title }}
        </h3>

        <!-- AND/OR Filter Mode Toggle -->
        <div
          v-if="selectedCount > 1 && showFilterMode"
          class="flex items-center gap-1 sm:gap-2"
          role="group"
          aria-label="Filter mode selection"
        >
          <span class="text-xs text-muted-foreground hidden sm:inline">Match:</span>
          <Button
            @click="$emit('set-filter-mode', 'any')"
            :variant="filterMode === 'any' ? 'default' : 'outline'"
            size="sm"
            class="h-5 sm:h-6 px-1.5 sm:px-2 text-xs"
            :aria-pressed="filterMode === 'any'"
            aria-label="Show products with any selected category"
          >
            Any
          </Button>
          <Button
            @click="$emit('set-filter-mode', 'all')"
            :variant="filterMode === 'all' ? 'default' : 'outline'"
            size="sm"
            class="h-5 sm:h-6 px-1.5 sm:px-2 text-xs"
            :aria-pressed="filterMode === 'all'"
            aria-label="Show products with all selected categories"
          >
            All
          </Button>
        </div>
      </div>

      <Button
        v-if="selectedCount > 0"
        @click="$emit('clear-all')"
        variant="ghost"
        size="sm"
        class="text-xs sm:text-sm px-2 sm:px-3 py-1 sm:py-2"
        :aria-label="`Clear all ${selectedCount} selected category filters`"
      >
        <span class="hidden sm:inline">Clear All </span><span class="sm:hidden">Clear </span>({{ selectedCount }})
        <X class="w-3 h-3 sm:w-4 sm:h-4 ml-1" aria-hidden="true" />
      </Button>
    </div>

    <div
      class="flex flex-wrap gap-1.5 sm:gap-3"
      role="group"
      aria-label="Filter products by category"
    >
      <div
        v-for="category in categories"
        :key="category.category"
        :id="`category-filter-${category.category}`"
        role="button"
        :aria-pressed="category.selected"
        :aria-label="`${category.selected ? 'Remove' : 'Add'} ${category.category} filter. ${category.count} products available.`"
        :tabindex="0"
        @click="$emit('toggle-category', category.category)"
        @keydown.enter="$emit('toggle-category', category.category)"
        @keydown.space.prevent="$emit('toggle-category', category.category)"
        class="group relative cursor-pointer transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1"
      >
        <Badge
          :variant="category.selected ? 'default' : 'outline'"
          class="px-2 py-1 sm:px-4 sm:py-2 text-xs sm:text-sm font-medium transition-all duration-200"
          :class="{
            'bg-primary text-primary-foreground shadow-md': category.selected,
            'hover:bg-primary/10 hover:border-primary': !category.selected,
            'ring-2 ring-primary ring-offset-1': category.selected
          }"
          :aria-hidden="true"
        >
          <div class="flex items-center gap-1 sm:gap-2">
            <span>{{ category.category }}</span>
            <div
              class="px-1 py-0.5 sm:px-2 rounded-full text-xs font-bold transition-colors"
              :class="category.selected
                ? 'bg-primary-foreground/20 text-primary-foreground'
                : 'bg-secondary text-secondary-foreground'"
            >
              {{ category.count }}
            </div>
          </div>
        </Badge>

        <!-- Screen reader only text for selection state -->
        <span class="sr-only">
          {{ category.selected ? `${category.category} filter is active` : `${category.category} filter is inactive` }}
        </span>

        <!-- Selection indicator -->
        <div
          v-if="category.selected"
          class="absolute -top-0.5 -right-0.5 sm:-top-1 sm:-right-1 w-2.5 h-2.5 sm:w-3 sm:h-3 bg-green-500 rounded-full border-2 border-white shadow-sm"
        >
          <Check class="w-1.5 h-1.5 sm:w-2 sm:h-2 text-white absolute top-0 left-0 sm:top-0.5 sm:left-0.5" />
        </div>
      </div>
    </div>

    <!-- Product Count (when filters active) -->
    <div
      v-if="selectedCount > 0 && showProductCount"
      class="mt-2 text-center"
      aria-live="polite"
    >
      <span class="text-xs sm:text-sm text-muted-foreground">
        {{ productCount }} products found
      </span>
    </div>
  </section>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { X, Check } from 'lucide-vue-next'

interface CategoryData {
  category: string
  count: number
  selected: boolean
}

interface Props {
  categories: CategoryData[]
  selectedCount: number
  filterMode: 'any' | 'all'
  productCount?: number
  title?: string
  showFilterMode?: boolean
  showProductCount?: boolean
  containerClass?: string
}

withDefaults(defineProps<Props>(), {
  title: 'Browse by Category',
  showFilterMode: true,
  showProductCount: true,
  containerClass: 'mb-4 sm:mb-6'
})

const headingId = `category-filters-heading-${Math.random().toString(36).slice(2)}`

defineEmits<{
  'toggle-category': [category: string]
  'clear-all': []
  'set-filter-mode': [mode: 'any' | 'all']
}>()
</script>