import type { ComponentDemo } from './types';

// ─── NumCard ──────────────────────────────────────────────────────────────────
const numCardDemo: ComponentDemo = {
  id: 'num-card',
  title: 'NumCard',
  description:
    "项目唯一的数字指标卡片，用于展示单一关键数字（如总数、成功率、延迟、金额）。传 null / undefined / NaN 自动显示 '--'，无需手动判断。",
  imports: `import { NumCard } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'variant',
      type: '"default" | "withChart"',
      required: true,
      desc: 'default: 28px 值字体，通用指标卡（支持 comparisons）；withChart: 左数字右折线图',
    },
    { name: 'title', type: 'ReactNode', required: true, desc: '卡片标题' },
    {
      name: 'value',
      type: 'number | string | ReactNode | null',
      desc: '指标值，传 null / undefined / NaN / 空字符串时自动显示 "--"',
    },
    {
      name: 'unit',
      type: 'ReactNode',
      desc: '数值右侧单位，字号缩小为 0.6em，显示在数值和 suffix 之间',
    },
    { name: 'prefix', type: 'ReactNode', desc: '数值左侧前缀，如货币符号 ¥' },
    {
      name: 'suffix',
      type: 'ReactNode',
      desc: '数值右侧后缀，紧跟在 unit 之后',
    },
    {
      name: 'subTitle',
      type: 'ReactNode',
      desc: '数值下方副标题小字，居中显示，12px 灰色，适合补充单位说明（如 MUSD、截止今日）',
    },
    { name: 'icon', type: 'ReactNode', desc: '标题左侧图标（compact 常用）' },
    {
      name: 'metricId',
      type: 'string',
      desc: '指标 ID，传入后标题自动包裹 MetricInfoTooltip 展示指标详情，与 info 二选一',
    },
    {
      name: 'info',
      type: 'string',
      desc: 'hover 提示文字，在标题右侧显示 InfoIcon；与 metricId 二选一',
    },
    {
      name: 'showInfoIcon',
      type: 'boolean',
      default: 'true',
      desc: '是否显示 InfoIcon；info 存在时有效',
    },
    {
      name: 'formatNumber',
      type: 'boolean',
      default: 'true',
      desc: '数字自动加千位分隔符；含单位的预格式化字符串须传 false',
    },
    { name: 'valueColor', type: 'string', desc: '自定义数值颜色' },
    {
      name: 'comparisons',
      type: 'ComparisonItem[]',
      desc: '环比数组，每项 { label: string, value: string, isUp: boolean }；isUp=true 绿色 ↑，false 红色 ↓',
    },
    {
      name: 'onTitleClick',
      type: '() => void',
      desc: '标题点击回调，显示右箭头 →，可跳转详情页',
    },
    {
      name: 'loading',
      type: 'boolean',
      default: 'false',
      desc: 'true 时显示 Spin 加载态',
    },
    {
      name: 'skeleton',
      type: 'boolean',
      default: 'false',
      desc: '与 loading 同时为 true 时显示骨架屏替代 Spin',
    },
    {
      name: 'styles',
      type: '{ container?, title?, value?, subTitle? }',
      desc: '各子区域 CSSProperties 精细控制，优先级高于 variant 默认样式',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器自定义样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<NumCard
  variant="default"
  title="指标名称"
  value={12345}
  unit="台"
  testId="canvas-numcard-default"
/>`,
    },
  ],
};

