import React from 'react';
import type { StrategyDto } from '../../utils/backendApi';
import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
import { formatUpdatedTime } from '../../utils/virtualSignalMetrics';
import { STRATEGY_CANDLE_TYPE_OPTIONS } from '../../utils/strategyStartNodes';
import {
  defaultStrategyOptionLabel,
  parseTargetStrategySelectValue,
  targetStrategySelectValue,
} from '../../utils/virtualTargetStrategy';

interface Props {
  snapshot: VirtualIndicatorSnapshot | undefined;
  strategies: StrategyDto[];
  strategyId: number | null;
  globalStrategyId: number | null;
  candleType: string;
  onStrategyChange?: (strategyId: number | null) => void;
  onCandleTypeChange?: (candleType: string) => void;
}

/** 카드 하단 — 갱신 시각(좌) · 전략·시간봉 드롭다운(우) */
const VirtualTargetCardFoot: React.FC<Props> = ({
  snapshot,
  strategies,
  strategyId,
  globalStrategyId,
  candleType,
  onStrategyChange,
  onCandleTypeChange,
}) => (
  <div className="vtd-card-foot">
    <span className="vtd-card-updated">갱신 {formatUpdatedTime(snapshot?.updatedAt)}</span>
    <div className="vtd-card-foot-controls" onClick={e => e.stopPropagation()}>
      <label className="vtd-card-foot-field">
        <select
          className="vtd-card-foot-select"
          aria-label="투자전략"
          value={targetStrategySelectValue({ strategyId })}
          onChange={e => {
            onStrategyChange?.(parseTargetStrategySelectValue(e.target.value));
          }}
        >
          <option value={targetStrategySelectValue({ strategyId: null })}>
            {defaultStrategyOptionLabel(globalStrategyId, strategies)}
          </option>
          {strategies.map(s => (
            <option key={s.id} value={String(s.id)}>{s.name}</option>
          ))}
        </select>
      </label>
      <label className="vtd-card-foot-field">
        <select
          className="vtd-card-foot-select vtd-card-foot-select--tf"
          aria-label="시간봉"
          value={candleType}
          onChange={e => onCandleTypeChange?.(e.target.value)}
        >
          {STRATEGY_CANDLE_TYPE_OPTIONS.map(o => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </select>
      </label>
    </div>
  </div>
);

export default VirtualTargetCardFoot;