/**
 * 매매 시그널 알림 — 캔들·지표 미니 차트 카드 (펼쳐보기 / 원래보기)
 */
import React from 'react';
import type { IndicatorConfig } from '../../types';
import type { Theme, Timeframe } from '../../types';
import TradeSignalMiniChart from './TradeSignalMiniChart';
import type { TradeSignalChartMarker } from '../../utils/tradeSignalChartMarkers';

const IcExpand = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
    <polyline points="5,1 1,1 1,5" />
    <polyline points="9,13 13,13 13,9" />
    <line x1="1" y1="1" x2="6" y2="6" />
    <line x1="13" y1="13" x2="8" y2="8" />
  </svg>
);

const IcRestore = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
    <polyline points="5,5 1,5 1,1" />
    <polyline points="9,9 13,9 13,13" />
    <line x1="1" y1="5" x2="5" y2="1" />
    <line x1="13" y1="9" x2="9" y2="13" />
  </svg>
);

export interface TradeSignalChartCardProps {
  label: string;
  meta: string;
  market: string;
  timeframe: Timeframe;
  theme: Theme;
  indicators: IndicatorConfig[];
  enabled: boolean;
  expanded: boolean;
  onExpand: () => void;
  onRestore: () => void;
  onRealtimeActivity?: () => void;
  signalMarker?: TradeSignalChartMarker;
}

const TradeSignalChartCard: React.FC<TradeSignalChartCardProps> = ({
  label,
  meta,
  market,
  timeframe,
  theme,
  indicators,
  enabled,
  expanded,
  onExpand,
  onRestore,
  onRealtimeActivity,
  signalMarker,
}) => (
  <section
    className={[
      'tnl-chart-card',
      expanded ? 'tnl-chart-card--expanded' : '',
    ].filter(Boolean).join(' ')}
  >
    <header className="tnl-chart-card-head">
      <span className="tnl-chart-card-label">{label}</span>
      <span className="tnl-chart-card-meta">{meta}</span>
    </header>
    <div className="tnl-chart-card-body">
      <TradeSignalMiniChart
        market={market}
        timeframe={timeframe}
        theme={theme}
        indicators={indicators}
        enabled={enabled}
        fillHeight={expanded}
        onRealtimeActivity={onRealtimeActivity}
        signalMarker={signalMarker}
      />
      {expanded ? (
        <button
          type="button"
          className="tnl-chart-view-btn tnl-chart-view-btn--restore"
          title="원래보기"
          aria-label="원래보기"
          onClick={e => { e.stopPropagation(); onRestore(); }}
        >
          <IcRestore />
        </button>
      ) : (
        <button
          type="button"
          className="tnl-chart-view-btn tnl-chart-view-btn--expand"
          title="펼쳐보기"
          aria-label="펼쳐보기"
          onClick={e => { e.stopPropagation(); onExpand(); }}
        >
          <IcExpand />
        </button>
      )}
    </div>
  </section>
);

export default TradeSignalChartCard;