/**
 * native chart 内核：坐标轴（X / Y）原生 SVG 实现
 *
 * 颜色与字号通过外部传 token CSS 变量控制（与 dashboard chrome 对齐）。
 * 所有视觉常量集中在这里，禁止业务图表硬编码。
 */

const TICK_LEN = 0;          // 刻度短线长度（dashboard 风格不画刻度短线）
const TICK_PAD = 8;          // 刻度文字距轴线像素
const FONT_SIZE = 12;
const FONT_FAMILY = 'inherit';

/**
 * 横轴（类目轴 / 数值轴皆可）
 *
 * @param {{
 *   plot: { x:number, y:number, w:number, h:number },
 *   ticks: Array<{ value:any, x:number, label:string }>,
 *   showLine?: boolean,
 *   axisLineColor?: string,
 *   tickColor?: string,
 * }} props
 */
export function XAxis({
  plot,
  ticks,
  showLine = true,
  axisLineColor = 'var(--color-border-chart-axis, #98A2B3)',
  tickColor = 'var(--color-foreground-muted, #667085)',
}) {
  const yLine = plot.y + plot.h;
  return (
    <g className="native-chart__axis native-chart__axis--x" pointerEvents="none">
      {showLine && (
        <line
          x1={plot.x}
          x2={plot.x + plot.w}
          y1={yLine}
          y2={yLine}
          stroke={axisLineColor}
          strokeWidth={1}
          shapeRendering="crispEdges"
        />
      )}
      {ticks.map((t, i) => (
        <g key={i} transform={`translate(${t.x}, ${yLine})`}>
          {TICK_LEN > 0 && (
            <line y1={0} y2={TICK_LEN} stroke={axisLineColor} strokeWidth={1} />
          )}
          <text
            y={TICK_LEN + TICK_PAD}
            dy="0.71em"
            textAnchor="middle"
            fill={tickColor}
            fontSize={FONT_SIZE}
            fontFamily={FONT_FAMILY}
          >
            {t.label}
          </text>
        </g>
      ))}
    </g>
  );
}

/**
 * 纵轴（数值轴）
 *
 * @param {{
 *   plot: { x:number, y:number, w:number, h:number },
 *   ticks: Array<{ value:any, y:number, label:string }>,
 *   showLine?: boolean,
 *   axisLineColor?: string,
 *   tickColor?: string,
 *   orientation?: 'left' | 'right',
 * }} props
 */
export function YAxis({
  plot,
  ticks,
  showLine = false,
  axisLineColor = 'var(--color-border-chart-axis, #98A2B3)',
  tickColor = 'var(--color-foreground-muted, #667085)',
  orientation = 'left',
  /**
   * 当传入正数时，左侧 y 轴文字以 textAnchor='start' 从 (轴线 - labelInset) 处起排
   * 用于让最左字符贴到 SVG 边（即卡片内边距），实现"y 轴数字与卡片左内边距对齐"
   */
  labelInset,
}) {
  const isRight = orientation === 'right';
  const xLine = isRight ? plot.x + plot.w : plot.x;
  const useInset = !isRight && Number.isFinite(labelInset) && labelInset > 0;
  return (
    <g className="native-chart__axis native-chart__axis--y" pointerEvents="none">
      {showLine && (
        <line
          x1={xLine}
          x2={xLine}
          y1={plot.y}
          y2={plot.y + plot.h}
          stroke={axisLineColor}
          strokeWidth={1}
          shapeRendering="crispEdges"
        />
      )}
      {ticks.map((t, i) => (
        <g key={i} transform={`translate(${xLine}, ${t.y})`}>
          <text
            x={useInset ? -labelInset : isRight ? TICK_PAD : -TICK_PAD}
            dy="0.32em"
            textAnchor={useInset ? 'start' : isRight ? 'start' : 'end'}
            fill={tickColor}
            fontSize={FONT_SIZE}
            fontFamily={FONT_FAMILY}
          >
            {t.label}
          </text>
        </g>
      ))}
    </g>
  );
}
