<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"
            data-strategy="envelope-optimization"
            @click="openEnvelopeOptimization"
          >
            <div class="strategy-icon">
              <i class="fas fa-compress-arrows-alt"></i>
            </div>
            <h5>模型轻量化处理</h5>
            <p>
              对Revit模型进行薄壳轻量化，保留主要外部轮廓，删除多余内部模型，显著减少文件体积。
            </p>
            <div class="features">
              <span>保留轮廓</span>
              <span>删除内部</span>
              <span>建筑专用</span>
              <span>模型减重</span>
            </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 && !optimizationResult" 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>
              构件分类分析
              <span class="selected-count" v-if="selectedCategories.length > 0">
                (已选择 {{ selectedCategories.length }} 个类别)
              </span>
            </h4>
            <div class="categories-table-container">
              <table class="revit-categories-table">
                <thead>
                  <tr>
                    <th class="checkbox-col">
                      <input
                        type="checkbox"
                        :checked="isAllCategoriesSelected"
                        @change="toggleSelectAllCategories"
                        title="全选/取消全选"
                      />
                    </th>
                    <th>构件类型</th>
                    <th>总数</th>
                    <th>保留</th>
                    <th>移除</th>
                    <th>保留率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="category in analysisResults.categories"
                    :key="category.categoryId || category.name"
                    :class="{ 'selected': isCategorySelected(category) }"
                  >
                    <td class="checkbox-col">
                      <input
                        type="checkbox"
                        :checked="isCategorySelected(category)"
                        @change="toggleCategorySelection(category)"
                      />
                    </td>
                    <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 class="categories-hint" v-if="selectedCategories.length === 0">
              <i class="fas fa-info-circle"></i>
              请勾选要删除的类别，然后点击"应用优化"按钮
            </div>
          </div>

          <div class="revit-analysis-actions">
            <button
              class="export-report-btn revit-analysis-btn primary"
              @click="exportReport"
              :disabled="isExporting"
              style="margin-right: auto;"
            >
              <i class="fas" :class="isExporting ? 'fa-spinner fa-spin' : 'fa-file-export'"></i>
              {{ isExporting ? '导出中...' : '导出报告' }}
            </button>

            <button
              class="revit-analysis-btn primary"
              @click="applyOptimization"
              :disabled="selectedCategories.length === 0 || isApplyingOptimization"
            >
              <i class="fas" :class="isApplyingOptimization ? 'fa-spinner fa-spin' : 'fa-check-circle'"></i>
              {{ isApplyingOptimization ? '正在应用...' : '应用优化' }}
            </button>

            <button class="revit-analysis-btn secondary" @click="restartAnalysis">
              <i class="fas fa-redo"></i>
              重新分析
            </button>
          </div>
        </div>

        <!-- 优化结果 -->
        <div v-if="optimizationResult" class="revit-analysis-results">
          <h3>
            <i class="fas fa-flag-checkered"></i>
            优化执行完成
          </h3>

          <div class="revit-results-overview">
            <div class="revit-result-metric success">
              <div class="metric-icon">
                <i class="fas fa-trash-alt"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ optimizationResult.removedCount || 0 }}</div>
                <div class="metric-label">删减构件总数</div>
              </div>
            </div>
            <div class="revit-result-metric highlight">
              <div class="metric-icon">
                <i class="fas fa-hdd"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ optimizationResult.originalSize || '未知' }}</div>
                <div class="metric-label">原始文件大小</div>
              </div>
            </div>
            <div class="revit-result-metric success">
              <div class="metric-icon">
                <i class="fas fa-compress-arrows-alt"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ optimizationResult.optimizedSize || '未知' }}</div>
                <div class="metric-label">优化后大小</div>
              </div>
            </div>
            <div class="revit-result-metric primary">
              <div class="metric-icon">
                <i class="fas fa-percentage"></i>
              </div>
              <div class="metric-content">
                <div class="metric-value">{{ optimizationResult.reduction || '0%' }}</div>
                <div class="metric-label">体积缩减率</div>
              </div>
            </div>
          </div>

          <div class="optimization-details" style="margin-top: 24px; padding: 20px; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-white-rgb-05) 100%); border-radius: 12px; border: 1px solid var(--color-border-primary);">
            <h4 style="margin-top: 0; color: var(--color-text-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
              <i class="fas fa-info-circle" style="color: var(--color-primary);"></i> 执行日志与备份信息
            </h4>
            <div style="color: var(--color-text-secondary); font-size: 0.95em; line-height: 1.8;">
              <div style="display: flex; gap: 10px; margin-bottom: 8px;">
                <span style="font-weight: 600; min-width: 80px;">原文件备份:</span>
                <span style="word-break: break-all; opacity: 0.9;">{{ optimizationResult.backupPath || '无备份信息' }}</span>
              </div>
              <div style="display: flex; gap: 10px;">
                <span style="font-weight: 600; min-width: 80px;">处理耗时:</span>
                <span style="opacity: 0.9;">{{ optimizationResult.processingTimeSeconds || 0 }} 秒</span>
              </div>
            </div>
          </div>

          <div class="revit-analysis-actions" style="margin-top: 32px;">
            <button class="revit-analysis-btn primary" @click="resetAnalysis">
              <i class="fas fa-home"></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 selectedCategories = ref([])