// ─── Filter ────────────────────────────────────────────────────────────────────
const filterDemo: ComponentDemo = {
  id: 'filter',
  title: 'Filter',
  description:
    '项目统一的过滤条容器，封装布局标准化、搜索/重置按钮、Form 实例管理。3 种 layout：card-grid（Card+Grid）/ inline（单行）/ inline-right（右对齐，无按钮）。',
  imports: `import { Filter } from "@gadmin2n/charts";
import { Form, Select, DatePicker, Input } from "antd";`,
  props: [
    {
      name: 'layout',
      type: '"card-grid" | "inline" | "inline-right"',
      default: '"card-grid"',
      desc: 'card-grid: Card 容器 + Grid 布局；inline: 单行水平排列；inline-right: 右对齐，默认无查询/重置按钮',
    },
    {
      name: 'columns',
      type: 'number',
      default: '4',
      desc: 'card-grid 模式下 Grid 列数，按钮自动占最后 1 格',
    },
    {
      name: 'onSearch',
      type: '(values: Record<string, unknown>) => void',
      required: true,
      desc: '点击「查询」按钮回调，参数为 Form.getFieldsValue() 全量值',
    },
    {
      name: 'onReset',
      type: '(form: FormInstance) => void',
      desc: '点击「重置」回调；不传时只执行 form.resetFields()，不触发 onSearch',
    },
    {
      name: 'formProps',
      type: 'FormProps',
      desc: '透传至内部 antd Form，支持 initialValues / onValuesChange 等所有 Form 属性（form 和 layout 由组件内部管理）',
    },
    {
      name: 'form',
      type: 'FormInstance',
      desc: '外部传入 form 实例，用于父组件需要主动调用 form.resetFields() / form.getFieldsValue() 等方法的场景',
    },
    {
      name: 'showActions',
      type: 'boolean',
      desc: '是否显示查询/重置按钮。inline-right 默认 false，其余默认 true',
    },
    {
      name: 'searchText',
      type: 'string',
      desc: '查询按钮文字，默认读 i18n common.query',
    },
    {
      name: 'resetText',
      type: 'string',
      desc: '重置按钮文字，默认读 i18n common.reset',
    },
    {
      name: 'children',
      type: 'ReactNode',
      required: true,
      desc: '过滤字段，通常为 Form.Item 列表',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'card-grid',
      label: 'card-grid',
      code: `<Filter
  layout="card-grid"
  columns={4}
  onSearch={(values) => console.log("search:", values)}
  testId="canvas-filter-card-grid"
>
  <Form.Item name="keyword" label="关键词">
    <Input placeholder="请输入" style={{ width: "100%" }} />
  </Form.Item>
  <Form.Item name="region" label="大区">
    <Select options={[
      { label: "APAC", value: "APAC" },
      { label: "EMEA", value: "EMEA" },
      { label: "Americas", value: "AMER" },
    ]} style={{ width: "100%" }} />
  </Form.Item>
  <Form.Item name="type" label="类型">
    <Select options={[
      { label: "类型A", value: "a" },
      { label: "类型B", value: "b" },
    ]} style={{ width: "100%" }} />
  </Form.Item>
</Filter>`,
    },
    {
      name: 'inline',
      label: 'inline',
      code: `<Filter
  layout="inline"
  onSearch={(values) => console.log("search:", values)}
  testId="canvas-filter-inline"
>
  <Form.Item name="keyword" label="关键词">
    <Input placeholder="请输入" style={{ width: 200 }} />
  </Form.Item>
  <Form.Item name="type" label="类型">
    <Select
      placeholder="全部类型"
      allowClear
      style={{ width: 150 }}
      options={[
        { label: "类型A", value: "a" },
        { label: "类型B", value: "b" },
      ]}
    />
  </Form.Item>
</Filter>`,
    },
    {
      name: 'inline-right',
      label: 'inline-right',
      code: `<Filter
  layout="inline-right"
  formProps={{
    initialValues: { granularity: "day" },
    onValuesChange: (_, all) => console.log("change:", all),
  }}
  onSearch={(values) => console.log("search:", values)}
  testId="canvas-filter-inline-right"
>
  <Form.Item name="granularity" style={{ marginBottom: 0 }}>
    <Select
      style={{ width: 120 }}
      options={[
        { label: "按天", value: "day" },
        { label: "按周", value: "week" },
        { label: "按月", value: "month" },
      ]}
    />
  </Form.Item>
</Filter>`,
    },
  ],
};

