<template>
  <MainLayout
    :show-info-panel="showInfoPanel"
    @toggle-info-panel="toggleInfoPanel"
  >
    <!-- 顶部固定头部 -->
    <template #header>
      <AppHeader
        :current-page="currentPage"
        @page-change="handlePageChange"
      />
    </template>

    <!-- 左侧导航栏 -->
    <template #sidebar>
      <CadSidebar @show-model-viewer="handleShowModelViewer" />
    </template>

    <!-- 右侧内容区域 -->
    <template #content>
      <!-- 根据当前导航显示不同内容 -->
      <div class="content-wrapper">
        <!-- CAD软件连接页面 -->
        <div v-if="currentPage === 'connection'" class="page-content">
          <div class="connection-page">
            <div class="status-display">
              <div class="status-card">
                <div class="status-icon disconnected">
                  <i class="fas fa-unlink"></i>
                </div>
                <div class="status-text">
                  <h3>未连接</h3>
                  <p>当前没有连接到任何CAD软件</p>
                </div>
              </div>
            </div>

            <div class="action-buttons">
              <BaseButton type="primary" icon="fas fa-plug" @click="connectCAD">
                连接CAD软件
              </BaseButton>
              <BaseButton type="secondary" icon="fas fa-wrench" @click="openSettings">
                配置设置
              </BaseButton>
            </div>
          </div>
        </div>

        <!-- 配置管理页面 -->
        <div v-else-if="currentPage === 'settings'" class="page-content">
          <div class="settings-page">
            <div class="settings-section">
              <h4>连接设置</h4>
              <div class="setting-item">
                <label>服务器地址</label>
                <input type="text" :placeholder="serverConfig.HOST" class="setting-input">
              </div>
              <div class="setting-item">
                <label>端口号</label>
                <input type="number" :placeholder="serverConfig.PORT" class="setting-input">
              </div>
            </div>

            <div class="settings-actions">
              <BaseButton type="primary">保存配置</BaseButton>
              <BaseButton type="secondary">重置默认</BaseButton>
            </div>
          </div>
        </div>

        <!-- 状态监控页面 -->
        <div v-else-if="currentPage === 'monitoring'" class="page-content">
          <div class="monitoring-page">
            <div class="status-grid">
              <div class="status-item">
                <div class="status-label">CPU使用率</div>
                <div class="status-value">45%</div>
              </div>
              <div class="status-item">
                <div class="status-label">内存使用</div>
                <div class="status-value">2.1GB</div>
              </div>
              <div class="status-item">
                <div class="status-label">连接状态</div>
                <div class="status-value disconnected">离线</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 模型查看页面 -->
        <div v-if="currentPage === PAGE_TYPES.MODEL_VIEWER && showModelViewer" class="page-content">
          <CreoModelViewer v-if="currentConnectedSoftware === 'creo'" :model-data="currentModelData" />
          <PdmsModelViewer v-else-if="currentConnectedSoftware === 'pdms'" :model-data="currentModelData" />
          <RevitModelViewer v-else-if="currentConnectedSoftware === 'revit'" :model-data="currentModelData" />
          <CreoModelViewer v-else :model-data="currentModelData" />
        </div>

        <!-- 模型分析页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.ANALYSIS_TOOLS" class="page-content">
          <CreoModelAnalysis
            v-if="currentConnectedSoftware === 'creo'"
            @show-shell-analysis-result="handleShowShellAnalysisResult"
            @show-hierarchy-analysis-result="handleShowHierarchyAnalysisResult"
            @show-geometry-complexity-result="handleShowGeometryComplexityResult"
            @show-geometry-optimization-params="handleShowGeometryOptimizationParams"
          />
          <RevitAnalysisDashboard
            v-else-if="currentConnectedSoftware === 'revit'"
            :model-data="currentModelData"
            @page-change="handlePageChange"
          />
          <PdmsModelViewer
            v-else-if="currentConnectedSoftware === 'pdms'"
          />
          <CreoModelAnalysis
            v-else
            @show-shell-analysis-result="handleShowShellAnalysisResult"
            @show-hierarchy-analysis-result="handleShowHierarchyAnalysisResult"
            @show-geometry-complexity-result="handleShowGeometryComplexityResult"
            @show-geometry-optimization-params="handleShowGeometryOptimizationParams"
          />
        </div>

        <!-- 导出工具页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.EXPORT_TOOLS" class="page-content">
          <CreoExportTools v-if="currentConnectedSoftware === 'creo'" />
          <RevitExportTools v-else-if="currentConnectedSoftware === 'revit'" />
          <div v-else class="no-connection">请先连接CAD软件</div>
        </div>

        <!-- 格式转换页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.FORMAT_CONVERTER" class="page-content">
          <UniversalConverter />
        </div>

        <!-- 智能薄壳化分析结果页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.SHELL_ANALYSIS_RESULT" class="page-content">
          <ShellAnalysisResult :analysis-data="shellAnalysisData" />
        </div>

        <!-- 按层级删除优化分析结果页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.HIERARCHY_ANALYSIS_RESULT" class="page-content">
          <HierarchyAnalysisResult
            :analysis-data="hierarchyAnalysisData"
            @show-hierarchy-deletion-params="handleShowHierarchyDeletionParams"
          />
        </div>

        <!-- 层级删除参数设置页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.HIERARCHY_DELETION_PARAMS" class="page-content">
          <HierarchyDeletionParamsPage
            :hierarchy-data="hierarchyAnalysisData"
            @close="handleCloseHierarchyDeletionParams"
          />
        </div>

        <!-- 几何复杂度分析结果页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.GEOMETRY_COMPLEXITY_RESULT" class="page-content">
          <GeometryComplexityResult :analysis-data="geometryComplexityData" />
        </div>

        <!-- 几何优化分析参数设置页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.GEOMETRY_OPTIMIZATION_PARAMS" class="page-content">
          <GeometryOptimizationParams
            @close="handleBackToAnalysis"
            @start-optimization="handleGeometryOptimizationComplete"
          />
        </div>

        <!-- 几何优化分析结果页面 -->
        <div v-else-if="currentPage === PAGE_TYPES.GEOMETRY_OPTIMIZATION_RESULT" class="page-content">
          <GeometryOptimizationResult
            :result-data="geometryOptimizationResultData"
            @back-to-analysis="handleBackToAnalysis"
          />
        </div>

        <!-- 欢迎首页 -->
        <div v-else class="page-content">
          <div class="welcome-page">
            <!-- 项目描述 -->
            <div class="project-description">
              <p>
                MianyVue是一个专业的工业CAD模型管理平台，致力于为工程师和设计师提供统一的CAD软件集成解决方案。平台通过标准化的API接口连接主流CAD软件，实现跨平台的模型管理、分析和优化功能，显著提升工业设计和制造流程的效率与协作能力。
              </p>
            </div>

            <!-- 核心能力 -->
            <div class="feature-section">
              <h3 class="section-title">
                <i class="fas fa-cogs"></i>
                核心能力
              </h3>
              <div class="feature-list">
                <div class="feature-item">
                  <h4>
                    <i class="fas fa-desktop"></i>
                    多CAD软件统一管理
                  </h4>
                  <p>支持Creo、Revit、PDMS、AutoCAD、SolidWorks、CATIA等主流CAD软件，可根据需要扩展更多软件支持</p>
                </div>

                <div class="feature-item">
                  <h4>
                    <i class="fas fa-search"></i>
                    智能模型分析
                  </h4>
                  <p>提供层级结构分析、几何复杂度评估、薄壳分析等专业分析功能，帮助优化设计方案</p>
                </div>

                <div class="feature-item">
                  <h4>
                    <i class="fas fa-download"></i>
                    灵活导出支持
                  </h4>
                  <p>支持STEP、IGES、STL、IFC等多种工业标准格式，满足不同应用场景的数据交换需求</p>
                </div>

                <div class="feature-item">
                  <h4>
                    <i class="fas fa-heartbeat"></i>
                    实时状态监控
                  </h4>
                  <p>实时监控各CAD软件连接状态，确保系统稳定运行，提供详细的操作日志和性能指标</p>
                </div>
              </div>
            </div>

            <!-- 技术特色 -->
            <div class="tech-section">
              <h3 class="section-title">
                <i class="fas fa-rocket"></i>
                技术特色
              </h3>
              <div class="tech-description">
                <p>
                  基于Vue 3和现代Web技术构建，采用模块化架构设计，支持响应式界面和实时数据交互。平台遵循工业级安全标准，确保设计数据的安全性和可靠性。通过标准化API和微服务架构，实现高度的可扩展性和灵活的定制能力。
                </p>
              </div>
            </div>

            <!-- 使用引导 -->
            <div class="guide-section">
              <div class="guide-text">
                <i class="fas fa-hand-point-left"></i>
                请使用左侧导航菜单开始您的工作
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MainLayout>

  <!-- 右侧信息管理面板 -->
  <InfoManagementPanel
    :is-visible="showInfoPanel"
    @close="closeInfoPanel"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCADStore } from '@/stores/cad'
