import React from 'react';
import type { IndicatorConfig, HlinesBackground, Timeframe } from '../types';
import type { PlotDef, HLineDef } from '../utils/indicatorRegistry';
import { getHLineLabel } from '../utils/indicatorRegistry';
import { getParamLabel, getPlotLabel, getSrcOptionLabel } from '../utils/indicatorLabels';
import { getIchimokuPlotTitle } from '../utils/ichimokuConfig';
import {
  getNumericParamSpec,
  getHlinePriceSpec,
} from '../utils/indicatorParamSpec';
import {
  getGlobalParamKeys,
  getPlotParamKeys,
  plotParamsOnGlobalRowOnly,
  plotRowHasNoInputs,
} from '../utils/indicatorSettingsLayout';
import NumericParamInput from './NumericParamInput';
import PlotLineStylePicker from './PlotLineStylePicker';
import ColorInput from './ColorInput';
import { colorToRgbaString, cloudColorOpacityPercent } from '../utils/ichimokuConfig';
import { resolveHistogramUpColor, resolveHistogramDownColor } from '../utils/plotColorUtils';
import type { IchimokuCloudColors } from '../utils/ichimokuConfig';

const SRC_OPTIONS = ['close', 'open', 'high', 'low', 'hl2', 'hlc3', 'ohlc4'];

const MA_TYPE_OPTIONS_CCI = ['None', 'SMA', 'EMA', 'WMA'] as const;
const MA_TYPE_OPTIONS_OBV = ['SMA', 'EMA', 'WMA'] as const;

/** 업비트 OBV 드롭다운 표기 */
const OBV_MA_TYPE_LABELS: Record<string, string> = {
  SMA: '단순이동평균',
  EMA: '지수 이동 평균',
  WMA: '가중이동평균',
};

const MA_TYPE_LABELS: Record<string, string> = {
  None: '없음 (None)',
  SMA:  '단순이동평균 (SMA)',
  EMA:  '지수이동평균 (EMA)',
  WMA:  '가중이동평균 (WMA)',
  'SMMA (RMA)': 'RMA (SMMA)',
  VWMA: '거래량가중이동평균 (VWMA)',
};

function isMaTypeParam(indicatorType: string, key: string, value: unknown): boolean {
  if (key !== 'maType' || typeof value !== 'string') return false;
  return indicatorType === 'CCI' || indicatorType === 'OBV' || indicatorType === 'RSI';
}

function maTypeOptionsFor(indicatorType: string): readonly string[] {
  if (indicatorType === 'OBV') return MA_TYPE_OPTIONS_OBV;
  return MA_TYPE_OPTIONS_CCI;
}

function isSrcParam(key: string, value: unknown): boolean {
  return (key === 'src' || key.toLowerCase().includes('src')) && typeof value === 'string';
}

export { ColorInput };

/* ── 단일 파라미터 컨트롤 ─────────────────────────────────────── */
export const ParamField: React.FC<{
  indicatorType: string;
  paramKey: string;
  value: number | string | boolean;
  disabled?: boolean;
  onChange: (key: string, raw: string | boolean) => void;
}> = ({ indicatorType, paramKey, value, disabled, onChange }) => {
  if (typeof value === 'boolean') {
    return (
      <label className="ism-toggle">
        <input
          type="checkbox"
          checked={value}
          disabled={disabled}
          onChange={e => onChange(paramKey, e.target.checked)}
        />
        <span className="ism-toggle-slider" />
      </label>
    );
  }
  if (isMaTypeParam(indicatorType, paramKey, value)) {
    return (
      <select
        className="ism-select ism-param-inline-select"
        value={value as string}
        disabled={disabled}
        onChange={e => onChange(paramKey, e.target.value)}
      >
        {maTypeOptionsFor(indicatorType).map(o => (
          <option key={o} value={o}>
            {indicatorType === 'OBV'
              ? (OBV_MA_TYPE_LABELS[o] ?? o)
              : (MA_TYPE_LABELS[o] ?? o)}
          </option>
        ))}
      </select>
    );
  }
  if (isSrcParam(paramKey, value)) {
    return (
      <select
        className="ism-select ism-param-inline-select"
        value={value as string}
        disabled={disabled}
        onChange={e => onChange(paramKey, e.target.value)}
      >
        {SRC_OPTIONS.map(o => (
          <option key={o} value={o}>{getSrcOptionLabel(o)}</option>
        ))}
      </select>
    );
  }
  if (typeof value === 'number') {
    return (
      <NumericParamInput
        className="ism-input ism-narrow ism-sma-period-input"
        value={value}
        spec={getNumericParamSpec(indicatorType, paramKey, value)}
        disabled={disabled}
        onChange={v => onChange(paramKey, String(v))}
      />
    );
  }
  return (
    <input
      type="text"
      className="ism-input ism-narrow"
      value={value as string}
      disabled={disabled}
      onChange={e => onChange(paramKey, e.target.value)}
    />
  );
};

