import { useEffect, useState } from 'react';
import SmartIndicator from '../../SmartIndicator.jsx';

const DEFAULT_CARD_ROWS = [
  {
    id: 's1',
    title: '正向声量歌曲',
    value: '857',
    trend: '环比',
    trendValue: '11.12%',
    trendDirection: 'up',
    status: 'success',
    selected: false,
    data: [{ value: 68 }, { value: 74 }, { value: 59 }, { value: 62 }, { value: 48 }, { value: 66 }, { value: 79 }, { value: 56 }, { value: 64 }, { value: 64 }, { value: 69 }, { value: 55 }, { value: 72 }, { value: 66 }, { value: 82 }, { value: 70 }, { value: 67 }],
  },
  {
    id: 's2',
    title: '全部监控歌曲',
    value: '1657',
    trend: '环比',
    trendValue: '11.12%',
    trendDirection: 'up',
    status: 'success',
    selected: false,
    data: [{ value: 66 }, { value: 73 }, { value: 61 }, { value: 64 }, { value: 52 }, { value: 70 }, { value: 81 }, { value: 58 }, { value: 67 }, { value: 61 }, { value: 72 }, { value: 58 }, { value: 76 }, { value: 69 }, { value: 83 }, { value: 71 }, { value: 75 }],
  },
  {
    id: 's3',
    title: '负向声量歌曲',
    value: '432',
    trend: '环比',
    trendValue: '11.12%',
    trendDirection: 'up',
    status: 'danger',
    selected: false,
    data: [{ value: 58 }, { value: 66 }, { value: 54 }, { value: 60 }, { value: 49 }, { value: 67 }, { value: 79 }, { value: 55 }, { value: 64 }, { value: 58 }, { value: 70 }, { value: 57 }, { value: 74 }, { value: 66 }, { value: 81 }, { value: 68 }, { value: 73 }],
  },
];

/**
 * Dashboard · 智能指标卡预览（扁平 props，由 PREVIEW_REGISTRY.mapProps 注入）
 */
export default function SmartIndicatorPreview({
  title = '指标名称',
  value = '857',
  trend = '环比',
  trendValue = '11.12%',
  trendDirection = 'up',
  data = [],
  status = 'success',
  layout = 'horizontal',
  horizontalKind = 'text-first',
  selected = false,
  formatTooltipValue,
  chartTooltipEnabled = true,
  cards,
  style,
}) {
  const [activeCardId, setActiveCardId] = useState('');
  const cardRows = Array.isArray(cards) && cards.length > 0
    ? cards
    : [{
      title,
      value,
      trend,
      trendValue,
      trendDirection,
      data,
      status,
      layout,
      horizontalKind,
      selected,
    }];

  useEffect(() => {
    if (!Array.isArray(cardRows) || cardRows.length === 0) {
      setActiveCardId('');
      return;
    }
    if (activeCardId === '') return;
    const hasActiveCard = cardRows.some((card, idx) => (card.id || `indicator-${idx}`) === activeCardId);
    if (!hasActiveCard) {
      setActiveCardId('');
    }
  }, [activeCardId, cardRows]);

  return (
    <div
      className="smart-indicator-preview-scope"
      style={{
        width: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-start',
        minHeight: 200,
        boxSizing: 'border-box',
      }}
    >
      <div className="flex w-full flex-nowrap gap-2">
        {cardRows.map((card, idx) => {
          const fallback = DEFAULT_CARD_ROWS[idx % DEFAULT_CARD_ROWS.length];
          const cardId = card.id || `indicator-${idx}`;
          const resolvedSelected = activeCardId === ''
            ? (typeof card.selected === 'boolean' ? card.selected : selected)
            : activeCardId === cardId;
          return (
            <SmartIndicator
              key={card.id || `${card.title || 'indicator'}-${idx}`}
              title={card.title || fallback.title}
              value={card.value || fallback.value}
              trend={card.trend || fallback.trend}
              trendValue={card.trendValue || fallback.trendValue}
              trendDirection={card.trendDirection || fallback.trendDirection}
              data={Array.isArray(card.data) && card.data.length > 0 ? card.data : fallback.data}
              status={card.status || fallback.status}
              layout={card.layout || layout}
              horizontalKind={card.horizontalKind || horizontalKind}
              selected={resolvedSelected}
              formatTooltipValue={formatTooltipValue}
              chartTooltipEnabled={chartTooltipEnabled}
              style={{ cursor: 'pointer', ...(style || {}), ...(card.style || {}) }}
              onClick={() => setActiveCardId(cardId)}
            />
          );
        })}
      </div>
    </div>
  );
}
