<template>
  <div class="revit-analysis-dashboard revit-theme">
    <!-- 如果没有模型，显示欢迎界面 -->
    <div v-if="!hasModel" class="revit-analysis-welcome revit-theme">
      <div class="welcome-icon">
        <i class="fas fa-building"></i>
      </div>
      <h2>Revit 建筑分析中心</h2>
      <p>专业的BIM模型性能优化工具，提供建筑构件智能分析、模型轻量化处理和施工图优化建议。请先打开一个Revit项目以开始分析。</p>
      <div class="welcome-actions">
        <button class="welcome-btn" @click="openProject">
          <i class="fas fa-folder-open"></i>
          打开项目
        </button>
        <button class="welcome-btn" @click="refreshConnection">
          <i class="fas fa-sync-alt"></i>
          刷新连接
        </button>
      </div>
    </div>

    <!-- 如果有模型，显示分析仪表板 -->
    <div v-else>
      <div class="revit-analysis-header">
        <h3>
          <i class="fas fa-building"></i>
          Revit 建筑分析
        </h3>
        <p class="subtitle">{{ modelData?.project?.name || 'Revit测试模型.rvt' }}</p>
      </div>

      <div class="revit-strategy-selector">
        <h4>
          <i class="fas fa-cogs"></i>
          分析策略选择
        </h4>
        <div class="revit-strategy-grid">
          <div
            class="revit-strategy-card"
            :class="{ selected: selectedStrategy === 'intelligent' }"
            data-strategy="intelligent"
            @click="selectStrategy('intelligent')"
          >
            <div class="strategy-icon">
              <i class="fas fa-brain"></i>
            </div>
            <h5>智能化分析</h5>
            <p>
              基于AI算法的自动化建筑构件分析，智能识别可优化的模型元素，提供最佳的轻量化建议。
            </p>
            <div class="features">
              <span>自动识别</span>
              <span>构件分析</span>
              <span>薄壳优化</span>
              <span>性能评估</span>
            </div>
          </div>

          <div
            class="revit-strategy-card disabled"
            data-strategy="custom"
          >
            <div class="strategy-icon">
              <i class="fas fa-sliders-h"></i>
            </div>
            <h5>自定义分析</h5>
            <p>
              根据项目特点自定义分析参数，手动选择需要优化的建筑构件类型和优化级别。
            </p>
            <div class="features">
              <span>参数调节</span>
              <span>构件选择</span>
              <span>精细控制</span>
              <span>专业定制</span>
            </div>
            <div class="status-badge">开发中</div>
          </div>
        </div>

        <div class="revit-analysis-actions">
          <button class="revit-analysis-btn primary" @click="startAnalysis" :disabled="!selectedStrategy || isAnalyzing">
            <i class="fas fa-play"></i>
            开始分析
          </button>
          <button class="revit-analysis-btn secondary" @click="resetAnalysis">
            <i class="fas fa-undo"></i>
            重置
          </button>
        </div>
      </div>

      <!-- 分析结果容器 -->
      <div id="revit-analysis-results-container">
        <!-- 分析进度 -->
        <div v-if="isAnalyzing" class="revit-analysis-progress">
          <h3>
            <i class="fas fa-cog fa-spin"></i>
            正在进行Revit建筑分析...
          </h3>
          <div class="revit-progress-bar">
            <div class="revit-progress-fill" :style="{ width: currentProgress + '%' }"></div>
          </div>
          <div class="revit-progress-text">{{ progressText }}</div>
          <div class="revit-progress-percentage">{{ currentProgress }}%</div>
        </div>

        <!-- 分析结果 -->
        <div v-if="analysisResults" class="revit-analysis-results">
          <h3>
            <i class="fas fa-chart-line"></i>
            Revit分析结果
          </h3>

          <div class="revit-results-overview">
            <div class="revit-result-metric highlight">
              <div class="metric-icon">
                <i class="fas fa-cubes"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ analysisResults.analysis.totalElements }}</div>
                <div class="metric-label">总构件数</div>
              </div>
            </div>
            <div class="revit-result-metric success">
              <div class="metric-icon">
                <i class="fas fa-check"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ analysisResults.analysis.keepElements }}</div>
                <div class="metric-label">保留构件</div>
              </div>
            </div>
            <div class="revit-result-metric warning">
              <div class="metric-icon">
                <i class="fas fa-minus"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ analysisResults.analysis.removeElements }}</div>
                <div class="metric-label">移除构件</div>
              </div>
            </div>
            <div class="revit-result-metric primary">
              <div class="metric-icon">
                <i class="fas fa-compress-arrows-alt"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ analysisResults.analysis.estimatedReduction }}</div>
                <div class="metric-label">预计缩减</div>
              </div>
            </div>
          </div>

          <div class="revit-categories-analysis">
            <h4>
              <i class="fas fa-layer-group"></i>
              构件分类分析
            </h4>
            <div class="categories-table-container">
              <table class="revit-categories-table">
                <thead>
                  <tr>
                    <th>构件类型</th>
                    <th>总数</th>
                    <th>保留</th>
                    <th>移除</th>
                    <th>保留率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="category in analysisResults.categories" :key="category.name">
                    <td class="category-name">
                      <i class="fas fa-cube"></i>
                      {{ category.name }}
                    </td>
                    <td class="category-total">{{ category.total }}</td>
                    <td class="category-keep">{{ category.keep }}</td>
                    <td class="category-remove">{{ category.remove }}</td>
                    <td class="category-percentage">
                      <span class="percentage-badge">{{ category.keepPercentage }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="revit-analysis-actions">
            <button class="revit-analysis-btn primary" @click="applyOptimization">
              <i class="fas fa-check-circle"></i>
              应用优化
            </button>
            <button class="revit-analysis-btn secondary" @click="exportResults">
              <i class="fas fa-download"></i>
              导出报告
            </button>
            <button class="revit-analysis-btn secondary" @click="restartAnalysis">
              <i class="fas fa-redo"></i>
              重新分析
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElNotification } from 'element-plus'
import revitApi from '@/services/revitApi'

