<script setup lang="ts">
/**
 * BoardCard — eine Master-Task-Karte im Board.
 *
 * Zeigt nur Top-Level-Tasks; Child-Tasks der Agenten leben ausklappbar
 * IN der Karte (gruppiert nach Agent) statt als eigene Spalten-Karten —
 * so bleibt das Board übersichtlich, auch wenn Iris groß zerlegt.
 *
 * Ball = wer gerade dran ist. Stalled = In-Bearbeitung ohne Aktivität
 * seit der Schwelle (Watchdog meldet parallel an Iris).
 */
import { computed, ref } from 'vue'
import { ChevronRight, Check, RotateCcw, Bot, User, AlertTriangle } from '@lucide/vue'
import type { DashboardTaskDto } from '../../stores/tasks'
import { TASK_AGENT_LABELS } from '../../constants/agentPool'

const props = defineProps<{
  task: DashboardTaskDto
  column: string
  canReview: boolean
  stallThresholdMin: number
}>()

const emit = defineEmits<{
  open: [id: string]
  approve: [id: string]
  requestChanges: [task: DashboardTaskDto]
  dragstart: [e: DragEvent, id: string]
  dragend: [e: DragEvent]
}>()

const expanded = ref(false)

const children = computed(() => props.task.childTasks ?? [])
const hasChildren = computed(() => children.value.length > 0)

const totalChildren = computed(() => props.task.childTaskCount ?? children.value.length)
const doneChildren = computed(() =>
  props.task.doneChildTaskCount ?? children.value.filter(c => c.state === 'Done').length
)
const progressPct = computed(() =>
  totalChildren.value > 0 ? Math.round((doneChildren.value / totalChildren.value) * 100) : 0
)

/* ── Ball: wer ist dran ───────────────────────────── */
const ballAgent = computed(() => {
  const s = props.task.state.toLowerCase()
  if (s === 'review') return 'bao'
  if (s === 'done') return null
  if (s === 'backlog') return props.task.expectedFrom || 'iris'
  return props.task.expectedFrom || props.task.assignedTo || 'iris'
})

function agentLabel(id?: string | null): string {
  if (!id) return '—'
  return TASK_AGENT_LABELS[id.toLowerCase()] ?? id
}

function agentClass(id?: string | null): string {
  const lower = (id ?? '').toLowerCase()
  if (lower === 'iris') return 'is-iris'
  if (lower === 'bao') return 'is-bao'
  return 'is-agent'
}

/* ── Stalled-Erkennung (rein aus Aktivitätszeit) ──── */
function minutesSince(dateStr?: string | null): number {
  if (!dateStr) return Infinity
  return (Date.now() - new Date(dateStr).getTime()) / 60000
}

function isStalled(t: DashboardTaskDto): boolean {
  if (t.state.toLowerCase() !== 'in progress') return false
  return minutesSince(t.lastActivityAt ?? t.updatedAt) > props.stallThresholdMin
}

const masterStalled = computed(() => {
  if (hasChildren.value) return children.value.some(isStalled)
  return isStalled(props.task)
})

/* ── Child-Gruppierung nach Agent ─────────────────── */
const childrenByAgent = computed(() => {
  const groups = new Map<string, DashboardTaskDto[]>()
  for (const child of children.value) {
    const key = child.assignedTo || 'unassigned'
    if (!groups.has(key)) groups.set(key, [])
    groups.get(key)!.push(child)
  }
  return [...groups.entries()].map(([agent, tasks]) => ({ agent, tasks }))
})

const assigneeInitials = computed(() => {
  const unique = new Set(children.value.map(c => c.assignedTo).filter(Boolean) as string[])
  if (!unique.size && props.task.assignedTo) unique.add(props.task.assignedTo)
  return [...unique].slice(0, 4).map(a => agentLabel(a).replace(/^[^\w]+/, '').slice(0, 2).toUpperCase())
})

function priorityLabel(p: string): string {
  const lower = p.toLowerCase()
  if (lower === 'high' || lower === 'critical' || lower === 'urgent') return 'High'
  if (lower === 'low' || lower === 'minor') return 'Low'
  return 'Med'
}

function priorityClass(p: string): string {
  const lower = p.toLowerCase()
  if (lower === 'high' || lower === 'critical' || lower === 'urgent') return 'prio-high'
  if (lower === 'low' || lower === 'minor') return 'prio-low'
  return 'prio-med'
}

function childStateLabel(state: string): string {
  const map: Record<string, string> = {
    'backlog': 'Offen', 'in progress': 'Aktiv', 'review': 'Review', 'blocked': 'Blockiert', 'done': 'Fertig',
  }
  return map[state.toLowerCase()] ?? state
}

