<template>
  <div class="dashboard-container" :class="'theme-' + theme">
    <div v-if="loading" class="chart-wrapper">加载中...</div>
    <div v-else>
      <panel-group 
        :panel-data="panelData"
        @handleSetLineChartData="handleSetLineChartData" 
      />

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <pie-chart :chart-data="pieChartData" :legend-data="pieChartLegend" :theme="theme" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <bar-chart :chart-data="barChartData" :theme="theme" />
          </div>
        </el-col>
      </el-row>

      <el-row class="map-chart-wrapper">
        <map-chart :chart-data="mapChartData" :theme="theme" />
      </el-row>
      <div v-if="error" class="chart-wrapper">{{ error }}</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import MapChart from './components/MapChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import { getDashboardStats } from '@/api/dashboard'

export default {
  name: 'Dashboard',
  components: {
    PanelGroup,
    MapChart,
    PieChart,
    BarChart
  },
  computed: {
    ...mapGetters([
      'theme'
    ])
  },
  data() {
    return {
      loading: true,
      error: '',
      mapChartData: [],
      lineChartData: {
        expectedData: [],
        actualData: [],
        xAxis: []
      },
      allLineChartData: {}, // Store all fetched line chart data
      panelData: {
        students: 0,
        organizations: 0,
        projects: 0,
        coupons: 0,
        projects_active: 0,
        banners_active: 0,
        showcases_active: 0
      },
      pieChartData: [],
      pieChartLegend: [],
      barChartData: {
        title: '机构学员',
        names: [],
        counts: []
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      this.error = ''
      getDashboardStats().then(response => {
        const data = response.data
        this.panelData = data.panel_data
        this.allLineChartData = data.line_chart_data
        // Default to organizations line chart
        this.lineChartData = this.allLineChartData.organizations || this.allLineChartData.students
        this.mapChartData = data.map_chart_data
        this.pieChartData = data.pie_chart_data
        this.pieChartLegend = data.pie_chart_legend
        this.barChartData = data.bar_chart_data
        this.loading = false
      }).catch(error => {
        console.error('Failed to fetch dashboard stats:', error)
        this.error = '数据加载失败，请稍后重试'
        this.loading = false
      })
    },
    handleSetLineChartData(type) {
      if (this.allLineChartData[type]) {
        this.lineChartData = this.allLineChartData[type]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;

  &.theme-dark {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }
  
  &.theme-orange {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  }

  &.theme-light {
    background: #f0f2f5;
  }

  /* Subtle animated background elements could be added here if needed, but gradient is good for now */
  
  .chart-wrapper {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-5px);
      box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
      border-color: rgba(255, 255, 255, 0.2);
    }
  }

  .map-chart-wrapper {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.3s ease;
  }

  /* Theme Overrides for Light Theme */
  &.theme-light {
    .chart-wrapper, .map-chart-wrapper {
      background: #fff;
      border: 1px solid #e6ebf5;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      backdrop-filter: none;

      &:hover {
        background: #fff;
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        border-color: #dcdfe6;
      }
    }
  }

  /* Theme Overrides for Orange Theme (optional, if we want glass effect to be different) */
  &.theme-orange {
    .chart-wrapper, .map-chart-wrapper {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
      
      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
