<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useI18n } from '../composables/useI18n'
import type { Task } from '../models/classes/Task'

interface Props {
  task: Task
  level: number
  onDoubleClick?: (task: Task) => void
  isHovered?: boolean
  hoveredTaskId?: number | null
  onHover?: (taskId: number | null) => void
}
const props = defineProps<Props>()
const emit = defineEmits(['toggle', 'dblclick'])
const { t } = useI18n()
const overtimeText = computed(() => t.value?.overtime ?? '')
const overdueText = computed(() => t.value?.overdue ?? '')
const daysText = computed(() => t.value?.days ?? '')

const baseIndent = 10
const indent = `${baseIndent + props.level * 20}px`
function handleToggle() {
  emit('toggle', props.task)
}

function handleRowClick() {
  // 如果是普通父级任务（story类型或有子任务的任务，非里程碑分组），点击行也可以展开/收起
  if (
    (props.task.type === 'story' || (props.task.children && props.task.children.length > 0)) &&
    props.task.type !== 'milestone-group'
  ) {
    emit('toggle', props.task)
  }
}

// 处理TaskRow双击事件 (与TaskBar逻辑保持一致)
const handleTaskRowDoubleClick = (e: MouseEvent) => {
  // 阻止事件冒泡
  e.stopPropagation()

  // 优先调用外部传入的双击处理器
  if (props.onDoubleClick && typeof props.onDoubleClick === 'function') {
    props.onDoubleClick(props.task)
  } else {
    // 默认行为：发出双击事件给父组件
    emit('dblclick', props.task)
  }
}

// 处理悬停事件
const handleMouseEnter = () => {
  // 如果正在拖拽Splitter，忽略悬停事件
  if (isSplitterDragging.value) return

  if (props.onHover) {
    props.onHover(props.task.id)
  }
}

const handleMouseLeave = () => {
  // 如果正在拖拽Splitter，忽略悬停事件
  if (isSplitterDragging.value) return

  if (props.onHover) {
    props.onHover(null)
  }
}

// 获取进度值的样式类
function getProgressClass() {
  const progress = props.task.progress || 0
  const today = new Date()
  const endDate = props.task.endDate ? new Date(props.task.endDate) : null

  // 超期且未完成
  if (endDate && today > endDate && progress < 100) {
    return 'progress-danger'
  }

  // 已完成
  if (progress >= 100) {
    return 'progress-success'
  }

  // 进行中
  if (progress > 0) {
    return 'progress-warning'
  }

  return ''
}

// 检查是否超时
function isOvertime() {
  return (
    props.task.actualHours &&
    props.task.estimatedHours &&
    props.task.actualHours > props.task.estimatedHours
  )
}

// 检查是否逾期，返回天数
function overdueDays() {
  const today = new Date()
  const endDate = props.task.endDate ? new Date(props.task.endDate) : null
  const progress = props.task.progress || 0
  if (endDate && today > endDate && progress < 100) {
    // 只计算日期部分
    const t = new Date(today.getFullYear(), today.getMonth(), today.getDate())
    const e = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())
    const diff = Math.floor((t.getTime() - e.getTime()) / (1000 * 60 * 60 * 24))
    return diff
  }
  return 0
}

// 拖拽状态管理
const isSplitterDragging = ref(false)

// 处理拖拽开始事件
const handleSplitterDragStart = () => {
  isSplitterDragging.value = true
}

// 处理拖拽结束事件
const handleSplitterDragEnd = () => {
  isSplitterDragging.value = false
}

// 生命周期钩子 - 注册事件监听器
onMounted(() => {
  window.addEventListener('splitter-drag-start', handleSplitterDragStart)
  window.addEventListener('splitter-drag-end', handleSplitterDragEnd)
})

onUnmounted(() => {
  window.removeEventListener('splitter-drag-start', handleSplitterDragStart)
  window.removeEventListener('splitter-drag-end', handleSplitterDragEnd)
})
</script>

