<script setup>
import { onMounted, ref } from 'vue'
import { fetchScanStatus } from '../api.js'
import { usePolling } from '../composables/usePolling.js'

const props = defineProps({ name: { type: String, required: true } })
const status = ref(null)

async function tick() {
  try {
    status.value = await fetchScanStatus(props.name)
  } catch { /* nie fatal */ }
}

const poll = usePolling(tick, () => status.value?.laeuft !== false, 2000)
onMounted(async () => {
  await tick()
  poll.start()
})

function dauer(s) {
  return `${Math.round(s)}s`
}
</script>

<template>
  <aside class="leiste">
    <h3>Scan läuft</h3>
    <template v-if="status">
      <dl class="stufen">
        <template v-for="(n, stufe) in status.stufen" :key="stufe">
          <dt>{{ stufe }}</dt><dd>{{ n }}</dd>
        </template>
      </dl>
      <div v-if="status.agenten.length" class="agenten">
        <h4>Aktive Agenten</h4>
        <p v-for="a in status.agenten" :key="a.key" class="agent">
          <code>{{ a.label || a.key }}</code> · {{ dauer(a.runtime) }}
        </p>
      </div>
      <p v-if="status.dead.length" class="dead">DEAD: {{ status.dead.join(', ') }}</p>
    </template>
  </aside>
</template>

<style scoped>
.leiste {
  background: var(--panel); border: 1px solid var(--rand); border-radius: 10px;
  padding: 0.9rem 1.1rem; align-self: start; position: sticky; top: 1rem;
}
.leiste h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.leiste h4 { margin: 0.7rem 0 0.3rem; font-size: 0.8rem; color: var(--dezent);
             text-transform: uppercase; letter-spacing: 0.04em; }
.stufen { display: grid; grid-template-columns: 1fr max-content; gap: 0.15rem 0.8rem;
          font-size: 0.85rem; margin: 0; }
.stufen dt { color: var(--dezent); }
.stufen dd { margin: 0; text-align: right; }
.agent { font-size: 0.78rem; margin: 0.2rem 0; overflow-wrap: anywhere; }
.dead { color: var(--rot); font-size: 0.82rem; margin: 0.6rem 0 0; }
</style>
