// ECharts 配置工具 - CRMEB 风格图表配置
// 订单统计图表配置（柱状图 + 折线图）
export const getOrderChartOption = (period: string = '30days') => {
  const periods = {
    '30days': { label: '30天', days: 30 },
    'week': { label: '本周', days: 7 },
    'month': { label: '本月', days: 30 },
    'year': { label: '本年', days: 365 }
  }

  const periodConfig = periods[period as keyof typeof periods] || periods['30days']

  return {
    title: {
      text: `订单统计 (${periodConfig.label})`,
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 600,
        color: '#262626'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['订单金额', '订单数量'],
      top: 30,
      textStyle: {
        fontSize: 12,
        color: '#666666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: generateDateLabels(periodConfig.days),
      axisLine: {
        lineStyle: {
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#999999',
        fontSize: 12
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '订单金额',
        position: 'left',
        axisLabel: {
          formatter: '¥{value}',
          color: '#999999',
          fontSize: 12
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed'
          }
        }
      },
      {
        type: 'value',
        name: '订单数量',
        position: 'right',
        axisLabel: {
          color: '#999999',
          fontSize: 12
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '订单金额',
        type: 'bar',
        data: generateAmountData(periodConfig.days),
        barWidth: '40%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1890ff' },
            { offset: 1, color: '#36cfc9' }
          ]),
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#40a9ff' },
              { offset: 1, color: '#5cdbd3' }
            ])
          }
        }
      },
      {
        name: '订单数量',
        type: 'line',
        yAxisIndex: 1,
        data: generateCountData(periodConfig.days),
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#52c41a',
          width: 3
        },
        itemStyle: {
          color: '#52c41a',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: 'rgba(82, 196, 26, 0.1)' },
            { offset: 1, color: 'rgba(82, 196, 26, 0.3)' }
          ])
        }
      }
    ],
    animationDuration: 1000,
    animationEasing: 'cubicOut'
  }
}

// 用户趋势图表配置
export const getUserTrendOption = () => {
  return {
    title: {
      text: '用户增长趋势',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 600,
        color: '#262626'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      }
    },
    legend: {
      data: ['新增用户'],
      top: 30,
      textStyle: {
        fontSize: 12,
        color: '#666666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: generateDateLabels(30),
      axisLine: {
        lineStyle: {
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#999999',
        fontSize: 12
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '用户数量',
      axisLabel: {
        color: '#999999',
        fontSize: 12
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        data: generateUserTrendData(30),
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#1890ff',
          width: 3
        },
        itemStyle: {
          color: '#1890ff',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: 'rgba(24, 144, 255, 0.1)' },
            { offset: 1, color: 'rgba(24, 144, 255, 0.3)' }
          ])
        }
      }
    ],
    animationDuration: 1000,
    animationEasing: 'cubicOut'
  }
}

// 用户构成饼图配置
export const getUserCompositionOption = () => {
  return {
    title: {
      text: '用户来源构成',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 600,
        color: '#262626'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d}%)',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'center',
      itemGap: 16,
      textStyle: {
        fontSize: 12,
        color: '#666666'
      },
      data: ['自然流量', '搜索引擎', '社交媒体', '广告投放', '其他']
    },
    series: [
      {
        name: '用户来源',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
            formatter: '{b}\n{c}%'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 35,
            name: '自然流量',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#1890ff' },
                { offset: 1, color: '#36cfc9' }
              ])
            }
          },
          {
            value: 28,
            name: '搜索引擎',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#52c41a' },
                { offset: 1, color: '#73d13d' }
              ])
            }
          },
          {
            value: 20,
            name: '社交媒体',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#faad14' },
                { offset: 1, color: '#ffc53d' }
              ])
            }
          },
          {
            value: 12,
            name: '广告投放',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#f5222d' },
                { offset: 1, color: '#ff7875' }
              ])
            }
          },
          {
            value: 5,
            name: '其他',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#722ed1' },
                { offset: 1, color: '#b37feb' }
              ])
            }
          }
        ]
      }
    ],
    animationDuration: 1000,
    animationEasing: 'cubicOut'
  }
}