/* ── 플롯 설정 행 (on/off · 이름 · 입력 · 색상·선) ─────────────── */
export const PlotSettingsRow: React.FC<{
  indicatorType: string;
  plot: PlotDef;
  plotIndex: number;
  plots: PlotDef[];
  params: Record<string, number | string | boolean>;
  enabled: boolean;
  inputsOnly?: boolean;
  onToggle: (plotId: string, on: boolean) => void;
  onParamChange: (key: string, raw: string | boolean) => void;
  onPlotStyle: (plotIndex: number, patch: Partial<PlotDef>) => void;
}> = ({
  indicatorType, plot, plotIndex, plots, params, enabled, inputsOnly,
  onToggle, onParamChange, onPlotStyle,
}) => {
  const paramKeys = getPlotParamKeys(indicatorType, plot.id, plotIndex, plots, params);
  const noInputs = plotRowHasNoInputs(indicatorType, plot.id, plotIndex, plots, params);
  const globalOnlyInputs = plotParamsOnGlobalRowOnly(indicatorType, plot.id);
  const label = indicatorType === 'IchimokuCloud'
    ? getIchimokuPlotTitle(plot.id)
    : getPlotLabel(plot.title);
  const isHistogram = plot.type === 'histogram';

  return (
    <div className={`ism-row ism-sma-ma-row${enabled ? '' : ' ism-sma-ma-off'}`}>
      <label className="ism-toggle ism-sma-ma-toggle">
        <input
          type="checkbox"
          checked={enabled}
          onChange={e => onToggle(plot.id, e.target.checked)}
        />
        <span className="ism-toggle-slider" />
      </label>
      <label className="ism-label ism-sma-ma-label">{label}</label>
      <div className="ism-control ism-sma-ma-control">
        {noInputs && globalOnlyInputs ? (
          <span className="ism-hlines-bg-spacer" aria-hidden />
        ) : noInputs ? (
          <span className="ism-ichimoku-auto-param" title="상위 설정 또는 자동 계산">자동</span>
        ) : (
          <div className="ism-plot-param-inputs">
            {paramKeys.map(key => (
              <ParamField
                key={key}
                indicatorType={indicatorType}
                paramKey={key}
                value={params[key]}
                disabled={!enabled}
                onChange={onParamChange}
              />
            ))}
          </div>
        )}
        {!inputsOnly && (
          isHistogram && indicatorType === 'MACD' ? (
            <div className="ism-hist-colors">
              <div className="ism-hist-color-field">
                <span className="ism-style-label">0선 위</span>
                <ColorInput
                  value={resolveHistogramUpColor(plot)}
                  disabled={!enabled}
                  onChange={v => onPlotStyle(plotIndex, { histogramUpColor: v, color: v })}
                />
              </div>
              <div className="ism-hist-color-field">
                <span className="ism-style-label">0선 아래</span>
                <ColorInput
                  value={resolveHistogramDownColor(plot)}
                  disabled={!enabled}
                  onChange={v => onPlotStyle(plotIndex, { histogramDownColor: v })}
                />
              </div>
            </div>
          ) : isHistogram ? (
            <ColorInput
              value={plot.color}
              disabled={!enabled}
              onChange={v => onPlotStyle(plotIndex, { color: v })}
            />
          ) : (
            <PlotLineStylePicker
              disabled={!enabled}
              title={label}
              value={{
                color: plot.color,
                lineWidth: plot.lineWidth,
                lineStyle: plot.lineStyle,
              }}
              onChange={patch => onPlotStyle(plotIndex, patch)}
            />
          )
        )}
      </div>
    </div>
  );
};