const isApplyingOptimization = ref(false)
const isExporting = ref(false)
const optimizationResult = ref(null)

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

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

const openEnvelopeOptimization = () => {
  emit('page-change', 'revit-envelope-optimization')
}

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

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

// 类别选择相关方法
const isCategorySelected = (category) => {
  const categoryId = category.categoryId || category.name
  return selectedCategories.value.includes(categoryId)
}

const toggleCategorySelection = (category) => {
  const categoryId = category.categoryId || category.name
  const index = selectedCategories.value.indexOf(categoryId)
  if (index === -1) {
    selectedCategories.value.push(categoryId)
  } else {
    selectedCategories.value.splice(index, 1)
  }
}

const toggleSelectAllCategories = () => {
  if (isAllCategoriesSelected.value) {
    selectedCategories.value = []
  } else {
    selectedCategories.value = analysisResults.value.categories.map(
      c => c.categoryId || c.name
    )
  }
}

const isAllCategoriesSelected = computed(() => {
  if (!analysisResults.value || !analysisResults.value.categories) return false
  return selectedCategories.value.length === analysisResults.value.categories.length
})

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
  optimizationResult.value = null
  selectedStrategy.value = 'intelligent'
  currentProgress.value = 0
  progressText.value = '初始化分析引擎...'
}

const applyOptimization = async () => {
  if (selectedCategories.value.length === 0) {
    ElNotification({
      title: '提示',
      message: '请至少选择一个要删除的类别',
      type: 'warning',
      position: 'top-right',
      duration: 2000
    })
    return
  }

  // 获取选中的类别 ID 列表
  const selectedCategoryIds = analysisResults.value.categories
    .filter(c => selectedCategories.value.includes(c.categoryId || c.name))
    .map(c => c.categoryId)
    .filter(id => id !== undefined && id !== null)

  if (selectedCategoryIds.length === 0) {
    ElNotification({
      title: '错误',
      message: '无法获取选中类别的 ID',
      type: 'error',
      position: 'top-right',
      duration: 3000
    })
    return
  }

  // 确认对话框
  const confirmMessage = `确定要删除以下 ${selectedCategories.value.length} 个类别的构件吗？\n\n${selectedCategories.value.join(', ')}`

  if (!confirm(confirmMessage)) {
    return
  }

  isApplyingOptimization.value = true

  try {
    const result = await revitApi.executeCustomDelete(selectedCategoryIds, true)

    if (result.success || result.code === 200) {
      ElNotification({
        title: '应用优化成功',
        message: `已成功删除 ${selectedCategories.value.length} 个类别的构件`,
        type: 'success',
        position: 'top-right',
        duration: 3000
      })
      
      // 更新优化结果UI数据 (解析后端返回结构 result.data.data)
      optimizationResult.value = result.data?.data || result.data || result
      // 清空选择
      selectedCategories.value = []
    } else {
      throw new Error(result.message || '优化执行失败')
    }
  } catch (error) {
    console.error('应用优化失败:', error)
  } finally {
    isApplyingOptimization.value = false
  }
}

const restartAnalysis = () => {
  resetAnalysis()
  selectedCategories.value = []
  startAnalysis()
}