<template>
  <div>
    <div
      class="task-row"
      :class="{
        'task-row-hovered': isHovered,
        'parent-task':
          props.task.type === 'story' ||
          (props.task.children && props.task.children.length > 0) ||
          props.task.type === 'milestone-group',
        'milestone-group-row': props.task.type === 'milestone-group',
        'task-type-story': props.task.type === 'story',
        'task-type-task': props.task.type === 'task',
        'task-type-milestone': props.task.type === 'milestone',
      }"
      @click="handleRowClick"
      @dblclick="handleTaskRowDoubleClick"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <div class="col col-name" :style="{ paddingLeft: indent }">
        <span
          v-if="
            (props.task.type === 'story' ||
              (props.task.children && props.task.children.length > 0)) &&
            props.task.type !== 'milestone-group'
          "
          class="collapse-btn"
          @click.stop="handleToggle"
        >
          <svg
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <polyline v-if="props.task.collapsed" points="9,18 15,12 9,6" />
            <polyline v-else points="18,15 12,9 6,15" />
          </svg>
        </span>

        <!-- 里程碑分组的占位空间，用于与有折叠按钮的任务对齐 -->
        <span v-if="props.task.type === 'milestone-group'" class="milestone-spacer"></span>

        <!-- 任务图标 -->
        <span class="task-icon">
          <!-- 里程碑分组图标 - 使用菱形图标 -->
          <svg
            v-if="props.task.type === 'milestone-group'"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            class="milestone-group-icon"
          >
            <polygon points="12,2 22,12 12,22 2,12" />
          </svg>
          <!-- 父级任务图标 -->
          <svg
            v-else-if="
              props.task.type === 'story' || (props.task.children && props.task.children.length > 0)
            "
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z" />
          </svg>
          <!-- 普通任务图标 -->
          <svg
            v-else
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
            <polyline points="14,2 14,8 20,8" />
            <line x1="16" y1="13" x2="8" y2="13" />
            <line x1="16" y1="17" x2="8" y2="17" />
            <polyline points="10,9 9,9 8,9" />
          </svg>
        </span>

        <span
          class="task-name-text"
          :class="{
            'parent-task':
              props.task.type === 'story' ||
              (props.task.children && props.task.children.length > 0) ||
              props.task.type === 'milestone-group',
          }"
          :title="props.task.name"
        >
          {{ props.task.name }}
          <span v-if="isOvertime()" class="status-badge overtime">{{ overtimeText }}</span>
          <span v-if="overdueDays() > 0" class="status-badge overdue">
            {{ overdueText }}{{ overdueDays() > 0 ? overdueDays() + daysText : '' }}
          </span>
        </span>
      </div>

      <!-- 里程碑分组不显示详细信息 -->
      <template v-if="props.task.type === 'milestone-group'">
        <div class="col col-pre milestone-empty-col"></div>
        <div class="col col-assignee milestone-empty-col"></div>
        <div class="col col-date milestone-empty-col"></div>
        <div class="col col-date milestone-empty-col"></div>
        <div class="col col-hours milestone-empty-col"></div>
        <div class="col col-hours milestone-empty-col"></div>
        <div class="col col-progress milestone-empty-col"></div>
      </template>

      <!-- 普通任务显示详细信息 -->
      <template v-else>
        <div class="col col-pre">{{ props.task.predecessor || '-' }}</div>
        <div class="col col-assignee">
          <div class="assignee-info">
            <div class="avatar">
              {{ props.task.assignee ? props.task.assignee.charAt(0) : '-' }}
            </div>
            <span class="assignee-name">{{ props.task.assignee || '-' }}</span>
          </div>
        </div>
        <div class="col col-date">{{ props.task.startDate || '-' }}</div>
        <div class="col col-date">{{ props.task.endDate || '-' }}</div>
        <div class="col col-hours">{{ props.task.estimatedHours || '-' }}</div>
        <div class="col col-hours">{{ props.task.actualHours || '-' }}</div>
        <div class="col col-progress">
          <span class="progress-value" :class="getProgressClass()">
            {{ props.task.progress != null ? props.task.progress + '%' : '-' }}
          </span>
        </div>
      </template>
    </div>
    <template
      v-if="props.task.children && !props.task.collapsed && props.task.type !== 'milestone-group'"
    >
      <TaskRow
        v-for="child in props.task.children"
        :key="child.id"
        :task="child"
        :level="props.level + 1"
        :is-hovered="props.hoveredTaskId === child.id"
        :hovered-task-id="props.hoveredTaskId"
        :on-double-click="props.onDoubleClick"
        :on-hover="props.onHover"
        @toggle="emit('toggle', $event)"
        @dblclick="emit('dblclick', $event)"
      />
    </template>
  </div>
</template>

<style scoped>
@import '../styles/theme-variables.css';

