/**
 * ChartTooltip — Dashboard 全平台 Tooltip 原子组件
 *
 * 仅两个变体（与 dashboard 视觉规范一一对应，禁止再出现自定义 tooltip 壳）：
 *   - variant="chart"   ：图表多系列 hover（白底，标题 + 系列圆点 + 名称 + 数值）
 *   - variant="caption" ：解释/说明型（黑底，纯文字 或 标签 + 数值；用于指标卡口径说明、单值图表 hover 等）
 *
 * 本组件只负责"视觉壳"与"内容渲染"，不含触发与定位：
 *   - Recharts 图表：作为 `<Tooltip content={...}>` 的内容；
 *   - hover popover（标题口径、单值 sparkline 等）：由调用方自行处理触发，组件直接 render 即可。
 *
 * Props:
 *   variant       — 'chart' | 'caption'（必填）
 *   label         — 标题/前缀文字
 *   rows          — chart 变体多系列：[{ name, value, color, dataKey?, formatValue? }]
 *   value         — caption 变体右侧值（与 label 配合）
 *   children      — caption 变体纯文本内容（与 label/value 互斥优先级最高）
 *   formatValue   — 全局值格式化（rows 项可单独覆盖）
 *   active        — Recharts content prop；为 false 直接返回 null
 *   payload       — Recharts content prop；与 rows 二选一
 *   className     — 透传额外类名
 */

function defaultFormat(value) {
  if (value == null || value === '') return '—';
  const n = Number(value);
  if (Number.isFinite(n)) return n.toLocaleString('en-US');
  return String(value);
}

function normalizePayloadToRows(payload) {
  if (!Array.isArray(payload) || payload.length === 0) return [];
  return payload.map((entry, idx) => ({
    name: entry?.name != null ? String(entry.name) : (entry?.dataKey != null ? String(entry.dataKey) : `row-${idx}`),
    value: entry?.value,
    color: entry?.color || entry?.fill || entry?.stroke,
    dataKey: entry?.dataKey,
  }));
}

export default function ChartTooltip({
  variant,
  label,
  rows,
  value,
  children,
  formatValue,
  active,
  payload,
  className,
}) {
  // Recharts content 兼容：若传入 active=false 直接不渲染
  if (active === false) return null;

  const fmt = typeof formatValue === 'function' ? formatValue : defaultFormat;
  const cls = ['chart-tooltip', `chart-tooltip--${variant}`, className].filter(Boolean).join(' ');

  // ── 解释类（黑底） ───────────────────────────────────────
  if (variant === 'caption') {
    // 纯文字（图2）
    if (children != null && label == null && value == null) {
      return <div className={cls}>{children}</div>;
    }
    // 标签 + 数值（图3）
    return (
      <div className={cls}>
        {label != null && String(label) !== '' && (
          <span className="chart-tooltip__caption-label">{String(label)}</span>
        )}
        {value != null && (
          <span className="chart-tooltip__caption-value">
            {typeof value === 'number' ? fmt(value) : String(value)}
          </span>
        )}
      </div>
    );
  }

  // ── 图表类（白底） ───────────────────────────────────────
  // chart variant 默认从 payload 解析；rows 优先
  const list = Array.isArray(rows) && rows.length > 0
    ? rows
    : normalizePayloadToRows(payload);

  if (list.length === 0) return null;

  return (
    <div className={cls}>
      {label != null && String(label) !== '' && (
        <div className="chart-tooltip__label">{String(label)}</div>
      )}
      <div className="chart-tooltip__rows">
        {list.map((row, idx) => {
          const key = row.dataKey != null ? String(row.dataKey) : `row-${idx}`;
          const rowFmt = typeof row.formatValue === 'function' ? row.formatValue : fmt;
          return (
            <div key={key} className="chart-tooltip__row">
              <div className="chart-tooltip__left">
                <span
                  className="chart-tooltip__dot"
                  style={row.color ? { backgroundColor: row.color } : undefined}
                  aria-hidden
                />
                <span className="chart-tooltip__name">{row.name}</span>
              </div>
              <span className="chart-tooltip__value">
                {typeof row.value === 'number' ? rowFmt(row.value) : (row.value == null ? '—' : String(row.value))}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
// HTML 字符串构建器（供 G2/AntV interaction.tooltip.render 等无法接收 React 的场景使用）
// 视觉与 ChartTooltip variant="chart" 完全一致
// ============================================================

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

export function buildChartTooltipHtml({ title, rows = [] }) {
  const titleSafe = title ? escapeHtml(title) : '';
  const rowHtml = rows
    .map((row) => {
      const label = escapeHtml(row.label ?? row.name ?? '');
      const valueRaw = row.value;
      const valueText = typeof valueRaw === 'number'
        ? valueRaw.toLocaleString('en-US')
        : (valueRaw == null || valueRaw === '' ? '—' : String(valueRaw));
      const value = escapeHtml(valueText);
      const color = escapeHtml(row.color || '');
      return [
        '<div class="chart-tooltip__row">',
        '  <div class="chart-tooltip__left">',
        color
          ? `    <span class="chart-tooltip__dot" style="background-color:${color}"></span>`
          : '    <span class="chart-tooltip__dot"></span>',
        `    <span class="chart-tooltip__name">${label}</span>`,
        '  </div>',
        `  <span class="chart-tooltip__value">${value}</span>`,
        '</div>',
      ].join('');
    })
    .join('');

  return [
    '<div class="chart-tooltip chart-tooltip--chart">',
    titleSafe ? `<div class="chart-tooltip__label">${titleSafe}</div>` : '',
    `<div class="chart-tooltip__rows">${rowHtml}</div>`,
    '</div>',
  ].join('');
}