// ─── BarChart ──────────────────────────────────────────────────────────────────
const barChartDemo: ComponentDemo = {
  id: 'bar-chart',
  title: 'BarChart',
  description:
    '项目统一柱状图，封装标准 ECharts 配置。支持纵柱、横柱、多系列堆叠、百分比堆叠，数据格式随 variant 不同。',
  imports: `import { BarChart } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'variant',
      type: '"bar" | "groupBar"',
      default: '"bar"',
      desc: 'bar: 单系列柱状图；groupBar: 多系列柱状图（通过 stacked/percent 控制行为）',
    },
    {
      name: 'direction',
      type: '"vertical" | "horizontal"',
      default: '"vertical"',
      desc: '图表方向：vertical 为纵向（默认），horizontal 为横向',
    },
    {
      name: 'stacked',
      type: 'boolean',
      default: 'false',
      desc: '多系列堆叠模式（仅 groupBar 生效）',
    },
    {
      name: 'percent',
      type: 'boolean',
      default: 'false',
      desc: '百分比堆叠（仅 stacked=true 时生效）',
    },
    {
      name: 'data',
      type: 'BarDataSingle | BarDataMulti | BarDataPercent',
      required: true,
      desc: '单系列用 { name, value, extraTxt? }[]；多系列用 { xData, series }；百分比堆叠用 { xData, series（百分比值）, allTypes, originalData（原始计数，用于 tooltip/label）}',
    },
    { name: 'unit', type: 'string', desc: 'tooltip 和 label 中显示的单位' },
    {
      name: 'title',
      type: 'string | ReactNode',
      desc: '字符串自动套居中 12px bold 样式；传 ReactNode 完全自定义',
    },
    {
      name: 'height',
      type: 'number | string',
      default: '300',
      desc: '图表容器高度（px）',
    },
    {
      name: 'showLabel',
      type: 'boolean',
      default: 'true',
      desc: '是否在柱顶/柱右显示数值标签；堆叠模式仅最后一段显示总量',
    },
    {
      name: 'legendShow',
      type: 'boolean',
      desc: '是否显示图例，多系列默认 true，单系列默认 false',
    },
    {
      name: 'chartProps',
      type: 'Record<string, any>',
      desc: '透传至 ECharts option，支持 yAxis / xAxis / grid / seriesProps（透传到每条 series）/ reverseTooltip（tooltip 反向排序）',
    },
    {
      name: 'option',
      type: 'EChartsCoreOption',
      desc: '完全自定义 option，与组件生成的 option 浅合并，优先级最高',
    },
    {
      name: 'onChartReady',
      type: '(instance: ECharts | null) => void',
      desc: '图表实例就绪回调，用于 chart linking（如 BarChart ↔ PieChart 联动）；销毁时传 null',
    },
    {
      name: 'loading',
      type: 'boolean',
      default: 'false',
      desc: 'true 时显示 Spin 加载态',
    },
    {
      name: 'empty',
      type: 'boolean',
      desc: '强制显示空态；未传时根据数据是否为空自动判断',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'bar',
      label: 'bar',
      code: `<MultiChart
  defaultVariant="bar"
  charts={["bar","line","pie"]}
  data={{ xData: ["A", "B", "C", "D"], series: [{ name: "数据", data: [420, 580, 310, 670] }] }}
  showDownload={true}
  height={300}
  testId="demo-barchart-bar"
/>`,
    },
    {
      name: 'groupBar',
      label: 'groupBar',
      code: `<MultiChart
  defaultVariant="bar"
  charts={["bar","line","pie"]}
  data={{ xData: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], series: [{ name: "系列A", data: [120, 132, 101, 134, 90, 150] }, { name: "系列B", data: [220, 182, 191, 234, 290, 330] }] }}
  chartConfig={{"bar":{"variant":"groupBar"}}}
  showDownload={true}
  height={300}
  testId="demo-barchart-group"
