<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ListTodo, Variable, Clock, Play, ScrollText } from 'lucide-vue-next'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { api, type Stats, type DailyStats, type TaskStatsItem } from '@/api'
import ApexCharts from 'apexcharts'

const router = useRouter()
const stats = ref<Stats>({ tasks: 0, today_execs: 0, envs: 0, logs: 0, scheduled: 0, running: 0 })
const displayStats = ref<Stats>({ tasks: 0, today_execs: 0, envs: 0, logs: 0, scheduled: 0, running: 0 })
const sendStats = ref<DailyStats[]>([])
const taskStats = ref<TaskStatsItem[]>([])
const chartsLoaded = ref(false)
const isMobile = ref(window.innerWidth < 768)
const chartDays = computed(() => isMobile.value ? 15 : 30)

let lineChart: ApexCharts | null = null
let pieChart: ApexCharts | null = null
let themeObserver: MutationObserver | null = null
let themeChangeTimeout: number | null = null
let isInitializing = true

const statItems = [
  { key: 'today_execs', label: '今日执行', icon: Play, route: '/history' },
  { key: 'tasks', label: '任务总数', icon: ListTodo, route: '/tasks' },
  { key: 'envs', label: '环境变量', icon: Variable, route: '/environments' },
  { key: 'logs', label: '日志总数', icon: ScrollText, route: '/history' },
  { key: 'scheduled', label: '调度注册', icon: Clock, route: '/tasks' },
  { key: 'running', label: '正在运行', icon: Play, route: '/history?status=running' },
]

const isDark = ref(document.documentElement.classList.contains('dark'))

// 数字滚动动画
function animateNumber(key: keyof Stats, target: number) {
  const start = displayStats.value[key]
  const duration = 800 // 动画持续时间
  const startTime = performance.now()

  function update(currentTime: number) {
    const elapsed = currentTime - startTime
    const progress = Math.min(elapsed / duration, 1)

    // 使用 easeOutCubic 缓动函数
    const easeProgress = 1 - Math.pow(1 - progress, 3)

    displayStats.value[key] = Math.round(start + (target - start) * easeProgress)

    if (progress < 1) {
      requestAnimationFrame(update)
    } else {
      displayStats.value[key] = target
    }
  }

  requestAnimationFrame(update)
}

// 更新统计数据并触发动画
function updateStats(newStats: Stats) {
  Object.keys(newStats).forEach((key) => {
    const statKey = key as keyof Stats
    if (newStats[statKey] !== stats.value[statKey]) {
      animateNumber(statKey, newStats[statKey])
    }
  })
  stats.value = newStats
}

function getTextColor() {
  return isDark.value ? '#94a3b8' : '#64748b'
}

function getGridColor() {
  return isDark.value ? '#334155' : '#e2e8f0'
}

function handleThemeChange() {
  // 初始化期间忽略主题变化
  if (isInitializing) return

  const newIsDark = document.documentElement.classList.contains('dark')
  if (newIsDark !== isDark.value) {
    isDark.value = newIsDark
    chartsLoaded.value = false
    if (themeChangeTimeout) clearTimeout(themeChangeTimeout)
    themeChangeTimeout = window.setTimeout(() => {
      reloadCharts()
    }, 50)
  }
}

function navigateTo(route?: string) {
  if (route) router.push(route)
}

function handleResize() {
  const wasMobile = isMobile.value
  isMobile.value = window.innerWidth < 768
  if (wasMobile !== isMobile.value) {
    reloadCharts()
  }
}

async function reloadCharts() {
  // 销毁旧图表
  if (lineChart) {
    lineChart.destroy()
    lineChart = null
  }
  if (pieChart) {
    pieChart.destroy()
    pieChart = null
  }

  chartsLoaded.value = false

  // 重新获取数据
  const [sendStatsData, taskStatsData] = await Promise.all([
    api.dashboard.sendStats(chartDays.value),
    api.dashboard.taskStats(chartDays.value)
  ])
  sendStats.value = sendStatsData
  taskStats.value = taskStatsData

  // 等待 Vue 更新 DOM
  await nextTick()
  await new Promise(resolve => setTimeout(resolve, 100))

  // 检查容器是否存在再渲染
  const statsChart = document.querySelector("#stats-chart")
  const pieChartEl = document.querySelector("#pie-chart")

  if (statsChart && pieChartEl && statsChart.parentElement && pieChartEl.parentElement) {
    renderLineChart()
    renderPieChart()
    await nextTick()
    chartsLoaded.value = true
  }
}

