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

interface Props {
  snapshot: VirtualIndicatorSnapshot | undefined;
  strategies: StrategyDto[];
  strategyId: number | null;
  globalStrategyId: number | null;
  onStrategyChange?: (strategyId: number | null) => void;
  /** 변경 불가 시 셀렉트 대신 표시할 전략명 (알림 목록 등) */
  readOnlyStrategyLabel?: string;
}

/** 카드 하단 — 갱신 시각(좌) · 전략 드롭다운(우) */
const VirtualTargetCardFoot: React.FC<Props> = ({
  snapshot,
  strategies,
  strategyId,
  globalStrategyId,
  onStrategyChange,
  readOnlyStrategyLabel,
}) => {
  const resolvedName =
    readOnlyStrategyLabel?.trim()
    || strategies.find(s => s.id === strategyId)?.name
    || '';

  return (
    <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">
          {readOnlyStrategyLabel != null && !onStrategyChange ? (
            <span
              className="vtd-card-foot-select vtd-card-foot-select--readonly"
              title={resolvedName}
            >
              {resolvedName || '전략'}
            </span>
          ) : (
            <select
              className="vtd-card-foot-select"
              aria-label="투자전략"
              value={targetStrategySelectValue({ strategyId })}
              disabled={!onStrategyChange}
              title={!onStrategyChange ? resolvedName : undefined}
              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>
      </div>
    </div>
  );
};

export default VirtualTargetCardFoot;