import { col } from '../csv.js';
import {
  PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
  lineSeries, footnote, watermarks, LAYOUT,
} from '../theme.js';

/**
 * 泡泡玛特主要IP收入趋势图
 * 多条折线展示各IP的收入变化
 */
export function ipChart(rows, { width, height }) {
  // 提取时期（从第一行的列名）
  const periods = Object.keys(rows[0]).filter(k => k !== 'ip');

  // 为每个IP创建一条折线
  const ipColors = {
    'THE MONSTERS': PALETTE.brown,
    'MOLLY': PALETTE.coral,
    'SKULLPANDA': PALETTE.purple,
    'CRYBABY': PALETTE.red,
    'DIMOO': PALETTE.blue,
    'HIRONO-小野': PALETTE.orange,
    'HACIPUPU': PALETTE.sage,
    '星星人': PALETTE.navy,
  };

  const series = rows.map((row) => {
    const ipName = row.ip;
    const data = periods.map(p => row[p]);

    return lineSeries({
      name: ipName,
      data,
      color: ipColors[ipName] || PALETTE.grey,
      labelPosition: 'top',
      formatter: (p) => (p.value > 10 ? p.value.toFixed(0) : ''),
      width: 2.5,
    });
  });

  return {
    backgroundColor: '#fff',
    title: {
      ...titleStyle,
      text: '泡泡玛特主要IP收入趋势（2021H1-2025H2）',
      subtext: '单位：亿元',
    },
    legend: {
      ...legendStyle,
      top: LAYOUT.legendTop,
      itemGap: 20,
      data: rows.map(r => ({
        name: r.ip,
        icon: 'emptyCircle',  // 折线图：空心圆圈
      })),
    },
    grid: { left: 78, right: 56, top: LAYOUT.gridTop, bottom: 70 },
    tooltip: {
      trigger: 'axis',
      valueFormatter: (v) => `${v.toFixed(2)} 亿元`,
      textStyle: { fontFamily: FONT },
    },
    xAxis: { ...periodAxis, data: periods },
    yAxis: {
      ...axisCommon,
      type: 'value',
      name: '收入（亿元）',
      nameLocation: 'middle',
      nameGap: 52,
      nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
      min: 0,
      max: 100,
      interval: 20,
    },
    series,
    graphic: [
      ...watermarks(width, height),
      footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
    ],
  };
}