/** 大屏 2D 环形饼图（渐变 + 中心汇总 + 悬停放大，交易销售/畜牧资源等复用） */

export const MALL_PIE_COLORS = [
  '#5ef0c8',
  '#ecd27b',
  '#6eb5ff',
  '#22a85a',
  '#c9a227',
  '#8b7cf6',
  '#ffb88c',
  '#3d7dd8'
]

const MALL_PIE_LEGEND = {
  type: 'scroll',
  orient: 'vertical',
  right: 2,
  top: 'middle',
  height: '72%',
  itemWidth: 8,
  itemHeight: 8,
  itemGap: 5,
  pageIconColor: '#5ef0c8',
  pageIconInactiveColor: '#4a6b62',
  pageTextStyle: { color: '#a8d4c8', fontSize: 9 },
  textStyle: { color: '#a8d4c8', fontSize: 9 }
}

const MALL_PIE_TOOLTIP = {
  trigger: 'item',
  backgroundColor: 'rgba(4, 30, 26, 0.92)',
  borderColor: 'rgba(61, 217, 176, 0.35)',
  borderWidth: 1,
  textStyle: { color: '#e8eef5', fontSize: 11 }
}

function clampByte(n) {
  return Math.min(255, Math.max(0, Math.round(n)))
}

function tintHex(hex, ratio) {
  const h = String(hex || '').replace('#', '')
  if (h.length !== 6) {
    return hex
  }
  const r = parseInt(h.slice(0, 2), 16)
  const g = parseInt(h.slice(2, 4), 16)
  const b = parseInt(h.slice(4, 6), 16)
  const target = ratio >= 0 ? 255 : 0
  const p = Math.abs(ratio)
  const nr = clampByte(r + (target - r) * p)
  const ng = clampByte(g + (target - g) * p)
  const nb = clampByte(b + (target - b) * p)
  return `#${nr.toString(16).padStart(2, '0')}${ng.toString(16).padStart(2, '0')}${nb.toString(16).padStart(2, '0')}`
}

function pieSliceStyle(color) {
  return {
    color: {
      type: 'linear',
      x: 0.2,
      y: 0,
      x2: 0.85,
      y2: 1,
      colorStops: [
        { offset: 0, color: tintHex(color, 0.42) },
        { offset: 0.45, color },
        { offset: 1, color: tintHex(color, -0.28) }
      ]
    },
    borderRadius: 6,
    borderColor: 'rgba(4, 30, 26, 0.85)',
    borderWidth: 2,
    shadowBlur: 14,
    shadowColor: 'rgba(0, 0, 0, 0.38)'
  }
}

/** 2D 环形饼图（渐变 + 中心汇总 + 悬停放大） */
export function buildMallPie2DOption(data, opts = {}) {
  const {
    colors = MALL_PIE_COLORS,
    legend = {},
    summaryTitle = '',
    summarySubtext = '',
    tooltipFormatter,
    center = ['36%', '50%'],
    radius = ['46%', '70%']
  } = opts

  const pieData = data.map((item, i) => {
    const base = colors[i % colors.length]
    return {
      name: item.name,
      value: item.value,
      itemStyle: pieSliceStyle(base)
    }
  })

  const hasSummary = summaryTitle !== ''
  const centerLabelFormatter = () => `{title|${summaryTitle}}\n{sub|${summarySubtext}}`
  const centerLabel = hasSummary
    ? {
        show: true,
        position: 'center',
        silent: true,
        formatter: (params) => (params.dataIndex === 0 ? centerLabelFormatter() : ''),
        rich: {
          title: { color: '#5ef0c8', fontSize: 14, fontWeight: 700, lineHeight: 20 },
          sub: { color: '#a8d4c8', fontSize: 9, lineHeight: 14 }
        }
      }
    : { show: false }

  return {
    color: colors,
    tooltip: {
      ...MALL_PIE_TOOLTIP,
      formatter: tooltipFormatter
    },
    legend: {
      ...MALL_PIE_LEGEND,
      data: data.map((d) => d.name),
      ...legend
    },
    series: [
      {
        type: 'pie',
        radius,
        center,
        minAngle: 4,
        avoidLabelOverlap: true,
        padAngle: 1.5,
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.35)'
        },
        emphasis: {
          scale: true,
          scaleSize: 12,
          label: hasSummary
            ? {
                show: true,
                position: 'center',
                silent: true,
                formatter: centerLabelFormatter,
                rich: centerLabel.rich
              }
            : { show: false },
          itemStyle: {
            shadowBlur: 22,
            shadowColor: 'rgba(94, 240, 200, 0.42)'
          }
        },
        label: centerLabel,
        labelLine: { show: false },
        data: pieData
      }
    ]
  }
}
