/**
 * 백테스팅 결과 통계 배지 — 차트 위에 오버레이로 표시.
 * 전략 선택 / 실행은 Toolbar의 드롭다운에서 담당.
 */
import React from 'react';
import type { BacktestStats } from '../utils/backendApi';

interface BacktestPanelProps {
  stats:       BacktestStats | null;
  signalCount: number;
  onClear:     () => void;
}

const BacktestPanel: React.FC<BacktestPanelProps> = ({ stats, signalCount, onClear }) => {
  const fmt     = (n: number) => (n * 100).toFixed(2) + '%';
  const fmtWon  = (n: number) => n >= 1000 ? (n / 10000).toFixed(0) + '만원' : n.toFixed(0) + '원';
  const retColor = stats && stats.totalReturn > 0 ? '#26A69A' : stats && stats.totalReturn < 0 ? '#EF5350' : 'var(--text2)';

  return (
    <div className="bt-result-badge">
      <div className="bt-result-row">
        <span className="bt-result-label">시그널</span>
        <span className="bt-result-val">{signalCount}개</span>
      </div>
      {stats && (
        <>
          <div className="bt-result-sep" />
          <div className="bt-result-row">
            <span className="bt-result-label">거래</span>
            <span className="bt-result-val">{stats.totalTrades}회</span>
          </div>
          <div className="bt-result-row">
            <span className="bt-result-label">승률</span>
            <span className="bt-result-val">{fmt(stats.winRate)}</span>
          </div>
          <div className="bt-result-row">
            <span className="bt-result-label">수익</span>
            <span className="bt-result-val" style={{ color: retColor }}>
              {stats.totalReturn >= 0 ? '+' : ''}{fmt(stats.totalReturn)}
            </span>
          </div>
          <div className="bt-result-row">
            <span className="bt-result-label">낙폭</span>
            <span className="bt-result-val" style={{ color: '#EF5350' }}>{fmt(stats.maxDrawdown)}</span>
          </div>
          {stats.finalEquity > 0 && (
            <div className="bt-result-row">
              <span className="bt-result-label">최종자산</span>
              <span className="bt-result-val" style={{ color: retColor }}>{fmtWon(stats.finalEquity)}</span>
            </div>
          )}
        </>
      )}
      <button className="bt-result-clear" onClick={onClear} title="결과 지우기">✕</button>
    </div>
  );
};

export default BacktestPanel;