/>`,
    },
  ],
};

// ─── LineChart ─────────────────────────────────────────────────────────────────
const lineChartDemo: ComponentDemo = {
  id: 'line-chart',
  title: 'LineChart',
  description:
    '项目统一折线图，支持单系列、多系列堆叠、面积堆叠（hover 只高亮当前系列）、分组面积折线（hover 同父类分组高亮）、迷你趋势线、双 Y 轴混合图。',
  imports: `import { LineChart } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'variant',
      type: '"line" | "mulAreaLine" | "dualYAxis"',
      default: '"line"',
      desc: 'line: 默认折线图（单/多系列自动判断）；mulAreaLine: 复合面积折线（外层 BG 着色区域 + 内层虚线）；dualYAxis: 双 Y 轴混合图（折线+柱状）',
    },
    {
      name: 'data',
      type: 'LineDataSingle | LineDataMulti | LineDataDualYAxis',
      required: true,
      desc: '单系列用 { name, value }[]；多系列用 { xData, series[] }；dualYAxis 增加 yData 和 series[].yAxisIndex / type',
    },
    { name: 'title', type: 'string | ReactNode', desc: '图表标题' },
    {
      name: 'unit',
      type: 'string',
      desc: 'Y 轴单位，显示在 tooltip 和 Y 轴 label 中（dualYAxis 使用 yData 中的 unit）',
    },
    {
      name: 'height',
      type: 'number | string',
      default: '300',
      desc: '图表容器高度（px）',
    },
    {
      name: 'smartYAxis',
      type: 'boolean',
      default: 'false',
      desc: '自动计算 Y 轴范围避免趋势被压扁，两侧加 30% padding；适用于 line / stackLine',
    },
    {
      name: 'legendShow',
      type: 'boolean',
      desc: '是否显示图例，多系列默认 true，单系列默认 false',
    },
    {
      name: 'smartLabel',
      type: 'boolean',
      default: 'false',
      desc: '仅 line variant：label 只在每隔一个刻度的点上显示，避免密集重叠',
    },
    {
      name: 'markLine',
      type: '{ value: number, color?: string }',
      desc: '在指定 Y 值绘制水平参考线，适用于 stackLine（如带宽 80% 阈值）',
    },
    {
      name: 'chartProps',
      type: 'Record<string, any>',
      desc: '透传至 ECharts option，支持 yAxis / xAxis / grid / legend / tooltip / seriesProps（覆盖 series 级配置）',
    },
    {
      name: 'onChartReady',
      type: '(instance: ECharts | null) => void',
      desc: '图表实例就绪回调，用于 PieChart ↔ LineChart 联动；销毁时传 null',
    },
    {
      name: 'onEvents',
      type: 'Record<string, (params, chart) => void>',
      desc: 'ECharts 事件绑定（click、mouseover 等）',
    },
    {
      name: 'loading',
      type: 'boolean',
      default: 'false',
      desc: 'true 时显示 Spin 加载态',
    },
    {
      name: 'empty',
      type: 'boolean',
      desc: '强制显示空态；未传时根据数据是否为空自动判断',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<MultiChart
  defaultVariant="line"
  charts={["line","bar","pie"]}
  data={{ xData: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], series: [{ name: "利用率", data: [65, 72, 78, 85, 82, 91] }] }}
  showDownload={true}
  height={300}
  testId="demo-linechart-default"
