<template>
  <div
    v-if="visible"
    class="absolute left-0 right-0 top-full mt-2 z-30 bg-[#121214] border border-white/10 rounded-xl shadow-2xl overflow-hidden"
  >
    <div v-if="history.length > 0" class="p-3 border-b border-white/5">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs text-art-muted uppercase tracking-wider">搜索历史</span>
        <button type="button" class="text-xs text-art-accent hover:text-white" @mousedown.prevent="emit('clear-history')">
          清空
        </button>
      </div>
      <div class="flex flex-wrap gap-2">
        <button
          v-for="item in history"
          :key="`history-${item}`"
          type="button"
          class="group inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-white/5 hover:bg-white/10 text-sm text-white/80"
          @mousedown.prevent="emit('select', item)"
        >
          <span>{{ item }}</span>
          <span
            class="text-white/30 hover:text-white"
            @mousedown.prevent.stop="emit('remove-history', item)"
          >×</span>
        </button>
      </div>
    </div>

    <div class="p-3">
      <div class="text-xs text-art-muted uppercase tracking-wider mb-2">大家都在搜</div>
      <div v-if="loadingHot" class="text-sm text-art-muted py-2">加载中...</div>
      <div v-else-if="hotKeywords.length === 0" class="text-sm text-art-muted py-2">暂无热门搜索</div>
      <div v-else class="flex flex-wrap gap-2">
        <button
          v-for="item in hotKeywords"
          :key="`hot-${item.keyword}`"
          type="button"
          class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-art-accent/10 hover:bg-art-accent/20 text-sm text-art-accent"
          @mousedown.prevent="emit('select', item.keyword)"
        >
          <span>{{ item.keyword }}</span>
          <span class="text-xs opacity-60">{{ item.count }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { HotSearchKeyword } from '../services/api'

defineProps<{
  visible: boolean
  history: string[]
  hotKeywords: HotSearchKeyword[]
  loadingHot: boolean
}>()

const emit = defineEmits<{
  select: [keyword: string]
  'remove-history': [keyword: string]
  'clear-history': []
}>()
</script>
