<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';

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 badgeClass = computed(() => ({
  'bg-amber-950 text-amber-300': activity.value === 'waiting',
  'bg-sky-950 text-sky-300': activity.value === 'busy',
  'bg-emerald-950 text-emerald-400': activity.value === 'idle' || activity.value === null,
}));
const dotClass = computed(() => ({
  'bg-amber-300 animate-pulse': activity.value === 'waiting',
  'bg-sky-300 animate-pulse': activity.value === 'busy',
  'bg-emerald-400': activity.value === 'idle' || activity.value === null,
}));
</script>