const exportReport = () => {
  if (isExporting.value || !analysisResults.value) return
  isExporting.value = true

  try {
    const reportDate = new Date().toLocaleString('zh-CN')
    let tableRows = ''
    
    analysisResults.value.categories.forEach(category => {
      tableRows += `
        <tr>
          <td>
            <strong>${category.name}</strong>
          </td>
          <td>${category.total}</td>
          <td style="color:#2ecc71">${category.keep}</td>
          <td style="color:#e74c3c">${category.remove}</td>
          <td><strong>${category.keepPercentage}</strong></td>
        </tr>
      `
    })

    const htmlContent = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Revit智能化分析结果报告</title>
  <style>
    :root {
      --primary-color: #4361ee;
      --success-color: #2ecc71;
      --warning-color: #f39c12;
      --danger-color: #e74c3c;
      --text-main: #2b2b2b;
      --text-light: #7f8c8d;
      --bg-color: #f8f9fa;
      --card-bg: #ffffff;
      --border-color: #e9ecef;
    }
    body {
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
      background-color: var(--bg-color);
      color: var(--text-main);
      margin: 0;
      padding: 40px 20px;
    }
    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: var(--card-bg);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    .header {
      background: linear-gradient(135deg, #4361ee, #3a0ca3);
      color: white;
      padding: 40px;
      text-align: center;
    }
    .header h1 {
      margin: 0 0 10px 0;
      font-size: 32px;
    }
    .content { padding: 40px; }
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
    }
    .summary-card {
      background: #f8f9fc;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 24px;
      text-align: center;
    }
    .summary-value {
      font-size: 36px;
      font-weight: 700;
      color: var(--primary-color);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      padding: 16px;
      text-align: left;
      border-bottom: 1px solid var(--border-color);
    }
    th { background-color: #f1f3f5; }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Revit智能化分析结果报告</h1>
      <p>生成时间: ${reportDate}</p>
    </div>
    <div class="content">
      <div class="summary-grid">
        <div class="summary-card">
          <div class="summary-value">${analysisResults.value.analysis.totalElements}</div>
          <div class="summary-label">总构件数</div>
        </div>
        <div class="summary-card">
          <div class="summary-value" style="color:var(--success-color);">${analysisResults.value.analysis.keepElements}</div>
          <div class="summary-label">保留构件</div>
        </div>
        <div class="summary-card">
          <div class="summary-value" style="color:var(--danger-color);">${analysisResults.value.analysis.removeElements}</div>
          <div class="summary-label">移除构件</div>
        </div>
        <div class="summary-card">
          <div class="summary-value">${analysisResults.value.analysis.estimatedReduction}</div>
          <div class="summary-label">预计缩减</div>
        </div>
      </div>
      <h2>构件分类详细数据</h2>
      <table>
        <thead>
          <tr>
            <th>构件类型</th>
            <th>总数</th>
            <th>保留</th>
            <th>移除</th>
            <th>保留率</th>
          </tr>
        </thead>
        <tbody>${tableRows}</tbody>
      </table>
    </div>
  </div>
</body>
</html>`

    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `Revit智能化分析结果报告_${new Date().getTime()}.html`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
    
    ElNotification({
      title: '报告导出成功',
      type: 'success',
      duration: 2000
    })
  } catch (error) {
    console.error('导出报告失败:', error)
  } finally {
    isExporting.value = false
  }
}
</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;
}

.export-report-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

.export-report-btn:hover:not(:disabled) {
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6) !important;
}

.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;
}

.selected-count {
  font-size: 0.75em;
  color: var(--color-primary);
  background: var(--color-primary-rgb);
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.categories-hint {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--color-info-rgb-1);
  border: 1px solid var(--color-info-rgb-2);
  border-radius: 8px;
  color: var(--color-info);
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.categories-hint i {
  font-size: 1.1em;
}

.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 .checkbox-col {
  width: 50px;
  text-align: center;
}

.revit-categories-table .checkbox-col input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.revit-categories-table tbody tr.selected {
  background: var(--color-primary-rgb-2);
}

.revit-categories-table tbody tr.selected:hover {
  background: var(--color-primary-rgb-3);
}

.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>