<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Sheet,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'
import { SearchIcon } from 'lucide-vue-next'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
  Filter,
  FilterGroup,
  FilterList,
  FilterRating,
  FilterReset,
  FilterPrice,
  FilterSwatch,
  FilterSwitch,
} from '@/components/ui/filter'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import ProductCardBasic from '@/components/ProductCardBasic.vue'

// ── Props & Emits (matching useFronticSearch 1:1) ──────────────────

const props = withDefaults(
  defineProps<{
    filters?: UiFilter[]
    activeFilters?: Record<string, unknown>
    sortOptions?: UiSort[]
    activeSorting?: string
    searchTerm?: string
    totalResults?: number
    activeFilterCount?: number
    category?: string
    products?: any[]
  }>(),
  {
    filters: () => mockFilters,
    activeFilters: () => ({}),
    sortOptions: () => mockSortOptions,
    activeSorting: 'default',
    searchTerm: '',
    totalResults: 156,
    activeFilterCount: 0,
    category: 'Sneakers',
    products: () => mockProducts,
  }
)

const emit = defineEmits<{
  addFilter: [field: string, value: string | boolean | number | { from?: number, to?: number }]
  removeFilter: [field: string, value?: string]
  filterResult: [field: string, values: string[]]
  resetFilter: [field?: string]
  sortResult: [sortBy?: string]
  'update:searchTerm': [term: string]
  resetSorting: []
  reset: []
  closeControl: []
}>()

// ── Internal demo state ──────────────────────────────────────────

const isOpen = ref(false)

const localFilters = ref<UiFilter[]>(structuredClone(props.filters))
const localSorting = ref(props.activeSorting)
const localSearch = ref(props.searchTerm)

watch(() => props.filters, (v) => { localFilters.value = structuredClone(v) }, { deep: true })
watch(() => props.activeSorting, (v) => { localSorting.value = v })
watch(() => props.searchTerm, (v) => { localSearch.value = v })

// ── Active filter value helpers ──────────────────────────────────

function getActiveRating(filterKey: string): number {
  const val = props.activeFilters?.[filterKey]
  if (val && typeof val === 'object' && 'from' in val) return Number((val as any).from) || 0
  return 0
}

function getActiveBoolean(filterKey: string): boolean {
  const val = props.activeFilters?.[filterKey]
  if (val === true || val === 'true') return true
  if (Array.isArray(val) && val.length > 0) return true
  return false
}

const localActiveFilterCount = computed(() => {
  let count = 0
  for (const f of localFilters.value) {
    if (f.type === 'rating') {
      if (getActiveRating(f.key) > 0) count++
    } else if (f.type === 'boolean') {
      if (getActiveBoolean(f.key)) count++
    } else if (f.type === 'range') {
      const range = getActiveRange(f.key)
      if (range.from !== undefined || range.to !== undefined) count++
    } else {
      count += f.options.filter((o) => o.selected).length
    }
  }
  return count
})

const activeBadges = computed(() => {
  const badges: { label: string; field: string; value?: string }[] = []
  for (const f of localFilters.value) {
    if (f.type === 'boolean' || f.type === 'rating') continue
    for (const o of f.options) {
      if (o.selected) {
        badges.push({ label: o.option, field: f.key, value: o.value })
      }
    }
  }
  return badges
})

// ── Color hex lookup ─────────────────────────────────────────────

const COLOR_MAP: Record<string, string> = {
  white: '#FFFFFF',
  black: '#1A1A1A',
  navy: '#1E3A5F',
  brown: '#8B4513',
  grey: '#808080',
  gray: '#808080',
  red: '#DC2626',
  blue: '#2563EB',
  green: '#16A34A',
  beige: '#D2B48C',
  pink: '#EC4899',
  yellow: '#EAB308',
  orange: '#EA580C',
  purple: '#9333EA',
}

function getSwatchColor(value: string): string {
  return COLOR_MAP[value.toLowerCase()] ?? '#94A3B8'
}

// ── Handlers ───────────────────────────────────────────────────────