import { getDefaultServerConfig } from '@/config/cad'
import MainLayout from '@/components/layout/MainLayout.vue'
import AppHeader from '@/components/layout/AppHeader.vue'
import CadSidebar from '@/components/layout/CadSidebar.vue'
import BaseButton from '@/components/ui/BaseButton.vue'
import CreoModelViewer from '@/components/model/CreoModelViewer.vue'
import PdmsModelViewer from '@/components/model/PdmsModelViewer.vue'
import RevitModelViewer from '@/components/model/RevitModelViewer.vue'
import RevitAnalysisDashboard from '@/components/pages/RevitAnalysisDashboard.vue'
import CreoModelAnalysis from '@/components/pages/CreoModelAnalysis.vue'
import CreoExportTools from '@/components/pages/CreoExportTools.vue'
import RevitExportTools from '@/components/pages/RevitExportTools.vue'
import UniversalConverter from '@/components/pages/UniversalConverter.vue'
import ShellAnalysisResult from '@/components/pages/ShellAnalysisResult.vue'
import HierarchyAnalysisResult from '@/components/pages/HierarchyAnalysisResult.vue'
import HierarchyDeletionParamsPage from '@/components/pages/HierarchyDeletionParamsPage.vue'
import GeometryComplexityResult from '@/components/pages/GeometryComplexityResult.vue'
import GeometryOptimizationParams from '@/components/pages/GeometryOptimizationParams.vue'
import GeometryOptimizationResult from '@/components/pages/GeometryOptimizationResult.vue'
import InfoManagementPanel from '@/components/layout/InfoManagementPanel.vue'
import { PAGE_TYPES } from '@/config/pages'