.task-row {
  display: flex;
  border-bottom: 1px solid var(--gantt-border-light);
  height: 50px;
  background: var(--gantt-bg-primary);
  align-items: center;
  color: var(--gantt-text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  transform: scale(1);
  transform-origin: 5px center; /* 从左侧偏右5px的位置作为放大中心 */
  z-index: 1;
  position: relative;
}

.task-row:hover {
  background-color: var(--gantt-bg-hover);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.task-row-hovered {
  background-color: var(--gantt-bg-hover) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 10 !important;
}

.task-row.parent-task {
  background: var(--gantt-bg-tertiary);
  font-weight: 600;
}

.task-row.parent-task:hover {
  background: var(--gantt-bg-hover-parent, var(--gantt-bg-hover));
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.task-row.parent-task.task-row-hovered {
  background: var(--gantt-bg-hover-parent, var(--gantt-bg-hover)) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  z-index: 10 !important;
}

/* 里程碑分组行特殊样式 - 使用红色边框 */
.milestone-group-row {
  border-left: 3px solid var(--gantt-danger, #f56c6c);
  background: linear-gradient(90deg, var(--gantt-bg-tertiary) 0%, var(--gantt-bg-primary) 100%);
}

.milestone-group-row:hover {
  background: linear-gradient(90deg, var(--gantt-bg-hover-parent) 0%, var(--gantt-bg-hover) 100%);
  transform: scale(1.02);
  box-shadow:
    0 6px 16px rgba(245, 108, 108, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  border-left-color: var(--gantt-danger, #f56c6c);
  border-left-width: 4px; /* 悬停时边框稍微加粗 */
}

/* 任务类型左边框颜色 */
.task-type-story {
  border-left: 3px solid var(--gantt-primary, #409eff);
}

.task-type-task {
  border-left: 3px solid var(--gantt-warning, #e6a23c);
}

.task-type-milestone {
  border-left: 3px solid var(--gantt-danger, #f56c6c);
}

/* 任务类型悬停时保持并增强左边框 */
.task-type-story:hover {
  border-left: 5px solid var(--gantt-primary, #409eff);
}

.task-type-task:hover {
  border-left: 5px solid var(--gantt-warning, #e6a23c);
}

.task-type-milestone:hover {
  border-left: 5px solid var(--gantt-danger, #f56c6c);
}

/* 悬停状态下的左边框保持 */
.task-row-hovered.task-type-story {
  border-left: 5px solid var(--gantt-primary, #409eff) !important;
}

.task-row-hovered.task-type-task {
  border-left: 5px solid var(--gantt-warning, #e6a23c) !important;
}

.task-row-hovered.task-type-milestone {
  border-left: 5px solid var(--gantt-danger, #f56c6c) !important;
}

:global(html[data-theme='dark']) .milestone-group-row {
  border-left-color: var(--gantt-danger, #f67c7c);
}

/* 暗黑模式下的任务类型左边框颜色 */
:global(html[data-theme='dark']) .task-type-story {
  border-left-color: var(--gantt-primary, #7db4f0);
}

:global(html[data-theme='dark']) .task-type-task {
  border-left-color: var(--gantt-warning, #f0b83c);
}

:global(html[data-theme='dark']) .task-type-milestone {
  border-left-color: var(--gantt-danger, #f67c7c);
}

.collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-right: 4px;
  color: var(--gantt-primary);
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.collapse-btn:hover {
  background-color: var(--gantt-primary-light);
}

.collapse-btn svg {
  transition: transform 0.2s ease;
}

/* 里程碑分组占位空间 - 与折叠按钮对齐 */
.milestone-spacer {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-right: 4px;
}

.col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-right: 1px solid var(--gantt-border-light);
  box-sizing: border-box;
  overflow: hidden;
}

.col:last-child {
  border-right: none;
}

.col-name {
  flex: 2 0 300px;
  min-width: 300px;
  justify-content: flex-start;
}

.col-pre {
  flex: 1 0 120px;
  min-width: 120px;
}

.col-assignee {
  flex: 1 0 120px;
  min-width: 120px;
}

.col-date {
  flex: 1.2 0 140px;
  min-width: 140px;
}

.col-hours {
  flex: 1 0 100px;
  min-width: 100px;
}

.col-progress {
  flex: 1 0 100px;
  min-width: 100px;
}

.task-name-text {
  display: inline-block;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.task-name-text.parent-task {
  font-weight: bold;
  color: var(--gantt-text-parent, var(--gantt-text-primary));
}

.task-icon {
  margin-right: 4px;
  color: var(--gantt-text-muted);
}

.task-icon svg {
  vertical-align: middle;
}

.assignee-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gantt-primary);
  color: var(--gantt-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  border: 2px solid var(--gantt-border-medium);
  box-sizing: border-box;
}

.assignee-name {
  font-size: 14px;
  color: var(--gantt-text-secondary);
}

.progress-value {
  font-weight: 500;
  color: var(--gantt-text-secondary);
}

.progress-success {
  color: var(--gantt-success);
}

.progress-warning {
  color: var(--gantt-warning);
}

.progress-danger {
  color: var(--gantt-danger);
}

.status-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: bold;
  margin-left: 6px;
  color: white;
}

.status-badge.overtime {
  background-color: transparent;
  border: 1px solid var(--gantt-danger);
  color: var(--gantt-danger);
}

.status-badge.overdue {
  background-color: var(--gantt-danger);
}

/* 里程碑分组图标样式 - 统一使用红色并添加发光效果 */
.milestone-group-icon {
  color: var(--gantt-danger, #f56c6c);
  fill: var(--gantt-danger, #f56c6c);
  opacity: 0.9;
  filter: drop-shadow(0 0 6px var(--gantt-danger, #f56c6c));
  animation: milestone-icon-glow 2.5s ease-in-out infinite alternate;
}

/* 里程碑图标悬停效果 */
.task-row:hover .milestone-group-icon {
  filter: drop-shadow(0 0 10px var(--gantt-danger, #f56c6c))
    drop-shadow(0 0 16px rgba(245, 108, 108, 0.4));
  animation: milestone-icon-glow-intense 1.8s ease-in-out infinite alternate;
}

/* 里程碑图标发光动画 */
@keyframes milestone-icon-glow {
  from {
    filter: drop-shadow(0 0 3px var(--gantt-danger, #f56c6c));
  }
  to {
    filter: drop-shadow(0 0 8px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 12px rgba(245, 108, 108, 0.3));
  }
}

@keyframes milestone-icon-glow-intense {
  from {
    filter: drop-shadow(0 0 8px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 12px rgba(245, 108, 108, 0.3));
  }
  to {
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f56c6c))
      drop-shadow(0 0 20px rgba(245, 108, 108, 0.5));
  }
}

/* 里程碑行样式 - 统一使用红色 */
.milestone-item-icon {
  color: var(--gantt-danger, #f56c6c);
}

.milestone-empty-col {
  color: var(--gantt-text-disabled, #c0c4cc);
  /* 确保边框颜色与普通数据行一致 */
  border-right-color: var(--gantt-border-light) !important;
}

.milestone-empty-col::after {
  content: '-';
}

/* 暗黑模式适配 */
:global(html[data-theme='dark']) .milestone-row-icon {
  color: var(--gantt-danger, #f67c7c);
}

/* 暗黑模式下的里程碑图标发光效果 */
:global(html[data-theme='dark']) .milestone-group-icon {
  color: var(--gantt-danger, #f67c7c);
  fill: var(--gantt-danger, #f67c7c);
  filter: drop-shadow(0 0 6px var(--gantt-danger, #f67c7c));
  animation: milestone-icon-glow-dark 2.5s ease-in-out infinite alternate;
}

:global(html[data-theme='dark']) .task-row:hover .milestone-group-icon {
  filter: drop-shadow(0 0 10px var(--gantt-danger, #f67c7c))
    drop-shadow(0 0 16px rgba(246, 124, 124, 0.4));
  animation: milestone-icon-glow-intense-dark 1.8s ease-in-out infinite alternate;
}

/* 暗黑模式发光动画 */
@keyframes milestone-icon-glow-dark {
  from {
    filter: drop-shadow(0 0 3px var(--gantt-danger, #f67c7c));
  }
  to {
    filter: drop-shadow(0 0 8px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 12px rgba(246, 124, 124, 0.3));
  }
}

@keyframes milestone-icon-glow-intense-dark {
  from {
    filter: drop-shadow(0 0 8px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 12px rgba(246, 124, 124, 0.3));
  }
  to {
    filter: drop-shadow(0 0 12px var(--gantt-danger, #f67c7c))
      drop-shadow(0 0 20px rgba(246, 124, 124, 0.5));
  }
}

:global(html[data-theme='dark']) .milestone-empty-col {
  color: var(--gantt-text-disabled, #606266);
  /* 确保暗黑模式下边框颜色与普通数据行一致 */
  border-right-color: var(--gantt-border-light) !important;
}

/* 暗黑模式的悬停效果 */
:global(html[data-theme='dark']) .task-row:hover {
  box-shadow:
    0 4px 12px rgba(255, 255, 255, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

:global(html[data-theme='dark']) .task-row.task-row-hovered {
  background-color: var(--gantt-bg-hover) !important;
  box-shadow:
    0 4px 12px rgba(255, 255, 255, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

:global(html[data-theme='dark']) .task-row.parent-task:hover {
  box-shadow:
    0 6px 16px rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

:global(html[data-theme='dark']) .task-row.parent-task.task-row-hovered {
  background: var(--gantt-bg-hover-parent) !important;
  box-shadow:
    0 6px 16px rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

:global(html[data-theme='dark']) .milestone-group-row:hover {
  box-shadow:
    0 6px 16px rgba(246, 124, 124, 0.4),
    0 2px 8px rgba(255, 255, 255, 0.1);
}
</style>
