<template>
  <div class="dashboard">
    <!-- 页面标题和刷新按钮 -->
    <div class="page-header">
      <h2>数据看板</h2>
      <el-button 
        type="primary" 
        :icon="Refresh" 
        :loading="refreshing"
        @click="handleRefresh"
      >
        刷新数据
      </el-button>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="stat in stats" :key="stat.label">
        <div class="stat-icon" :class="stat.iconClass">
          <el-icon><component :is="stat.icon" /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区 -->
    <div class="content-grid">
      <!-- 平台账号状态 -->
      <div class="content-card">
        <div class="card-header">
          <h3>平台账号状态</h3>
          <el-button type="primary" link @click="handleNavigate('/accounts')">
            管理账号
          </el-button>
        </div>
        <div class="account-list">
          <div v-if="accounts.length === 0" class="empty-state">
            <el-empty description="暂无账号" :image-size="80">
              <el-button type="primary" @click="handleNavigate('/accounts')">
                添加账号
              </el-button>
            </el-empty>
          </div>
          <div v-else v-for="account in accounts" :key="account.id" class="account-item">
            <el-avatar :size="44" :src="account.avatarUrl || undefined">
              {{ account.accountName?.[0] }}
            </el-avatar>
            <div class="account-info">
              <div class="account-name">{{ account.accountName }}</div>
              <div class="account-platform">{{ getPlatformName(account.platform) }}</div>
            </div>
            <el-tag
              :type="account.status === 'active' ? 'success' : 'danger'"
              size="small"
              effect="light"
              round
            >
              {{ account.status === 'active' ? '正常' : '已过期' }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <!-- 最近任务 -->
      <div class="content-card">
        <div class="card-header">
          <h3>最近发布任务</h3>
          <el-button type="primary" link @click="handleNavigate('/publish')">
            查看全部
          </el-button>
        </div>
        <div class="task-list">
          <div v-if="tasks.length === 0" class="empty-state">
            <el-empty description="暂无任务" :image-size="80">
              <el-button type="primary" @click="handleNavigate('/publish')">
                创建任务
              </el-button>
            </el-empty>
          </div>
          <div v-else v-for="task in tasks" :key="task.id" class="task-item">
            <div class="task-info">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-time">{{ formatDate(task.createdAt) }}</div>
            </div>
            <el-tag
              :type="getTaskStatusType(task.status)"
              size="small"
              effect="light"
              round
            >
              {{ getTaskStatusText(task.status) }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 数据趋势图 -->
    <div class="content-card chart-card">
      <div class="card-header">
        <h3>数据趋势</h3>
        <el-radio-group v-model="trendType" size="small">
          <el-radio-button label="fans">粉丝</el-radio-button>
          <el-radio-button label="views">播放</el-radio-button>
          <el-radio-button label="likes">点赞</el-radio-button>
        </el-radio-group>
      </div>
      <div class="chart-container">
        <div ref="chartRef" style="width: 100%; height: 280px"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated, watch, markRaw, nextTick } from 'vue';
import { User, VideoPlay, ChatDotRound, TrendCharts, Refresh } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { accountsApi } from '@/api/accounts';
import { dashboardApi, type TrendData } from '@/api/dashboard';
import { PLATFORMS } from '@media-manager/shared';
import type { PlatformAccount, PublishTask, PlatformType } from '@media-manager/shared';
import { useTabsStore } from '@/stores/tabs';
import { useAuthStore } from '@/stores/auth';
import dayjs from 'dayjs';

const tabsStore = useTabsStore();
const authStore = useAuthStore();
const accounts = ref<PlatformAccount[]>([]);
const tasks = ref<PublishTask[]>([]);
const trendType = ref<'fans' | 'views' | 'likes'>('fans');
const chartRef = ref<HTMLElement>();
const trendData = ref<TrendData | null>(null);
const refreshing = ref(false);
let chartInstance: echarts.ECharts | null = null;
let resizeObserver: ResizeObserver | null = null;

const stats = ref([
  { label: '平台账号', value: 0, icon: markRaw(User), iconClass: 'blue' },
  { label: '发布视频', value: 0, icon: markRaw(VideoPlay), iconClass: 'green' },
  { label: '新增评论', value: 0, icon: markRaw(ChatDotRound), iconClass: 'orange' },
  { label: '总播放量', value: '0', icon: markRaw(TrendCharts), iconClass: 'pink' },
]);

function handleNavigate(path: string) {
  tabsStore.openPageTab(path);
}

// 刷新数据
async function handleRefresh() {
  refreshing.value = true;
  try {
    await loadData();
  } finally {
    refreshing.value = false;
  }
}

function getPlatformName(platform: PlatformType) {
  return PLATFORMS[platform]?.name || platform;
}

function getTaskStatusType(status: string) {
  const types: Record<string, string> = {
    pending: 'info',
    processing: 'warning',
    completed: 'success',
    failed: 'danger',
    cancelled: 'info',
  };
  return types[status] || 'info';
}

function getTaskStatusText(status: string) {
  const texts: Record<string, string> = {
    pending: '待发布',
    processing: '发布中',
    completed: '已完成',
    failed: '失败',
    cancelled: '已取消',
  };
  return texts[status] || status;
}

function formatDate(date: string) {
  return dayjs(date).format('YYYY-MM-DD HH:mm');
}

// 获取图表颜色配置
function getChartColor(type: 'fans' | 'views' | 'likes') {
  const colors: Record<string, { main: string; gradient: string[] }> = {
    fans: { main: '#4facfe', gradient: ['#4facfe', 'rgba(79, 172, 254, 0)'] },
    views: { main: '#11998e', gradient: ['#11998e', 'rgba(17, 153, 142, 0)'] },
    likes: { main: '#f5576c', gradient: ['#f5576c', 'rgba(245, 87, 108, 0)'] },
  };
  return colors[type] || colors.fans;
}

// 获取图表数据
function getChartData(type: 'fans' | 'views' | 'likes') {
  if (!trendData.value) return [];
  return trendData.value[type] || [];
}

// 获取图表标题
function getChartTitle(type: 'fans' | 'views' | 'likes') {
  const titles: Record<string, string> = {
    fans: '粉丝数',
    views: '播放量',
    likes: '点赞数',
  };
  return titles[type] || '';
}

function initChart() {
  if (!chartRef.value) return;
  
  chartInstance = echarts.init(chartRef.value);
  updateChart();
}

function updateChart() {
  if (!chartInstance) return;
  
  const colorConfig = getChartColor(trendType.value);
  const data = getChartData(trendType.value);
  const dates = trendData.value?.dates || [];
  
  const option: echarts.EChartsOption = {
    tooltip: { 
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e5e7eb',
      borderWidth: 1,
      textStyle: {
        color: '#374151',
      },
      formatter: (params: unknown) => {
        const p = params as { name: string; value: number }[];
        if (Array.isArray(p) && p.length > 0) {
          return `${p[0].name}<br/>${getChartTitle(trendType.value)}: <b>${p[0].value.toLocaleString()}</b>`;
        }
        return '';
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#9ca3af',
        },
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLine: {
        lineStyle: { color: '#e5e7eb' },
      },
      axisLabel: {
        color: '#6b7280',
      },
    },
    yAxis: { 
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        lineStyle: { color: '#f3f4f6' },
      },
      axisLabel: {
        color: '#6b7280',
        formatter: (value: number) => {
          if (value >= 10000) return (value / 10000).toFixed(1) + '万';
          return value.toString();
        },
      },
    },
    series: [{
      data: data,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        width: 3,
      },
      areaStyle: { 
        opacity: 0.1,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colorConfig.gradient[0] },
          { offset: 1, color: colorConfig.gradient[1] },
        ]),
      },
    }],
    color: [colorConfig.main],
  };
  
  chartInstance.setOption(option, true);
}

