<template>
  <div class="system-token-daily-wave-chart">
    <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
  </div>
</template>

<script setup>
import { computed, shallowRef } from 'vue'
import { BarChart as EChartsBarChart, LineChart as EChartsLineChart } from 'echarts/charts'
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'

import { useEcharts } from '../../composables/useEcharts.js'
import { useThemeColors } from '../../composables/useThemeColors.js'

use([GridComponent, LegendComponent, TooltipComponent, EChartsBarChart, EChartsLineChart, CanvasRenderer])

const props = defineProps({
  labels: { type: Array, required: true },
  inputTokens: { type: Array, required: true },
  outputTokens: { type: Array, required: true },
  totalTokens: { type: Array, required: true }
})

const chartElement = shallowRef(null)
const themeColors = useThemeColors()
const chartColors = computed(() => ({
  amber: themeColors.value.chartAmber,
  purple: themeColors.value.chartPurple,
  danger: themeColors.value.chartDanger
}))

const ariaLabel = computed(() =>
  props.labels.map((label, index) => (
    `${label}输入${formatTokens(props.inputTokens[index])}，输出${formatTokens(props.outputTokens[index])}，合计${formatTokens(props.totalTokens[index])}`
  )).join('；')
)

const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
  animation: true,
  animationDuration: 920,
  animationEasing: 'cubicOut',
  legend: {
    top: 0,
    left: 0,
    itemWidth: 9,
    itemHeight: 9,
    itemGap: 16,
    textStyle: {
      color: '#475569',
      fontSize: 12,
      fontWeight: 700
    }
  },
  grid: {
    top: 38,
    right: 22,
    bottom: 24,
    left: 34,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    appendToBody: true,
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
    borderColor: 'rgba(148, 163, 184, 0.24)',
    borderWidth: 1,
    padding: [9, 10],
    textStyle: {
      color: '#334155',
      fontSize: 12,
      fontWeight: 700
    },
    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
    valueFormatter: (value) => `${formatTokens(value)} tokens`
  },
  xAxis: {
    type: 'category',
    data: props.labels,
    axisTick: { show: false },
    axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.28)' } },
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700,
      formatter: (value) => `${Math.round(value / 1000)}K`
    },
    splitLine: { lineStyle: { color: 'rgba(226, 232, 240, 0.74)' } }
  },
  series: [
    {
      name: '输入 Tokens',
      type: 'bar',
      stack: 'tokens',
      data: props.inputTokens,
      barWidth: 24,
      itemStyle: {
        color: chartColors.value.amber,
        borderRadius: [0, 0, 3, 3]
      }
    },
    {
      name: '输出 Tokens',
      type: 'bar',
      stack: 'tokens',
      data: props.outputTokens,
      barWidth: 24,
      itemStyle: {
        color: chartColors.value.purple,
        borderRadius: [3, 3, 0, 0]
      }
    },
    {
      name: '合计波动',
      type: 'line',
      data: props.totalTokens,
      smooth: 0.45,
      symbol: 'circle',
      symbolSize: 7,
      lineStyle: {
        width: 2.8,
        color: chartColors.value.danger
      },
      itemStyle: {
        color: '#ffffff',
        borderColor: chartColors.value.danger,
        borderWidth: 2.4
      },
      emphasis: { focus: 'series' }
    }
  ]
}))

useEcharts(chartElement, chartOptions)

function formatTokens(value) {
  const number = Number(value || 0)
  if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(1)}M`
  if (number >= 1_000) return `${(number / 1_000).toFixed(1)}K`
  return `${Math.round(number)}`
}
</script>

<style scoped>
.system-token-daily-wave-chart {
  height: 292px;
}

.chart-body {
  width: 100%;
  height: 100%;
}
</style>