/>`,
    },
  ],
};

// ─── PieChart ──────────────────────────────────────────────────────────────────
const pieChartDemo: ComponentDemo = {
  id: 'pie-chart',
  title: 'PieChart',
  description:
    '项目统一饼图，支持标准饼图、环形图（甜甜圈）、旭日图。数据自动按 value 从大到小排序，超 topN 项自动合并为 Others。',
  imports: `import { PieChart } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'variant',
      type: '"pie" | "ring" | "sunburst"',
      default: '"pie"',
      desc: 'pie: 标准饼图；ring: 环形图（甜甜圈，默认不显示图例）；sunburst: 旭日图（支持多层嵌套，children 字段）',
    },
    {
      name: 'data',
      type: '{ name: string, value: number, itemStyle?: { color? }, comment?, children? }[]',
      required: true,
      desc: '数据项，自动按 value 降序排序；itemStyle.color 可为每项指定颜色；sunburst 通过 children 支持嵌套结构',
    },
    { name: 'title', type: 'string | ReactNode', desc: '图表标题' },
    {
      name: 'height',
      type: 'number | string',
      default: '300',
      desc: '图表容器高度（px）',
    },
    {
      name: 'topN',
      type: 'number',
      default: '5',
      desc: '显示前 N 项，其余自动合并为 Others；传 0 不限制；hover Others 展示明细 tooltip（sunburst 不受影响）',
    },
    {
      name: 'insideLabelThreshold',
      type: 'number',
      desc: '扇区占比（0-100）超过此值时将 label 放到扇区内部（白色）；仅 pie variant 有效，推荐 15',
    },
    {
      name: 'legendOrient',
      type: '"horizontal" | "vertical"',
      default: '"horizontal"',
      desc: 'horizontal: 底部横排滚动图例；vertical: 右侧纵排图例',
    },
    {
      name: 'legendShow',
      type: 'boolean',
      desc: '是否显示图例；pie 默认 true，ring 默认 false，sunburst 默认 true',
    },
    {
      name: 'chartProps',
      type: 'Record<string, any>',
      desc: '透传至 ECharts series 配置，与基准配置浅合并',
    },
    {
      name: 'option',
      type: 'EChartsCoreOption',
      desc: '完全自定义 option，与组件生成的 option 浅合并，优先级最高',
    },
    { name: 'onClick', type: '(params) => void', desc: '饼图扇区点击回调' },
    {
      name: 'onEvents',
      type: 'Record<string, (params, chart) => void>',
      desc: '其他 ECharts 事件绑定',
    },
    {
      name: 'loading',
      type: 'boolean',
      default: 'false',
      desc: 'true 时显示 Spin 加载态',
    },
    {
      name: 'empty',
      type: 'boolean',
      desc: '强制显示空态；未传时根据 data.length === 0 自动判断',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'pie',
      label: 'pie',
      code: `<MultiChart
  defaultVariant="pie"
  charts={["pie","bar","line"]}
  data={{ xData: ["类目A", "类目B", "类目C", "类目D", "类目E"], series: [{ name: "分布", data: [1245, 876, 234, 189, 156] }] }}
  showDownload={true}
  height={300}
  testId="demo-piechart-pie"
/>`,
    },
  ],
};

// PieChart 备用 variants（不在组件库中展示，保留代码供参考）
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _pieChartUnusedVariants = [
  {
    name: 'ring',
    label: 'ring',
    code: `<PieChart
  variant="ring"
  data={[
    { name: "正常", value: 820, itemStyle: { color: "#52c41a" } },
    { name: "警告", value: 124, itemStyle: { color: "#faad14" } },
    { name: "异常", value:  42, itemStyle: { color: "#f5222d" } },
  ]}
  height={300}
  title="状态"
  legendShow={true}
  topN={0}
  testId="canvas-piechart-ring"
/>`,
  },
  {
    name: 'sunburst',
    label: 'sunburst',
    code: `<PieChart
  variant="sunburst"
  data={[
    {
      name: "A类", value: 600,
      children: [
        { name: "A-1", value: 320 },
        { name: "A-2", value: 180 },
        { name: "A-3", value: 100 },
      ],
    },
    {
      name: "B类", value: 300,
      children: [
        { name: "B-1", value: 150 },
        { name: "B-2", value:  90 },
        { name: "B-3", value:  60 },
      ],
    },
    {
      name: "C类", value: 200,
      children: [
        { name: "C-1", value: 120 },
        { name: "C-2", value:  80 },
      ],
    },
  ]}
  height={360}
  title="分类"
  legendShow={true}
  testId="canvas-piechart-sunburst"
/>`,
  },
];

