<template>
  <div class="daily-active-users-chart">
    <div class="chart-header">
      <h3 class="chart-title">{{ $t('dashboard.dailyActive') }}</h3>
      <div class="chart-controls">
      <a-select v-model:value="selectedYear" @change="loadChartData" :placeholder="$t('dashboard.selectYear')" style="width: 120px">
          <a-select-option
            v-for="year in availableYears"
            :key="year"
            :value="year">
            {{ `${year}${$t('dashboard.yearSuffix')}` }}
          </a-select-option>
        </a-select>
      </div>
    </div>
    
    <div class="chart-container" ref="chartContainer"></div>
    
    <div class="chart-footer">
      <div class="chart-stats">
        <div class="stat-item">
          <span class="stat-label">{{ $t('dashboard.todayDAU') }}:</span>
          <span class="stat-value">{{ formatNumber(todayDAU) }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">{{ $t('dashboard.dayGrowthRate') }}:</span>
          <span class="stat-value" :class="dayGrowthRate >= 0 ? 'positive' : 'negative'">
            {{ dayGrowthRate >= 0 ? '+' : '' }}{{ dayGrowthRate.toFixed(1) }}%
          </span>
        </div>
        <div class="stat-item">
          <span class="stat-label">{{ $t('dashboard.monthlyAvgDAU') }}:</span>
          <span class="stat-value">{{ formatNumber(monthlyAvgDAU) }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">{{ $t('dashboard.monthGrowthRate') }}:</span>
          <span class="stat-value" :class="monthGrowthRate >= 0 ? 'positive' : 'negative'">
            {{ monthGrowthRate >= 0 ? '+' : '' }}{{ monthGrowthRate.toFixed(1) }}%
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue'
import * as analyticsAPI from '@/api/analytics'

const { t } = useI18n()

// 响应式数据
const chartContainer = ref(null)
const selectedYear = ref(2024)
const availableYears = ref([2023, 2024, 2025])
const chartInstance = ref(null)

// 统计数据
const todayDAU = ref(0)
const dayGrowthRate = ref(0)
const monthlyAvgDAU = ref(0)
const monthGrowthRate = ref(0)

// 动态加载ECharts
const loadECharts = () => {
  return new Promise((resolve, reject) => {
    if (window.echarts) {
      resolve(window.echarts)
      return
    }
    
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'
    script.onload = () => resolve(window.echarts)
    script.onerror = reject
    document.head.appendChild(script)
  })
}

// 加载图表数据
const loadChartData = async () => {
  try {
    // 并行加载图表数据和概览数据
    const [chartRes, overviewRes] = await Promise.all([
      analyticsAPI.getDailyActiveUsersTrend(selectedYear.value, 'monthly'),
      analyticsAPI.getUserActivityOverview()
    ])
    
    // 处理图表数据（axios 响应需要从 .data 中取）
    const chartData = chartRes?.data?.data || chartRes?.data || chartRes
    if (chartData && chartData.monthlyData) {
      await nextTick()
      initChart(chartData.monthlyData)
    }
    
    // 处理概览数据（axios 响应需要从 .data 中取）
    const overviewData = overviewRes?.data?.data || overviewRes?.data || overviewRes
    if (overviewData) {
      todayDAU.value = overviewData.todayDAU || 0
      dayGrowthRate.value = overviewData.dayGrowthRate || 0
      monthlyAvgDAU.value = overviewData.monthlyAvgDAU || 0
      monthGrowthRate.value = overviewData.monthGrowthRate || 0
    }
    
  } catch (error) {
    console.error('加载图表数据失败:', error)
    message.error(t('common.chartDataLoadFailed'))
  }
}

// 初始化图表
const initChart = async (data) => {
  try {
    const echarts = await loadECharts()
    
    if (!chartContainer.value) return
    
    // 销毁现有图表实例
    if (chartInstance.value) {
      chartInstance.value.dispose()
    }
    
    // 创建新图表实例
    chartInstance.value = echarts.init(chartContainer.value)
    
    // 准备数据
    const months = [t('dashboard.month1'), t('dashboard.month2'), t('dashboard.month3'), t('dashboard.month4'), t('dashboard.month5'), t('dashboard.month6'), t('dashboard.month7'), t('dashboard.month8'), t('dashboard.month9'), t('dashboard.month10'), t('dashboard.month11'), t('dashboard.month12')]
    const values = data.map(item => item.avgDailyActive || 0)
    const maxValues = data.map(item => item.maxDailyActive || 0)
    const minValues = data.map(item => item.minDailyActive || 0)
    
    // 图表配置
    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.96)',
        borderColor: '#E5E7EB',
        borderWidth: 1,
        textStyle: {
          color: '#1F2937',
          fontSize: 12
        },
        extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);',
        formatter: function(params) {
          const dataIndex = params[0].dataIndex
          const month = months[dataIndex]
          const avgValue = values[dataIndex]
          const maxValue = maxValues[dataIndex]
          const minValue = minValues[dataIndex]
          
          return `${month}<br/>
                  ${t('chartLabels.avgDailyActive')}: ${formatNumber(avgValue)}<br/>
                  ${t('chartLabels.maxDailyActive')}: ${formatNumber(maxValue)}<br/>
                  ${t('chartLabels.minDailyActive')}: ${formatNumber(minValue)}`
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: months,
        axisLine: {
          lineStyle: {
            color: '#e0e0e0'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          formatter: function(value) {
            return formatNumber(value)
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: t('chartLabels.dailyActiveUsers'),
          type: 'line',
          data: values,
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#3b82f6',
            width: 3
          },
          itemStyle: {
            color: '#3b82f6',
            borderColor: '#fff',
            borderWidth: 2
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(59, 130, 246, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(59, 130, 246, 0.05)'
                }
              ]
            }
          },
          emphasis: {
            focus: 'series',
            itemStyle: {
              color: '#1d4ed8',
              borderColor: '#fff',
              borderWidth: 3,
              shadowBlur: 10,
              shadowColor: 'rgba(59, 130, 246, 0.5)'
            }
          }
        }
      ],
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicOut'
    }
    
    // 设置图表配置
    chartInstance.value.setOption(option)
    
    // 响应式调整
    window.addEventListener('resize', handleResize)
    
  } catch (error) {
    console.error('初始化图表失败:', error)
    message.error(t('common.chartInitFailed'))
  }
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance.value) {
    chartInstance.value.resize()
  }
}

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return Math.round(num).toLocaleString()
}

// 组件挂载时加载数据
onMounted(() => {
  loadChartData()
})

// 组件卸载时清理
onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose()
    chartInstance.value = null
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.daily-active-users-chart {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-container {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}

.chart-footer {
  border-top: 1px solid #f3f4f6;
  padding-top: 16px;
}

.chart-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.stat-value.positive {
  color: #059669;
}

.stat-value.negative {
  color: #dc2626;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .chart-container {
    height: 250px;
  }
  
  .chart-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .daily-active-users-chart {
    padding: 16px;
  }
  
  .chart-container {
    height: 200px;
  }
  
  .chart-stats {
    grid-template-columns: 1fr;
  }
}
</style>
