<template>
  <aside class="top10-panel">
    <div class="panel-head">
      <span class="dot d-blue"></span>
      今日精选 TOP 10
    </div>

    <div v-if="items.length === 0" class="empty-msg">暂无精选，等待今日抓取...</div>

    <div
      v-for="(n, i) in items"
      :key="n.id"
      class="top10-item"
      :class="{ active: activeId === n.id }"
      @click="$emit('select', n)"
    >
      <span class="rank">{{ String(i + 1).padStart(2, '0') }}</span>
      <div class="item-body">
        <span class="item-score" :class="badgeClass(n.importance_score)">{{ Math.round(n.importance_score) }}</span>
        <span class="item-title">{{ n.title_zh }}</span>
      </div>
    </div>

    <div class="archive-section" v-if="dates.length > 0">
      <div class="archive-head">历史归档</div>
      <div
        v-for="d in dates.slice(1, 8)"
        :key="d.date"
        class="archive-item"
        :class="{ active: selectedDate === d.date }"
        @click="$emit('date-change', d.date)"
      >
        <span class="arc-date">{{ d.date.slice(5) }}</span>
        <span class="arc-count">{{ d.count }}条</span>
      </div>
    </div>
  </aside>
</template>

<script setup>
defineProps({
  items: { type: Array, default: () => [] },
  dates: { type: Array, default: () => [] },
  activeId: { type: Number, default: null },
  selectedDate: { type: String, default: '' },
})
defineEmits(['select', 'date-change'])

function badgeClass(score) {
  if (score >= 90) return 'badge-red'
  if (score >= 70) return 'badge-amber'
  return 'badge-blue'
}
</script>

<style scoped>
.top10-panel {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 120px;
  height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
}
.top10-panel::-webkit-scrollbar { display: none; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t4);
  padding: 0 0 12px;
}
.dot { width: 6px; height: 6px; border-radius: 50%; }
.d-blue { background: var(--blue-2); }

.empty-msg { font-size: 12px; color: var(--t4); padding: 8px 0; }

.top10-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 2px;
}
.top10-item:hover { background: var(--bg-hi); }
.top10-item.active { background: var(--blue-gl); }

.rank {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t4);
  width: 18px;
  flex-shrink: 0;
  padding-top: 3px;
}
.item-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.item-score {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
.badge-red   { background: rgba(255,77,106,.2);  color: var(--red); }
.badge-amber { background: rgba(255,163,54,.2);  color: var(--amber); }
.badge-blue  { background: rgba(46,85,245,.2);   color: var(--blue-2); }

.item-title {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Archive */
.archive-section { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 12px; }
.archive-head {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--t4);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.archive-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s;
}
.archive-item:hover, .archive-item.active { background: var(--bg-hi); }
.arc-date  { font-size: 12px; color: var(--t2); font-family: var(--mono); }
.arc-count { font-size: 11px; color: var(--t4); font-family: var(--mono); }
</style>
