<template>
  <header class="topbar">
    <div class="topbar-left">
      <div class="logo">
        <span class="logo-icon">JR</span>
        <div class="logo-copy">
          <span class="logo-text">JV Research</span>
          <span class="logo-sub">Scraping and insight workspace</span>
        </div>
      </div>
      <router-link to="/catalog" class="catalog-btn">Catalog</router-link>
    </div>
    <div class="topbar-right">
      <div class="products-left" v-if="products.length">{{ products.length }} tracked products</div>
      <div class="search-wrap">
        <input
          v-model="query"
          class="search"
          placeholder="Search products..."
          @focus="open = true"
          @blur="delayClose"
        />
        <div v-if="open && filtered.length" class="search-dropdown">
          <div
            v-for="p in filtered.slice(0,8)"
            :key="p.sku"
            class="search-item"
            @mousedown.prevent="pick(p)"
          >
            <img v-if="p.imageUrl" :src="p.imageUrl" class="search-thumb" @error="e => e.target.style.display='none'" />
            <div class="search-info">
              <span class="search-name">{{ p.name }}</span>
              <span class="search-meta">{{ p.sku }} | {{ p.totalReviews.toLocaleString() }} reviews</span>
            </div>
            <span v-if="p.hasIntelligence" class="search-badge">Ready</span>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({ products: Array, activeSku: String })
const emit = defineEmits(['select'])
const query = ref('')
const open = ref(false)
const filtered = computed(() => {
  if (!query.value) return props.products || []
  const q = query.value.toLowerCase()
  return (props.products || []).filter(p =>
    p.name.toLowerCase().includes(q) || p.sku.toLowerCase().includes(q)
  )
})
function pick(p) {
  query.value = ''
  open.value = false
  emit('select', p.sku)
}
function delayClose() { setTimeout(() => { open.value = false }, 150) }
</script>
<style scoped>
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topnav-height);
  padding: 0 24px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.logo-copy { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.logo-sub { font-size: 10px; color: var(--text-muted); }
.catalog-btn {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: all 0.15s;
  background: #fafaf9;
}
.catalog-btn:hover { border-color: var(--accent); color: var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.products-left {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  background: #f6f6f4;
  padding: 6px 10px;
  border-radius: 20px;
}
.search-wrap { position: relative; }
.search {
  width: 260px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s;
}
.search:focus { border-color: var(--accent); background: #fff; }
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 360px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 200;
  overflow: hidden;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--accent-light); }
.search-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.search-info { flex: 1; min-width: 0; }
.search-name { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-meta { font-size: 11px; color: var(--text-muted); }
.search-badge { color: var(--positive); font-size: 10px; flex-shrink: 0; font-weight: 700; }
</style>
