<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { getAgentMapIcon } from '@/layout/components/config.ts'
import { type ConnectArg, Jsplumb } from '@/layout/components/Main/TaskTemplate/utils.ts'
import { type IRawStepTask, useAgentsStore } from '@/stores'
// import api from '@/api'
import { computed, nextTick, watch, onMounted } from 'vue'
import { AnchorLocations } from '@jsplumb/browser-ui'
import { Loading } from '@element-plus/icons-vue'
import MultiLineTooltip from '@/components/MultiLineTooltip/index.vue'
import Bg from './Bg.vue'
import BranchButton from './components/BranchButton.vue'
import Notification from '@/components/Notification/Notification.vue'
import { useNotification } from '@/composables/useNotification'
import TaskContentEditor from '@/components/TaskContentEditor/index.vue'

// 判断计划是否就绪
const planReady = computed(() => {
  return agentsStore.agentRawPlan.data !== undefined
})

const openPlanModification = () => {
  agentsStore.openPlanModification()
}

const emit = defineEmits<{
  (el: 'resetAgentRepoLine'): void
  (el: 'setCurrentTask', task: IRawStepTask): void
}>()

const jsplumb = new Jsplumb('task-syllabus')

const handleScroll = () => {
  emit('resetAgentRepoLine')
}

const agentsStore = useAgentsStore()

const collaborationProcess = computed(() => {
  return agentsStore.agentRawPlan.data?.['Collaboration Process'] ?? []
})

// 检测是否正在填充详情
const isFillingDetails = computed(() => {
  const process = agentsStore.agentRawPlan.data?.['Collaboration Process'] || []
  return (
    process.length > 0 &&
    process.some(step => !step.AgentSelection || step.AgentSelection.length === 0)
  )
})

// 计算填充进度
const completedSteps = computed(() => {
  const process = agentsStore.agentRawPlan.data?.['Collaboration Process'] || []
  return process.filter(step => step.AgentSelection && step.AgentSelection.length > 0).length
})

const totalSteps = computed(() => {
  return agentsStore.agentRawPlan.data?.['Collaboration Process']?.length || 0
})

// Notification 通知
const {
  notifications,
  progress: showProgress,
  updateProgressDetail,
  removeNotification
} = useNotification()
const fillingProgressNotificationId = ref<string | null>(null)

// 监听填充进度，显示通知
watch(
  [isFillingDetails, completedSteps, totalSteps, () => agentsStore.hasStoppedFilling],
  ([filling, completed, total, hasStopped]) => {
    // 如果用户已停止，关闭进度通知
    if (hasStopped && fillingProgressNotificationId.value) {
      removeNotification(fillingProgressNotificationId.value)
      fillingProgressNotificationId.value = null
      return
    }

    if (filling && total > 0) {
      if (!fillingProgressNotificationId.value) {
        // 创建进度通知
        fillingProgressNotificationId.value = showProgress('生成协作流程', completed, total)
        updateProgressDetail(
          fillingProgressNotificationId.value,
          `${completed}/${total}`,
          '正在分配智能体...',
          completed,
          total
        )
      } else {
        // 更新进度通知
        updateProgressDetail(
          fillingProgressNotificationId.value,
          `${completed}/${total}`,
          '正在分配智能体...',
          completed,
          total
        )
      }
    } else if (fillingProgressNotificationId.value && !filling) {
      // 填充完成，关闭进度通知
      removeNotification(fillingProgressNotificationId.value)
      fillingProgressNotificationId.value = null
    }
  },
  { immediate: true }
)

// 保存编辑内容
const handleContentSave = async (taskId: string, content: string) => {
  const taskToUpdate = collaborationProcess.value.find(item => item.Id === taskId)
  if (taskToUpdate && content !== taskToUpdate.TaskContent) {
    taskToUpdate.TaskContent = content
    // 记录修改过的步骤索引到store用于重新执行
    const stepIndex = collaborationProcess.value.findIndex(item => item.Id === taskId)
    if (stepIndex >= 0) {
      agentsStore.addModifiedStep(stepIndex)
    }

    //暂时注释掉直接保存 task_outline 的操作，避免覆盖整个主流程
    // 如果需要持久化，应该只更新变化的字段或使用专门的 API
    // const dbTaskId = (window as any).__CURRENT_TASK_ID__
    // if (dbTaskId && agentsStore.agentRawPlan.data) {
    //   try {
    //     await api.updateTaskOutline(dbTaskId, agentsStore.agentRawPlan.data)
    //     console.log('[handleContentSave] 主流程已保存到数据库')
    //   } catch (error) {
    //     console.error('[handleContentSave] 保存主流程失败:', error)
    //   }
    // }
  }
}

