<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Button } from '@/components/ui/button'
import ProductCardBasic from '@/components/ProductCardBasic.vue'

const searchQuery = ref('sneakers')

const filters = reactive({
  colors: [] as string[],
  sizes: [] as string[],
  priceRange: [0, 500],
  sortBy: 'relevance',
})

const availableColors = ['White', 'Black', 'Navy', 'Brown', 'Grey']
const availableSizes = ['36', '37', '38', '39', '40', '41', '42', '43', '44', '45']
const sortOptions = [
  { label: 'Relevance', value: 'relevance' },
  { label: 'Price: Low to High', value: 'price-asc' },
  { label: 'Price: High to Low', value: 'price-desc' },
  { label: 'Newest', value: 'newest' },
]

const c = 'EUR'
const products = [
  { 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 },
]

const activeFilterCount = computed(
  () => filters.colors.length + filters.sizes.length,
)

function toggleColor(color: string) {
  const idx = filters.colors.indexOf(color)
  if (idx >= 0) filters.colors.splice(idx, 1)
  else filters.colors.push(color)
}

function toggleSize(size: string) {
  const idx = filters.sizes.indexOf(size)
  if (idx >= 0) filters.sizes.splice(idx, 1)
  else filters.sizes.push(size)
}

function clearFilters() {
  filters.colors = []
  filters.sizes = []
  filters.sortBy = 'relevance'
}
</script>

<template>
  <div class="container mx-auto px-4 py-6 md:px-6">
    <!-- Search Header -->
    <div class="mb-6">
      <div class="relative">
        <svg class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" 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"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search products..."
          class="h-11 w-full rounded-lg border bg-background pl-10 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
        />
      </div>
      <p class="mt-2 text-sm text-muted-foreground">
        {{ products.length }} results for "{{ searchQuery }}"
      </p>
    </div>

    <div class="grid gap-6 md:grid-cols-[240px_1fr]">
      <!-- Filter Sidebar -->
      <aside class="space-y-6">
        <div class="flex items-center justify-between">
          <h2 class="text-sm font-semibold">Filters</h2>
          <button
            v-if="activeFilterCount > 0"
            class="text-xs text-muted-foreground hover:text-foreground"
            @click="clearFilters"
          >
            Clear all ({{ activeFilterCount }})
          </button>
        </div>

        <!-- Sort -->
        <div>
          <h3 class="mb-2 text-sm font-medium">Sort by</h3>
          <select
            v-model="filters.sortBy"
            class="h-9 w-full rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
          >
            <option v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
              {{ opt.label }}
            </option>
          </select>
        </div>

        <!-- Color Filter -->
        <div>
          <h3 class="mb-2 text-sm font-medium">Color</h3>
          <div class="flex flex-wrap gap-2">
            <button
              v-for="color in availableColors"
              :key="color"
              class="rounded-full border px-3 py-1 text-xs transition-colors"
              :class="filters.colors.includes(color) ? 'border-foreground bg-foreground text-background' : 'hover:border-foreground/50'"
              @click="toggleColor(color)"
            >
              {{ color }}
            </button>
          </div>
        </div>

        <!-- Size Filter -->
        <div>
          <h3 class="mb-2 text-sm font-medium">Size</h3>
          <div class="grid grid-cols-4 gap-1.5">
            <button
              v-for="size in availableSizes"
              :key="size"
              class="rounded-md border py-1.5 text-center text-xs transition-colors"
              :class="filters.sizes.includes(size) ? 'border-foreground bg-foreground text-background' : 'hover:border-foreground/50'"
              @click="toggleSize(size)"
            >
              {{ size }}
            </button>
          </div>
        </div>
      </aside>

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

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