<template>
  <span v-if="!session.live && session.resumable" class="badge bg-amber-950 text-amber-400">
    {{ t('sessions.resumable') }}
  </span>
  <span v-else-if="!session.live" class="badge bg-zinc-800 text-zinc-500">{{ t('sessions.statusLabel.exited') }}</span>
  <span v-else class="badge gap-1" :class="badgeClass">
    <span class="inline-block h-1.5 w-1.5 rounded-full" :class="dotClass" />
    {{ label }}
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import type { SessionSummary } from '@arboretum/shared';
import { TONE_BADGE, TONE_DOT, activityTone, activityPulses } from '../lib/status-tokens';

const props = defineProps<{ session: SessionSummary }>();
const { t } = useI18n();

// activity (P3-B, managées) prime ; registryStatus (P2, découvertes) en repli.
const activity = computed(() => props.session.activity ?? props.session.registryStatus ?? null);
const label = computed(() => (activity.value ? t(`sessions.registryStatus.${activity.value}`) : t('sessions.live')));
const tone = computed(() => activityTone(activity.value));
const badgeClass = computed(() => TONE_BADGE[tone.value]);
const dotClass = computed(() => [TONE_DOT[tone.value], activityPulses(activity.value) ? 'animate-pulse' : '']);
</script>
