/**
 * 매매 시그널 알림 상세 본문 — 종목·시간·매수/매도·금액 등
 */
import React from 'react';
import {
  buildSignalDetailRows,
  formatSignalPrice,
  getSignalHeadline,
  getSignalTypeKo,
  type TradeSignalDisplaySource,
} from '../utils/tradeSignalDisplay';
import { useTradeAlertTimeFormat } from '../utils/tradeAlertTimeFormat';

interface Props {
  item: TradeSignalDisplaySource;
  /** compact: 스택 팝업, full: 목록/모달 요약 */
  variant?: 'compact' | 'full';
  showHeadline?: boolean;
  /** list: 라벨·값 세로 목록, matrix: n×n 정보 카드 그리드 */
  layout?: 'list' | 'matrix';
}

export const TradeSignalDetailBody: React.FC<Props> = ({
  item,
  variant = 'compact',
  showHeadline = true,
  layout = 'list',
}) => {
  useTradeAlertTimeFormat();
  const isBuy = item.signalType === 'BUY';
  const rows = buildSignalDetailRows(item);

  return (
    <div className={`tsd-body tsd-body--${variant}${layout === 'matrix' ? ' tsd-body--matrix' : ''}`}>
      {showHeadline && (
        <div className="tsd-headline">
          <span className={`tsd-direction ${isBuy ? 'tsd-direction--buy' : 'tsd-direction--sell'}`}>
            {isBuy ? '↑' : '↓'} {getSignalTypeKo(item.signalType)}
          </span>
          <span className="tsd-headline-price">{formatSignalPrice(item.price)}</span>
        </div>
      )}
      {layout !== 'matrix' && (
        <p className="tsd-summary">{getSignalHeadline(item)}</p>
      )}
      {layout === 'matrix' ? (
        <div className="tsd-detail-matrix" role="list">
          {rows.map(row => (
            <div key={row.label} className="tsd-detail-cell" role="listitem">
              <span className="tsd-detail-cell-label">{row.label}</span>
              <span
                className={[
                  'tsd-detail-cell-value',
                  row.highlight ? 'tsd-detail-cell-value--highlight' : '',
                ].filter(Boolean).join(' ')}
              >
                {row.value}
              </span>
            </div>
          ))}
        </div>
      ) : (
        <dl className="tsd-detail-grid">
          {rows.map(row => (
            <React.Fragment key={row.label}>
              <dt className="tsd-dt">{row.label}</dt>
              <dd className={`tsd-dd${row.highlight ? ' tsd-dd--highlight' : ''}`}>{row.value}</dd>
            </React.Fragment>
          ))}
        </dl>
      )}
    </div>
  );
};

export default TradeSignalDetailBody;