/* ── 전역 파라미터 행 (토글 없음) ─────────────────────────────── */
export const GlobalParamRow: React.FC<{
  indicatorType: string;
  paramKey: string;
  value: number | string | boolean;
  onChange: (key: string, raw: string | boolean) => void;
}> = ({ indicatorType, paramKey, value, onChange }) => (
  <div className="ism-row ism-global-param-row">
    <span className="ism-label ism-sma-ma-label">{getParamLabel(paramKey, indicatorType)}</span>
    <div className="ism-control ism-sma-ma-control">
      <ParamField
        indicatorType={indicatorType}
        paramKey={paramKey}
        value={value}
        onChange={onChange}
      />
    </div>
  </div>
);

/* ── 수평선 행 ───────────────────────────────────────────────── */
export const HLineSettingsRow: React.FC<{
  indicatorType: string;
  hl: HLineDef;
  idx: number;
  allPrices: number[];
  inputsOnly?: boolean;
  onVisible: (idx: number, v: boolean) => void;
  onPrice: (idx: number, v: number) => void;
  onStyle: (idx: number, patch: Partial<HLineDef>) => void;
}> = ({ indicatorType, hl, idx, allPrices, inputsOnly, onVisible, onPrice, onStyle }) => {
  const label = hl.label ?? getHLineLabel(hl.price, allPrices);
  const isOn = hl.visible !== false;
  return (
    <div className={`ism-row ism-sma-ma-row${isOn ? '' : ' ism-sma-ma-off'}`}>
      <label className="ism-toggle ism-sma-ma-toggle">
        <input type="checkbox" checked={isOn} onChange={e => onVisible(idx, e.target.checked)} />
        <span className="ism-toggle-slider" />
      </label>
      <label className="ism-label ism-sma-ma-label">{label}</label>
      <div className="ism-control ism-sma-ma-control">
        <NumericParamInput
          className="ism-input ism-narrow ism-sma-period-input"
          value={hl.price}
          spec={getHlinePriceSpec(indicatorType, hl.price)}
          disabled={!isOn}
          onChange={v => onPrice(idx, v)}
        />
        {!inputsOnly && (
          <PlotLineStylePicker
            disabled={!isOn}
            title={label}
            value={{
              color: hl.color,
              lineWidth: hl.lineWidth,
              lineStyle: hl.lineStyle ?? 'dashed',
            }}
            onChange={patch => onStyle(idx, patch)}
          />
        )}
      </div>
    </div>
  );
};