const cadStore = useCADStore()

// 配置
const serverConfig = getDefaultServerConfig()

// 当前页面状态
const currentPage = ref(PAGE_TYPES.HOME)

// 计算当前连接的软件
const currentConnectedSoftware = computed(() => {
  return cadStore.currentCAD?.id || null
})

// 模型查看器状态
const showModelViewer = ref(false)
const currentModelData = ref(null)

// 分析结果数据存储
const shellAnalysisData = ref(null)
const hierarchyAnalysisData = ref(null)
const geometryComplexityData = ref(null)
const geometryOptimizationResultData = ref(null)

// 信息面板控制
const showInfoPanel = ref(false)

// 处理显示模型查看器
const handleShowModelViewer = (modelData) => {
  currentModelData.value = modelData
  showModelViewer.value = true
  currentPage.value = PAGE_TYPES.MODEL_VIEWER // 跳转到模型查看页面
}

// 处理页面切换
const handlePageChange = (page) => {
  currentPage.value = page
}

// 处理跳转到分析结果页面
const handleShowShellAnalysisResult = (analysisData) => {
  shellAnalysisData.value = analysisData
  currentPage.value = PAGE_TYPES.SHELL_ANALYSIS_RESULT
}

// 处理跳转到层级分析结果页面
const handleShowHierarchyAnalysisResult = (analysisData) => {
  hierarchyAnalysisData.value = analysisData
  currentPage.value = PAGE_TYPES.HIERARCHY_ANALYSIS_RESULT
}

// 处理跳转到几何复杂度分析结果页面
const handleShowGeometryComplexityResult = (data) => {
  geometryComplexityData.value = data
  currentPage.value = PAGE_TYPES.GEOMETRY_COMPLEXITY_RESULT
}

// 处理跳转到几何优化分析参数设置页面
const handleShowGeometryOptimizationParams = () => {
  currentPage.value = PAGE_TYPES.GEOMETRY_OPTIMIZATION_PARAMS
}

// 处理几何优化分析完成
const handleGeometryOptimizationComplete = (data) => {
  // 检查API调用是否成功
  if (data.result && data.result.success) {
    geometryOptimizationResultData.value = data.result
    currentPage.value = PAGE_TYPES.GEOMETRY_OPTIMIZATION_RESULT
  }
  // 如果失败，通知已经通过apiClient自动处理，无需额外操作
}