const props = defineProps({
  modelData: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['page-change'])

// 状态变量
const selectedStrategy = ref('intelligent')
const isAnalyzing = ref(false)
const currentProgress = ref(0)
const progressText = ref('初始化分析引擎...')
const analysisResults = ref(null)

// 计算属性
const hasModel = computed(() => {
  return props.modelData && props.modelData.project
})

// 方法
const openProject = () => {
  emit('page-change', 'connection')
}

const refreshConnection = () => {
  ElNotification({
    title: '刷新连接',
    message: '连接状态已刷新',
    type: 'info',
    position: 'top-right',
    duration: 2000
  })
}

const selectStrategy = (strategy) => {
  selectedStrategy.value = strategy
}

const startAnalysis = async () => {
  if (!selectedStrategy.value) {
    ElNotification({
      title: '提示',
      message: '请先选择分析策略',
      type: 'warning',
      position: 'top-right',
      duration: 2000
    })
    return
  }

  isAnalyzing.value = true
  currentProgress.value = 0
  analysisResults.value = null
  progressText.value = '正在连接Revit服务...'

  try {
    // 调用真实API
    currentProgress.value = 30
    progressText.value = '正在进行薄壳化分析...'

    const result = await revitApi.startShellAnalysis()

    currentProgress.value = 100
    progressText.value = '分析完成'

    if (result.success) {
      analysisResults.value = result.data.data
    }
  } catch {
    // 分析失败，错误已由API层统一处理
  } finally {
    isAnalyzing.value = false
  }
}

const resetAnalysis = () => {
  isAnalyzing.value = false
  analysisResults.value = null
  selectedStrategy.value = 'intelligent'
  currentProgress.value = 0
  progressText.value = '初始化分析引擎...'
}

const applyOptimization = () => {
  ElNotification({
    title: '应用优化',
    message: '优化方案已应用（模拟）',
    type: 'success',
    position: 'top-right',
    duration: 2000
  })
}

const exportResults = () => {
  ElNotification({
    title: '导出报告',
    message: '分析报告已导出（模拟）',
    type: 'success',
    position: 'top-right',
    duration: 2000
  })
}

const restartAnalysis = () => {
  resetAnalysis()
  startAnalysis()
}
</script>

<style scoped>
/* Revit分析专用样式 */
.revit-analysis-welcome {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: var(--color-shadow-revit);
  animation: slideInUp 0.4s ease-out;
}

.welcome-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  box-shadow: 0 8px 32px var(--color-primary-rgb);
}

.welcome-icon i {
  font-size: 32px;
  color: white;
}

.revit-analysis-welcome h2 {
  color: var(--color-primary);
  font-size: 1.6em;
  font-weight: 600;
  margin: 0 0 16px 0;
}

.revit-analysis-welcome p {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.welcome-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.welcome-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-primary-gradient);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--color-primary-rgb);
}

.welcome-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-primary-rgb-4);
}

.revit-analysis-dashboard {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(20px);
  box-shadow: var(--color-shadow-revit);
  animation: slideInUp 0.4s ease-out;
}

.revit-analysis-header {
  text-align: center;
  margin-bottom: 32px;
}

.revit-analysis-header h3 {
  color: var(--color-primary);
  font-size: 1.6em;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.revit-analysis-header .subtitle {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin: 0;
}

.revit-strategy-selector {
  margin-bottom: 32px;
}

.revit-strategy-selector h4 {
  color: var(--color-text-primary);
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.revit-strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.revit-strategy-card {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-white-rgb-05) 100%);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  backdrop-filter: blur(10px);
  text-align: center;
}

.revit-strategy-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 8px 25px var(--color-primary-rgb-3);
}

.revit-strategy-card.selected {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary-rgb) 0%, var(--color-primary-rgb-3) 100%);
  box-shadow: 0 8px 25px var(--color-primary-rgb-3);
}

.revit-strategy-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--color-text-disabled);
}

