<template>
  <UCard
    class="group cursor-grab select-none border border-slate-800 bg-slate-900/80 transition hover:border-sky-500/40"
    data-task
    :data-id="taskId"
    draggable="true"
    @dragstart="onDragStart"
  >
    <div class="flex items-start gap-3">
      <div class="flex h-6 w-6 items-center justify-center rounded-md bg-slate-800/80 text-xs text-slate-400">
        <UIcon name="i-heroicons-arrows-up-down-20-solid" class="h-4 w-4" />
      </div>
      <div class="min-w-0 flex-1 space-y-2">
        <div class="flex flex-wrap items-center gap-2">
          <h4 class="truncate font-semibold text-slate-100">{{ task?.title || '未命名任务' }}</h4>
          <UBadge size="xs" color="neutral" variant="subtle">{{ stat }}</UBadge>
        </div>
        <div v-if="hasSteps" class="space-y-1">
          <UProgress :value="progress" color="primary" class="h-1.5" />
          <p class="text-[11px] text-slate-400">步骤完成度 {{ progress }}%</p>
        </div>
        <p v-if="task?.description" class="line-clamp-2 text-xs text-slate-400">
          {{ task.description }}
        </p>
      </div>
      <div class="flex flex-col items-end gap-2">
        <UBadge
          size="xs"
          variant="soft"
          :style="{
            backgroundColor: `${categoryColor}1A`,
            color: categoryColor,
            borderColor: `${categoryColor}33`
          }"
        >
          {{ categoryTitle }}
        </UBadge>
        <UButton
          size="2xs"
          color="primary"
          variant="soft"
          icon="i-heroicons-pencil-square-20-solid"
          @click.stop="modalOpen = true"
        >
          详情
        </UButton>
      </div>
    </div>
  </UCard>

  <TaskModal v-model:open="modalOpen" :task-id="taskId" />
</template>

<script setup lang="ts">
import { useBoardStore } from '~/stores/board'
import TaskModal from './TaskModal.vue'

const store = useBoardStore()
const props = defineProps<{ taskId: string }>()

const task = computed(() => store.taskById(props.taskId))
const category = computed(() => {
  const id = task.value?.category
  return id ? store.categoryById(id) : null
})

const categoryTitle = computed(() => category.value?.title || '未分类')
const categoryColor = computed(() => `#${(category.value?.color || '64748b').padStart(6, '0')}`)

const steps = computed(() => task.value?.steps || [])
const hasSteps = computed(() => steps.value.length > 0)

const stat = computed(() => {
  const done = steps.value.filter((s) => s.done).length
  return `${done}/${steps.value.length}`
})

const progress = computed(() => {
  if (!steps.value.length) return 0
  const done = steps.value.filter((s) => s.done).length
  return Math.round((done / steps.value.length) * 100)
})

const modalOpen = ref(false)

function onDragStart(e: DragEvent) {
  e.dataTransfer?.setData('text/task', props.taskId)
  e.dataTransfer?.setDragImage(new Image(), 0, 0)
  e.dataTransfer!.effectAllowed = 'move'
}
</script>