/* ── 출력 · 타임프레임 (하단 공통) ───────────────────────────── */
export const SettingsOutputFooter: React.FC<{
  lastValueVisible: boolean;
  onLastValueVisible: (v: boolean) => void;
  timeframeVis: Partial<Record<Timeframe, boolean>>;
  onTimeframeVis: (tf: Timeframe, v: boolean) => void;
  timeframes: { tf: Timeframe; label: string }[];
  /** 개별 설정 모달: 지표 전체 숨김 */
  chartHidden?: boolean;
  onChartHidden?: (showOnChart: boolean) => void;
}> = ({
  lastValueVisible, onLastValueVisible, timeframeVis, onTimeframeVis, timeframes,
  chartHidden, onChartHidden,
}) => (
  <>
    <div className="ism-ichimoku-cloud-divider" />
    <div className="ism-output-section-title">출력 · 표시</div>
    {onChartHidden != null && (
      <div className="ism-row ism-ichimoku-extra-row">
        <span className="ism-label">차트에 표시</span>
        <div className="ism-control">
          <label className="ism-toggle">
            <input
              type="checkbox"
              checked={chartHidden !== true}
              onChange={e => onChartHidden(e.target.checked)}
            />
            <span className="ism-toggle-slider" />
          </label>
        </div>
      </div>
    )}
    <div className="ism-row ism-ichimoku-extra-row">
      <span className="ism-label">가격축 라벨·설명</span>
      <div className="ism-control">
        <label className="ism-toggle" title="이 지표만 우측 가격축 금액·설명 표시 (해당 영역·차트 설정 전역 스위치가 켜져 있을 때 적용)">
          <input
            type="checkbox"
            checked={lastValueVisible}
            onChange={e => onLastValueVisible(e.target.checked)}
          />
          <span className="ism-toggle-slider" />
        </label>
      </div>
    </div>
    <div className="ism-tf-grid ism-ichimoku-tf-grid">
      {timeframes.map(({ tf, label }) => (
        <label key={tf} className="ism-tf-item">
          <input
            type="checkbox"
            checked={timeframeVis[tf] !== false}
            onChange={e => onTimeframeVis(tf, e.target.checked)}
          />
          <span className="ism-tf-label">{label}</span>
        </label>
      ))}
    </div>
  </>
);

/* ── 일목 구름 색상 ─────────────────────────────────────────── */
export const IchimokuCloudSection: React.FC<{
  cloudColors: IchimokuCloudColors;
  onChange: (patch: Partial<IchimokuCloudColors>) => void;
}> = ({ cloudColors, onChange }) => {
  const bullishOn = cloudColors.bullishVisible !== false;
  const bearishOn = cloudColors.bearishVisible !== false;

  return (
    <>
      <div className="ism-ichimoku-cloud-divider" />
      <div className="ism-ichimoku-cloud-section">
        <h4 className="ism-ichimoku-cloud-title">구름 영역</h4>
        <p className="ism-ichimoku-cloud-hint">
          선행스팬1·선행스팬2가 모두 켜져 있을 때만 구름을 그릴 수 있습니다. 상승·하락 구름은 각각 on/off 할 수 있습니다.
        </p>
        <div className="ism-ichimoku-cloud-grid">
          <div className={`ism-ichimoku-cloud-card${bullishOn ? '' : ' ism-ichimoku-cloud-card--off'}`}>
            <div className="ism-ichimoku-cloud-card-head">
              <label className="ism-toggle ism-ichimoku-cloud-toggle">
                <input
                  type="checkbox"
                  checked={bullishOn}
                  onChange={e => onChange({ bullishVisible: e.target.checked })}
                />
                <span className="ism-toggle-slider" />
              </label>
              <span className="ism-ichimoku-cloud-card-label">상승 구름 (선행1 &gt; 선행2)</span>
            </div>
            <div className="ism-ichimoku-cloud-card-row">
              <ColorInput
                value={cloudColors.bullishColor}
                disabled={!bullishOn}
                onChange={v => onChange({ bullishColor: v })}
              />
            </div>
            <div className="ism-ichimoku-cloud-meta">
              {colorToRgbaString(cloudColors.bullishColor)}
              {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bullishColor)}%
            </div>
          </div>
          <div className={`ism-ichimoku-cloud-card${bearishOn ? '' : ' ism-ichimoku-cloud-card--off'}`}>
            <div className="ism-ichimoku-cloud-card-head">
              <label className="ism-toggle ism-ichimoku-cloud-toggle">
                <input
                  type="checkbox"
                  checked={bearishOn}
                  onChange={e => onChange({ bearishVisible: e.target.checked })}
                />
                <span className="ism-toggle-slider" />
              </label>
              <span className="ism-ichimoku-cloud-card-label">하락 구름 (선행1 &lt; 선행2)</span>
            </div>
            <div className="ism-ichimoku-cloud-card-row">
              <ColorInput
                value={cloudColors.bearishColor}
                disabled={!bearishOn}
                onChange={v => onChange({ bearishColor: v })}
              />
            </div>
            <div className="ism-ichimoku-cloud-meta">
              {colorToRgbaString(cloudColors.bearishColor)}
              {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bearishColor)}%
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

