import type { EChartsOption } from '@vben/plugins/echarts';

/** 科技蓝暗色主题色板 */
const C = {
  cyan: '#00E5FF',
  green: '#00FF88',
  yellow: '#FFC107',
  red: '#FF3860',
  blue: '#3366FF',
  purple: '#8B5CF6',
  orange: '#FF6B35',
  textPrimary: 'rgba(230, 236, 250, 0.95)',
  textSecondary: 'rgba(180, 190, 215, 0.7)',
  border: 'rgba(56, 128, 237, 0.12)',
  splitLine: 'rgba(56, 128, 237, 0.08)',
};

const darkAxis = {
  axisLabel: { color: C.textSecondary, fontSize: 10 },
  axisLine: { lineStyle: { color: C.border } },
  axisTick: { show: false },
  splitLine: { lineStyle: { color: C.splitLine } },
};

const darkLegend = {
  textStyle: { color: C.textSecondary, fontSize: 10 },
  itemGap: 12,
};

const darkTooltip = {
  backgroundColor: 'rgba(6, 18, 42, 0.94)',
  borderColor: 'rgba(0, 229, 255, 0.28)',
  borderWidth: 1,
  padding: [10, 14],
  textStyle: { color: C.textPrimary, fontSize: 11 },
};

/** 渐变柱状图 */
export function getBarChartOptions(
  xData: string[],
  series: Array<{ name: string; data: number[] }>,
  colors: string[] = [C.cyan, C.blue, C.purple],
): EChartsOption {
  return {
    grid: { bottom: 40, left: 48, right: 16, top: 16 },
    legend: { ...darkLegend, bottom: 0 },
    tooltip: { ...darkTooltip, axisPointer: { type: 'shadow' }, trigger: 'axis' },
    xAxis: { ...darkAxis, data: xData, type: 'category' },
    yAxis: { ...darkAxis, type: 'value' },
    series: series.map((s, i) => ({
      barGap: '30%',
      barMaxWidth: 36,
      data: s.data,
      emphasis: {
        itemStyle: { shadowBlur: 12, shadowColor: colors[i] || C.cyan },
      },
      itemStyle: {
        borderRadius: [6, 6, 0, 0],
        color: {
          colorStops: [
            { color: colors[i] || C.cyan, offset: 0 },
            { color: `${colors[i] || C.cyan}22`, offset: 1 },
          ],
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
        },
      },
      name: s.name,
      type: 'bar',
    })),
  };
}

/** 渐变面积折线图 */
export function getAreaLineChartOptions(
  xData: string[],
  series: Array<{ name: string; data: number[] }>,
  colors: string[] = [C.cyan, C.purple, C.green],
): EChartsOption {
  return {
    grid: { bottom: 40, left: 48, right: 16, top: 16 },
    legend: { ...darkLegend, bottom: 0 },
    tooltip: { ...darkTooltip, axisPointer: { type: 'cross' }, trigger: 'axis' },
    xAxis: { ...darkAxis, boundaryGap: false, data: xData, type: 'category' },
    yAxis: { ...darkAxis, type: 'value' },
    series: series.map((s, i) => ({
      areaStyle: {
        color: {
          colorStops: [
            { color: `${colors[i] || C.cyan}22`, offset: 0 },
            { color: `${colors[i] || C.cyan}02`, offset: 1 },
          ],
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
        },
      },
      data: s.data,
      itemStyle: { color: colors[i] || C.cyan },
      lineStyle: { width: 2 },
      name: s.name,
      smooth: true,
      symbol: 'circle',
      symbolSize: 4,
      type: 'line',
    })),
  };
}

/** 环形饼图 */
export function getDonutPieChartOptions(
  data: Array<{ name: string; value: number }>,
  colors: string[] = [C.cyan, C.blue, C.purple, C.green, C.yellow, C.orange],
): EChartsOption {
  return {
    legend: { ...darkLegend, bottom: 0, type: 'scroll' },
    series: [{
      avoidLabelOverlap: true,
      data,
      emphasis: {
        itemStyle: { shadowBlur: 16, shadowColor: 'rgba(0,229,255,0.3)' },
        label: { fontSize: 12, fontWeight: 'bold', show: true },
        scaleSize: 8,
      },
      itemStyle: {
        borderColor: '#060e24',
        borderRadius: 3,
        borderWidth: 3,
        color: (params: { dataIndex: number }) => colors[params.dataIndex % colors.length],
      },
      label: { show: false },
      radius: ['55%', '78%'],
      type: 'pie',
    }],
    tooltip: { ...darkTooltip, formatter: '{b}: {c} ({d}%)', trigger: 'item' },
  };
}

/** 仪表盘（Gauge） */
export function getGaugeChartOptions(
  value: number,
  name: string,
  max = 100,
  color = C.cyan,
): EChartsOption {
  return {
    series: [{
      anchor: { show: true, showAbove: true, size: 12 },
      axisLine: {
        lineStyle: {
          color: [[0.3, C.red], [0.7, C.yellow], [1, C.green]],
          width: 12,
        },
      },
      axisTick: { distance: -16, length: 4, lineStyle: { width: 1, color: C.textSecondary } },
      data: [{ name, value }],
      detail: {
        color,
        fontSize: 22,
        fontWeight: 'bold',
        formatter: '{value}%',
        offsetCenter: [0, '55%'],
        valueAnimation: true,
      },
      pointer: { length: '65%', width: 4, itemStyle: { color: C.cyan } },
      progress: { itemStyle: { color }, show: true, width: 12 },
      radius: '100%',
      splitLine: { distance: -18, length: 10, lineStyle: { width: 2, color: C.textSecondary } },
      title: { fontSize: 11, offsetCenter: [0, '80%'], color: C.textSecondary },
      type: 'gauge',
      max,
    }],
    tooltip: { ...darkTooltip, formatter: '{b}: {c}%', trigger: 'item' },
  };
}

/** 散点图 */
export function getScatterChartOptions(
  data: Array<[number, number]>,
  xName = '',
  yName = '',
): EChartsOption {
  return {
    grid: { bottom: 40, left: 56, right: 16, top: 16 },
    tooltip: {
      ...darkTooltip,
      formatter: (params: { value: [number, number] }) =>
        `${xName}: ${params.value[0]}<br/>${yName}: ${params.value[1]}`,
      trigger: 'item',
    },
    xAxis: {
      ...darkAxis,
      name: xName,
      nameTextStyle: { color: C.textSecondary, fontSize: 10 },
      type: 'value',
    },
    yAxis: {
      ...darkAxis,
      name: yName,
      nameTextStyle: { color: C.textSecondary, fontSize: 10 },
      type: 'value',
    },
    series: [{
      data,
      emphasis: {
        itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,229,255,0.5)' },
      },
      itemStyle: {
        color: {
          colorStops: [
            { color: C.cyan, offset: 0 },
            { color: `${C.cyan}33`, offset: 1 },
          ],
          r: 1,
          type: 'radial',
          x: 0.4, y: 0.3,
        },
      },
      symbolSize: 10,
      type: 'scatter',
    }],
  };
}