/**
 * BacktestHistoryPage — Golden Analysis Command Center (참조 UI 3열)
 */
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  loadBacktestResults,
  deleteBacktestResult,
  loadPaperTrades,
  loadPaperSummary,
  loadStrategies,
  type BacktestResultRecord,
  type BacktestAnalysis,
  type BacktestSignal,
  type StrategyDto,
} from '../utils/backendApi';
import type { Theme } from '../types';
import { buildEquityFromSignals } from '../utils/backtestEquity';
import {
  formatChartTypeKo,
  formatTimeframeKo,
  normalizeEpochSec,
  normalizeEpochSecOptional,
  toUpbitMarket,
} from '../utils/backtestUiUtils';
import BacktestExecutionList, { type ExecutionListTab } from './backtest/BacktestExecutionList';
import BacktestAnalysisChart from './backtest/BacktestAnalysisChart';
import BacktestKpiPanel from './backtest/BacktestKpiPanel';
import BacktestTradeHistoryCard from './backtest/BacktestTradeHistoryCard';
import BacktestAnalysisReportModal from './backtest/BacktestAnalysisReportModal';
import {
  buildBacktestReportModel,
  buildLiveReportModel,
} from '../utils/backtestReportModel';
import { buildLiveExecutionItems, paperTradesToSignals, type LiveExecutionItem } from '../utils/liveExecutionGroups';
import { PAPER_TRADES_CHANGED_EVENT } from '../utils/paperTradeEvents';
import {
  readStoredSize,
  storeSize,
  usePanelResize,
} from './strategyEditor/usePanelResize';
import '../styles/strategyEditorTheme.css';
import { getKoreanName } from '../utils/marketNameCache';
import { repairUtf8Mojibake } from '../utils/textEncoding';
import { enrichStrategyNameMap, strategyNamesFromList } from '../utils/strategyNameResolver';

const LEFT_KEY = 'btd-left-width';
const RIGHT_KEY = 'btd-right-width';
const LEFT_DEFAULT = 380;
const RIGHT_DEFAULT = 440;

function readMinWidth(key: string, fallback: number): number {
  return Math.max(readStoredSize(key, fallback), fallback);
}

function parseDetail(r: BacktestResultRecord) {
  let analysis: BacktestAnalysis | null = null;
  let signals: BacktestSignal[] = [];
  try {
    if (r.analysisJson) analysis = JSON.parse(r.analysisJson);
    if (r.signalsJson) signals = JSON.parse(r.signalsJson);
  } catch { /* ignore */ }
  return { analysis, signals };
}

interface Props {
  theme?: Theme;
}