// 加载数据趋势
async function loadTrendData() {
  try {
    const userId = authStore.user?.id;
    if (!userId) return;
    
    trendData.value = await dashboardApi.getTrend({
      userId,
      days: 14,  // 获取最近14天的数据
    });
    
    // 更新图表
    updateChart();
  } catch (error) {
    console.error('加载数据趋势失败:', error);
  }
}

async function loadData() {
  try {
    // 并行获取所有数据
    const [accountsData, worksStats, commentsStats] = await Promise.all([
      accountsApi.getAccounts(),
      dashboardApi.getWorksStats().catch(() => null),
      dashboardApi.getCommentsStats().catch(() => null),
    ]);
    
    accounts.value = accountsData;
    
    // 更新统计数据
    stats.value[0].value = accounts.value.length;
    
    if (worksStats) {
      stats.value[1].value = worksStats.totalCount || 0;
      // 格式化播放量
      const playCount = worksStats.totalPlayCount || 0;
      stats.value[3].value = playCount >= 10000 
        ? (playCount / 10000).toFixed(1) + '万' 
        : playCount.toString();
    }
    
    if (commentsStats) {
      stats.value[2].value = commentsStats.todayCount || 0;
    }
    
    // 加载数据趋势
    await loadTrendData();
  } catch {
    // 错误已在拦截器中处理
  }
}

