<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import { useAgentsStore } from '@/stores'
import SvgIcon from '@/components/SvgIcon/index.vue'
import PlanModification from './TaskSyllabus/Branch/PlanModification.vue'
import AgentAllocation from './TaskSyllabus/components/AgentAllocation.vue'
import PlanTask from './TaskProcess/components/PlanTask.vue'

const agentsStore = useAgentsStore()

// 面板显示状态
const visible = ref(false)
const activeTab = ref('outline')
const isMaximized = ref(false)

// PlanTask 组件引用
const planTaskRef = ref<InstanceType<typeof PlanTask> | null>(null)

// 判断是否有流程数据
const planReady = computed(() => {
  return agentsStore.agentRawPlan.data !== undefined
})

// 判断是否选中了任务
const hasSelectedTask = computed(() => {
  return !!agentsStore.currentTask
})

// 标签页配置
const tabs = [
  { key: 'outline', label: '任务大纲编排', icon: 'One', required: '' },
  { key: 'agent', label: '专家智能体评选', icon: 'Two', required: 'selectedTask' },
  { key: 'process', label: '执行过程编排', icon: 'Three', required: 'selectedTask' }
]

// 判断标签是否可用
const isTabDisabled = (tab: typeof tabs[0]) => {
  if (tab.required === 'selectedTask') {
    return !hasSelectedTask.value
  }
  return false
}

// 获取禁用原因的提示文本
const getDisabledReason = (tab: typeof tabs[0]) => {
  if (tab.required === 'selectedTask' && !hasSelectedTask.value) {
    return '请先在任务大纲中选中一个任务'
  }
  return ''
}

// 打开面板
const open = () => {
  visible.value = true
  // 默认选中可用的第一个标签
  const firstAvailableTab = tabs.find(t => !isTabDisabled(t))
  if (firstAvailableTab) {
    activeTab.value = firstAvailableTab.key
  }
}

// 关闭面板
const close = () => {
  visible.value = false
}

// 切换标签
const handleTabChange = (tabKey: string) => {
  activeTab.value = tabKey
}

// 切换到执行过程编排时，延迟触发自适应视图
watch(activeTab, (newTab) => {
  if (newTab === 'process') {
    nextTick(() => {
      setTimeout(() => {
        // 通过 expose 的方法触发自适应视图（如果有的话）
        ;(planTaskRef.value as any)?.triggerFitView?.()
      }, 400)
    })
  }
})

// 切换最大化/还原
const toggleMaximize = () => {
  isMaximized.value = !isMaximized.value
}

// 暴露给父组件
defineExpose({
  open,
  close
})
</script>

<template>
  <Teleport to="body">
    <!-- 面板主体 -->
    <Transition name="slide-up">
      <div v-if="visible" :class="['settings-panel', { 'is-maximized': isMaximized }]">
        <!-- 标签栏 -->
        <div class="panel-header">
          <div class="tabs-container">
            <div
              v-for="tab in tabs"
              :key="tab.key"
              :class="[
                'tab-item',
                { 'is-active': activeTab === tab.key },
                { 'is-disabled': isTabDisabled(tab) }
              ]"
              :title="getDisabledReason(tab)"
              @click="!isTabDisabled(tab) && handleTabChange(tab.key)"
            >
              <SvgIcon :icon-class="tab.icon" size="18px" />
              <span class="tab-label">{{ tab.label }}</span>
              <span v-if="isTabDisabled(tab)" class="tab-disabled-hint">
                {{ getDisabledReason(tab) }}
              </span>
            </div>
          </div>
          <button class="maximize-btn" @click="toggleMaximize">
            <SvgIcon :icon-class="isMaximized ? 'SuoXiao' : 'FangDa'" size="20px" />
          </button>
          <button class="close-btn" @click="close">
            <SvgIcon icon-class="close" size="20px" />
          </button>
        </div>

        <!-- 内容区域 -->
        <div class="panel-content">
          <!-- 任务大纲 -->
          <div v-show="activeTab === 'outline'" class="tab-content first-tab">
            <PlanModification />
          </div>

          <!-- 智能体 -->
          <div v-show="activeTab === 'agent'" class="tab-content">
            <AgentAllocation />
          </div>

          <!-- 任务过程 -->
          <div v-show="activeTab === 'process'" class="tab-content">
            <PlanTask ref="planTaskRef" />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped lang="scss">
// 面板主体
.settings-panel {
  position: fixed;
  bottom: 6%;
  left: 0;
  right: 0;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  height: 70vh;
  background: var(--color-bg-three);
  border-radius: 20px;
  box-shadow: 0 -4px 30px rgba(0, 0, 0.4);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.4s ease, height 0.4s ease, bottom 0.4s ease, border-radius 0.4s ease;

  &.is-maximized {
    max-width: none;
    left: 24px;
    right: 24px;
    width: auto;
    height: calc(100% - 194px);
    bottom: 24px;
    border-radius: 20px;
  }
}

// 标题栏（包含标签栏）
.panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px 0 30px;
  flex-shrink: 0;
  position: relative;
}

.tabs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.maximize-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--color-text-secondary);
  transition: all 0.3s;
  position: absolute;
  right: 60px;

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

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--color-text-secondary);
  transition: all 0.3s;
  position: absolute;
  right: 20px;

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

.tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
  margin: 0 4px;

  &:hover:not(.is-disabled) {
    color: var(--color-text-primary);
  }

  &.is-active {
    color: var(--color-primary);
    background: var(--color-settings-panel-content-bg);
    border-radius: 5px 5px 0 0;
  }

  &:hover:not(.is-disabled)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background: var(--color-bg-detail);
    border-radius: 40px;
    z-index: -1;
  }

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  :deep(.svg-icon) {
    color: var(--color-text-secondary);
  }

  &:hover:not(.is-disabled) :deep(.svg-icon) {
    color: var(--color-text-primary);
  }

  &.is-active :deep(.svg-icon) {
    color: var(--color-primary);
  }
}

.tab-label {
  font-size: 14px;
  font-weight: 500;
}

.tab-disabled-hint {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-detail);
  color: var(--color-text-secondary);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tab-item.is-disabled:hover .tab-disabled-hint {
  opacity: 1;
}

// 内容区域
.panel-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--color-settings-panel-content-bg);
  margin: 0 10px 10px;
  border-radius: 5px;
}

.tab-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-secondary);
  gap: 16px;

  p {
    font-size: 14px;
  }
}

// 动画效果
.slide-up-enter-active,
.slide-up-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
</style>