const renderLineChart = () => {
  const container = document.querySelector("#stats-chart")
  if (!container || !container.parentElement) return

  if (lineChart) {
    lineChart.destroy()
    lineChart = null
  }

  // 清空容器
  container.innerHTML = ''

  const textColor = getTextColor()
  const gridColor = getGridColor()
  const options = {
    series: [
      { name: '执行总数', data: sendStats.value.map(item => item.total) },
      { name: '执行成功', data: sendStats.value.map(item => item.success) },
      { name: '执行失败', data: sendStats.value.map(item => item.failed) }
    ],
    chart: {
      type: 'line' as const,
      height: 300,
      toolbar: { show: false },
      background: 'transparent',
      animations: {
        enabled: true,
        easing: 'easeinout',
        speed: 800,
        animateGradually: { enabled: true, delay: 150 },
        dynamicAnimation: { enabled: true, speed: 350 }
      },
      dropShadow: {
        enabled: true,
        color: '#000',
        top: 18,
        left: 7,
        blur: 10,
        opacity: 0.2
      }
    },
    stroke: { curve: 'smooth' as const, width: 3, lineCap: 'round' as const },
    markers: {
      size: 6,
      colors: ['#3b82f6', '#10b981', '#ef4444'],
      strokeColors: isDark.value ? '#1e293b' : '#fff',
      strokeWidth: 2,
      hover: { size: 8, sizeOffset: 3 }
    },
    xaxis: {
      categories: sendStats.value.map(item => item.day.slice(5)),
      axisBorder: { show: false },
      axisTicks: { show: false },
      labels: { style: { colors: textColor, fontSize: '12px', fontFamily: 'Inter, sans-serif' } },
      tooltip: { enabled: false }
    },
    yaxis: {
      labels: {
        style: { colors: textColor, fontSize: '12px', fontFamily: 'Inter, sans-serif' },
        formatter: (val: number) => String(val),
        offsetX: -15,
        minWidth: 20
      }
    },
    colors: ['#3b82f6', '#10b981', '#ef4444'],
    fill: {
      type: 'gradient',
      gradient: {
        shade: isDark.value ? 'dark' : 'light',
        type: 'vertical',
        shadeIntensity: 0.5,
        gradientToColors: ['#60a5fa', '#34d399', '#f87171'],
        inverseColors: false,
        opacityFrom: 0.8,
        opacityTo: 0.1,
        stops: [0, 100]
      }
    },
    grid: {
      borderColor: gridColor,
      strokeDashArray: 3,
      xaxis: { lines: { show: false } },
      yaxis: { lines: { show: true } },
      padding: { top: 0, right: 5, bottom: 0, left: 0 }
    },
    legend: {
      position: 'top' as const,
      horizontalAlign: 'right' as const,
      floating: true,
      offsetY: -25,
      offsetX: -5,
      fontSize: '12px',
      fontFamily: 'Inter, sans-serif',
      labels: { colors: textColor },
      markers: { width: 8, height: 8, radius: 4 }
    },
    tooltip: {
      enabled: true,
      shared: true,
      intersect: false,
      theme: isDark.value ? 'dark' : 'light',
      style: { fontSize: '12px', fontFamily: 'Inter, sans-serif' },
      x: { show: true },
      marker: { show: true },
      custom: ({ series, dataPointIndex, w }: { series: number[][], dataPointIndex: number, w: any }) => {
        const total = series[0]?.[dataPointIndex] ?? 0
        const success = series[1]?.[dataPointIndex] ?? 0
        const failed = series[2]?.[dataPointIndex] ?? 0
        const rate = total > 0 ? ((success / total) * 100).toFixed(1) : '0.0'
        return `<div class="bg-card text-foreground p-2 rounded-lg shadow-lg border border-border text-xs">
          <div class="font-medium mb-1.5">${w.globals.categoryLabels[dataPointIndex]}</div>
          <div class="space-y-0.5">
            <div class="flex items-center justify-between gap-3">
              <span class="flex items-center"><span class="w-1.5 h-1.5 bg-blue-500 rounded-full mr-1.5"></span><span class="text-muted-foreground">总数:</span></span>
              <span class="font-medium">${total} 次</span>
            </div>
            <div class="flex items-center justify-between gap-3">
              <span class="flex items-center"><span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5"></span><span class="text-muted-foreground">成功:</span></span>
              <span class="font-medium">${success} 次</span>
            </div>
            <div class="flex items-center justify-between gap-3">
              <span class="flex items-center"><span class="w-1.5 h-1.5 bg-red-500 rounded-full mr-1.5"></span><span class="text-muted-foreground">失败:</span></span>
              <span class="font-medium">${failed} 次</span>
            </div>
            <div class="border-t border-border pt-1 mt-1">
              <div class="flex items-center justify-between">
                <span class="text-muted-foreground">成功率:</span>
                <span class="font-medium">${rate}%</span>
              </div>
            </div>
          </div>
        </div>`
      }
    },
    responsive: [{ breakpoint: 768, options: { chart: { height: 260 }, legend: { position: 'top', horizontalAlign: 'center', floating: false, offsetY: 0 } } }]
  }
  lineChart = new ApexCharts(container as HTMLElement, options as any)
  lineChart.render()
}

