import { useMemo } from 'react';
import SmartGaugeChart from '../../charts/SmartGaugeChart';
import { usePreviewSurface } from '../../_dashboard_runtime/preview-surface-stub.js';

/**
 * Dashboard 图表组件：仪表盘（半圆刻度 + 动态进度弧）
 *
 * Props:
 *  - variant: 'baseline' | 'progress'
 *  - value: 当前值
 *  - min: 最小值
 *  - max: 最大值
 *  - title: 中心标题
 *  - animate: 是否播放入场动画
 */
export default function GaugeChartPreview({
  variant = 'progress',
  tone = 'blue',
  value = 4.2,
  min = 3,
  max = 5,
  title = '标题',
  animate = true,
  style,
}) {
  const previewSurface = usePreviewSurface();

  const progressColorToken = useMemo(() => {
    if (tone === 'red') return 'data-5';
    if (tone === 'yellow') return 'data-2';
    if (tone === 'green') return 'data-7';
    return 'data-0';
  }, [tone]);

  const spec = useMemo(() => ({
    value,
    min,
    max,
    tickValues: [3, 3.5, 4, 4.5, 5],
    config: {
      showProgress: variant !== 'baseline',
      animate,
      durationMs: 1000,
      title,
      progressColorToken,
      trackColorToken: 'bg-elevated',
      textColorToken: 'text-primary',
      subTextColorToken: 'text-primary',
      tickColorToken: 'text-tertiary',
      resolveRoot: previewSurface || undefined,
    },
  }), [value, min, max, variant, animate, title, progressColorToken, previewSurface]);

  return (
    <section
      className="w-[544px] rounded-none bg-white px-6 pb-6 pt-4"
      style={{ ...(style || {}) }}
    >
      <SmartGaugeChart spec={spec} />
    </section>
  );
}
