/**
 * 전략 조건 서술형 설명 팝업
 */
import React, { useMemo } from 'react';
import DraggableModalFrame from '../DraggableModalFrame';
import {
  buildStrategyNarrative,
  type StrategyDescriptionInput,
} from '../../utils/strategyDescriptionNarrative';

interface Props extends StrategyDescriptionInput {
  onClose: () => void;
}

const StrategyDescriptionModal: React.FC<Props> = ({
  onClose,
  name,
  description,
  buyEditorState,
  sellEditorState,
  buyCondition,
  sellCondition,
  orphanCount,
  def,
}) => {
  const narrative = useMemo(
    () => buildStrategyNarrative({
      name,
      description,
      buyEditorState,
      sellEditorState,
      buyCondition,
      sellCondition,
      orphanCount,
      def,
    }),
    [name, description, buyEditorState, sellEditorState, buyCondition, sellCondition, orphanCount, def],
  );

  return (
    <DraggableModalFrame
      onClose={onClose}
      title="전략 설명"
      titleKo="Strategy Description"
      badge="INFO"
      width={560}
      overlayClassName="se-desc-overlay"
      dialogClassName="se-desc-modal app-popup-shell"
      bodyClassName="se-desc-body app-popup-body"
      zIndex={11000}
    >
      <div className="se-desc-content">
        {narrative.intro.map((p, i) => (
          <p key={`intro-${i}`} className="se-desc-intro">{p}</p>
        ))}

        {narrative.sections.map(section => (
          <section key={section.title} className="se-desc-section">
            <h3 className="se-desc-section-title">{section.title}</h3>
            {section.paragraphs.map((p, i) => (
              <p key={`${section.title}-p-${i}`} className="se-desc-para">{p}</p>
            ))}
            {section.bullets && section.bullets.length > 0 && (
              <ul className="se-desc-list">
                {section.bullets.map((line, i) => (
                  <li key={`${section.title}-b-${i}`} className="se-desc-list-item">{line}</li>
                ))}
              </ul>
            )}
          </section>
        ))}

        {narrative.footnotes.length > 0 && (
          <footer className="se-desc-footnotes">
            {narrative.footnotes.map((note, i) => (
              <p key={`fn-${i}`} className="se-desc-footnote">※ {note}</p>
            ))}
          </footer>
        )}
      </div>
    </DraggableModalFrame>
  );
};

export default StrategyDescriptionModal;
