<template>
  <div class="evolution-view">
    <div class="evolution-view__header">
      <h2>自进化仪表盘</h2>
      <a-spin v-if="store.isLoading" size="small" />
    </div>
    <div class="evolution-view__grid">
      <div class="evolution-view__panel">
        <ExperienceTimeline
          :experiences="store.experiences"
          @filter="onExperienceFilter"
        />
      </div>
      <div class="evolution-view__panel">
        <MetricsChart
          :metrics="store.metrics"
          :trends="store.trends"
          :period="store.period"
          @period-change="onPeriodChange"
        />
      </div>
      <div class="evolution-view__panel">
        <PitfallPanel
          :warnings="store.pitfalls"
          :loading="store.isLoading"
          @check="onPitfallCheck"
        />
      </div>
      <div class="evolution-view__panel">
        <PathOptimizerPanel
          :optimizations="store.optimizations"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { Spin as ASpin } from 'ant-design-vue'
import { useEvolutionStore } from '@/stores/evolution'
import ExperienceTimeline from '@/components/evolution/ExperienceTimeline.vue'
import MetricsChart from '@/components/evolution/MetricsChart.vue'
import PitfallPanel from '@/components/evolution/PitfallPanel.vue'
import PathOptimizerPanel from '@/components/evolution/PathOptimizerPanel.vue'

const store = useEvolutionStore()

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

function onExperienceFilter(outcome: string) {
  store.loadExperiences(outcome ? undefined : undefined)
}

function onPeriodChange(period: string) {
  store.loadMetrics(period)
}

function onPitfallCheck(taskType: string) {
  store.checkPitfalls(taskType, [])
}
</script>

<style scoped>
.evolution-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
}

.evolution-view__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.evolution-view__header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.evolution-view__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-height: 0;
}

.evolution-view__panel {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