function handleCurrentTask(task: IRawStepTask, transparent: boolean): ConnectArg[] {
  // 创建当前流程与产出的连线
  const arr: ConnectArg[] = [
    {
      sourceId: `task-syllabus-flow-${task.Id}`,
      targetId: `task-syllabus-output-object-${task.Id}`,
      anchor: [AnchorLocations.Right, AnchorLocations.Left],
      config: {
        transparent
      }
    }
  ]

  // 创建当前产出与流程的连线
  task.InputObject_List?.forEach(item => {
    const id = collaborationProcess.value.find(i => i.OutputObject === item)?.Id
    if (id) {
      arr.push({
        sourceId: `task-syllabus-output-object-${id}`,
        targetId: `task-syllabus-flow-${task.Id}`,
        anchor: [AnchorLocations.Left, AnchorLocations.Right],
        config: {
          type: 'output',
          transparent
        }
      })
    }
  })

  return arr
}

function changeTask(task?: IRawStepTask, isEmit?: boolean) {
  jsplumb.reset()
  const arr: ConnectArg[] = []
  agentsStore.agentRawPlan.data?.['Collaboration Process']?.forEach(item => {
    arr.push(...handleCurrentTask(item, item.Id !== task?.Id))
  })
  jsplumb.connects(arr)
  if (isEmit && task) {
    emit('setCurrentTask', task)
  }
}

function clear() {
  jsplumb.reset()
}

//  封装连线重绘方法
const redrawConnections = () => {
  nextTick(() => {
    jsplumb.reset()
    setTimeout(() => {
      const arr: ConnectArg[] = []
      const currentTaskId = agentsStore.currentTask?.Id
      collaborationProcess.value.forEach(item => {
        arr.push(...handleCurrentTask(item, item.Id !== currentTaskId))
      })
      jsplumb.connects(arr)
    }, 100)
  })
}

// 监听 collaborationProcess 变化，自动重绘连线
watch(
  () => collaborationProcess,
  () => {
    redrawConnections()
  },
  { deep: true }
)

// 组件挂载后初始化连线
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      const arr: ConnectArg[] = []
      collaborationProcess.value.forEach(item => {
        arr.push(...handleCurrentTask(item, true))
      })
      jsplumb.connects(arr)
    }, 100)
  })
})

defineExpose({
  changeTask,
  clear
})
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- Notification 通知 -->
    <Notification :notifications="notifications" @close="id => removeNotification(id)" />

    <div class="text-[18px] font-bold mb-[18px] text-[var(--color-text-title-header)]">
      任务大纲
    </div>

    <div
      v-loading="agentsStore.agentRawPlan.loading"
      class="flex-1 w-full overflow-y-auto relative"
      @scroll="handleScroll"
    >
      <div
        v-show="collaborationProcess.length > 0"
        class="w-full relative min-h-full"
        id="task-syllabus"
      >
        <Bg />
        <div class="w-full flex items-center gap-[14%] mb-[35px]">
          <div class="flex-1 flex justify-center">
            <div
              class="card-item w-[168px] h-[41px] flex justify-center relative z-99 items-center rounded-[20px] bg-[var(--color-bg-flow)]"
            >
              流程
            </div>
          </div>

          <div class="flex-1 flex justify-center">
            <div
              class="card-item w-[168px] h-[41px] flex justify-center relative z-99 items-center rounded-[20px] bg-[var(--color-bg-flow)]"
            >
              产物
            </div>
          </div>
        </div>
        <div
          v-for="item in collaborationProcess"
          :key="item.Id"
          class="card-it w-full flex items-center gap-[14%] bg-[var(--color-card-bg)] mb-[100px]"
        >
          <!--  流程卡片 -->
          <el-card
            class="w-[43%] overflow-y-auto relative z-99 task-syllabus-flow-card"
            :class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
            :shadow="true"
            :id="`task-syllabus-flow-${item.Id}`"
            @click="changeTask(item, true)"
          >
            <MultiLineTooltip placement="right" :text="item.StepName" :lines="2">
              <div class="text-[18px] font-bold text-center">{{ item.StepName }}</div>
            </MultiLineTooltip>
            <div class="h-[1px] w-full bg-[var(--color-border-separate)] my-[8px]"></div>

            <!-- 任务内容区域 - 支持双击编辑 -->
            <TaskContentEditor :task="item" @save="handleContentSave">
              <template #display>
                <MultiLineTooltip placement="right" :text="item.TaskContent" :lines="3">
                  <div class="text-[14px] text-[var(--color-text-secondary)] task-content-display">
                    {{ item.TaskContent }}
                  </div>
                </MultiLineTooltip>
              </template>
            </TaskContentEditor>

            <div class="h-[1px] w-full bg-[var(--color-border-separate)] my-[8px]"></div>

            <div
              class="flex items-center gap-2 flex-wrap relative w-full"
              :class="
                !item.AgentSelection || item.AgentSelection.length === 0
                  ? 'min-h-[40px]'
                  : 'overflow-y-auto max-h-[72px]'
              "
            >
              <!--  连接到智能体库的连接点 -->
              <div
                class="absolute left-[-10px] top-1/2 transform -translate-y-1/2"
                :id="`task-syllabus-flow-agents-${item.Id}`"
              ></div>

              <!-- 未填充智能体时显示Loading -->
              <div
                v-if="
                  (!item.AgentSelection || item.AgentSelection.length === 0) &&
                  !agentsStore.hasStoppedFilling
                "
                class="flex items-center gap-2 text-[var(--color-text-secondary)] text-[14px]"
              >
                <el-icon class="is-loading" :size="20">
                  <Loading />
                </el-icon>
                <span>正在分配智能体<span class="loading-dots"></span></span>
              </div>

              <!-- 已填充智能体时显示智能体列表 -->
              <template v-else>
                <el-tooltip
                  v-for="agentSelection in item.AgentSelection"
                  :key="agentSelection"
                  effect="light"
                  placement="right"
                >
                  <template #content>
                    <div class="w-[150px]">
                      <div class="text-[18px] font-bold">{{ agentSelection }}</div>
                      <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
                      <div>
                        {{
                          item.TaskProcess.find(i => i.AgentName === agentSelection)?.Description
                        }}
                      </div>
                    </div>
                  </template>
                  <div
                    class="w-[31px] h-[31px] rounded-full flex items-center justify-center"
                    :style="{ background: getAgentMapIcon(agentSelection).color }"
                  >
                    <svg-icon
                      :icon-class="getAgentMapIcon(agentSelection).icon"
                      color="#fff"
                      size="24px"
                    />
                  </div>
                </el-tooltip>
              </template>
            </div>
          </el-card>
          <!-- 产物卡片 -->
          <el-card
            class="w-[43%] relative task-syllabus-output-object-card"
            :shadow="true"
            :class="agentsStore.currentTask?.StepName === item.StepName ? 'active-card' : ''"
            :id="`task-syllabus-output-object-${item.Id}`"
          >
            <div class="text-[18px] font-bold text-center">{{ item.OutputObject }}</div>
          </el-card>
        </div>
      </div>
    </div>
    <BranchButton v-if="planReady" @click="openPlanModification" />
  </div>
