import React from 'react';
import type { IndicatorConfig } from '../types';
import { getIndicatorDef } from '../utils/indicatorRegistry';
import { getIndicatorListLabels } from '../utils/indicatorSettingsList';
import IndicatorSettingsForm from './IndicatorSettingsForm';

export interface IndicatorSettingsListRowProps {
  type: string;
  config: IndicatorConfig;
  enabled: boolean;
  chartMarket?: string;
  expanded: boolean;
  variant: 'bulk' | 'settings';
  onToggleExpand: () => void;
  onToggleEnabled: (enabled: boolean) => void;
  onChange: (updated: IndicatorConfig) => void;
  onRowDefaults?: () => void;
}

const IndicatorSettingsListRow: React.FC<IndicatorSettingsListRowProps> = ({
  type,
  config,
  enabled,
  chartMarket = '',
  expanded,
  variant,
  onToggleExpand,
  onToggleEnabled,
  onChange,
  onRowDefaults,
}) => {
  const labels = getIndicatorListLabels(type);
  const def = getIndicatorDef(type);

  const cardClass =
    variant === 'bulk'
      ? `ibsm-card ibsm-main-row${enabled ? ' ibsm-main-row--active' : ''}${expanded ? ' ibsm-card-expanded' : ''}`
      : `stg-ind-card${enabled ? ' stg-ind-card--on-chart' : ''}${expanded ? ' stg-ind-card--expanded' : ''}`;

  const headClass = variant === 'bulk' ? 'ibsm-card-main ibsm-main-row-head' : 'stg-ind-card-head';
  const infoClass = variant === 'bulk' ? 'ibsm-main-row-info' : 'stg-ind-card-titles';
  const koClass = variant === 'bulk' ? 'ibsm-main-row-ko' : 'stg-ind-card-name';
  const enClass = variant === 'bulk' ? 'ibsm-main-row-en' : 'stg-ind-card-sub';
  const badgesClass = variant === 'bulk' ? 'ibsm-main-row-badges' : 'stg-ind-card-badges';
  const onBadgeClass = variant === 'bulk' ? 'ibsm-main-badge ibsm-main-badge--on' : 'stg-ind-badge stg-ind-badge--on';
  const offBadgeClass = variant === 'bulk' ? 'ibsm-main-badge' : 'stg-ind-badge';
  const expandClass = variant === 'bulk' ? 'ibsm-expand' : 'stg-ind-card-expand';
  const expandWrapClass = variant === 'bulk' ? 'ibsm-card-expand' : 'stg-ind-card-body';

  return (
    <div className={cardClass}>
      <div className={headClass}>
        <div className={infoClass}>
          <span className={koClass}>{labels.ko}</span>
          <span className={enClass}>{labels.en}</span>
        </div>
        <div className={badgesClass}>
          {def?.overlay && <span className="ind-panel-badge">오버레이</span>}
          {def?.returnsMarkers && <span className="ind-panel-badge">마커</span>}
          {enabled ? (
            <span className={onBadgeClass}>차트 적용</span>
          ) : (
            <span className={offBadgeClass}>미적용</span>
          )}
        </div>
        <label
          className={`ibsm-toggle${variant === 'settings' ? ' stg-ind-toggle' : ''}`}
          title={enabled ? '차트에서 제거' : '차트에 추가'}
          onClick={e => e.stopPropagation()}
        >
          <input
            type="checkbox"
            checked={enabled}
            onChange={e => onToggleEnabled(e.target.checked)}
          />
          <span className="ism-toggle-slider" />
        </label>
        {variant === 'settings' && onRowDefaults && (
          <button type="button" className="stg-ind-card-defaults" onClick={onRowDefaults}>
            기본값
          </button>
        )}
        <button
          type="button"
          className={expandClass}
          onClick={onToggleExpand}
          aria-expanded={expanded}
          title={expanded ? '접기' : '설정 펼치기'}
        >
          {expanded ? '▲' : '▼'}
        </button>
      </div>

      {expanded && (
        <div className={expandWrapClass}>
          <IndicatorSettingsForm
            config={config}
            chartMarket={chartMarket}
            variant="embedded"
            onChange={onChange}
          />
        </div>
      )}
    </div>
  );
};

export default IndicatorSettingsListRow;