/* ── 볼린저밴드 백그라운드 (업비트 모습 탭) ───────────────────── */
export const BollingerBackgroundRow: React.FC<{
  value: HlinesBackground;
  onChange: (v: HlinesBackground) => void;
}> = ({ value, onChange }) => (
  <div className={`ism-row ism-sma-ma-row${value.visible ? '' : ' ism-sma-ma-off'}`}>
    <label className="ism-toggle ism-sma-ma-toggle">
      <input
        type="checkbox"
        checked={value.visible}
        onChange={e => onChange({ ...value, visible: e.target.checked })}
      />
      <span className="ism-toggle-slider" />
    </label>
    <span className="ism-label ism-sma-ma-label">백그라운드 그리기</span>
    <div className="ism-control ism-sma-ma-control">
      <span className="ism-ichimoku-auto-param ism-hlines-bg-spacer" aria-hidden />
      <ColorInput
        value={value.color}
        onChange={c => onChange({ ...value, color: c })}
      />
    </div>
  </div>
);

/* ── 수평선 배경 ─────────────────────────────────────────────── */
export const HlinesBackgroundRow: React.FC<{
  value: HlinesBackground;
  onChange: (v: HlinesBackground) => void;
}> = ({ value, onChange }) => (
  <>
    <div className="ism-ichimoku-cloud-divider" />
    <div className="ism-row ism-sma-ma-row">
      <label className="ism-toggle ism-sma-ma-toggle">
        <input
          type="checkbox"
          checked={value.visible}
          onChange={e => onChange({ ...value, visible: e.target.checked })}
        />
        <span className="ism-toggle-slider" />
      </label>
      <span className="ism-label ism-sma-ma-label">수평선 배경</span>
      <div className="ism-control ism-sma-ma-control">
        <span className="ism-ichimoku-auto-param ism-hlines-bg-spacer" aria-hidden />
        <ColorInput
          value={value.color}
          onChange={c => onChange({ ...value, color: c })}
        />
      </div>
    </div>
  </>
);

/* ── 볼린저밴드 심볼 (업비트 인풋) ───────────────────────────── */
export const BollingerSymbolSection: React.FC<{
  symbolMode: string;
  refSymbol: string;
  chartMarket: string;
  onChange: (patch: { symbolMode?: string; refSymbol?: string }) => void;
}> = ({ symbolMode, refSymbol, chartMarket, onChange }) => {
  const isOther = symbolMode === 'other';
  return (
    <div className="ism-bb-symbol-section">
      <div className="ism-output-section-title">심볼</div>
      <label className="ism-bb-symbol-option">
        <input
          type="radio"
          name="bb-symbol-mode"
          checked={!isOther}
          onChange={() => onChange({ symbolMode: 'main' })}
        />
        <span>메인 차트 심볼</span>
        {chartMarket ? <span className="ism-bb-symbol-hint">{chartMarket}</span> : null}
      </label>
      <label className="ism-bb-symbol-option ism-bb-symbol-other">
        <input
          type="radio"
          name="bb-symbol-mode"
          checked={isOther}
          onChange={() => onChange({ symbolMode: 'other' })}
        />
        <span>다른 심볼</span>
        <input
          type="text"
          className="ism-input ism-bb-ref-symbol"
          placeholder="KRW-BTC"
          value={refSymbol}
          disabled={!isOther}
          onChange={e => onChange({ refSymbol: e.target.value.toUpperCase() })}
        />
      </label>
    </div>
  );
};