function childStateClass(state: string): string {
  const s = state.toLowerCase()
  if (s === 'done') return 'cs-done'
  if (s === 'blocked') return 'cs-blocked'
  if (s === 'review') return 'cs-review'
  if (s === 'in progress') return 'cs-active'
  return 'cs-backlog'
}

function relTime(date?: string | null): string {
  if (!date) return 'keine Aktivität'
  const mins = Math.max(0, Math.round((Date.now() - new Date(date).getTime()) / 60000))
  if (mins < 1) return 'gerade eben'
  if (mins < 60) return `vor ${mins} min`
  const h = Math.round(mins / 60)
  if (h < 24) return `vor ${h} h`
  return `vor ${Math.round(h / 24)} d`
}

function toggleExpand(e: MouseEvent) {
  e.stopPropagation()
  expanded.value = !expanded.value
}
</script>

<template>
  <div
    class="mcard"
    :class="{ 'mcard-blocked': column === 'blocked', 'mcard-stalled': masterStalled }"
    draggable="true"
    @click="emit('open', task.id)"
    @dragstart="emit('dragstart', $event, task.id)"
    @dragend="emit('dragend', $event)"
  >
    <!-- Kopf: Ball + Priorität + Stalled -->
    <div class="mcard-top">
      <span v-if="ballAgent" class="ball" :class="agentClass(ballAgent)" :title="'Ball bei ' + agentLabel(ballAgent)">
        <Bot v-if="ballAgent === 'iris'" :size="11" />
        <User v-else-if="ballAgent === 'bao'" :size="11" />
        <span v-else class="ball-dot"></span>
        {{ agentLabel(ballAgent) }}
      </span>
      <span class="prio" :class="priorityClass(task.priority)">{{ priorityLabel(task.priority) }}</span>
      <span v-if="masterStalled" class="stalled-chip" title="Keine Aktivität seit der Schwelle — Iris benachrichtigt">
        <AlertTriangle :size="11" /> hängt
      </span>
    </div>

    <!-- Titel -->
    <div class="mcard-title">{{ task.title }}</div>

    <!-- Fortschritt aus Children -->
    <div v-if="hasChildren" class="mcard-progress">
      <div class="progress-row">
        <button class="expand-btn" :class="{ open: expanded }" @click="toggleExpand" :aria-label="expanded ? 'Einklappen' : 'Ausklappen'">
          <ChevronRight :size="14" />
        </button>
        <span class="progress-text">{{ doneChildren }}/{{ totalChildren }} Teilaufgaben</span>
        <div class="avatars">
          <span v-for="(ini, i) in assigneeInitials" :key="i" class="avatar-mini">{{ ini }}</span>
        </div>
      </div>
      <div class="progress-track"><div class="progress-fill" :style="{ width: progressPct + '%' }"></div></div>
    </div>
    <div v-else-if="task.detail" class="mcard-preview">{{ task.detail }}</div>

    <!-- Ausgeklappte Children, gruppiert nach Agent -->
    <div v-if="expanded && hasChildren" class="children" @click.stop>
      <div v-for="group in childrenByAgent" :key="group.agent" class="child-group">
        <div class="child-group-head">
          <span class="child-agent" :class="agentClass(group.agent)">{{ agentLabel(group.agent) }}</span>
          <span class="child-group-count">{{ group.tasks.length }}</span>
        </div>
        <button
          v-for="child in group.tasks"
          :key="child.id"
          type="button"
          class="child-row"
          @click.stop="emit('open', child.id)"
        >
          <span class="child-title">{{ child.title }}</span>
          <span class="child-tail">
            <span v-if="isStalled(child)" class="child-stalled" title="hängt"><AlertTriangle :size="10" /></span>
            <span class="child-state" :class="childStateClass(child.state)">{{ childStateLabel(child.state) }}</span>
          </span>
        </button>
      </div>
    </div>

    <!-- Review-Aktionen -->
    <div v-if="column === 'review' && canReview" class="review-actions" @click.stop>
      <button class="rv-approve" @click="emit('approve', task.id)"><Check :size="13" /> Abnehmen</button>
      <button class="rv-changes" @click="emit('requestChanges', task)"><RotateCcw :size="13" /> Änderung</button>
    </div>

    <div class="mcard-meta">
      <span>Update {{ relTime(task.lastActivityAt ?? task.updatedAt) }}</span>
    </div>
  </div>
</template>