// 处理跳转到层级删除参数设置页面
const handleShowHierarchyDeletionParams = () => {
  currentPage.value = PAGE_TYPES.HIERARCHY_DELETION_PARAMS
}

// 处理关闭层级删除参数设置页面
const handleCloseHierarchyDeletionParams = () => {
  currentPage.value = PAGE_TYPES.HIERARCHY_ANALYSIS_RESULT
}

// 处理返回分析页面
const handleBackToAnalysis = () => {
  currentPage.value = PAGE_TYPES.ANALYSIS_TOOLS
}


// 按钮事件处理
const connectCAD = () => {
  // CAD连接逻辑
}

const openSettings = () => {
  // 设置界面逻辑
  currentPage.value = 'settings'
}

// 信息面板控制方法
const toggleInfoPanel = () => {
  showInfoPanel.value = !showInfoPanel.value
}

const closeInfoPanel = () => {
  showInfoPanel.value = false
}
</script>

<style scoped>
.content-wrapper {
  height: 100%;
  width: 100%;
}

.page-content {
  height: 100%;
  width: 100%;
}

.no-connection {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-secondary);
  font-size: 16px;
  text-align: center;
}

/* 连接页面样式 */
.connection-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 24px;
}

.status-display {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-white-rgb-1);
  border-radius: 8px;
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
}

.status-icon.disconnected {
  background: var(--color-error-rgb-1);
  color: var(--color-text-error);
  border: 1px solid var(--color-error-rgb-3);
}

.status-text h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

.status-text p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

/* 设置页面样式 */
.settings-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 24px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setting-item label {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.setting-input {
  padding: 10px 12px;
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-white-rgb-1);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 14px;
}

.setting-input:focus {
  outline: none;
  border-color: var(--color-border-active);
  box-shadow: 0 0 0 3px var(--color-primary-rgb);
}

.settings-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

/* 监控页面样式 */
.monitoring-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 24px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-white-rgb-1);
  border-radius: 8px;
}

.status-label {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.status-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.status-value.disconnected {
  color: var(--color-text-error);
}

/* 空页面样式 */
.empty-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: var(--color-text-tertiary);
  text-align: center;
}

.empty-page i {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-page h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: var(--color-text-secondary);
}

.empty-page p {
  font-size: 14px;
  margin: 0;
  color: var(--color-text-tertiary);
}

/* 按钮基础样式 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--color-white-rgb-2);
  border-radius: 6px;
  background: var(--color-white-rgb-05);
  color: var(--color-text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn:hover {
  background: var(--color-white-rgb-1);
  border-color: var(--color-white-rgb-3);
}

.btn-primary {
  background: var(--color-primary-gradient);
  border-color: transparent;
  color: var(--color-text-primary);
}

.btn-primary:hover {
  background: var(--color-primary-gradient-hover);
  box-shadow: 0 4px 15px var(--color-primary-rgb-3);
}

.btn-secondary {
  background: var(--color-white-rgb-1);
  border-color: var(--color-white-rgb-2);
  color: var(--color-text-secondary);
}

.btn-secondary:hover {
  background: var(--color-white-rgb-15);
  color: var(--color-text-primary);
}

/* 欢迎页面样式 */
.welcome-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 0;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.project-description {
  text-align: center;
  margin-bottom: 20px;
}

.project-description p {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin: 0;
  padding: 0 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 20px 0;
  border-bottom: 2px solid var(--color-primary-rgb);
  padding-bottom: 8px;
}

.section-title i {
  color: var(--color-primary);
  font-size: 20px;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.feature-item {
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-white-rgb-1);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: var(--color-white-rgb-1);
  border-color: var(--color-white-rgb-2);
  transform: translateY(-2px);
}

.feature-item h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

.feature-item h4 i {
  color: var(--color-primary);
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.feature-item p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.tech-description p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
  padding: 0 10px;
  text-align: justify;
}

.guide-section {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-white-rgb-1);
}

.guide-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--color-text-tertiary);
  background: var(--color-white-rgb-05);
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid var(--color-white-rgb-1);
}

.guide-text i {
  color: var(--color-primary);
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-page {
    padding: 15px;
    gap: 24px;
  }

  .feature-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-description p {
    font-size: 15px;
    padding: 0 10px;
  }

  .section-title {
    font-size: 16px;
  }

  .feature-item {
    padding: 16px;
  }
}
</style>