// ─── RadarChart ────────────────────────────────────────────────────────────────
const radarChartDemo: ComponentDemo = {
  id: 'radar-chart',
  title: 'RadarChart',
  description:
    '项目统一雷达图，适用于多维度能力评估和多实体横向对比。indicators 和 series.data 长度必须相同。',
  imports: `import { RadarChart } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'indicators',
      type: '{ name: string, max?: number, min?: number }[]',
      required: true,
      desc: '维度定义，max 默认 100，min 默认 0，数组长度须与 series[].data 相同',
    },
    {
      name: 'series',
      type: '{ name: string, data: number[], color?: string }[]',
      required: true,
      desc: '数据系列，data 与 indicators 顺序严格对应；color 自定义该系列颜色',
    },
    {
      name: 'title',
      type: 'string | ReactNode',
      desc: '图表标题，字符串套默认样式；ReactNode 完全自定义',
    },
    {
      name: 'legendShow',
      type: 'boolean',
      default: 'true',
      desc: '是否显示图例；单系列建议传 false',
    },
    {
      name: 'height',
      type: 'number | string',
      default: '300',
      desc: '图表容器高度（px）',
    },
    {
      name: 'chartProps',
      type: 'object',
      desc: "透传至 ECharts option，支持 radar（含 shape: 'circle' 切换圆形）、legend、tooltip；推荐覆盖 radar.splitArea.areaStyle.color 避免默认白色遮罩",
    },
    {
      name: 'loading',
      type: 'boolean',
      default: 'false',
      desc: 'true 时显示 Spin 加载态',
    },
    {
      name: 'empty',
      type: 'boolean',
      desc: '强制显示空态；未传时根据 series.length === 0 自动判断',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<RadarChart
  indicators={[
    { name: "维度A" }, { name: "维度B" },
    { name: "维度C" }, { name: "维度D" },
    { name: "维度E" }, { name: "维度F" },
  ]}
  series={[
    { name: "组A", data: [92, 88, 75, 84, 90, 78], color: "#3889f3" },
    { name: "组B", data: [85, 92, 88, 91, 83, 95], color: "#0db46c" },
  ]}
  showDownload={true}
  height={300}
  testId="canvas-radar-demo"
/>`,
    },
  ],
};

// ─── TreemapChart ──────────────────────────────────────────────────────────────
const treemapChartDemo: ComponentDemo = {
  id: 'treemap-chart',
  title: 'TreemapChart',
  description:
    '矩形树图，方块面积 = 数值大小，适合多分类占比展示（>8 项时替代饼图）。自动检测扁平 / 嵌套结构。',
  imports: `import { TreemapChart } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'data',
      type: 'TreemapDataItem[]',
      required: true,
      desc: '有 children 字段视为嵌套结构，底部自动生成可点击图例；无 children 视为扁平结构，自动按色相排序聚集相近颜色',
    },
    {
      name: 'data[].name',
      type: 'string',
      required: true,
      desc: '节点名称，显示在方块内',
    },
    {
      name: 'data[].value',
      type: 'number',
      required: true,
      desc: '节点数值，决定方块面积大小',
    },
    {
      name: 'data[].color',
      type: 'string',
      desc: '顶层节点颜色；子节点继承父节点颜色',
    },
    {
      name: 'data[].children',
      type: 'TreemapDataItem[]',
      desc: '子节点列表，有此字段时触发嵌套模式，顶层 value 由子节点之和决定',
    },
    { name: 'title', type: 'string | ReactNode', desc: '图表标题' },
    {
      name: 'height',
      type: 'number | string',
      default: '400',
      desc: '图表容器高度（px）',
    },
    {
      name: 'chartProps',
      type: 'Record<string, any>',
      desc: '透传至 ECharts option，可覆盖 tooltip（含 formatter）、series 等字段',
    },
    {
      name: 'loading',
      type: 'boolean',
      default: 'false',
      desc: 'true 时显示 Spin 加载态（绝对定位覆盖层，不占用图表空间）',
    },
    {
      name: 'empty',
      type: 'boolean',
      desc: '强制显示空态；未传时根据 data.length === 0 自动判断',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<TreemapChart
  data={[
    {
      name: "A组",
      color: "#3889f3",
      children: [
        { name: "A-1", value: 42 },
        { name: "A-2", value: 28 },
        { name: "A-3", value: 35 },
      ],
    },
    {
      name: "B组",
      color: "#0db46c",
      children: [
        { name: "B-1", value: 31 },
        { name: "B-2", value: 24 },
        { name: "B-3", value: 18 },
      ],
    },
    {
      name: "C组",
      color: "#f5a623",
      children: [
        { name: "C-1", value: 12 },
        { name: "C-2", value: 17 },
      ],
    },
  ]}
  height={400}
  title="矩形树图"
  showDownload={true}
  testId="canvas-treemap-demo"
/>`,
    },
  ],
};

