/**
 * 가상투자 — 종목×전략 차트 팝업 (레거시·외부 호출용)
 */
import React from 'react';
import AppPopup from '../AppPopup';
import type { StrategyDto } from '../../utils/backendApi';
import type { Theme } from '../../types';
import { getKoreanName } from '../../utils/marketNameCache';
import type { ChartRealtimeSource } from '../../hooks/useChartRealtimeData';
import VirtualTargetCardChart from './VirtualTargetCardChart';
import { useAppSettings, resolveAppDefaults } from '../../hooks/useAppSettings';

interface Props {
  market: string;
  strategy: StrategyDto | undefined;
  theme?: Theme;
  running?: boolean;
  chartRealtimeSource?: ChartRealtimeSource;
  onClose: () => void;
}

const VirtualStrategyChartPopup: React.FC<Props> = ({
  market,
  strategy,
  theme = 'dark',
  running = false,
  chartRealtimeSource = 'BACKEND_STOMP',
  onClose,
}) => {
  const { settings: appSettings } = useAppSettings();
  const chartDefaults = resolveAppDefaults(appSettings);
  const chartCandleAreaPriceLabels = chartDefaults.chartCandleAreaPriceLabels;
  const chartSeriesPriceLabels = chartDefaults.chartSeriesPriceLabels;

  const ko = getKoreanName(market);
  const sym = market.replace(/^KRW-/, '');
  const stratName = strategy?.name ?? '전략 미지정';

  return (
    <AppPopup
      onClose={onClose}
      title={sym}
      titleKo={ko}
      badge="CHART"
      width={920}
      maxWidth="96vw"
      centered
      backdrop
      closeOnBackdrop
      bodyClassName="app-popup-body vtd-chart-popup-body"
    >
      <div className="vtd-chart-popup-meta">
        <span className="vtd-chart-popup-strat">{stratName}</span>
      </div>
      <VirtualTargetCardChart
        market={market}
        strategy={strategy}
        theme={theme}
        running={running}
        chartRealtimeSource={chartRealtimeSource}
        chartCandleAreaPriceLabels={chartCandleAreaPriceLabels}
        chartSeriesPriceLabels={chartSeriesPriceLabels}
      />
    </AppPopup>
  );
};

export default VirtualStrategyChartPopup;