export function BacktestHistoryPage({ theme = 'dark' }: Props) {
  const [tab, setTab] = useState<ExecutionListTab>('backtest');
  const [records, setRecords] = useState<BacktestResultRecord[]>([]);
  const [liveItems, setLiveItems] = useState<LiveExecutionItem[]>([]);
  const [selectedBacktest, setSelectedBacktest] = useState<BacktestResultRecord | null>(null);
  const [selectedLive, setSelectedLive] = useState<LiveExecutionItem | null>(null);
  const [loading, setLoading] = useState(true);
  const [reportOpen, setReportOpen] = useState(false);
  const [strategies, setStrategies] = useState<StrategyDto[]>([]);

  const [leftWidth, setLeftWidth] = useState(() => readMinWidth(LEFT_KEY, LEFT_DEFAULT));
  const [rightWidth, setRightWidth] = useState(() => readMinWidth(RIGHT_KEY, RIGHT_DEFAULT));
  const leftRef = useRef(leftWidth);
  const rightRef = useRef(rightWidth);
  leftRef.current = leftWidth;
  rightRef.current = rightWidth;

  const onLeftSplit = usePanelResize('vertical', setLeftWidth, () => leftRef.current, 300, 520, v => storeSize(LEFT_KEY, v));
  const onRightSplit = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
    const startX = e.clientX;
    const start = rightRef.current;
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
    e.currentTarget.setPointerCapture(e.pointerId);
    e.currentTarget.classList.add('btd-splitter--active');
    const splitter = e.currentTarget;
    const onMove = (ev: PointerEvent) => {
      const delta = ev.clientX - startX;
      setRightWidth(Math.min(600, Math.max(360, start - delta)));
    };
    const onUp = (ev: PointerEvent) => {
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
      splitter.releasePointerCapture(ev.pointerId);
      splitter.classList.remove('btd-splitter--active');
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
      storeSize(RIGHT_KEY, rightRef.current);
    };
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  }, []);

  const refreshLiveTrades = useCallback(async () => {
    const [trades, summary, strategies] = await Promise.all([
      loadPaperTrades(),
      loadPaperSummary(),
      loadStrategies(),
    ]);
    const baseNames = strategyNamesFromList(strategies);
    const strategyNames = await enrichStrategyNameMap(
      baseNames,
      trades.map(t => t.strategyId),
    );
    const live = buildLiveExecutionItems(trades, summary, strategyNames);
    setLiveItems(live);
    setSelectedLive(prev => (prev && live.some(x => x.id === prev.id) ? prev : live[0] ?? null));
  }, []);

  const fetchAll = useCallback(async () => {
    setLoading(true);
    const [list, trades, summary, strategies] = await Promise.all([
      loadBacktestResults(),
      loadPaperTrades(),
      loadPaperSummary(),
      loadStrategies(),
    ]);
    const baseNames = strategyNamesFromList(strategies);
    const strategyNames = await enrichStrategyNameMap(
      baseNames,
      [
        ...trades.map(t => t.strategyId),
        ...list.map(r => r.strategyId),
      ],
    );
    const live = buildLiveExecutionItems(trades, summary, strategyNames);
    const enrichedRecords = list.map(r => ({
      ...r,
      strategyName: r.strategyName?.trim()
        || (r.strategyId != null ? strategyNames[r.strategyId] : undefined)
        || r.strategyName
        || '전략 없음',
    }));
    setStrategies(strategies);
    setRecords(enrichedRecords);
    setLiveItems(live);
    setSelectedBacktest(prev => (prev && list.some(x => x.id === prev.id) ? prev : list[0] ?? null));
    setSelectedLive(prev => (prev && live.some(x => x.id === prev.id) ? prev : live[0] ?? null));
    setLoading(false);
  }, []);

  useEffect(() => { void fetchAll(); }, [fetchAll]);

  useEffect(() => {
    const onTradesChanged = () => { void refreshLiveTrades(); };
    window.addEventListener(PAPER_TRADES_CHANGED_EVENT, onTradesChanged);
    return () => window.removeEventListener(PAPER_TRADES_CHANGED_EVENT, onTradesChanged);
  }, [refreshLiveTrades]);

  const deleteAll = useCallback(async () => {
    if (records.length === 0) return;
    if (!window.confirm(`전체 ${records.length}개 백테스팅 결과를 삭제하시겠습니까?`)) return;
    await Promise.all(records.map(r => deleteBacktestResult(r.id)));
    await fetchAll();
  }, [records, fetchAll]);

  const backtestDetail = selectedBacktest ? parseDetail(selectedBacktest) : null;

  const activeSignals = useMemo((): BacktestSignal[] => {
    if (tab === 'backtest') return backtestDetail?.signals ?? [];
    if (!selectedLive) return [];
    return paperTradesToSignals(selectedLive.trades);
  }, [tab, backtestDetail, selectedLive]);

  const equityData = useMemo(() => {
    if (tab === 'backtest' && backtestDetail?.analysis) {
      return buildEquityFromSignals(
        backtestDetail.signals,
        backtestDetail.analysis.initialCapital,
        selectedBacktest!.symbol,
      );
    }
    if (tab === 'live' && selectedLive) {
      return buildEquityFromSignals(paperTradesToSignals(selectedLive.trades), 10_000_000, selectedLive.symbol);
    }
    return { curve: [], markers: [], trades: [] };
  }, [tab, backtestDetail, selectedBacktest, selectedLive]);

  const chartProps = useMemo(() => {
    if (tab === 'backtest' && selectedBacktest) {
      const signals = backtestDetail?.signals ?? [];
      const signalMax = signals.reduce((m, s) => Math.max(m, s.time ?? 0), 0);
      const toSec = normalizeEpochSec(selectedBacktest.toTime) || signalMax || Math.floor(Date.now() / 1000);
      const fromSec = normalizeEpochSecOptional(selectedBacktest.fromTime);
      return {
        symbol: selectedBacktest.symbol,
        timeframe: selectedBacktest.timeframe,
        toTimeSec: toSec,
        fromTimeSec: fromSec > 0 ? fromSec : undefined,
        barCount: selectedBacktest.barCount || 300,
        strategyId: selectedBacktest.strategyId,
      };
    }
    if (tab === 'live' && selectedLive?.trades.length) {
      const last = selectedLive.trades[selectedLive.trades.length - 1];
      const ts = last.createdAt ? Math.floor(new Date(last.createdAt).getTime() / 1000) : Math.floor(Date.now() / 1000);
      return {
        symbol: selectedLive.symbol,
        timeframe: '1h',
        toTimeSec: ts,
        fromTimeSec: undefined as number | undefined,
        barCount: 300,
        strategyId: selectedLive.trades.find(t => t.strategyId)?.strategyId ?? null,
      };
    }
    return null;
  }, [tab, selectedBacktest, selectedLive, backtestDetail]);

  const centerHead = useMemo(() => {
    if (tab === 'backtest' && selectedBacktest) {
      const market = toUpbitMarket(selectedBacktest.symbol);
      return {
        ko: getKoreanName(market),
        strategy: selectedBacktest.strategyName || '전략 없음',
        metaParts: [
          formatTimeframeKo(selectedBacktest.timeframe),
          formatChartTypeKo('candlestick'),
        ],
      };
    }
    if (tab === 'live' && selectedLive) {
      const market = toUpbitMarket(selectedLive.symbol);
      return {
        ko: getKoreanName(market),
        strategy: selectedLive.strategyLabel,
        metaParts: [
          formatTimeframeKo(chartProps?.timeframe ?? '1h'),
          formatChartTypeKo('candlestick'),
          selectedLive.sourceLabel,
        ],
      };
    }
    return null;
  }, [tab, selectedBacktest, selectedLive, chartProps]);

  const footerTrades = equityData.trades;

  const strategyNamesById = useMemo(
    () => Object.fromEntries(
      strategies.map(s => [s.id, repairUtf8Mojibake(s.name)]),
    ),
    [strategies],
  );

  const reportModel = useMemo(() => {
    if (tab === 'backtest' && selectedBacktest && backtestDetail?.analysis) {
      return buildBacktestReportModel(
        selectedBacktest,
        backtestDetail.analysis,
        backtestDetail.signals,
        strategyNamesById,
      );
    }
    if (tab === 'live' && selectedLive) {
      return buildLiveReportModel(selectedLive, activeSignals);
    }
    return null;
  }, [tab, selectedBacktest, backtestDetail, selectedLive, activeSignals, strategyNamesById]);

  const showRightDetail = tab === 'backtest'
    ? backtestDetail?.analysis != null
    : selectedLive != null;

  if (loading) {
    return (
      <div className={`btd-page se-page se-page--${theme}`}>
        <header className="btd-header">
          <div className="btd-header-brand">
            <h1 className="btd-header-title">백테스팅</h1>
            <span className="btd-header-sub">Golden Analysis Command Center</span>
          </div>
        </header>
        <div className="btd-loading">분석 데이터 로딩…</div>
      </div>
    );
  }

  return (
    <div className={`btd-page se-page se-page--${theme}`}>
      <header className="btd-header">
        <div className="btd-header-brand">
          <h1 className="btd-header-title">백테스팅</h1>
          <span className="btd-header-sub">Golden Analysis Command Center</span>
        </div>
        <div className="btd-header-actions">
          <button type="button" className="btd-btn btd-btn--ghost" onClick={() => void fetchAll()}>새로고침</button>
          {tab === 'backtest' && (
            <button type="button" className="btd-btn btd-btn--danger" disabled={records.length === 0} onClick={() => void deleteAll()}>전체 삭제</button>
          )}
        </div>
      </header>

      <div className="btd-body">
        <aside className="btd-sidebar" style={{ width: leftWidth, flex: `0 0 ${leftWidth}px` }}>
          <BacktestExecutionList
            tab={tab}
            onTabChange={setTab}
            backtestRecords={records}
            liveItems={liveItems}
            selectedBacktestId={selectedBacktest?.id ?? null}
            selectedLiveId={selectedLive?.id ?? null}
            onSelectBacktest={r => { setSelectedBacktest(r); setTab('backtest'); }}
            onSelectLive={item => { setSelectedLive(item); setTab('live'); }}
          />
        </aside>

        <div
          className="btd-splitter btd-splitter--v"
          role="separator"
          aria-orientation="vertical"
          aria-label="좌측 패널 너비"
          onPointerDown={onLeftSplit}
        />

        <main className="btd-main">
          {centerHead && (
            <div className="btd-main-head">
              <h2 className="btd-main-ko">{centerHead.ko}</h2>
              <p className="btd-main-strategy">
                {centerHead.strategy}
                {centerHead.metaParts.length > 0 && (
                  <span className="btd-main-meta">
                    {' · '}
                    {centerHead.metaParts.filter(Boolean).join(' · ')}
                  </span>
                )}
              </p>
            </div>
          )}
          <div className="btd-main-content">
            {chartProps ? (
              <BacktestAnalysisChart
                symbol={chartProps.symbol}
                timeframe={chartProps.timeframe}
                toTimeSec={chartProps.toTimeSec}
                fromTimeSec={chartProps.fromTimeSec}
                barCount={chartProps.barCount}
                signals={activeSignals}
                strategyId={chartProps.strategyId}
                theme={theme}
                onOpenReport={() => setReportOpen(true)}
                reportDisabled={!reportModel}
              />
            ) : (
              <div className="btd-empty">
                <span>📈</span>
                <p>좌측 목록에서 분석할 실행 결과를 선택하세요.</p>
              </div>
            )}
          </div>

        </main>

        <div
          className="btd-splitter btd-splitter--v"
          role="separator"
          aria-orientation="vertical"
          aria-label="우측 패널 너비"
          onPointerDown={onRightSplit}
        />

        <aside className="btd-right" style={{ width: rightWidth, flex: `0 0 ${rightWidth}px` }}>
          <div className="btd-right-stack">
            <div className={`btd-right-section btd-right-section--kpi${showRightDetail ? '' : ' btd-right-section--solo'}`}>
              <BacktestKpiPanel
                analysis={tab === 'backtest' ? (backtestDetail?.analysis ?? null) : null}
                equityCurve={equityData.curve}
                totalReturnOverride={tab === 'live' && selectedLive ? selectedLive.totalReturnPct : undefined}
                winRateOverride={tab === 'live' && selectedLive ? selectedLive.winRatePct : undefined}
                tradeCountOverride={tab === 'live' && selectedLive ? selectedLive.tradeCount : undefined}
                mddOverride={tab === 'live' && selectedLive ? selectedLive.mddPct : undefined}
                sharpeOverride={tab === 'live' && selectedLive ? selectedLive.sharpeRatio : undefined}
                profitFactorOverride={tab === 'live' && selectedLive ? selectedLive.profitFactor : undefined}
                emptyText={tab === 'backtest' ? '백테스팅 결과를 선택하세요.' : '실시간 매매 결과를 선택하세요.'}
              />
            </div>
            {showRightDetail && (
              <div className="btd-right-section btd-right-section--trades">
                <BacktestTradeHistoryCard trades={footerTrades} />
              </div>
            )}
          </div>
        </aside>
      </div>

      <BacktestAnalysisReportModal
        open={reportOpen}
        onClose={() => setReportOpen(false)}
        model={reportModel}
      />
    </div>
  );
}

export default BacktestHistoryPage;