<template>
  <n-card title="时间活跃度分析" size="small" v-if="show">
    <template #header-extra>
      <n-text depth="3" style="font-size: 12px">基于 AC 时间，发现解题高峰时段</n-text>
    </template>
    <div style="height: 300px">
      <Bar :data="data" :options="options" />
    </div>
  </n-card>
</template>

<script setup lang="ts">
import { Bar } from "vue-chartjs"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js"
import { useAIStore } from "oj/store/ai"

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

const aiStore = useAIStore()

const WEEKDAYS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
const TIME_PERIODS = [
  { label: "凌晨(0-6)", start: 0, end: 6 },
  { label: "上午(6-12)", start: 6, end: 12 },
  { label: "下午(12-18)", start: 12, end: 18 },
  { label: "晚上(18-24)", start: 18, end: 24 },
]

// 统计每个星期几和时间段的做题数量
const activityMatrix = computed(() => {
  const matrix: { [weekday: number]: { [period: number]: number } } = {}

  // 初始化矩阵
  for (let i = 0; i < 7; i++) {
    matrix[i] = {}
    for (let j = 0; j < TIME_PERIODS.length; j++) {
      matrix[i][j] = 0
    }
  }

  // 统计数据
  aiStore.detailsData.solved.forEach((item) => {
    const date = new Date(item.ac_time)
    const weekday = date.getDay() // 0-6，0是周日
    const hour = date.getHours() // 0-23

    // 找到对应的时间段
    const periodIndex = TIME_PERIODS.findIndex(
      (p) => hour >= p.start && hour < p.end,
    )
    if (periodIndex !== -1) {
      matrix[weekday][periodIndex]++
    }
  })

  return matrix
})

const show = computed(() => {
  return aiStore.detailsData.solved.length > 0
})

// 为每个时间段准备数据集
const data = computed(() => {
  const datasets = TIME_PERIODS.map((period, periodIndex) => {
    return {
      label: period.label,
      data: WEEKDAYS.map(
        (_, weekday) => activityMatrix.value[weekday][periodIndex],
      ),
      backgroundColor: getTimePeriodColor(periodIndex),
      borderColor: getTimePeriodColor(periodIndex),
      borderWidth: 1,
    }
  })

  return {
    labels: WEEKDAYS,
    datasets,
  }
})

// 根据时间段返回对应的颜色
function getTimePeriodColor(periodIndex: number): string {
  const colors = [
    "#9D9D9D", // 凌晨 - 灰色
    "#FFD700", // 上午 - 金色
    "#4ECDC4", // 下午 - 青色
    "#5B5F97", // 晚上 - 深蓝紫
  ]
  return colors[periodIndex] || "#999"
}

const options = {
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    intersect: false,
    mode: "index" as const,
  },
  scales: {
    x: {
      stacked: true,
      grid: {
        display: false,
      },
    },
    y: {
      stacked: true,
      ticks: {
        stepSize: 1,
      },
      title: {
        display: true,
        text: "完成题目数",
      },
    },
  },
  plugins: {
    legend: {
      display: true,
      position: "bottom" as const,
      labels: {
        boxWidth: 12,
        padding: 8,
        font: {
          size: 11,
        },
      },
    },
    title: {
      display: false,
    },
    tooltip: {
      callbacks: {
        footer: (items: any[]) => {
          const total = items.reduce((sum, item) => sum + item.parsed.y, 0)
          return `当天总计: ${total} 题`
        },
      },
    },
  },
}
</script>
