<template>
  <aside class="fc-timeline" aria-label="Gallery timeline">
    <h3 class="fc-timeline__title">Timeline</h3>
    <ul v-if="!store.timelineLoading" class="fc-timeline__list">
      <li v-for="group in grouped" :key="group.year">
        <div class="fc-timeline__year">{{ group.year }}</div>
        <ul class="fc-timeline__months">
          <li v-for="bucket in group.buckets" :key="`${bucket.year}-${bucket.month}`">
            <button class="fc-timeline__bucket" @click="store.jumpTo(bucket.year, bucket.month)">
              <span class="fc-timeline__month">{{ monthShort(bucket.month) }}</span>
              <span class="fc-timeline__count">{{ bucket.count }}</span>
            </button>
          </li>
        </ul>
      </li>
    </ul>
    <div v-else class="text-caption">Loading…</div>
  </aside>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useGalleryStore } from '../../stores/gallery.js'

const store = useGalleryStore()
onMounted(() => store.loadTimeline())

const MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
function monthShort(m) { return MONTHS_SHORT[m - 1] }

const grouped = computed(() => {
  const out = []
  let current = null
  for (const b of store.timelineBuckets) {
    if (!current || current.year !== b.year) {
      current = { year: b.year, buckets: [] }
      out.push(current)
    }
    current.buckets.push(b)
  }
  return out
})
</script>

<style scoped>
.fc-timeline {
  position: sticky;
  top: 16px;
  width: 160px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 12px;
  background: rgb(var(--v-theme-surface));
  border-radius: 8px;
  border: 1px solid rgb(var(--v-theme-surface-light));
}
.fc-timeline__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: rgb(var(--v-theme-on-surface));
  margin-bottom: 8px;
}
.fc-timeline__list { list-style: none; padding: 0; margin: 0; }
.fc-timeline__year {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: rgb(var(--v-theme-accent));
  margin: 12px 0 4px;
}
.fc-timeline__months { list-style: none; padding: 0; margin: 0; }
.fc-timeline__bucket {
  display: flex; justify-content: space-between; width: 100%;
  padding: 4px 6px;
  background: transparent; border: none; color: rgb(var(--v-theme-on-surface));
  font: inherit; cursor: pointer; border-radius: 4px;
  transition: background 100ms ease;
}
.fc-timeline__bucket:hover { background: rgb(var(--v-theme-surface-light)); }
.fc-timeline__count {
  color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface)));
  font-size: 12px;
}
</style>
