<template>
  <div class="space-y-6">
    <!-- 欢迎卡片 -->
    <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-8 text-white shadow-lg">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold mb-2">欢迎使用腾讯广告自动化管理系统</h1>
          <p class="text-blue-100 text-lg">一站式广告投放与资产管理平台</p>
        </div>
        <div class="text-5xl">🚀</div>
      </div>
    </div>
    
    <!-- 功能快捷入口 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-6">快速开始</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <!-- <router-link to="/auth" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors group">
          <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mb-3 group-hover:bg-blue-200 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
          </div>
          <span class="text-gray-700 font-medium">OAuth</span>
        </router-link> -->
        
        <router-link to="/user" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:border-green-300 hover:bg-green-50 transition-colors group">
          <div class="p-3 rounded-lg bg-green-100 text-green-600 mb-3 group-hover:bg-green-200 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
            </svg>
          </div>
          <span class="text-gray-700 font-medium">实名认证</span>
        </router-link>
        
        <router-link to="/account-group" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-colors group">
          <div class="p-3 rounded-lg bg-purple-100 text-purple-600 mb-3 group-hover:bg-purple-200 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <span class="text-gray-700 font-medium">账号组</span>
        </router-link>
        
        <router-link to="/ad-plan-conf" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:border-yellow-300 hover:bg-yellow-50 transition-colors group">
          <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600 mb-3 group-hover:bg-yellow-200 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
            </svg>
          </div>
          <span class="text-gray-700 font-medium">广告计划</span>
        </router-link>

         <router-link to="/drama" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors group">
          <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mb-3 group-hover:bg-blue-200 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z" />
            </svg>
          </div>
          <span class="text-gray-700 font-medium">短剧资产</span>
        </router-link>
      </div>
    </div>
    
    <!-- 最近活动 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-semibold text-gray-800">广告计划配置执行情况</h2>
        <button 
          @click="loadData" 
          :disabled="loading"
          class="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {{ loading ? '刷新中...' : '刷新' }}
        </button>
      </div>
      <div class="space-y-4">
        <div 
          v-for="activity in recentActivities" 
          :key="activity.id"
          class="flex items-start p-4 border rounded-lg transition-colors cursor-pointer"
          :class="{
            'border-green-200 bg-green-50 hover:bg-green-100': activity.status === 4,
            'border-orange-200 bg-orange-50 hover:bg-orange-100': activity.status === 5,
            'border-red-200 bg-red-50 hover:bg-red-100': activity.status === 3,
            'border-blue-200 bg-blue-50 hover:bg-blue-100': activity.status === 2,
            'border-gray-200 bg-gray-50 hover:bg-gray-100': activity.status === 1 || !activity.status
          }"
          @click="viewPlanDetail(activity.confId)"
        >
          <!-- 状态图标 -->
          <div class="p-2 rounded-lg mr-4 flex-shrink-0" :class="{
            'bg-orange-200 text-orange-600': activity.status === 5,
            'bg-green-200 text-green-600': activity.status === 4,
            'bg-red-200 text-red-600': activity.status === 3,
            'bg-blue-200 text-blue-600': activity.status === 2,
            'bg-gray-200 text-gray-600': activity.status === 1 || !activity.status
          }">
            <!-- 成功图标 -->
            <svg v-if="activity.status === 4" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <!-- 失败图标 -->
            <svg v-else-if="activity.status === 3" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <!-- 部分失败图标 -->
            <svg v-else-if="activity.status === 5" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <!-- 执行中图标 -->
            <svg v-else-if="activity.status === 2" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <!-- 待执行图标 -->
            <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          
          <!-- 活动信息 -->
          <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <p class="font-medium" :class="{
                  'text-green-900': activity.status === 4,
                  'text-red-900': activity.status === 3,
                  'text-orange-900': activity.status === 5,
                  'text-blue-900': activity.status === 2,
                  'text-gray-900': activity.status === 1 || !activity.status
                }">{{ activity.description }}</p>
                <div class="flex items-center gap-3 mt-2 text-sm" :class="{
                  'text-green-600': activity.status === 4,
                  'text-red-600': activity.status === 3,
                  'text-orange-600': activity.status === 5,
                  'text-blue-600': activity.status === 2,
                  'text-gray-600': activity.status === 1 || !activity.status
                }">
                  <span class="flex items-center gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    {{ activity.user }}
                  </span>
                  <span>•</span>
                  <span class="flex items-center gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {{ activity.timestamp }}
                  </span>
                </div>
              </div>
              <!-- 状态标签 -->
              <span class="ml-4 px-3 py-1 text-xs font-medium rounded-full flex-shrink-0" :class="{
                'bg-green-100 text-green-700': activity.status === 4,
                'bg-red-100 text-red-700': activity.status === 3,
                'bg-orange-100 text-orange-700': activity.status === 5,
                'bg-blue-100 text-blue-700': activity.status === 2,
                'bg-gray-100 text-gray-700': activity.status === 1 || !activity.status
              }">
                {{ activity.statusDesc }}
              </span>
            </div>
          </div>
        </div>
        <div v-if="recentActivities.length === 0" class="text-center py-8 text-gray-500">
          暂无广告计划配置执行记录
        </div>
      </div>
    </div>

    <!-- 系统状态 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h2 class="text-xl font-semibold text-gray-800 mb-6">系统状态</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="flex items-center p-4 rounded-lg border" :class="{
          'bg-green-50 border-green-200': systemStatus.serviceStatus === 'running',
          'bg-red-50 border-red-200': systemStatus.serviceStatus !== 'running'
        }">
          <div class="p-2 rounded-full mr-4" :class="{
            'bg-green-200': systemStatus.serviceStatus === 'running',
            'bg-red-200': systemStatus.serviceStatus !== 'running'
          }">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" :class="{
              'text-green-600': systemStatus.serviceStatus === 'running',
              'text-red-600': systemStatus.serviceStatus !== 'running'
            }" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
          </div>
          <div>
            <p class="font-medium" :class="{
              'text-green-800': systemStatus.serviceStatus === 'running',
              'text-red-800': systemStatus.serviceStatus !== 'running'
            }">{{ systemStatus.statusMessage }}</p>
            <p class="text-sm" :class="{
              'text-green-600': systemStatus.serviceStatus === 'running',
              'text-red-600': systemStatus.serviceStatus !== 'running'
            }">服务状态: {{ systemStatus.serviceStatus === 'running' ? '正常运行' : '异常' }}</p>
          </div>
        </div>
        
        <div class="flex items-center p-4 bg-blue-50 rounded-lg border border-blue-200">
          <div class="p-2 rounded-full bg-blue-200 mr-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div>
            <p class="font-medium text-blue-800">更新时间</p>
            <p class="text-sm text-blue-600">{{ systemStatus.updateTime }}</p>
          </div>
        </div>
        
        <div class="flex items-center p-4 bg-purple-50 rounded-lg border border-purple-200">
          <div class="p-2 rounded-full bg-purple-200 mr-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <div>
            <p class="font-medium text-purple-800">版本号</p>
            <p class="text-sm text-purple-600">{{ systemStatus.version }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'Dashboard'
})

