<template>
  <section v-if="waiting.length" class="flex flex-col gap-2 rounded-xl border border-amber-900/50 bg-amber-950/20 p-3">
    <div class="flex items-center gap-2">
      <AlertTriangle :size="16" class="text-amber-400" />
      <h2 class="text-sm font-semibold text-amber-200">{{ t('attention.title') }}</h2>
      <BaseBadge tone="amber">{{ t('attention.count', waiting.length) }}</BaseBadge>
    </div>
    <div v-for="s in waiting" :key="s.id" class="flex flex-col gap-1">
      <RouterLink
        :to="{ name: 'session', params: { id: s.id } }"
        class="truncate font-mono text-xs text-amber-300/80 transition-colors hover:text-amber-200"
        :title="s.cwd"
      >
        {{ s.cwd }}
      </RouterLink>
      <DialogPrompt :session="s" />
    </div>
  </section>
</template>

<script setup lang="ts">
// Vue « À traiter » : regroupe en tête les sessions bloquées sur un dialogue (cœur de la
// supervision mobile). Réutilise DialogPrompt pour répondre sans ouvrir le terminal.
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { AlertTriangle } from '@lucide/vue';
import { useSessionsStore } from '../stores/sessions';
import DialogPrompt from './DialogPrompt.vue';
import BaseBadge from './ui/BaseBadge.vue';

const { t } = useI18n();
const sessions = useSessionsStore();

const waiting = computed(() =>
  sessions.sessions.filter((s) => s.live && s.activity === 'waiting' && s.dialog),
);
</script>
