<script setup lang="ts">
import { ref, computed } from 'vue'
import { useTaskStore } from '@/stores/useTaskStore'
import { useUIStore } from '@/stores/useUIStore'
import type { TaskResponse } from '@/api/tasks'
import { ElMessageBox, ElMessage } from 'element-plus'

const props = defineProps<{
  task: TaskResponse
}>()

const taskStore = useTaskStore()
const uiStore = useUIStore()
const isToggling = ref(false)
const isDeleting = ref(false)

const isAnimating = ref(false)
const showStars = ref(false)

const starPositions = [
  { x: -10, y: -10, delay: 0 },
  { x: 50, y: -15, delay: 50 },
  { x: 100, y: -10, delay: 100 },
  { x: -15, y: 30, delay: 75 },
  { x: 105, y: 35, delay: 125 }
]

const formattedDueDate = computed(() => {
  if (!props.task.due_date) return null
  const date = new Date(props.task.due_date)
  const now = new Date()
  const diff = date.getTime() - now.getTime()
  const days = Math.ceil(diff / (1000 * 60 * 60 * 24))

  if (days < 0) return { text: '已过期', class: 'overdue' }
  if (days === 0) return { text: '今天截止', class: 'today' }
  if (days === 1) return { text: '明天截止', class: 'tomorrow' }
  return { text: `${date.getMonth() + 1}/${date.getDate()}`, class: '' }
})

const categoryColor = computed(() => props.task.category?.color)
const categoryName = computed(() => props.task.category?.name)
const tags = computed(() => props.task.tags ?? [])

async function handleToggle() {
  if (isToggling.value) return

  if (!props.task.is_completed) {
    isAnimating.value = true
    showStars.value = true

    await new Promise(r => setTimeout(r, 500))

    isAnimating.value = false
    setTimeout(() => {
      showStars.value = false
    }, 600)
  }

  isToggling.value = true
  try {
    const result = await taskStore.toggleTask(props.task.id)
    if (result && result.is_completed) {
      ElMessage.success({
        message: '太棒了！任务完成啦~',
        duration: 2000
      })
    }
  } finally {
    isToggling.value = false
  }
}

function handleEdit() {
  uiStore.openTaskDialog(props.task)
}

async function handleDelete() {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个任务吗？删除后可就找不回来了呢~',
      '确认删除',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    isDeleting.value = true
    const success = await taskStore.deleteTask(props.task.id)
    if (success) {
      ElMessage.success('任务已删除')
    }
  } catch {
    // 用户取消
  } finally {
    isDeleting.value = false
  }
}
</script>

<template>
  <div
    class="quadrant-task-card"
    :class="{
      completed: task.is_completed,
      'task-complete': isAnimating
    }"
  >
    <div
      v-if="showStars"
      v-for="star in starPositions"
      :key="`star-${star.delay}-${star.x}`"
      class="star-burst"
      :style="{
        left: star.x + '%',
        top: star.y + '%',
        animationDelay: star.delay + 'ms'
      }"
    />

    <div class="card-content">
      <el-checkbox
        :model-value="task.is_completed"
        :loading="isToggling"
        size="small"
        class="task-checkbox"
        @change="handleToggle"
      />
      <div class="task-info">
        <div class="task-title-row">
          <h4
            class="task-title"
            :class="{ 'line-through': task.is_completed }"
          >
            {{ task.title }}
          </h4>
          <span
            v-if="formattedDueDate"
            class="task-due"
            :class="formattedDueDate.class"
          >
            <el-icon><Calendar /></el-icon>
            {{ formattedDueDate.text }}
          </span>
          <el-button
            text
            size="small"
            class="action-btn edit-btn"
            @click="handleEdit"
          >
            <el-icon><Edit /></el-icon>
          </el-button>
        </div>
        <div class="task-bottom-row">
          <div v-if="categoryName || tags.length > 0" class="task-tags">
            <span
              v-if="categoryName"
              class="meta-chip category-chip"
              :style="{ '--chip-color': categoryColor }"
            >
              {{ categoryName }}
            </span>
            <span
              v-for="tag in tags"
              :key="tag.id"
              class="meta-chip tag-chip"
            >
              #{{ tag.name }}
            </span>
          </div>
          <el-button
            text
            size="small"
            class="action-btn delete-btn"
            :loading="isDeleting"
            @click="handleDelete"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.quadrant-task-card {
  position: relative;
  padding: 10px 12px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all var(--transition-normal);
  border-left: 3px solid var(--quadrant-color, var(--priority-q4));
  overflow: hidden;

  &:hover {
    box-shadow: var(--shadow-md);
  }

  &.completed {
    opacity: 0.6;
    background: var(--background-dark);

    .task-title {
      text-decoration: line-through;
      color: var(--text-secondary);
    }
  }
}

.task-checkbox {
  flex-shrink: 0;
  margin-right: 8px;

  :deep(.el-checkbox__inner) {
    border-radius: 50%;
    border-color: var(--primary);
    width: 18px;
    height: 18px;

    &::after {
      height: 8px;
      width: 4px;
    }
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: var(--success);
    border-color: var(--success);
  }

  :deep(.el-checkbox__label) {
    display: none;
  }
}

.card-content {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;

  &.line-through {
    text-decoration: line-through;
  }
}

.task-due {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 6px;
  background: var(--background-dark);
  border-radius: 4px;
  flex-shrink: 0;

  &.overdue {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
  }

  &.today {
    background: rgba(255, 179, 71, 0.15);
    color: var(--warning);
  }

  &.tomorrow {
    background: rgba(152, 216, 200, 0.15);
    color: var(--success);
  }
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.task-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.5;
}

.category-chip {
  background: color-mix(in srgb, var(--chip-color, #ccc) 15%, transparent);
  color: var(--chip-color, var(--text-secondary));
  font-weight: 500;
}

.tag-chip {
  background: var(--background-dark);
  color: var(--text-secondary);
}

.action-btn {
  color: var(--text-secondary);
  padding: 4px;
  min-height: auto;
  flex-shrink: 0;

  &:hover {
    color: var(--primary);
  }

  &.delete-btn:hover {
    color: var(--danger);
  }
}

.star-burst {
  position: absolute;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB7C5'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") no-repeat center;
  animation: starBurst 0.6s ease forwards;
}

@keyframes starBurst {
  0% {
    opacity: 1;
    transform: scale(0) translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) translate(10px, -10px);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translate(20px, -20px);
  }
}
</style>
