/**
 * BacktestResultModal / BacktestDashboard
 * ─────────────────────────────────────────────────────────────────────
 * BacktestDashboard   — 카드 기반 대시보드 (재사용 가능)
 * BacktestResultModal — 드래그 팝업으로 Dashboard를 감싸는 래퍼
 */
import React, { useMemo, useState } from 'react';
import type { BacktestAnalysis, BacktestSignal, BacktestStats } from '../utils/backendApi';
import { useDraggablePanel } from '../hooks/useDraggablePanel';
import { repairUtf8Mojibake } from '../utils/textEncoding';
import type { EvaluationAllocationReport } from './backtest/BacktestAnalysisReportModal';
import {
  pct,
  pctAbs,
  num,
  wonFmt,
  colorCls,
  SectionTitle,
  KpiCard,
  MetricRow,
  WinRateCircle,
  CompareBar,
} from './shared/analysisDashboardUi';
import { analysisMethodLabel } from '../utils/analysisMethodLabels';
import BacktestSignalTable from './backtest/BacktestSignalTable';

const fmtDate = (ts: number) => {
  const d = new Date(ts * 1000);
  return `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')}`;
};
const fmtDateStr = (iso: string) => {
  const d = new Date(iso);
  return `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
};

// ── Props ─────────────────────────────────────────────────────────────────

export interface BacktestResultModalProps {
  analysis?:    BacktestAnalysis | null;
  stats?:       BacktestStats    | null;
  signals?:     BacktestSignal[];
  strategyName: string;
  symbol:       string;
  timeframe:    string;
  barCount:     number;
  onClose:      () => void;
  embedded?:    boolean;
}

export interface BacktestDashboardProps {
  analysis:     BacktestAnalysis | null;
  signals:      BacktestSignal[];
  strategyName: string;
  symbol:       string;
  timeframe:    string;
  barCount:     number;
  createdAt?:   string;
  /** 레포트·PDF — 시그널 전체 표시·인쇄용 레이아웃 */
  reportMode?:  boolean;
  /** false — 거래 시그널 섹션 숨김 (별도 패널에 표시) */
  hideSignals?: boolean;
  /** 전략평가 — 일괄/분할 매수 방식별 분석 */
  evaluationAllocations?: EvaluationAllocationReport[];
  reportSignalFilterNote?: string;
}

// ── 시그널 타입 ───────────────────────────────────────────────────────────

// ══════════════════════════════════════════════════════════════════════════
// BacktestDashboard — 메인 대시보드 컴포넌트 (재사용 가능)
// ══════════════════════════════════════════════════════════════════════════

export function BacktestDashboard({
  analysis, signals, strategyName, symbol, timeframe, barCount, createdAt,
  reportMode = false,
  hideSignals = false,
  evaluationAllocations,
  reportSignalFilterNote,
}: BacktestDashboardProps) {
  const [allocMode, setAllocMode] = useState<'full' | 'split'>('split');

  const displayAnalysis = useMemo(() => {
    if (!evaluationAllocations?.length) return analysis;
    return evaluationAllocations.find(e => e.mode === allocMode)?.analysis ?? analysis;
  }, [analysis, evaluationAllocations, allocMode]);

  const a = displayAnalysis;
  if (!a) {
    return (
      <div className="brd-empty-state">
        <div>📊</div>
        <p>결과 데이터가 없습니다.</p>
      </div>
    );
  }

  const periodStr = signals.length >= 2
    ? `${fmtDate(signals[0].time)} ~ ${fmtDate(signals[signals.length-1].time)}`
    : `${barCount}봉`;

  const sharpeLevel = a.sharpeRatio >= 2 ? '탁월' : a.sharpeRatio >= 1 ? '우수' : a.sharpeRatio >= 0 ? '보통' : '미흡';

  return (
    <div className={`brd-dashboard${reportMode ? ' brd-dashboard--report' : ''}`}>

      {/* ── 대시보드 헤더 ── */}
      <div className="brd-dash-header">
        <div className="brd-dash-header-left">
          <div className="brd-dash-strategy">{repairUtf8Mojibake(strategyName)}</div>
          <div className="brd-dash-meta">
            <span className="brd-dash-badge">{symbol}</span>
            <span className="brd-dash-badge">{timeframe}</span>
            <span className="brd-dash-badge">{periodStr}</span>
            {createdAt && <span className="brd-dash-badge brd-dash-badge--time">실행 {fmtDateStr(createdAt)}</span>}
            {a.analysisMethod && (
              <span className="brd-dash-badge brd-dash-badge--method">
                {analysisMethodLabel(a.analysisMethod)}
              </span>
            )}
          </div>
        </div>
        <div className={`brd-dash-header-kpi${reportMode ? ' brd-dash-header-kpi--report' : ''}`}>
          <div className={`brd-dash-big-kpi${reportMode ? ' brd-dash-big-kpi--report' : ''}`}>
            <div className={`brd-dash-big-val ${colorCls(a.totalReturnPct)}`}>{pct(a.totalReturnPct)}</div>
            <div className="brd-dash-big-label">총 수익률</div>
          </div>
          <div className={`brd-dash-big-kpi${reportMode ? ' brd-dash-big-kpi--report' : ''}`}>
            <div className={`brd-dash-big-val ${colorCls(a.finalEquity - a.initialCapital)}`}>
              {wonFmt(a.finalEquity)}
            </div>
            <div className="brd-dash-big-label">최종 자산</div>
          </div>
        </div>
      </div>

      {evaluationAllocations && evaluationAllocations.length >= 2 && (
        <div className="brd-row">
          <div className="brd-card brd-card--full">
            <SectionTitle icon="📋" title="매수 방식별 수익률 비교" />
            {reportSignalFilterNote && (
              <p className="brd-eval-filter-note">{reportSignalFilterNote}</p>
            )}
            <div className="brd-alloc-tabs">
              {evaluationAllocations.map(item => (
                <button
                  key={item.mode}
                  type="button"
                  className={`brd-alloc-tab${allocMode === item.mode ? ' brd-alloc-tab--active' : ''}`}
                  onClick={() => setAllocMode(item.mode)}
                >
                  {item.label}
                </button>
              ))}
            </div>
            <div className="brd-alloc-compare">
              {evaluationAllocations.map(item => (
                <div
                  key={item.mode}
                  className={`brd-alloc-card${allocMode === item.mode ? ' brd-alloc-card--active' : ''}`}
                  role="button"
                  tabIndex={0}
                  onClick={() => setAllocMode(item.mode)}
                  onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') setAllocMode(item.mode); }}
                >
                  <div className="brd-alloc-card-label">{item.label}</div>
                  <div className={`brd-alloc-card-return ${colorCls(item.analysis.totalReturnPct)}`}>
                    {pct(item.analysis.totalReturnPct)}
                  </div>
                  <div className="brd-alloc-card-sub">
                    최종 {wonFmt(item.analysis.finalEquity)} · 승률 {pctAbs(item.analysis.winRate)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ── Row 1: KPI 카드 6개 ── */}
      <div className="brd-row">
        <div className="brd-kpi-grid">
          <KpiCard icon="🎯" label="승률" value={pctAbs(a.winRate)} sub={`${a.numberOfWinning}승 ${a.numberOfLosing}패`} valueColor={colorCls(a.winRate - 0.5)} accent="blue"/>
          <KpiCard icon="📉" label="최대 낙폭" value={pct(a.maxDrawdownPct)} sub="기간 중 최대 손실" valueColor={a.maxDrawdownPct < 0 ? 'brd-neg' : ''} accent="red"/>
          <KpiCard icon="⚡" label="샤프 비율" value={num(a.sharpeRatio)} sub={sharpeLevel} valueColor={colorCls(a.sharpeRatio - 1)} accent="yellow"/>
          <KpiCard icon="🔄" label="소르티노" value={num(a.sortinoRatio)} sub="하방 변동성 기준" valueColor={colorCls(a.sortinoRatio - 1)} accent="purple"/>
          <KpiCard icon="⚖️" label="손익비" value={num(a.profitLossRatio)} sub="이익/손실 배수" valueColor={colorCls(a.profitLossRatio - 1)} accent="green"/>
          <KpiCard icon="📐" label="칼마 비율" value={num(a.calmarRatio)} sub="수익 / |MDD|" valueColor={colorCls(a.calmarRatio - 1)} accent="teal"/>
        </div>
      </div>

      {/* ── Row 2: 수익성 + 거래 통계 + 승률 도넛 ── */}
      <div className="brd-row brd-row--3col">

        {/* 수익성 지표 카드 */}
        <div className="brd-card">
          <SectionTitle icon="📊" title="수익성 지표"/>
          <div className="brd-card-body">
            <MetricRow label="총 수익률"        value={pct(a.totalReturnPct)}   cls={colorCls(a.totalReturnPct)}/>
            <MetricRow label="총 손익 (금액)"   value={wonFmt(a.totalProfitLoss)} cls={colorCls(a.totalProfitLoss)}/>
            {a.realizedPnl != null && (
              <MetricRow label="실현 손익" value={wonFmt(a.realizedPnl)} cls={colorCls(a.realizedPnl)} />
            )}
            {a.unrealizedPnl != null && a.unrealizedPnl !== 0 && (
              <MetricRow label="평가 손익" value={wonFmt(a.unrealizedPnl)} cls={colorCls(a.unrealizedPnl)} />
            )}
            {a.cashBalance != null && a.cashBalance > 0 && (
              <MetricRow label="기말 예수금" value={wonFmt(a.cashBalance)} />
            )}
            {a.holdingsValue != null && a.holdingsValue > 0 && (
              <MetricRow label="보유 평가액" value={wonFmt(a.holdingsValue)} />
            )}
            <MetricRow label="총 이익"           value={wonFmt(a.grossProfit)}   cls="brd-pos"/>
            <MetricRow label="총 손실"           value={wonFmt(a.grossLoss)}     cls="brd-neg"/>
            <MetricRow label="평균 수익률/거래"  value={pct(a.avgReturnPct)}     cls={colorCls(a.avgReturnPct)}/>
            <MetricRow label="최대 상승폭"       value={pct(a.maxRunupPct)}      cls="brd-pos"/>
            <MetricRow label="손익분기 거래"     value={`${a.numberOfBreakEven}회`}/>
          </div>
        </div>

        {/* 리스크 지표 카드 */}
        <div className="brd-card">
          <SectionTitle icon="🛡" title="리스크 지표"/>
          <div className="brd-card-body">
            <MetricRow label="최대 낙폭 (MDD)"  value={pct(a.maxDrawdownPct)}    cls={colorCls(a.maxDrawdownPct)} note="고점 대비"/>
            <MetricRow label="샤프 비율"         value={num(a.sharpeRatio)}       cls={colorCls(a.sharpeRatio - 1)} note="≥1 우수"/>
            <MetricRow label="소르티노 비율"     value={num(a.sortinoRatio)}      cls={colorCls(a.sortinoRatio - 1)} note="하방 기준"/>
            <MetricRow label="칼마 비율"         value={num(a.calmarRatio)}       cls={colorCls(a.calmarRatio - 1)}/>
            <MetricRow label="VaR 95%"           value={pct(a.valueAtRisk95)}     cls="brd-neg" note="최대 손실 예상"/>
            <MetricRow label="기대 손실 (CVaR)"  value={pct(a.expectedShortfall)} cls="brd-neg" note="꼬리 리스크"/>
          </div>
        </div>

        {/* 승률 + 자본 카드 */}
        <div className="brd-card">
          <SectionTitle icon="🔢" title="거래 통계"/>
          <div className="brd-card-body brd-card-body--center">
            <WinRateCircle winRate={a.winRate} winning={a.numberOfWinning} total={a.numberOfPositions}/>
            <div className="brd-trade-stats">
              <MetricRow label="총 거래" value={`${a.numberOfPositions}회`}/>
              <MetricRow label="수익 거래" value={`${a.numberOfWinning}회`} cls="brd-pos"/>
              <MetricRow label="손실 거래" value={`${a.numberOfLosing}회`}  cls="brd-neg"/>
              <MetricRow label="초기 자본" value={`${Math.round(a.initialCapital/10000).toLocaleString()}만원`}/>
              <MetricRow label="최종 자산" value={`${Math.round(a.finalEquity/10000).toLocaleString()}만원`} cls={colorCls(a.finalEquity - a.initialCapital)}/>
            </div>
          </div>
        </div>
      </div>

      {/* ── Row 3: 벤치마크 비교 + 자본 분석 ── */}
      <div className="brd-row brd-row--2col">

        {/* 벤치마크 비교 */}
        <div className="brd-card">
          <SectionTitle icon="📐" title="벤치마크 비교" right={
            <span className={`brd-badge-inline ${colorCls(a.vsBuyAndHold - 1)}`}>
              {isFinite(a.vsBuyAndHold) && a.vsBuyAndHold !== 0
                ? `${a.vsBuyAndHold >= 1 ? '전략 우위 ' : ''}${a.vsBuyAndHold.toFixed(2)}×`
                : '–'
              }
            </span>
          }/>
          <div className="brd-card-body">
            <CompareBar
              labelA="전략 수익률" valA={a.totalReturnPct}
              labelB="바이앤홀드"  valB={a.buyAndHoldReturnPct}
              colorA={a.totalReturnPct >= 0 ? 'var(--brd-pos)' : 'var(--brd-neg)'}
              colorB="var(--text3)"
            />
            <div className="brd-bench-summary">
              <div className="brd-bench-item">
                <span className="brd-bench-label">전략</span>
                <span className={`brd-bench-val ${colorCls(a.totalReturnPct)}`}>{pct(a.totalReturnPct)}</span>
              </div>
              <div className="brd-bench-divider"/>
              <div className="brd-bench-item">
                <span className="brd-bench-label">바이앤홀드</span>
                <span className={`brd-bench-val ${colorCls(a.buyAndHoldReturnPct)}`}>{pct(a.buyAndHoldReturnPct)}</span>
              </div>
              <div className="brd-bench-divider"/>
              <div className="brd-bench-item">
                <span className="brd-bench-label">초과 수익</span>
                <span className={`brd-bench-val ${colorCls(a.totalReturnPct - a.buyAndHoldReturnPct)}`}>
                  {pct(a.totalReturnPct - a.buyAndHoldReturnPct)}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* 수익/손실 상세 */}
        <div className="brd-card">
          <SectionTitle icon="💰" title="손익 분석"/>
          <div className="brd-card-body">
            <div className="brd-pnl-bar-section">
              <div className="brd-pnl-row">
                <span className="brd-pnl-label brd-pos">총 이익</span>
                <div className="brd-pnl-track">
                  <div className="brd-pnl-bar brd-pnl-bar--pos" style={{
                    width: `${a.grossProfit > 0 && Math.abs(a.grossLoss) > 0
                      ? Math.min(100, a.grossProfit / (a.grossProfit + Math.abs(a.grossLoss)) * 100)
                      : a.grossProfit > 0 ? 100 : 0}%`
                  }}/>
                </div>
                <span className="brd-pnl-val brd-pos">{wonFmt(a.grossProfit)}</span>
              </div>
              <div className="brd-pnl-row">
                <span className="brd-pnl-label brd-neg">총 손실</span>
                <div className="brd-pnl-track">
                  <div className="brd-pnl-bar brd-pnl-bar--neg" style={{
                    width: `${Math.abs(a.grossLoss) > 0 && a.grossProfit > 0
                      ? Math.min(100, Math.abs(a.grossLoss) / (a.grossProfit + Math.abs(a.grossLoss)) * 100)
                      : Math.abs(a.grossLoss) > 0 ? 100 : 0}%`
                  }}/>
                </div>
                <span className="brd-pnl-val brd-neg">{wonFmt(a.grossLoss)}</span>
              </div>
            </div>
            <div className="brd-pnl-net">
              <span className="brd-pnl-net-label">순 손익</span>
              <span className={`brd-pnl-net-val ${colorCls(a.totalProfitLoss)}`}>{wonFmt(a.totalProfitLoss)}</span>
            </div>
            <MetricRow label="손익비"          value={num(a.profitLossRatio)}  cls={colorCls(a.profitLossRatio - 1)}/>
            <MetricRow label="평균 수익률/거래" value={pct(a.avgReturnPct)}    cls={colorCls(a.avgReturnPct)}/>
          </div>
        </div>
      </div>

      {/* ── Row 4: 거래 시그널 목록 ── */}
      {!hideSignals && (
        <div className="brd-row">
          <BacktestSignalTable signals={signals} expanded={reportMode} />
        </div>
      )}

    </div>
  );
}

// ══════════════════════════════════════════════════════════════════════════
// BacktestResultModal — 팝업 래퍼
// ══════════════════════════════════════════════════════════════════════════

export function BacktestResultModal({
  analysis, stats, signals = [], strategyName, symbol, timeframe, barCount, onClose, embedded = false,
}: BacktestResultModalProps) {

  const {
    panelRef: modalRef,
    dragging,
    onHeaderPointerDown, headerTouchStyle,
    panelStyle,
    headerCursor,
  } = useDraggablePanel({ centerOnMount: !embedded });

  const a = analysis ?? (stats ? buildAnalysisFromStats(stats) : null);
  if (!a && !stats) return null;

  const inner = (
    <div
      ref={modalRef}
      className={`brm-modal ${embedded ? 'brm-modal--embedded' : ''}`}
      style={embedded ? undefined : {
        ...panelStyle,
        zIndex: 9200,
        cursor: dragging ? 'grabbing' : undefined,
      }}
      onMouseDown={embedded ? undefined : e => e.stopPropagation()}
    >
      <div
        className="gc-popup-header brm-header"
        onPointerDown={embedded ? undefined : onHeaderPointerDown}
        style={embedded ? undefined : { cursor: headerCursor, ...headerTouchStyle }}
      >
        <div className="brm-header-left">
          <span className="brm-header-title">백테스팅 결과</span>
        </div>
        {!embedded && (
          <button className="brm-close" onClick={onClose} title="닫기">✕</button>
        )}
      </div>
      <div className="brm-body">
        <BacktestDashboard
          analysis={a}
          signals={signals}
          strategyName={strategyName}
          symbol={symbol}
          timeframe={timeframe}
          barCount={barCount}
        />
      </div>
    </div>
  );

  if (embedded) return inner;

  return (
    <div className="brm-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      {inner}
    </div>
  );
}

function buildAnalysisFromStats(s: BacktestStats): BacktestAnalysis {
  return {
    initialCapital:      10_000_000,
    finalEquity:         s.finalEquity  ?? 0,
    totalReturnPct:      s.totalReturn  ?? 0,
    totalProfitLoss:     (s.finalEquity ?? 0) - 10_000_000,
    grossProfit:         0, grossLoss:           0,
    avgReturnPct:        s.avgReturn    ?? 0,
    profitLossRatio:     0,
    numberOfPositions:   s.totalTrades  ?? 0,
    numberOfWinning:     s.winTrades    ?? 0,
    numberOfLosing:      (s.totalTrades ?? 0) - (s.winTrades ?? 0),
    numberOfBreakEven:   0,
    winRate:             s.winRate      ?? 0,
    maxDrawdownPct:      s.maxDrawdown  ?? 0,
    maxRunupPct:         0, sharpeRatio: 0, sortinoRatio: 0, calmarRatio: 0,
    valueAtRisk95:       0, expectedShortfall:   0,
    buyAndHoldReturnPct: 0, vsBuyAndHold:        0,
  };
}

export default BacktestResultModal;