// ─── Table ─────────────────────────────────────────────────────────────────────
const tableDemo: ComponentDemo = {
  id: 'table',
  title: 'Table',
  description:
    'drop-in 替换 antd Table，传 pagination 对象自动补 showSizeChanger + pageSizeOptions。不传 pagination 则不分页。',
  imports: `import { Table } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'dataSource',
      type: 'object[]',
      required: true,
      desc: '表格数据，每项须包含 key 字段（antd Table 要求）',
    },
    {
      name: 'columns',
      type: 'ColumnType<T>[]',
      required: true,
      desc: '列定义，与 antd Table columns 完全相同',
    },
    {
      name: 'pagination',
      type: 'TablePaginationConfig | false',
      desc: '分页配置。未传或 false → 不显示分页；传对象自动补 showSizeChanger + pageSizeOptions（调用者显式传入的字段优先级更高）',
    },
    {
      name: 'entityName',
      type: 'string',
      desc: "传入后 showTotal 显示 'Total {n} {entityName} in total'；pagination.showTotal 已传时忽略",
    },
    {
      name: 'size',
      type: '"large" | "middle" | "small"',
      desc: '表格 size，默认使用 antd 默认值',
    },
    {
      name: 'scroll',
      type: '{ x?: number, y?: number }',
      desc: '开启横向/纵向滚动；x 为表格总宽度，开启时每列须设 width',
    },
    { name: 'loading', type: 'boolean', desc: '表格加载态' },
    {
      name: 'rowSelection',
      type: 'TableRowSelection<T>',
      desc: '行选择配置，与 antd Table rowSelection 相同',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<Table
  size="small"
  dataSource={[
    { key: "1", name: "Alice", dept: "Engineering", status: "在职" },
    { key: "2", name: "Bob",   dept: "Design",      status: "在职" },
    { key: "3", name: "Carol", dept: "Marketing",   status: "离职" },
  ]}
  columns={[
    { title: "姓名", dataIndex: "name", key: "name" },
    { title: "部门", dataIndex: "dept", key: "dept" },
    { title: "状态", dataIndex: "status", key: "status" },
  ]}
  showDownload={true}
  testId="canvas-table-default"
/>`,
    },
  ],
};

