/**
 * 전략 평가 — 전략편집기 전체 화면 팝업
 */
import React, { Suspense, lazy, useEffect } from 'react';
import type { Theme } from '../../types';

const StrategyEditorPage = lazy(() => import('../StrategyEditorPage'));

interface Props {
  theme: Theme;
  initialStrategyId?: number | null;
  onClose: () => void;
  onStrategiesChanged?: () => void;
}

export default function StrategyEditorModal({
  theme,
  initialStrategyId = null,
  onClose,
  onStrategiesChanged,
}: Props) {
  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  return (
    <div className="seval-editor-modal-overlay" role="dialog" aria-modal aria-label="전략 편집">
      <div className="seval-editor-modal-shell">
        <Suspense fallback={<div className="seval-editor-modal-loading">전략 편집기 불러오는 중…</div>}>
          <StrategyEditorPage
            theme={theme}
            variant="modal"
            initialStrategyId={initialStrategyId}
            onClose={onClose}
            onStrategiesChanged={onStrategiesChanged}
          />
        </Suspense>
      </div>
    </div>
  );
}