<script setup lang="ts">
/**
 * Vertical timeline rail showing density dots per day.
 * In compact mode (collapsed sidebar), only dots render — no labels.
 */
const props = defineProps<{
  days: string[]
  activeDate?: string
  /** Block count per day (date → count). Falls back to 1 when absent. */
  densityMap?: Map<string, number>
  /** Show only dots, no label text. Used when sidebar is in icon/collapsed mode. */
  compact?: boolean
}>()

const emit = defineEmits<{
  select: [date: string]
}>()

function density(date: string): number {
  return props.densityMap?.get(date) ?? 1
}

function label(date: string): string {
  const d = new Date(`${date}T12:00:00`)
  const today = formatDate(new Date())
  const yesterday = formatDate(new Date(Date.now() - 86400000))
  if (date === today) return "Today"
  if (date === yesterday) return "Yesterday"
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" })
}

function formatDate(d: Date): string {
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, "0")
  const day = String(d.getDate()).padStart(2, "0")
  return `${y}-${m}-${day}`
}
</script>

<template>
  <div class="flex flex-col gap-0.5" :class="compact ? 'py-2 items-center' : 'py-4'">
    <button
      v-for="date in days"
      :key="date"
      class="flex items-center gap-2 rounded-md transition-colors hover:bg-elevated"
      :class="[
        compact ? 'justify-center px-2 py-1' : 'px-3 py-1.5 text-left',
        date === activeDate ? 'bg-elevated' : '',
      ]"
      @click="emit('select', date)"
    >
      <span class="flex gap-0.5">
        <span
          v-for="i in density(date)"
          :key="i"
          class="rounded-full transition-colors"
          :class="[
            compact ? 'size-1.5' : 'size-1',
            date === activeDate ? 'bg-(--ui-primary)' : 'bg-(--ui-text-muted)/40',
          ]"
        />
      </span>
      <span
        v-if="!compact"
        class="text-xs font-medium transition-colors"
        :class="date === activeDate ? 'text-(--ui-primary)' : 'text-(--ui-text-muted)'"
      >
        {{ label(date) }}
      </span>
    </button>
  </div>
</template>