import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getStatisticsOverview,
  getSystemStatus,
  getRecentActivities
} from '@/api/dashboard'
import router from '@/router'


// 统计数据
const statistics = ref({
  videoCount: 128,
  imageCount: 86,
  adgroupCount: 24,
  conversionCount: 1245,
  todayVideoCount: 0,
  todayImageCount: 0,
  todayAdgroupCount: 0,
  todayConversionCount: 0
})

// 系统状态
const systemStatus = ref({
  serviceStatus: 'running',
  statusMessage: '所有服务运行正常',
  version: 'v1.0.0',
  updateTime: '2026-02-06 18:30'
})

// 最近活动
const recentActivities = ref([])

// 加载状态
const loading = ref(false)

// 获取统计概览数据
const loadStatistics = async () => {
  try {
    const res = await getStatisticsOverview()
    if (res.success) {
      statistics.value = {
        ...statistics.value,
        ...res.data
      }
    }
  } catch (error) {
    console.error('获取统计概览失败:', error)
    ElMessage.error('获取统计概览失败')
  }
}

// 获取系统状态
const loadSystemStatus = async () => {
  try {
    const res = await getSystemStatus()
    if (res.success) {
      systemStatus.value = {
        ...systemStatus.value,
        ...res.data
      }
    }
  } catch (error) {
    console.error('获取系统状态失败:', error)
    ElMessage.error('获取系统状态失败')
  }
}

// 获取最近活动
const loadRecentActivities = async () => {
  try {
    const res = await getRecentActivities(10)
    if (res.success) {
      recentActivities.value = res.data.activities || []
    }
  } catch (error) {
    console.error('获取最近活动失败:', error)
    ElMessage.error('获取最近活动失败')
  }
}

// 查看计划详情
const viewPlanDetail = (confId) => {
  if (confId) {
    router.push(`/ad-plan-conf/detail?id=${confId}`)
  }
}

// 初始化数据
const loadData = async () => {
  loading.value = true
  try {
    await Promise.all([
      loadStatistics(),
      loadSystemStatus(),
      loadRecentActivities()
    ])
  } finally {
    loading.value = false
  }
}

// 页面加载时初始化
onMounted(() => {
  loadData()
})
</script>
