goldenChart/frontend/src/components/backtest/BacktestAnalysisReportModal.tsx

/**
 * 백테스팅 — 투자분석 상세 레포트 (출력·PDF 저장용 팝업)
 */
import React, { useCallback, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import type { BacktestAnalysis, BacktestSignal } from '../../utils/backendApi';
import { BacktestDashboard } from '../BacktestResultModal';
import { printReportDocument } from '../../utils/printReportDocument';
import '../../styles/backtestReportPrint.css';

export interface BacktestAnalysisReportModel {
  analysis: BacktestAnalysis;
  signals: BacktestSignal[];
  strategyName: string;
  symbol: string;
  symbolKo?: string;
  timeframe: string;
  barCount: number;
  createdAt?: string;
  reportKind: 'backtest' | 'live';
}

interface Props {
  open: boolean;
  onClose: () => void;
  model: BacktestAnalysisReportModel | null;
}

const IcReport = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
    <polyline points="14 2 14 8 20 8" />
    <line x1="16" y1="13" x2="8" y2="13" />
    <line x1="16" y1="17" x2="8" y2="17" />
    <line x1="10" y1="9" x2="8" y2="9" />
  </svg>
);

const IcPrint = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <polyline points="6 9 6 2 18 2 18 9" />
    <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
    <rect x="6" y="14" width="12" height="8" />
  </svg>
);

export default function BacktestAnalysisReportModal({ open, onClose, model }: Props) {
  const printAreaRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const handlePrint = useCallback(() => {
    const root = printAreaRef.current;
    if (!root) return;
    printReportDocument(
      root.innerHTML,
      `GoldenChart 투자분석 레포트${model?.symbolKo ? ` · ${model.symbolKo}` : ''}`,
    );
  }, [model?.symbolKo]);

  if (!open || !model) return null;

  const printedAt = new Date().toLocaleString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });

  const content = (
    <div
      className="btd-report-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="btd-report-title"
      onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="btd-report-shell">
        <header className="btd-report-chrome btd-report-no-print">
          <div className="btd-report-chrome-title">
            <span className="btd-report-chrome-icon" aria-hidden><IcReport /></span>
            <div>
              <h2 id="btd-report-title" className="btd-report-chrome-heading">투자분석 상세 레포트</h2>
              <p className="btd-report-chrome-sub">
                {model.reportKind === 'live' ? '실시간 매매' : '백테스팅'}
                {model.symbolKo ? ` · ${model.symbolKo}` : ''}
              </p>
            </div>
          </div>
          <div className="btd-report-chrome-actions">
            <div className="btd-report-chrome-actions-col">
              <button
                type="button"
                className="btd-report-btn btd-report-btn--primary"
                onClick={handlePrint}
                title="프린터 또는 PDF로 저장"
              >
                <IcPrint />
                인쇄 / PDF
              </button>
              <p className="btd-report-print-hint">PDF 저장 시 대상에서 「PDF로 저장」 선택 · 색상 유지는 「배경 그래픽」 체크</p>
            </div>
            <button type="button" className="btd-report-btn" onClick={onClose}>닫기</button>
          </div>
        </header>

        <div className="btd-report-scroll">
          <div ref={printAreaRef} className="btd-report-print-area" lang="ko">
            <div className="btd-report-print-header">
              <div className="btd-report-print-brand">
                <h1>GoldenChart 투자분석 레포트</h1>
                <p className="btd-report-print-meta">
                  출력일시 {printedAt}
                  {model.createdAt ? ` · 분석 실행 ${model.createdAt}` : ''}
                </p>
              </div>
              {model.symbolKo && (
                <p className="btd-report-print-symbol">{model.symbolKo}</p>
              )}
            </div>
            <BacktestDashboard
              analysis={model.analysis}
              signals={model.signals}
              strategyName={model.strategyName}
              symbol={model.symbol}
              timeframe={model.timeframe}
              barCount={model.barCount}
              createdAt={model.createdAt}
              reportMode
            />
            <footer className="btd-report-print-footer">
              <p>본 레포트는 GoldenChart 백테스팅·투자분석 결과이며 투자 권유가 아닙니다.</p>
            </footer>
          </div>
        </div>
      </div>
    </div>
  );

  return createPortal(content, document.body);
}