<script setup lang="ts">
import AgentRepo from './AgentRepo/index.vue'
import TaskSyllabus from './TaskSyllabus/index.vue'
import TaskResult from './TaskResult/index.vue'
import HistoryList from './HistoryList/index.vue'
import ExportList from './ExportList/index.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { Jsplumb } from './utils.ts'
import { type IRawStepTask, useAgentsStore } from '@/stores'
import { BezierConnector } from '@jsplumb/browser-ui'
import { ref } from 'vue'

// 定义组件 props
const props = defineProps<{
  TaskID?: string // 任务唯一标识，用于写入数据库
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'restore', plan: any): void
}>()

const agentsStore = useAgentsStore()

// 历史记录弹窗控制
const historyDialogVisible = ref(false)

// 导出弹窗控制
const exportDialogVisible = ref(false)

// 打开历史记录弹窗
const openHistoryDialog = () => {
  historyDialogVisible.value = true
}

// 打开导出弹窗
const openExportDialog = () => {
  exportDialogVisible.value = true
}

// 处理历史任务恢复
const handleRestorePlan = (plan: any) => {
  // 关闭弹窗
  historyDialogVisible.value = false
  // 发送恢复事件给父组件
  emit('restore', plan)
}

// 智能体库
const agentRepoJsplumb = new Jsplumb('task-template', {
  connector: {
    type: BezierConnector.type,
    options: {
      curviness: 30, // 曲线弯曲程度
      stub: 20, // 添加连接点与端点的距离
      alwaysRespectStubs: true
    }
  }
})

// 任务流程
const taskSyllabusRef = ref<{
  changeTask: (task?: IRawStepTask, isEmit?: boolean) => void
  clear: () => void
}>()
// 执行结果
const taskResultRef = ref<{
  createInternalLine: () => void
  clear: () => void
}>()
const taskResultJsplumb = new Jsplumb('task-template')

function scrollToElementTop(elementId: string) {
  const element = document.getElementById(elementId)
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }
}

function handleTaskSyllabusCurrentTask(task: IRawStepTask) {
  scrollToElementTop(`task-results-${task.Id}-0`)
  agentsStore.setCurrentTask(task)
}

// 更新任务大纲内部的线
function handleTaskResultCurrentTask(task: IRawStepTask) {
  scrollToElementTop(`task-syllabus-flow-${task.Id}`)
  agentsStore.setCurrentTask(task)
  taskSyllabusRef.value?.changeTask(task, false)
}

function changeTask() {
  taskResultRef.value?.createInternalLine()
  taskSyllabusRef.value?.changeTask()
}

function resetAgentRepoLine() {
  agentRepoJsplumb.repaintEverything()
  taskResultJsplumb.repaintEverything()
}

function clear() {
  taskSyllabusRef.value?.clear()
  taskResultRef.value?.clear()
  agentRepoJsplumb.repaintEverything()
  taskResultJsplumb.repaintEverything()
}

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

<template>
  <!-- 删除overflow-hidden -->
  <div
    class="task-template flex gap-6 items-center h-[calc(100%-84px)] relative"
    id="task-template"
  >
    <!-- 智能体库 -->
    <div class="w-[9.5%] min-w-[179px] h-full relative flex-shrink-0">
      <AgentRepo @resetAgentRepoLine="agentRepoJsplumb.repaintEverything" />
    </div>
    <!-- 任务大纲 -->
    <div class="w-[35.5%] min-w-[600px] h-full px-[20px] flex-shrink-0">
      <TaskSyllabus
        ref="taskSyllabusRef"
        @resetAgentRepoLine="resetAgentRepoLine"
        @set-current-task="handleTaskSyllabusCurrentTask"
      />
    </div>
    <!--  执行结果 -->
    <div class="flex-1 h-full">
      <TaskResult
        ref="taskResultRef"
        :TaskID="props.TaskID"
        @refresh-line="taskResultJsplumb.repaintEverything"
        @set-current-task="handleTaskResultCurrentTask"
        @open-export="openExportDialog"
      />
    </div>

    <!-- 历史记录弹窗 -->
    <div v-if="historyDialogVisible" class="history-drawer">
      <div class="history-drawer-content">
        <div class="history-drawer-header">
          <span class="history-drawer-title">历史记录</span>
          <button class="history-drawer-close" @click="historyDialogVisible = false">
            <SvgIcon icon-class="close" size="20px" />
          </button>
        </div>
        <div class="h-[1px] w-full bg-[var(--color-border-separate)] my-[8px]"></div>
        <div class="history-drawer-body">
          <HistoryList @restore="handleRestorePlan" />
        </div>
      </div>
    </div>

    <!-- 导出弹窗 -->
    <div v-if="exportDialogVisible" class="export-drawer">
      <div class="export-drawer-content">
        <div class="export-drawer-header">
          <span class="export-drawer-title">导出</span>
          <button class="export-drawer-close" @click="exportDialogVisible = false">
            <SvgIcon icon-class="close" size="20px" />
          </button>
        </div>
        <div class="h-[1px] w-full bg-[var(--color-border-separate)] my-[8px]"></div>
        <div class="export-drawer-body">
          <ExportList :TaskID="TaskID" @close="exportDialogVisible = false" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-template {
  & > div {
    box-shadow: var(--color-card-shadow-three);
    border-radius: 24px;
    border: 1px solid var(--color-card-border-three);
    background: var(--color-bg-three);
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

// 历史记录 Drawer 样式
:deep(.history-drawer) {
  // 强制使用绝对定位，相对于父容器
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 1000;
  // 高度由 top/bottom 控制
  height: auto !important;

  background-color: var(--color-bg-three);
  border: 1px solid var(--color-card-border-three);
  border-radius: 24px;
  box-shadow: var(--color-card-shadow-three);
  padding-top: 20px;
  padding-bottom: 20px;

  // 动画
  animation: drawer-slide-in 0.5s ease-out;

  // 头部
  .history-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: var(--color-bg-three);
  }

  // 标题
  .history-drawer-title {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    padding-left: 8px;
  }

  // 关闭按钮
  .history-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--color-text-regular);
    transition: transform 0.3s ease;

    &:hover {
      transform: rotate(360deg);
    }
  }

  :deep(.el-drawer__body) {
    background-color: var(--color-bg-three);
    padding: 0;
    opacity: 0;
    animation: drawer-fade-in 0.5s ease-out forwards;
  }
}

@keyframes drawer-slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes drawer-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 导出 Drawer 样式
:deep(.export-drawer) {
  // 强制使用绝对定位，相对于父容器
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 1000;
  // 高度由 top/bottom 控制
  height: auto !important;
  width: 500px !important;

  background-color: var(--color-bg-three);
  border: 1px solid var(--color-card-border-three);
  border-radius: 24px;
  box-shadow: var(--color-card-shadow-three);
  padding-top: 20px;
  padding-bottom: 20px;

  // 动画：从右向左滑入
  animation: export-drawer-slide-in 0.5s ease-out;

  // 头部
  .export-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: var(--color-bg-three);
  }

  // 标题
  .export-drawer-title {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 600;
    padding-left: 8px;
  }

  // 关闭按钮
  .export-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--color-text-regular);
    transition: transform 0.3s ease;

    &:hover {
      transform: rotate(360deg);
    }
  }
}

@keyframes export-drawer-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>
