import React from 'react';
import type { StrategyDto } from '../../utils/backendApi';
import type { VirtualSessionConfig } from '../../utils/virtualTradingStorage';

interface Props {
  session: Pick<VirtualSessionConfig, 'globalStrategyId' | 'executionType' | 'positionMode' | 'running'>;
  strategies: StrategyDto[];
  onStrategyChange: (strategyId: number | null) => void;
  onExecutionTypeChange: (type: VirtualSessionConfig['executionType']) => void;
  onPositionModeChange: (mode: VirtualSessionConfig['positionMode']) => void;
  onStart: () => void;
  onStop: () => void;
}

const VirtualSessionToolbar: React.FC<Props> = ({
  session,
  strategies,
  onStrategyChange,
  onExecutionTypeChange,
  onPositionModeChange,
  onStart,
  onStop,
}) => (
  <div className="vtd-session-toolbar">
    <div className="vtd-session-field">
      <span className="vtd-session-label">투자전략</span>
      <select
        className="vtd-session-select"
        value={session.globalStrategyId ?? ''}
        onChange={e => {
          const v = e.target.value;
          onStrategyChange(v ? Number(v) : null);
        }}
      >
        <option value="">— 선택 —</option>
        {strategies.map(s => (
          <option key={s.id} value={s.id}>{s.name}</option>
        ))}
      </select>
    </div>

    <div className="vtd-session-field">
      <span className="vtd-session-label">실행방식</span>
      <div className="vtd-view-toggle" role="group" aria-label="실행방식">
        <button
          type="button"
          className={`vtd-view-toggle-btn${session.executionType === 'CANDLE_CLOSE' ? ' vtd-view-toggle-btn--on' : ''}`}
          onClick={() => onExecutionTypeChange('CANDLE_CLOSE')}
        >
          봉 마감 직후
        </button>
        <button
          type="button"
          className={`vtd-view-toggle-btn${session.executionType === 'REALTIME_TICK' ? ' vtd-view-toggle-btn--on' : ''}`}
          onClick={() => onExecutionTypeChange('REALTIME_TICK')}
        >
          실시간 틱
        </button>
      </div>
    </div>

    <div className="vtd-session-field">
      <span className="vtd-session-label">시그널 모드</span>
      <div className="vtd-view-toggle" role="group" aria-label="시그널 모드">
        <button
          type="button"
          className={`vtd-view-toggle-btn${session.positionMode === 'LONG_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
          onClick={() => onPositionModeChange('LONG_ONLY')}
        >
          보유 자산 기준
        </button>
        <button
          type="button"
          className={`vtd-view-toggle-btn${session.positionMode === 'SIGNAL_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
          onClick={() => onPositionModeChange('SIGNAL_ONLY')}
        >
          순수 지표 기준
        </button>
      </div>
    </div>

    <div className="vtd-session-actions">
      <button
        type="button"
        className="bps-btn vtd-session-btn vtd-session-btn--start"
        disabled={session.running}
        onClick={onStart}
      >
        시작
      </button>
      <button
        type="button"
        className="bps-btn bps-btn--danger vtd-session-btn"
        disabled={!session.running}
        onClick={onStop}
      >
        종료
      </button>
    </div>
  </div>
);

export default VirtualSessionToolbar;