// 用户统计多折线图配置
export const getUserStatisticsOption = () => {
  return {
    title: {
      text: '用户数据趋势分析',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 600,
        color: '#262626'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['新增用户', '访客数', '浏览量', '成交用户', '付费会员'],
      top: 30,
      textStyle: {
        fontSize: 12,
        color: '#666666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: generateDateLabels(30, 7), // 30天的数据，每7天一个标签
      axisLine: {
        lineStyle: {
          color: '#e8e8e8'
        }
      },
      axisLabel: {
        color: '#999999',
        fontSize: 12
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '数量',
      axisLabel: {
        color: '#999999',
        fontSize: 12
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        data: generateUserStatisticsData('newUsers', 7),
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#1890ff',
          width: 2
        },
        itemStyle: {
          color: '#1890ff',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        smooth: true
      },
      {
        name: '访客数',
        type: 'line',
        data: generateUserStatisticsData('visitors', 7),
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#52c41a',
          width: 2
        },
        itemStyle: {
          color: '#52c41a',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        smooth: true
      },
      {
        name: '浏览量',
        type: 'line',
        data: generateUserStatisticsData('pageViews', 7),
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#faad14',
          width: 2
        },
        itemStyle: {
          color: '#faad14',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        smooth: true
      },
      {
        name: '成交用户',
        type: 'line',
        data: generateUserStatisticsData('conversions', 7),
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#f5222d',
          width: 2
        },
        itemStyle: {
          color: '#f5222d',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        smooth: true
      },
      {
        name: '付费会员',
        type: 'line',
        data: generateUserStatisticsData('vipUsers', 7),
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#722ed1',
          width: 2
        },
        itemStyle: {
          color: '#722ed1',
          borderColor: '#ffffff',
          borderWidth: 2
        },
        smooth: true
      }
    ],
    animationDuration: 1000,
    animationEasing: 'cubicOut'
  }
}

// 辅助函数：生成日期标签
function generateDateLabels(days: number, step: number = 1): string[] {
  const labels = []
  const today = new Date()

  for (let i = days - 1; i >= 0; i -= step) {
    const date = new Date(today)
    date.setDate(date.getDate() - i)
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    labels.push(`${month}-${day}`)
  }

  return labels
}

// 辅助函数：生成订单金额数据
function generateAmountData(days: number): number[] {
  const data = []
  for (let i = 0; i < days; i++) {
    // 生成12000-25000之间的随机金额
    data.push(Math.floor(Math.random() * 13000) + 12000)
  }
  return data
}

// 辅助函数：生成订单数量数据
function generateCountData(days: number): number[] {
  const data = []
  for (let i = 0; i < days; i++) {
    // 生成50-150之间的随机数量
    data.push(Math.floor(Math.random() * 100) + 50)
  }
  return data
}

// 辅助函数：生成用户趋势数据
function generateUserTrendData(days: number): number[] {
  const data = []
  let base = 100

  for (let i = 0; i < days; i++) {
    base += Math.floor(Math.random() * 20) - 5 // -5到+15的随机变化
    base = Math.max(50, base) // 最低50
    data.push(base)
  }

  return data
}

// 辅助函数：生成用户统计数据
function generateUserStatisticsData(type: string, points: number): number[] {
  const data = []
  const baseValues = {
    newUsers: 120,
    visitors: 450,
    pageViews: 680,
    conversions: 45,
    vipUsers: 12
  }

  let base = baseValues[type as keyof typeof baseValues] || 100

  for (let i = 0; i < points; i++) {
    const variation = type === 'vipUsers' ? 0.3 : 0.2 // 付费会员变化小一些
    base += Math.floor(Math.random() * (base * variation * 2)) - (base * variation)
    base = Math.max(0, base)
    data.push(Math.floor(base))
  }

  return data
}

// Mock API 数据接口
export const mockApi = {
  // 获取订单统计数据
  getOrderStats: (period: string = '30days') => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          period,
          amountData: generateAmountData(30),
          countData: generateCountData(30),
          dateLabels: generateDateLabels(30)
        })
      }, 500)
    })
  },

  // 获取用户趋势数据
  getUserTrend: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: generateUserTrendData(30),
          dateLabels: generateDateLabels(30)
        })
      }, 500)
    })
  },

  // 获取用户构成数据
  getUserComposition: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve([
          { name: '自然流量', value: 35, color: '#1890ff' },
          { name: '搜索引擎', value: 28, color: '#52c41a' },
          { name: '社交媒体', value: 20, color: '#faad14' },
          { name: '广告投放', value: 12, color: '#f5222d' },
          { name: '其他', value: 5, color: '#722ed1' }
        ])
      }, 500)
    })
  },

  // 获取用户统计数据
  getUserStatistics: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          newUsers: generateUserStatisticsData('newUsers', 7),
          visitors: generateUserStatisticsData('visitors', 7),
          pageViews: generateUserStatisticsData('pageViews', 7),
          conversions: generateUserStatisticsData('conversions', 7),
          vipUsers: generateUserStatisticsData('vipUsers', 7),
          dateLabels: generateDateLabels(30, 7)
        })
      }, 500)
    })
  }
}

// 导出所有配置
export const chartConfigs = {
  orderChart: getOrderChartOption,
  userTrendChart: getUserTrendOption,
  userCompositionChart: getUserCompositionOption,
  userStatisticsChart: getUserStatisticsOption,
  mockApi
}