<style scoped>
.mcard {
  padding: 11px 12px;
  border-radius: var(--r-sm, 10px);
  background: linear-gradient(160deg, rgba(28,24,64,.45), rgba(20,17,48,.35));
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, border-color .15s;
  text-align: left;
  width: 100%;
}
.mcard:hover { transform: translateY(-1px); border-color: var(--line-2); box-shadow: 0 8px 24px -6px rgba(0,0,0,.4); }
.mcard-blocked { border-left: 3px solid var(--st-block); }
.mcard-stalled { border-left: 3px solid var(--st-queue); }

.mcard-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
.ball { display: inline-flex; align-items: center; gap: 4px; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; }
.ball.is-iris { background: rgba(147,51,234,.16); color: #c084fc; }
.ball.is-bao { background: rgba(59,130,246,.16); color: #60a5fa; }
.ball.is-agent { background: rgba(16,185,129,.14); color: #6ee7b7; }
.ball-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.prio { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; border: 1px solid; background: transparent; }
.prio-high { color: var(--st-block); border-color: var(--st-block); }
.prio-med { color: var(--st-queue); border-color: var(--st-queue); }
.prio-low { color: var(--a-blue); border-color: var(--a-blue); }
.stalled-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 9.5px; font-weight: 600; color: var(--st-queue); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); padding: 1px 6px; border-radius: 20px; }

.mcard-title { font-size: 12.5px; font-weight: 600; color: var(--tx); line-height: 1.4; word-break: break-word; font-family: 'Manrope', sans-serif; }
.mcard-preview { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--tx-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.mcard-progress { margin-top: 9px; }
.progress-row { display: flex; align-items: center; gap: 8px; }
.expand-btn { display: grid; place-items: center; width: 20px; height: 20px; border: none; border-radius: 6px; background: rgba(124,108,255,.08); color: var(--tx-2); cursor: pointer; transition: transform .15s, background .15s; flex: 0 0 auto; }
.expand-btn:hover { background: rgba(124,108,255,.16); color: var(--tx); }
.expand-btn.open { transform: rotate(90deg); }
.progress-text { font-size: 10.5px; color: var(--tx-2); font-family: 'Manrope', sans-serif; }
.avatars { margin-left: auto; display: flex; }
.avatar-mini { width: 20px; height: 20px; margin-left: -6px; border-radius: 50%; background: var(--grad-soft); border: 1px solid var(--space-1); display: grid; place-items: center; font-size: 8px; font-weight: 700; color: var(--tx); font-family: 'JetBrains Mono', monospace; }
.avatar-mini:first-child { margin-left: 0; }
.progress-track { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--space-3); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 2px; background: var(--grad); transition: width .3s; }

.children { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; cursor: default; }
.child-group-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.child-agent { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
.child-agent.is-iris { background: rgba(147,51,234,.14); color: #c084fc; }
.child-agent.is-bao { background: rgba(59,130,246,.14); color: #60a5fa; }
.child-agent.is-agent { background: rgba(16,185,129,.12); color: #6ee7b7; }
.child-group-count { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--tx-3); }
.child-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 7px; border: none; border-radius: 7px; background: rgba(10,9,24,.4); color: var(--tx); cursor: pointer; text-align: left; transition: background .15s; }
.child-row:hover { background: rgba(124,108,255,.08); }
.child-title { flex: 1; font-size: 11px; line-height: 1.35; word-break: break-word; }
.child-tail { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.child-stalled { color: var(--st-queue); display: inline-flex; }
.child-state { font-size: 8.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: .03em; }
.cs-done { background: rgba(61,220,151,.14); color: var(--st-work); }
.cs-blocked { background: rgba(251,113,133,.14); color: var(--st-block); }
.cs-review { background: rgba(251,146,60,.14); color: #fdba74; }
.cs-active { background: rgba(52,214,245,.14); color: var(--st-think); }
.cs-backlog { background: var(--glass-2); color: var(--tx-3); }

.review-actions { display: flex; gap: 6px; margin-top: 10px; }
.rv-approve, .rv-changes { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 8px; font-size: 10.5px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: filter .15s, background .15s; }
.rv-approve { border: none; background: rgba(61,220,151,.16); color: var(--st-work); border: 1px solid rgba(61,220,151,.3); }
.rv-approve:hover { background: rgba(61,220,151,.26); }
.rv-changes { border: 1px solid rgba(251,146,60,.3); background: rgba(251,146,60,.12); color: #fdba74; }
.rv-changes:hover { background: rgba(251,146,60,.22); }

.mcard-meta { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--tx-3); margin-top: 7px; font-variant-numeric: tabular-nums; }
</style>
