<script setup lang="ts">
import { computed } from 'vue'
import type { KbxDataFreshness } from '@kbx/contracts'

const props = withDefaults(defineProps<{
  freshness: KbxDataFreshness
  now?: number
}>(), { now: () => Date.now() })
const emit = defineEmits<{ refresh: [] }>()

const ageSeconds = computed(() => Math.max(0, Math.floor((props.now - new Date(props.freshness.observedAt).getTime()) / 1000)))
const stale = computed(() => props.freshness.staleAfterSeconds != null && ageSeconds.value > props.freshness.staleAfterSeconds)
const label = computed(() => {
  if (ageSeconds.value < 10) return '방금 갱신'
  if (ageSeconds.value < 60) return `${ageSeconds.value}초 전`
  const minutes = Math.floor(ageSeconds.value / 60)
  return `${minutes}분 전`
})
</script>

<template>
  <button class="kbx-freshness" :class="{ stale }" type="button" @click="emit('refresh')" :title="freshness.source ? `출처: ${freshness.source}` : undefined">
    <span aria-hidden="true">↻</span>
    <span>{{ stale ? '최신 데이터 확인 필요' : label }}</span>
  </button>
</template>

<style scoped>
.kbx-freshness { display:inline-flex; align-items:center; gap:4px; border:0; background:transparent; color:var(--kbx-color-text-muted); font-size:var(--kbx-font-sm); cursor:pointer; }
.kbx-freshness.stale { color:var(--kbx-color-warning); font-weight:600; }
</style>