function toggleFilterOption(filterKey: string, optionValue: string) {
  const filter = localFilters.value.find((f) => f.key === filterKey)
  if (!filter) return
  const option = filter.options.find((o) => o.value === optionValue)
  if (!option) return

  option.selected = !option.selected
  if (option.selected) {
    emit('addFilter', filterKey, optionValue)
  } else {
    emit('removeFilter', filterKey, optionValue)
  }
}

function handleToggle(filterKey: string, enabled: boolean) {
  if (enabled) {
    emit('addFilter', filterKey, true)
  } else {
    emit('removeFilter', filterKey)
  }
}

function handleRating(filterKey: string, value: number) {
  if (value > 0) {
    emit('addFilter', filterKey, { from: value })
  } else {
    emit('removeFilter', filterKey)
  }
}

function getActiveRange(filterKey: string): { from?: number, to?: number } {
  const val = props.activeFilters?.[filterKey]
  if (val && typeof val === 'object' && ('from' in val || 'to' in val)) return val as { from?: number, to?: number }
  return {}
}

function handleRange(filterKey: string, value: { from?: number, to?: number }) {
  if (value.from !== undefined || value.to !== undefined) {
    emit('addFilter', filterKey, value)
  } else {
    emit('removeFilter', filterKey)
  }
}

function handleSort(value: unknown) {
  localSorting.value = String(value)
  emit('sortResult', String(value) === 'default' ? undefined : String(value))
}

function handleSearch(term: string | number) {
  localSearch.value = String(term)
  emit('update:searchTerm', String(term))
}

function removeBadge(field: string, value?: string) {
  const filter = localFilters.value.find((f) => f.key === field)
  if (!filter) return
  const option = filter.options.find((o) => o.value === value)
  if (option) option.selected = false
  emit('removeFilter', field, value)
}

function resetAll() {
  for (const f of localFilters.value) {
    for (const o of f.options) {
      o.selected = false
    }
  }
  localSorting.value = 'default'
  localSearch.value = ''
  emit('reset')
}

function applyAndClose() {
  isOpen.value = false
  emit('closeControl')
}

</script>

<script lang="ts">
// ── Static mock data ───────────────────────────────────────────────

const mockFilters: UiFilter[] = [
  {
    key: 'properties.color',
    label: 'Color',
    type: 'color',
    options: [
      { option: 'White', value: 'white', count: 24, selected: false, disabled: false },
      { option: 'Black', value: 'black', count: 42, selected: false, disabled: false },
      { option: 'Navy', value: 'navy', count: 18, selected: false, disabled: false },
      { option: 'Brown', value: 'brown', count: 12, selected: false, disabled: false },
      { option: 'Grey', value: 'grey', count: 15, selected: false, disabled: false },
    ],
  },
  {
    key: 'options.size',
    label: 'Size',
    type: 'default',
    options: [
      { option: 'XS', value: 'xs', count: 8, selected: false, disabled: false },
      { option: 'S', value: 's', count: 15, selected: false, disabled: false },
      { option: 'M', value: 'm', count: 22, selected: false, disabled: false },
      { option: 'L', value: 'l', count: 19, selected: false, disabled: false },
      { option: 'XL', value: 'xl', count: 11, selected: false, disabled: false },
    ],
  },
  {
    key: 'properties.brand',
    label: 'Brand',
    type: 'default',
    options: [
      { option: 'Urban Craft', value: 'urban-craft', count: 34, selected: false, disabled: false },
      { option: 'SportLine', value: 'sportline', count: 28, selected: false, disabled: false },
      { option: 'Heritage', value: 'heritage', count: 15, selected: false, disabled: false },
    ],
  },
  {
    key: 'properties.material',
    label: 'Material',
    type: 'default',
    options: [
      { option: 'Leather', value: 'leather', count: 45, selected: false, disabled: false },
      { option: 'Canvas', value: 'canvas', count: 22, selected: false, disabled: false },
      { option: 'Suede', value: 'suede', count: 18, selected: false, disabled: false },
      { option: 'Mesh', value: 'mesh', count: 31, selected: false, disabled: false },
    ],
  },
  {
    key: 'clearout',
    label: 'Clearout',
    type: 'boolean',
    options: [
      { option: 'Yes', value: 'true', count: 12, selected: false, disabled: false },
    ],
  },
  {
    key: 'inStore',
    label: 'In Store',
    type: 'boolean',
    options: [
      { option: 'Yes', value: 'true', count: 45, selected: false, disabled: false },
    ],
  },
  {
    key: 'rating',
    label: 'Minimum Rating',
    type: 'rating',
    options: [],
  },
  { key: 'price', label: 'Price Range', type: 'range', options: [], data: { min: 0, max: 500, total: 156 } },
]

