import { useMemo } from 'react';
import SmartLineChart from '../../charts/SmartLineChart';
import { getDefaultDataColorToken } from '../../charts/chart-common';
import { usePreviewSurface } from '../../_dashboard_runtime/preview-surface-stub.js';

/**
 * Dashboard 折线图 — 扁平 Props → SmartLineChart `spec`。
 */
export default function LineChartPreview({
  data = [],
  legendItems = [],
  showLegend = true,
  showXAxis = true,
  showYAxis = true,
  showGrid = true,
  showDots = false,
  showLabel = false,
  curve = 'linear',
  legendPosition = 'bottom',
  legendAlign,
  height = 340,
  dualAxis = false,
  /** @deprecated 请优先使用 dualAxis */
  dualYAxis = false,
  rightAxisSeries = null,
  rightYAxisSeriesIndex = null,
  leftAxisType = 'number',
  rightAxisType = 'number',
  leftPercentAsFraction = false,
  rightPercentAsFraction = false,
  rightYAxisTickSuffix = '',
  yAxisTickCount,
  strokeWidth,
  margin,
  yAxisWidth,
  yAxisTickAlign,
  yAxisDomainMode,
  style,
}) {
  const previewSurface = usePreviewSurface();

  const spec = useMemo(() => {
    const series = (Array.isArray(legendItems) ? legendItems : []).map((item, idx) => ({
      dataKey: item.key,
      name: item.label ?? item.key,
      colorToken: item.colorToken ?? getDefaultDataColorToken(idx),
    }));

    const dualOn = !!(dualAxis || dualYAxis);
    const axisSeries =
      Array.isArray(rightAxisSeries) && rightAxisSeries.length > 0
        ? rightAxisSeries
        : null;

    return {
      data,
      series:
        series.length > 0 ? series : [{ dataKey: 'series_0', name: 'Series 1', colorToken: 'data-0' }],
      config: {
        showLegend: !!showLegend,
        showXAxis: !!showXAxis,
        showYAxis: !!showYAxis,
        grid: !!showGrid,
        showGrid: !!showGrid,
        showDots: !!showDots,
        showLabel: !!showLabel,
        showValueLabel: !!showLabel,
        curveType: ['linear', 'monotone', 'step'].includes(curve) ? curve : 'linear',
        curve: ['linear', 'monotone', 'step'].includes(curve) ? curve : 'linear',
        legendPosition,
        ...(legendAlign === 'left' || legendAlign === 'center' || legendAlign === 'right'
          ? { legendAlign }
          : {}),
        height: Number(height) || 340,
        resolveRoot: previewSurface || undefined,
        dualAxis: dualOn,
        rightAxisSeries: axisSeries ?? undefined,
        rightYAxisSeriesIndex:
          dualOn && !axisSeries && rightYAxisSeriesIndex !== null && rightYAxisSeriesIndex !== undefined
            ? Number(rightYAxisSeriesIndex)
            : null,
        leftAxisType: leftAxisType === 'percent' ? 'percent' : 'number',
        rightAxisType: rightAxisType === 'percent' ? 'percent' : 'number',
        leftPercentAsFraction: !!leftPercentAsFraction,
        rightPercentAsFraction: !!rightPercentAsFraction,
        rightYAxisTickSuffix:
          dualOn && rightAxisType !== 'percent' ? String(rightYAxisTickSuffix || '') : '',
        ...(Number.isFinite(Number(yAxisTickCount))
          ? { yAxisTickCount: Math.max(2, Number(yAxisTickCount)) }
          : {}),
        ...(Number.isFinite(Number(strokeWidth)) ? { strokeWidth: Number(strokeWidth) } : {}),
        ...(margin && typeof margin === 'object' ? { margin } : {}),
        ...(Number.isFinite(Number(yAxisWidth)) ? { yAxisWidth: Number(yAxisWidth) } : {}),
        ...(yAxisTickAlign === 'left' ? { yAxisTickAlign: 'left' } : {}),
        ...(yAxisDomainMode === 'data-range' || yAxisDomainMode === 'zero-or-min'
          ? { yAxisDomainMode }
          : {}),
      },
    };
  }, [
    data,
    legendItems,
    showLegend,
    showXAxis,
    showYAxis,
    showGrid,
    showDots,
    showLabel,
    curve,
    legendPosition,
    legendAlign,
    height,
    dualAxis,
    dualYAxis,
    rightAxisSeries,
    rightYAxisSeriesIndex,
    leftAxisType,
    rightAxisType,
    leftPercentAsFraction,
    rightPercentAsFraction,
    rightYAxisTickSuffix,
    yAxisTickCount,
    strokeWidth,
    margin,
    yAxisWidth,
    yAxisTickAlign,
    yAxisDomainMode,
    previewSurface,
  ]);

  return (
    <div style={{ width: '100%', ...(style || {}) }}>
      <SmartLineChart spec={spec} />
    </div>
  );
}