// ─── WorldMap ─────────────────────────────────────────────────────────────────
const worldMapDemo: ComponentDemo = {
  id: 'world-map',
  title: 'WorldMap',
  description:
    '项目统一世界地图，封装标准 geo 基准配置（Highcharts 坐标系，aspectScale 固定为 1）。通过 option 透传 series、geo 差异字段即可。',
  imports: `import { WorldMap } from "@gadmin2n/charts";`,
  props: [
    {
      name: 'option',
      type: 'EChartsOption',
      required: true,
      desc: 'ECharts option 差异字段，与内部基准配置浅合并；须包含 geo（传 {} 使用基准配置）和 series',
    },
    {
      name: 'option.geo',
      type: 'GeoComponentOption',
      desc: '地理坐标系配置；传 {} 使用基准配置；可通过 regions 覆盖各国颜色；aspectScale 固定为 1（Highcharts 预投影坐标系）',
    },
    {
      name: 'option.geo.regions',
      type: '{ name: string, itemStyle: { areaColor: string } }[]',
      desc: "各国/地区样式覆盖，name 需使用英文国家名（如 'China'、'US'）",
    },
    {
      name: 'option.series',
      type: 'SeriesOption[]',
      desc: "ECharts series 数组；effectScatter 类型配合 coordinateSystem: 'geo' 实现波纹散点",
    },
    {
      name: 'option.tooltip',
      type: 'TooltipOption',
      desc: "tooltip 配置，trigger: 'item' 适合散点图",
    },
    {
      name: 'loading',
      type: 'boolean',
      default: 'false',
      desc: 'true 时显示 Spin 加载态',
    },
    {
      name: 'style',
      type: 'CSSProperties',
      desc: '容器样式，必须通过 height 指定高度（默认 600px）；支持 aspectRatio、flex 等响应式写法',
    },
    {
      name: 'onEvents',
      type: 'Record<string, (params, chart) => void>',
      desc: 'ECharts 事件绑定（click、mousemove 等）；必须用 useMemo 保持引用稳定，否则地图会在每次渲染时闪烁重建',
    },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填，不传编译报错',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<WorldMap
  option={{
    geo: {
      regions: [
        { name: "China",  itemStyle: { areaColor: "#f8c471" } },
        { name: "US",     itemStyle: { areaColor: "#f2b4aa" } },
        { name: "Russia", itemStyle: { areaColor: "#f5d7b2" } },
        { name: "Brazil", itemStyle: { areaColor: "#aed6f1" } },
        { name: "India",  itemStyle: { areaColor: "#a9dfbf" } },
      ],
    },
    series: [],
  }}
  style={{ height: 400 }}
  showDownload={true}
  testId="canvas-worldmap-basic"
/>`,
    },
    {
      name: 'heatmap',
      label: 'heatmap',
      testId: 'canvas-worldmap-heatmap',
      code: `<WorldMap
  option={{
    geo: {},
    visualMap: {
      min: 0,
      max: 1000,
      left: "left",
      top: "bottom",
      text: ["High", "Low"],
      calculable: true,
      inRange: { color: ["#e0f3f8", "#abd9e9", "#74add1", "#4575b4", "#313695"] },
    },
    series: [
      {
        name: "Headcount",
        type: "heatmap",
        coordinateSystem: "geo",
        data: [
          [116.4,  39.9, 980],
          [121.5,  31.2, 750],
          [113.3,  23.1, 620],
          [ -87.6, 41.9, 430],
          [-122.4, 37.8, 390],
          [  2.3,  48.9, 310],
          [103.8,   1.4, 280],
        ],
        pointSize: 20,
        blurSize: 30,
      },
    ],
    tooltip: { trigger: "item" },
  }}
  style={{ height: 400 }}
  showDownload={true}
  testId="canvas-worldmap-heatmap"
/>`,
    },
  ],
};

// ─── MultiChart ──────────────────────────────────────────────────────────────
const multiChartDemo: ComponentDemo = {
  id: 'multi-chart',
  title: 'MultiChart',
  description:
    '复合图表：右上角按钮切换柱状图、折线图、饼图。支持配置包含哪些图表、右键切换和各图表独立配置。',
  imports: `import { MultiChart } from "@gadmin2n/charts";`,
  props: [
    { name: 'height', type: 'number', default: '300', desc: '图表高度（px）' },
    {
      name: 'defaultVariant',
      type: '"bar" | "line" | "pie"',
      default: '"bar"',
      desc: '初始显示的图表类型',
    },
    { name: 'style', type: 'CSSProperties', desc: '容器自定义样式' },
    { name: 'className', type: 'string', desc: '容器 className' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<MultiChart
  showDownload={true}
  height={300}
  testId="canvas-multichart-default"
/>`,
    },
  ],
};

// ─── Section ──────────────────────────────────────────────────────────────────
const sectionDemo: ComponentDemo = {
  id: 'section',
  title: 'Section',
  description: '白色背景容器，左上角标题，其他组件可放在其上方形成视觉分组。',
  imports: `import { Section } from "@gadmin2n/charts";`,
  props: [
    { name: 'title', type: 'string', desc: '左上角标题文字' },
    {
      name: 'testId',
      type: 'string',
      required: true,
      desc: 'E2E 定位用，必填',
    },
  ],
  variants: [
    {
      name: 'default',
      label: 'default',
      code: `<Section title="分组标题" testId="canvas-section-default" />`,
    },
  ],
};

// ─── 全部 demos ────────────────────────────────────────────────────────────────
export const allDemos: ComponentDemo[] = [
  numCardDemo,
  barChartDemo,
  lineChartDemo,
  pieChartDemo,
  radarChartDemo,
  treemapChartDemo,
  tableDemo,
  worldMapDemo,
  multiChartDemo,
  sectionDemo,
];