const renderPieChart = () => {
  if (taskStats.value.length === 0) return

  const container = document.querySelector("#pie-chart")
  if (!container || !container.parentElement) return

  if (pieChart) {
    pieChart.destroy()
    pieChart = null
  }

  // 清空容器
  container.innerHTML = ''

  const totalCount = taskStats.value.reduce((sum, item) => sum + item.count, 0)
  const textColor = getTextColor()
  const options = {
    series: taskStats.value.map(item => item.count),
    chart: {
      type: 'donut' as const,
      height: 260,
      toolbar: { show: false },
      background: 'transparent',
      animations: {
        enabled: true,
        speed: 400,
        animateGradually: {
          enabled: false
        },
        dynamicAnimation: {
          enabled: true,
          speed: 400
        }
      }
    },
    labels: taskStats.value.map(item => item.task_name),
    colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'],
    legend: {
      show: false
    },
    stroke: {
      show: true,
      width: 2,
      colors: [isDark.value ? '#1e293b' : '#ffffff']
    },
    plotOptions: {
      pie: {
        donut: {
          size: '50%',
          labels: {
            show: true,
            name: {
              show: true,
              fontSize: '12px',
              fontFamily: 'Inter, sans-serif',
              fontWeight: 600,
              color: textColor,
              offsetY: -10
            },
            value: {
              show: true,
              fontSize: '12px',
              fontFamily: 'Inter, sans-serif',
              fontWeight: 'bold',
              color: textColor,
              offsetY: 5,
              formatter: (val: string) => val + ' 次'
            },
            total: {
              show: true,
              showAlways: false,
              label: '总执行',
              fontSize: '12px',
              fontFamily: 'Inter, sans-serif',
              fontWeight: 600,
              color: textColor,
              formatter: () => String(totalCount) + ' 次'
            }
          }
        },
        expandOnClick: true
      }
    },
    dataLabels: {
      enabled: true,
      formatter: (val: number) => val.toFixed(1) + '%',
      style: {
        fontSize: '11px',
        fontFamily: 'Inter, sans-serif',
        fontWeight: 'bold',
        colors: ['#ffffff']
      },
      dropShadow: {
        enabled: true,
        top: 1,
        left: 1,
        blur: 2,
        color: '#000',
        opacity: 0.5
      }
    },
    tooltip: {
      enabled: true,
      theme: isDark.value ? 'dark' : 'light',
      style: { fontSize: '12px', fontFamily: 'Inter, sans-serif' },
      y: { formatter: (val: number) => val + ' 次' }
    },
    responsive: [{ breakpoint: 768, options: { chart: { height: 260 }, legend: { position: 'bottom' } } }]
  }
  pieChart = new ApexCharts(container as HTMLElement, options as any)
  pieChart.render()
}

onMounted(async () => {
  window.addEventListener('resize', handleResize)

  try {
    const [statsData, sendStatsData, taskStatsData] = await Promise.all([
      api.dashboard.stats(),
      api.dashboard.sendStats(chartDays.value),
      api.dashboard.taskStats(chartDays.value)
    ])
    updateStats(statsData)
    sendStats.value = sendStatsData
    taskStats.value = taskStatsData

    // 渲染图表
    setTimeout(() => {
      renderLineChart()
      renderPieChart()
      chartsLoaded.value = true

      // 图表渲染完成后，延迟启动主题监听，避免初始化时的闪烁
      setTimeout(() => {
        isInitializing = false
        // 监听主题变化
        themeObserver = new MutationObserver(() => {
          handleThemeChange()
        })
        themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
      }, 500)
    }, 100)
  } catch { }
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (themeObserver) {
    themeObserver.disconnect()
    themeObserver = null
  }
  if (themeChangeTimeout) {
    clearTimeout(themeChangeTimeout)
    themeChangeTimeout = null
  }
  if (lineChart) lineChart.destroy()
  if (pieChart) pieChart.destroy()
})
</script>

<template>
    <div class="space-y-4">
      <div>
        <h2 class="text-2xl font-bold tracking-tight">数据仪表</h2>
        <p class="text-muted-foreground">查看系统运行状态和统计数据</p>
      </div>

      <div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
        <Card v-for="item in statItems" :key="item.key" class="cursor-pointer hover:bg-accent/50 transition-colors"
          @click="navigateTo(item.route)">
          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle class="text-sm font-medium">{{ item.label }}</CardTitle>
            <component :is="item.icon" class="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div class="text-xl sm:text-2xl font-semibold">{{ displayStats[item.key as keyof Stats] }}</div>
          </CardContent>
        </Card>
      </div>

      <div class="grid gap-4 lg:grid-cols-10">
        <Card class="lg:col-span-7 h-[400px]">
          <CardHeader class="pb-2">
            <CardTitle class="text-base sm:text-lg">执行统计</CardTitle>
            <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行情况</CardDescription>
          </CardHeader>
          <CardContent class="relative h-[300px]">
            <div id="stats-chart" class="w-full h-full"></div>
            <div v-if="!chartsLoaded"
              class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
              加载中...
            </div>
          </CardContent>
        </Card>

        <Card class="lg:col-span-3 h-[400px]">
          <CardHeader class="pb-2">
            <CardTitle class="text-base sm:text-lg">任务占比</CardTitle>
            <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行分布</CardDescription>
          </CardHeader>
          <CardContent class="relative h-[300px]">
            <div id="pie-chart" class="w-full h-full"></div>
          <div v-if="!chartsLoaded"
            class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
            加载中...
          </div>
          <div v-else-if="taskStats.length === 0"
            class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
            暂无数据
          </div>
        </CardContent>
      </Card>
    </div>
  </div>
</template>
