<template>
  <div class="view-container">
    <header class="hero-section">
      <h1>Lokale Bau- und Heimwerkermärkte in deiner Nähe</h1>
      <p>Finde Materialien, Werkzeug und Restposten von regionalen Anbietern – direkt zum Abholen.</p>
      <div class="search-container">
        <input v-model="q" @keyup.enter="doSearch" placeholder="z. B. Klinker, Bohrmaschine, Holzlatten..." />
        <input v-model="plz" class="location-input" placeholder="PLZ (z.B. 42103)" />
        <select v-model="cat">
          <option value="">Alle Kategorien</option>
          <option v-for="c in CATEGORIES" :key="c">{{ c }}</option>
        </select>
        <button class="btn-primary" @click="doSearch">Suchen</button>
      </div>
    </header>

    <div class="category-chips">
      <span v-for="c in CATEGORIES" :key="c" class="chip" @click="goCategory(c)">{{ categoryIcon(c) }} {{ c }}</span>
    </div>

    <div class="marketplace-body">
      <aside class="filter-sidebar">
        <h3>UMKREIS</h3>
        <label v-for="r in ['5','10','20']" :key="r"><input type="radio" v-model="radius" :value="r" /> {{ r }} km</label>
        <h3>ANBIETERTYP</h3>
        <label><input type="checkbox" v-model="types" value="Fachhandel" /> Fachhandel</label>
        <label><input type="checkbox" v-model="types" value="Baumarkt" /> Baumarkt</label>
      </aside>
      <main class="product-feed" style="flex:1">
        <div class="feed-header"><strong>{{ filtered.length }} Angebote</strong></div>
        <div class="products-grid">
          <div v-for="p in filtered" :key="p.id" class="product-card" @click="router.push(`/produkt/${p.id}`)">
            <div class="card-image-placeholder"><span class="icon">{{ p.icon }}</span></div>
            <div class="card-details">
              <span class="price">{{ p.price }} €</span>
              <h4 style="margin:6px 0 4px">{{ p.title }}</h4>
              <p style="margin:0;font-size:12px;color:#aaa">{{ p.provider }}</p>
              <div class="card-footer">
                <span>📍 {{ p.distance }} km</span>
                <span class="badge-cat">{{ p.category }}</span>
                <span class="badge">Abholung</span>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { CATEGORIES, productsWithDistance, type Category } from '@/stores/products'

const router = useRouter()
const q = ref('')
const plz = ref('42103')
const cat = ref('')
const radius = ref(10)
const types = ref<string[]>([])

const enriched = computed(() => productsWithDistance(plz.value))

const filtered = computed(() => enriched.value.filter(p => {
  if (q.value && !p.title.toLowerCase().includes(q.value.toLowerCase())) return false
  if (cat.value && p.category !== cat.value) return false
  if (p.distance === null || p.distance > radius.value) return false
  return true
}).sort((a, b) => (a.distance ?? 999) - (b.distance ?? 999)))

function doSearch() {
  router.push({ path: '/suche', query: { q: q.value, cat: cat.value, plz: plz.value } })
}
function goCategory(c: Category) {
  router.push({ path: '/suche', query: { cat: c } })
}
function categoryIcon(c: string) {
  const m: Record<string,string> = { 'Baumaterial':'🧱','Werkzeug':'🔧','Holz & Platten':'🪵','Farben & Lacke':'💧','Sanitär':'🚿','Elektro':'💡' }
  return m[c] ?? '📦'
}
</script>
