<template>
  <div class="evolution-container">
    <a-tabs v-model:activeKey="activeTab" class="evolution-tabs">
      <a-tab-pane key="overview" tab="概览+指标">
        <DashboardOverview />
      </a-tab-pane>
      <a-tab-pane key="experiences" tab="经验+坑点">
        <div class="evolution-panels">
          <ExperienceTimeline :experiences="store.experiences" />
          <PitfallPanel :warnings="store.pitfalls" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="usage" tab="用量">
        <UsagePanel />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useEvolutionStore } from '@/stores/evolution'
import DashboardOverview from '@/components/evolution/DashboardOverview.vue'
import ExperienceTimeline from '@/components/evolution/ExperienceTimeline.vue'
import PitfallPanel from '@/components/evolution/PitfallPanel.vue'
import UsagePanel from '@/components/evolution/UsagePanel.vue'

const store = useEvolutionStore()
const activeTab = ref('overview')

onMounted(() => {
  store.loadExperiences()
  store.loadMetrics()
  store.loadOptimizations()
  store.connectWebSocket()
})

onUnmounted(() => {
  store.disconnectWebSocket()
})
</script>

<style scoped>
.evolution-container {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-primary);
}

.evolution-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Make Ant Design Vue tabs fill available height */
.evolution-tabs :deep(.ant-tabs-content-holder) {
  flex: 1;
  min-height: 0;
}

.evolution-tabs :deep(.ant-tabs-content) {
  height: 100%;
}

.evolution-tabs :deep(.ant-tabs-tabpane) {
  height: 100%;
}

.evolution-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
</style>