const mockSortOptions: UiSort[] = [
  { key: 'default', label: 'Relevance', value: 'default' },
  { key: 'price.amount:asc', label: 'Price: Low to High', value: 'price.amount:asc' },
  { key: 'price.amount:desc', label: 'Price: High to Low', value: 'price.amount:desc' },
  { key: 'name:asc', label: 'Name: A\u2013Z', value: 'name:asc' },
  { key: 'name:desc', label: 'Name: Z\u2013A', value: 'name:desc' },
]

const _c = 'EUR'
const mockProducts = [
  { name: 'Classic Leather Sneakers', manufacturer: { name: 'Urban Craft' }, price: { amount: 12999, currency: _c, ref: 15999 }, cover: { src: '/placeholder.svg' }, rating: 4.5, reviewCount: 128, badge: 'Sale' },
  { name: 'Running Pro Max', manufacturer: { name: 'SportLine' }, price: { amount: 18999, currency: _c }, cover: { src: '/placeholder.svg' }, rating: 4.8, reviewCount: 64 },
  { name: 'Canvas Low Top', manufacturer: { name: 'StreetWear' }, price: { amount: 5999, currency: _c }, cover: { src: '/placeholder.svg' }, rating: 4.2, reviewCount: 89 },
  { name: 'Suede High Top', manufacturer: { name: 'Urban Craft' }, price: { amount: 14999, currency: _c }, cover: { src: '/placeholder.svg' }, rating: 4.6, reviewCount: 42 },
  { name: 'Minimal White', manufacturer: { name: 'Pure' }, price: { amount: 9999, currency: _c }, cover: { src: '/placeholder.svg' }, rating: 4.4, reviewCount: 201 },
  { name: 'Retro Runner', manufacturer: { name: 'Heritage' }, price: { amount: 11999, currency: _c }, cover: { src: '/placeholder.svg' }, rating: 4.3, reviewCount: 156 },
]

interface UiFilterOption {
  option: string
  value: string
  count: number
  selected: boolean
  disabled: boolean
}
interface UiFilter {
  key: string
  label: string
  type: string
  options: UiFilterOption[]
  data?: { min?: number, max?: number, avg?: number, sum?: number, count?: number, total: number }
}
interface UiSort {
  key: string
  label: string
  value: string
}
</script>