/* ── 통합 본문 (일반 지표) ───────────────────────────────────── */
export const UnifiedIndicatorBody: React.FC<{
  config: IndicatorConfig;
  params: Record<string, number | string | boolean>;
  plots: PlotDef[];
  plotVis: Record<string, boolean>;
  hlines: HLineDef[];
  hlinesBg: HlinesBackground;
  hasHLines: boolean;
  lastValueVisible: boolean;
  timeframeVis: Partial<Record<Timeframe, boolean>>;
  timeframes: { tf: Timeframe; label: string }[];
  onParamChange: (key: string, raw: string | boolean) => void;
  onPlotToggle: (plotId: string, on: boolean) => void;
  onPlotStyle: (idx: number, patch: Partial<PlotDef>) => void;
  onHLineVisible: (idx: number, v: boolean) => void;
  onHLinePrice: (idx: number, v: number) => void;
  onHLineStyle: (idx: number, patch: Partial<HLineDef>) => void;
  onHlinesBg: (v: HlinesBackground) => void;
  onLastValueVisible: (v: boolean) => void;
  onTimeframeVis: (tf: Timeframe, v: boolean) => void;
  cloudSection?: React.ReactNode;
  symbolSection?: React.ReactNode;
  /** 플롯 행 아래 추가 섹션 (BB 백그라운드 등) */
  afterPlotsSection?: React.ReactNode;
  /** false면 가격 스케일·타임프레임 보임 설정 숨김 (BB) */
  showOutputFooter?: boolean;
  inputsOnly?: boolean;
  chartHidden?: boolean;
  onChartHidden?: (showOnChart: boolean) => void;
}> = (props) => {
  const {
    config, params, plots, plotVis, hlines, hlinesBg, hasHLines,
    lastValueVisible, timeframeVis, timeframes,
    onParamChange, onPlotToggle, onPlotStyle,
    onHLineVisible, onHLinePrice, onHLineStyle, onHlinesBg,
    onLastValueVisible, onTimeframeVis, cloudSection, symbolSection,
    afterPlotsSection,
    showOutputFooter = true,
    inputsOnly = false,
    chartHidden,
    onChartHidden,
  } = props;

  const globalKeys = getGlobalParamKeys(config.type, params, plots);
  const hlinePrices = hlines.map(h => h.price);

  return (
    <div className="ism-section unified-settings-section">
      {symbolSection}
      {symbolSection && globalKeys.length > 0 && <div className="ism-sma-divider" />}
      {globalKeys.map(key => (
        <GlobalParamRow
          key={key}
          indicatorType={config.type}
          paramKey={key}
          value={params[key]}
          onChange={onParamChange}
        />
      ))}

      {globalKeys.length > 0 && plots.length > 0 && <div className="ism-sma-divider" />}

      {plots.map((plot, idx) => (
        <PlotSettingsRow
          key={plot.id}
          indicatorType={config.type}
          plot={plot}
          plotIndex={idx}
          plots={plots}
          params={params}
          enabled={plotVis[plot.id] !== false}
          onToggle={onPlotToggle}
          onParamChange={onParamChange}
          onPlotStyle={onPlotStyle}
          inputsOnly={inputsOnly}
        />
      ))}

      {cloudSection}

      {afterPlotsSection}

      {hlines.length > 0 && (
        <>
          <div className="ism-sma-divider" />
          <div className="ism-output-section-title">수평선</div>
          {hlines.map((hl, idx) => (
            <HLineSettingsRow
              key={idx}
              indicatorType={config.type}
              hl={hl}
              idx={idx}
              allPrices={hlinePrices}
              onVisible={onHLineVisible}
              onPrice={onHLinePrice}
              onStyle={onHLineStyle}
              inputsOnly={inputsOnly}
            />
          ))}
        </>
      )}

      {hasHLines && !inputsOnly && <HlinesBackgroundRow value={hlinesBg} onChange={onHlinesBg} />}

      {showOutputFooter && (
        <SettingsOutputFooter
          lastValueVisible={lastValueVisible}
          onLastValueVisible={onLastValueVisible}
          timeframeVis={timeframeVis}
          onTimeframeVis={onTimeframeVis}
          timeframes={timeframes}
          chartHidden={chartHidden}
          onChartHidden={onChartHidden}
        />
      )}
    </div>
  );
};