<template>
  <div v-if="waiting.length" class="flex flex-col gap-2 border-b border-border px-2 py-2">
    <div class="flex items-center gap-1.5 px-1 text-[11px] font-semibold text-warn">
      <AlertTriangle :size="13" />
      {{ t('attention.title') }}
      <span class="ml-auto rounded-full bg-warn/20 px-1.5 text-[10px] text-warn">{{ waiting.length }}</span>
    </div>
    <div v-for="s in waiting" :key="s.id" class="flex flex-col gap-1">
      <button
        type="button"
        class="truncate text-left font-mono text-[11px] text-warn/80 transition-colors hover:text-warn"
        :title="s.cwd"
        @click="ide.openTerminal(s.id)"
      >
        {{ sessionLabel(s, worktrees) }}
      </button>
      <DialogPrompt :session="s" />
    </div>
  </div>
</template>

<script setup lang="ts">
// Supervision « À traiter » intégrée à l'IDE : sessions bloquées sur un dialogue Claude, avec
// DialogPrompt inline (réponse sans terminal). Le clic ouvre le terminal dans le dock (pas de
// navigation, contrairement à l'ancien AttentionSection qui liait vers /sessions/:id).
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { AlertTriangle } from '@lucide/vue';
import { useSessionsStore } from '../../stores/sessions';
import { useWorktreesStore } from '../../stores/worktrees';
import { useIdeStore } from '../../stores/ide';
import { sessionLabel } from '../../lib/session-label';
import DialogPrompt from '../DialogPrompt.vue';

const { t } = useI18n();
const sessions = useSessionsStore();
const worktrees = useWorktreesStore();
const ide = useIdeStore();

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