<template>
  <div class="container mx-auto px-4 py-6 md:px-6">
    <!-- Header Bar -->
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-xl font-semibold">{{ props.category }}</h1>
        <p class="text-sm text-muted-foreground">{{ props.totalResults }} products</p>
      </div>
      <div class="flex items-center gap-3">
        <!-- Sort Select (desktop) -->
        <div class="hidden items-center gap-2 sm:flex">
          <span class="text-sm text-muted-foreground">Sort by</span>
          <Select :model-value="localSorting" @update:model-value="handleSort">
            <SelectTrigger class="w-[180px]">
              <SelectValue placeholder="Sort by" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem
                v-for="opt in props.sortOptions"
                :key="opt.key"
                :value="opt.value"
              >
                {{ opt.label }}
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        <!-- Filters Button -->
        <Sheet v-model:open="isOpen">
          <SheetTrigger as-child>
            <Button variant="outline" class="gap-2">
              <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" /></svg>
              Filters
              <Badge
                v-if="localActiveFilterCount > 0"
                variant="default"
                class="ml-1 size-5 rounded-full p-0 text-[10px]"
              >
                {{ localActiveFilterCount }}
              </Badge>
            </Button>
          </SheetTrigger>

          <SheetContent side="right" class="flex w-full flex-col sm:max-w-md">
            <SheetHeader>
              <SheetTitle>Filters</SheetTitle>
            </SheetHeader>

            <ScrollArea class="flex-1">
              <Filter :reset="resetAll" class="flex flex-col gap-2 px-4 py-4">
                <!-- Search -->
                <InputGroup>
                  <InputGroupAddon>
                    <SearchIcon />
                  </InputGroupAddon>
                  <InputGroupInput
                    :model-value="localSearch"
                    placeholder="Search products..."
                    @update:model-value="handleSearch"
                  />
                </InputGroup>

                <!-- Unified filter list — switches on filter.type -->
                <template v-for="filter in localFilters" :key="filter.key">
                  <!-- Boolean toggle -->
                  <FilterSwitch
                    v-if="filter.type === 'boolean'"
                    :value="getActiveBoolean(filter.key)"
                    :label="filter.label"
                    @change="handleToggle(filter.key, $event)"
                  />

                  <!-- Rating -->
                  <FilterGroup
                    v-else-if="filter.type === 'rating'"
                    type="collapsible"
                    :label="filter.label"
                  >
                    <FilterRating
                      :value="getActiveRating(filter.key)"
                      :max="5"
                      @change="handleRating(filter.key, $event)"
                    />
                  </FilterGroup>

                  <!-- Color swatch -->
                  <FilterGroup
                    v-else-if="filter.type === 'color'"
                    type="collapsible"
                    :label="filter.label"
                    :active-count="filter.options.filter((o) => o.selected).length || undefined"
                  >
                    <FilterSwatch
                      :options="filter.options.map(o => ({ ...o, hex: getSwatchColor(o.value), label: o.option }))"
                      @toggle="toggleFilterOption(filter.key, $event)"
                    />
                  </FilterGroup>

                  <FilterGroup
                    v-else-if="filter.type === 'range'"
                    type="collapsible"
                    :label="filter.label"
                  >
                    <FilterPrice
                      currency="EUR"
                      :precision="0"
                      :min="filter.data?.min ?? 0"
                      :max="filter.data?.max ?? 1000"
                      :step="10"
                      :value="{ from: getActiveRange(filter.key).from ?? filter.data?.min ?? 0, to: getActiveRange(filter.key).to ?? filter.data?.max ?? 1000 }"
                      @change="handleRange(filter.key, $event)"
                    />
                  </FilterGroup>

                  <!-- Default: checkbox list -->
                  <FilterGroup
                    v-else
                    type="collapsible"
                    :label="filter.label"
                    :active-count="filter.options.filter((o) => o.selected).length || undefined"
                  >
                    <FilterList
                      :options="filter.options"
                      @toggle="toggleFilterOption(filter.key, $event)"
                    />
                  </FilterGroup>
                </template>

                <FilterReset />
              </Filter>
            </ScrollArea>

            <SheetFooter class="flex-row gap-2 border-t pt-4">
              <Button class="flex-1" @click="applyAndClose">
                Show Results ({{ props.totalResults }})
              </Button>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      </div>
    </div>

    <!-- Active Filter Badges -->
    <div v-if="activeBadges.length > 0" class="mb-6 flex flex-wrap items-center gap-2">
      <Badge
        v-for="badge in activeBadges"
        :key="`${badge.field}-${badge.value}`"
        color="secondary"
        class="gap-1 pr-1"
      >
        {{ badge.label }}
        <button
          class="ml-1 inline-flex size-4 items-center justify-center rounded-full hover:bg-muted-foreground/20"
          @click="removeBadge(badge.field, badge.value)"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
        </button>
      </Badge>
      <button
        class="text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
        @click="resetAll"
      >
        Clear all
      </button>
    </div>

    <!-- Product Grid -->
    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
      <ProductCardBasic
        v-for="(product, index) in props.products"
        :key="index"
        :product="product"
      />
    </div>

    <!-- Load More -->
    <div class="mt-8 flex justify-center">
      <Button variant="outline">Load more</Button>
    </div>
  </div>
</template>
Sneakers

Freestyle Navigator

Arctic Advancer

Winterzauber Fäustlinge

Waldflüsterer Mütze

Polar Voyager

Alpenfrost Winterhose

PistenRenner Elite Brille