</template>
<style lang="scss" scoped>
.task-syllabus-flow-card {
  background-color: var(--color-card-bg-task);
  border: 1px solid var(--color-card-border-task);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  &:hover {
    background-color: var(--color-card-bg-task-hover);
    border-color: var(--color-card-border-hover);
    box-shadow: var(--color-card-shadow-hover);
  }
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
  }
}

.task-syllabus-output-object-card {
  background-color: var(--color-card-bg-task);
  border: 1px solid var(--color-card-border-task);
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  &:hover {
    background-color: var(--color-card-bg-task-hover);
    border-color: var(--color-card-border-hover);
    box-shadow: var(--color-card-shadow-hover);
  }
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
  }
}

.task-content-editor {
  :deep(.el-textarea__inner) {
    font-size: 14px;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    resize: none;
  }
}

.task-content-display {
  min-height: 40px;
  word-break: break-word;
  white-space: pre-wrap;
}

// 输入框样式
:deep(.el-input__wrapper) {
  background: transparent;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: none;
  transition: all 0.2s ease;

  &:hover {
    border-color: #c0c4cc;
  }

  &.is-focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
}

:deep(.el-input__inner) {
  color: var(--color-text-primary);
  font-size: 14px;
  background: transparent;
}

// 任务内容编辑按钮样式 - 匹配执行结果编辑按钮样式
.task-content-editor {
  .el-button {
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;

    &.el-button--small {
      padding: 4px 12px;
    }
  }

  // 在深色模式下，按钮背景会自动适配为深色
  html.dark & {
    .el-button {
      &.el-button--primary {
        background-color: var(--color-bg-detail);
        border-color: var(--color-border);
        color: var(--color-text);

        &:hover {
          background-color: var(--color-bg-hover);
          border-color: var(--color-text-hover);
        }
      }

      &:not(.el-button--primary) {
        background-color: var(--color-bg-detail);
        border-color: var(--color-border);
        color: var(--color-text);

        &:hover {
          background-color: var(--color-bg-hover);
          border-color: var(--color-text-hover);
        }
      }
    }
  }
}

// 加载动画省略号
.loading-dots {
  display: inline-block;
  width: 1.2em;
  text-align: left;

  &::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
  }
}

@keyframes dots {
  0%,
  20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%,
  100% {
    content: '...';
  }
}
</style>
