<script setup lang="ts">
import { ListTodo } from '@lucide/vue'
import { RouterLink } from 'vue-router'
import type { TaskItem } from './types'
import AsyncStatePanel from '../../mission-control/AsyncStatePanel.vue'

defineProps<{
  tasks: TaskItem[]
  loading?: boolean
  error?: unknown
}>()

defineEmits<{ retry: [] }>()

function priorityLabel(priority: TaskItem['priority']): string {
  return priority === 'high' ? 'P0' : priority === 'medium' ? 'P1' : 'P2'
}

function priorityColor(priority: TaskItem['priority']): string {
  return priority === 'high' ? '#fda4b0' : priority === 'medium' ? '#fcd34d' : '#9db6ff'
}

function dotClass(status: TaskItem['status']): string {
  return status === 'active' ? 'work' : status === 'blocked' ? 'block' : 'queue'
}

function statusLabel(status: TaskItem['status']): string {
  return status === 'active' ? 'Läuft' : status === 'blocked' ? 'Blocker' : 'Queue'
}

function taskLabel(task: TaskItem): string {
  return `${priorityLabel(task.priority)}, ${statusLabel(task.status)}: ${task.title}, ${task.agent}`
}
</script>

<template>
  <section class="tstrip glass-panel" aria-label="Aktuelle Fokus-Tasks">
    <div class="strip-label">
      <ListTodo :size="14" aria-hidden="true" />
      <span>Fokus</span>
    </div>

    <AsyncStatePanel
      v-if="loading && !tasks.length"
      class="tstrip-state"
      state="loading"
      title="Fokus-Tasks werden geladen"
      compact
      inline
    />

    <AsyncStatePanel
      v-else-if="error && !tasks.length"
      class="tstrip-state"
      state="error"
      title="Fokus-Tasks nicht verfügbar"
      :problem="error"
      compact
      inline
      @action="$emit('retry')"
    />
    <AsyncStatePanel
      v-else-if="!tasks.length"
      class="tstrip-state"
      state="empty"
      title="Keine aktiven Tasks"
      compact
      inline
    />

    <div v-else class="task-list" :aria-busy="loading">
      <RouterLink
        v-for="task in tasks.slice(0, 4)"
        :key="task.id"
        :to="{ name: 'TaskDetail', params: { id: task.id } }"
        class="tcard"
        :class="{ block: task.status === 'blocked' }"
        :aria-label="taskLabel(task)"
        :title="taskLabel(task)"
      >
        <span
          class="priority"
          :style="{ color: priorityColor(task.priority) }"
        >
          {{ priorityLabel(task.priority) }}
        </span>
        <span class="dot" :class="dotClass(task.status)" aria-hidden="true"></span>
        <span class="task-title">{{ task.title }}</span>
        <span class="task-owner">{{ task.agent }}</span>
      </RouterLink>
    </div>
  </section>
</template>

<style scoped>
.tstrip {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 7px 5px 10px;
  flex: 0 0 auto;
  overflow: hidden;
}

.strip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-right: 10px;
  border-right: 1px solid var(--line-2);
  color: var(--tx-3);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.task-list {
  min-width: 0;
  flex: 1;
  display: flex;
  gap: 7px;
  overflow: hidden;
}

.tstrip-state {
  min-width: 0;
  flex: 1;
}

.tcard {
  min-width: 0;
  flex: 1 1 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 9px;
  background: var(--accent-wash);
  border: 1px solid var(--line);
  color: var(--tx);
  text-decoration: none;
}

.tcard:hover {
  border-color: var(--line-3);
  background: var(--accent-wash-strong);
}

.tcard.block {
  border-color: var(--status-block-line);
  background: var(--status-block-bg);
}

.priority {
  flex: 0 0 auto;
  font-family: var(--font-mono-v2);
  font-size: 9.5px;
  font-weight: 700;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dot.work { background: var(--st-work); animation: pulse-work 1.8s infinite; }
.dot.queue { background: var(--st-queue); }
.dot.block { background: var(--st-block); animation: pulse-block 1.4s infinite; }

.task-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 650;
}

.task-owner {
  max-width: 28%;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx-3);
  font-family: var(--font-mono-v2);
  font-size: 9px;
}

.skeleton {
  border-color: transparent;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: .42; }
  50% { opacity: .78; }
}

.tstrip-msg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx-3);
  font-family: var(--font-body);
  font-size: 11px;
}

.tstrip-msg.error {
  color: #fda4b0;
}

@media (max-width: 767px) {
  .tstrip {
    gap: 7px;
    padding-left: 8px;
  }

  .strip-label span,
  .task-owner {
    display: none;
  }

  .strip-label {
    padding-right: 7px;
  }

  .task-list {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .task-list::-webkit-scrollbar {
    display: none;
  }

  .tcard {
    flex: 0 0 min(210px, 72vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dot,
  .skeleton {
    animation: none;
  }
}
</style>