// resize 处理函数
function handleResize() {
  if (chartInstance && !chartInstance.isDisposed()) {
    chartInstance.resize();
  }
}

onMounted(async () => {
  loadData();
  
  // 等待 DOM 完全渲染后再初始化图表
  await nextTick();
  
  // 延迟初始化以确保容器尺寸正确
  setTimeout(() => {
    initChart();
    
    // 使用 ResizeObserver 监听容器大小变化
    if (chartRef.value) {
      resizeObserver = new ResizeObserver(() => {
        handleResize();
      });
      resizeObserver.observe(chartRef.value);
    }
  }, 100);
  
  window.addEventListener('resize', handleResize);
});

// 页面激活时自动刷新数据（从其他标签页切换回来时）
onActivated(() => {
  loadData();
  // 确保图表正确显示
  nextTick(() => {
    handleResize();
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  resizeObserver?.disconnect();
  resizeObserver = null;
  chartInstance?.dispose();
  chartInstance = null;
});

watch(trendType, () => {
  updateChart();
});
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.dashboard {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  
  h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: $text-primary;
  }
}

// 统计卡片网格
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: $radius-lg;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: $shadow-sm;
  border: 1px solid $border-light;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-md;
  }
  
  .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .el-icon {
      font-size: 26px;
      color: #fff;
    }
    
    &.blue {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    &.green {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }
    
    &.orange {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    &.pink {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
  }
  
  .stat-content {
    flex: 1;
  }
  
  .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: $text-primary;
    line-height: 1.2;
  }
  
  .stat-label {
    font-size: 14px;
    color: $text-secondary;
    margin-top: 6px;
  }
}

// 内容卡片网格
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.content-card {
  background: #fff;
  border-radius: $radius-lg;
  padding: 24px;
  box-shadow: $shadow-sm;
  border: 1px solid $border-light;
  
  &.chart-card {
    width: 100%;
    overflow: hidden;
    
    .card-header {
      margin-bottom: 20px;
    }
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  
  h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: $text-primary;
  }
  
  .el-button {
    font-weight: 500;
  }
  
  :deep(.el-radio-group) {
    .el-radio-button__inner {
      border-radius: $radius-sm;
      border-color: $border-light;
      color: $text-secondary;
      font-weight: 500;
    }
    
    .el-radio-button__original-radio:checked + .el-radio-button__inner {
      background: $primary-color;
      border-color: $primary-color;
    }
  }
}

.account-list, .task-list {
  min-height: 200px;
}

.account-item, .task-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid $border-light;
  
  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  &:first-child {
    padding-top: 0;
  }
}

.account-item {
  gap: 14px;
  
  :deep(.el-avatar) {
    flex-shrink: 0;
    border: 2px solid $border-light;
    background: linear-gradient(135deg, $primary-color-light, #fff);
    color: $primary-color;
    font-weight: 600;
  }
  
  .account-info {
    flex: 1;
    min-width: 0;
    
    .account-name {
      font-weight: 600;
      color: $text-primary;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .account-platform {
      font-size: 13px;
      color: $text-secondary;
      margin-top: 4px;
    }
  }
}

.task-item {
  justify-content: space-between;
  
  .task-info {
    flex: 1;
    min-width: 0;
  }
  
  .task-title {
    font-weight: 600;
    color: $text-primary;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .task-time {
    font-size: 13px;
    color: $text-secondary;
    margin-top: 4px;
  }
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  
  :deep(.el-empty__description p) {
    color: $text-secondary;
  }
}

.chart-container {
  margin-top: 10px;
  width: 100%;
  min-height: 280px;
  
  > div {
    width: 100% !important;
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