.revit-strategy-card.disabled:hover {
  transform: none;
  border-color: var(--color-text-disabled);
  box-shadow: none;
}

.strategy-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 4px 15px var(--color-primary-rgb-2);
}

.strategy-icon i {
  font-size: 24px;
  color: white;
}

.revit-strategy-card h5 {
  color: var(--color-text-primary);
  font-size: 1.2em;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.revit-strategy-card p {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-warning);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7em;
  font-weight: 600;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.features span {
  background: var(--color-primary-rgb);
  color: var(--color-primary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75em;
  font-weight: 500;
}

.revit-analysis-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.revit-analysis-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}

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

.revit-analysis-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-primary-rgb-4);
}

.revit-analysis-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.revit-analysis-btn.secondary {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-white-rgb-05) 100%);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
}

.revit-analysis-btn.secondary:hover {
  background: linear-gradient(135deg, var(--color-white-rgb-1) 0%, var(--color-white-rgb-05) 100%);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* 分析进度样式 */
.revit-analysis-progress {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  backdrop-filter: blur(20px);
  box-shadow: var(--color-shadow-revit);
  animation: slideInUp 0.4s ease-out;
  margin-bottom: 24px;
}

.revit-analysis-progress h3 {
  color: var(--color-primary);
  font-size: 1.4em;
  font-weight: 600;
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.revit-progress-bar {
  background: var(--color-white-rgb-1);
  border-radius: 12px;
  height: 12px;
  margin: 24px 0;
  overflow: hidden;
  position: relative;
}

.revit-progress-fill {
  background: var(--color-primary-gradient);
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease;
  position: relative;
}

.revit-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, var(--color-white-rgb-3), transparent);
  animation: progressShine 2s infinite;
}

.revit-progress-text {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  margin-bottom: 8px;
}

.revit-progress-percentage {
  color: var(--color-primary);
  font-size: 1.2em;
  font-weight: 600;
}

/* 分析结果样式 */
.revit-analysis-results {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(20px);
  box-shadow: var(--color-shadow-revit);
  animation: slideInUp 0.4s ease-out;
}

.revit-analysis-results h3 {
  color: var(--color-primary);
  font-size: 1.6em;
  font-weight: 600;
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
  justify-content: center;
}

.revit-results-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.revit-result-metric {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-white-rgb-05) 100%);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.revit-result-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--color-shadow-revit-light);
}

.revit-result-metric.highlight {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary-rgb) 0%, rgba(var(--color-primary-dark-base), 0.1) 100%);
}

.revit-result-metric.success {
  border-color: var(--color-success);
  background: var(--color-gradient-success);
}

.revit-result-metric.warning {
  border-color: var(--color-warning);
  background: var(--color-gradient-warning);
}

.revit-result-metric.primary {
  border-color: var(--color-info);
  background: var(--color-gradient-info);
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-gradient);
  box-shadow: 0 4px 15px var(--color-primary-rgb-2);
}

.revit-result-metric.success .metric-icon {
  background: var(--color-success);
}

.revit-result-metric.warning .metric-icon {
  background: var(--color-warning);
}

.revit-result-metric.primary .metric-icon {
  background: var(--color-info);
}

.metric-icon i {
  font-size: 20px;
  color: white;
}

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 2em;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.metric-label {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  font-weight: 500;
}

.revit-categories-analysis {
  margin-bottom: 32px;
}

.revit-categories-analysis h4 {
  color: var(--color-text-primary);
  font-size: 1.3em;
  font-weight: 600;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.categories-table-container {
  background: var(--color-white-rgb-05);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border-primary);
}

.revit-categories-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.revit-categories-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, rgba(var(--color-primary-base), 0.8) 100%);
}

.revit-categories-table thead th {
  color: white;
  font-weight: 600;
  padding: 16px 12px;
  text-align: left;
  border: none;
}

.revit-categories-table tbody tr {
  border-bottom: 1px solid var(--color-border-primary);
  transition: background-color 0.2s ease;
}

.revit-categories-table tbody tr:hover {
  background: var(--color-white-rgb-05);
}

.revit-categories-table tbody tr:last-child {
  border-bottom: none;
}

.revit-categories-table td {
  padding: 14px 12px;
  color: var(--color-text-primary);
  border: none;
  vertical-align: middle;
}

.category-name {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-name i {
  color: var(--color-primary);
  font-size: 0.9em;
}

.category-total,
.category-keep,
.category-remove {
  text-align: center;
  font-weight: 600;
}

.category-keep {
  color: var(--color-success);
}

.category-remove {
  color: var(--color-warning);
}

.percentage-badge {
  background: var(--color-success);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: 600;
  box-shadow: var(--color-success-shadow);
}

/* 动画效果 */
@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .revit-results-overview {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }

  .revit-result-metric {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .revit-analysis-actions {
    flex-direction: column;
    align-items: center;
  }

  .revit-analysis-btn {
    width: 100%;
    max-width: 280px;
  }
}
</style>