import React, { useState, useEffect, useCallback, useRef } from 'react';
import type { IndicatorConfig } from '../types';
import { getIndicatorDef, enrichIndicatorConfig } from '../utils/indicatorRegistry';
import IndicatorSettingsForm from './IndicatorSettingsForm';
import { resetConfigToDefaults } from '../utils/indicatorSettingsEditor';
import { useDraggablePanel } from '../hooks/useDraggablePanel';

interface IndicatorSettingsModalProps {
  config:       IndicatorConfig;
  chartMarket?: string;
  onSave:       (updated: IndicatorConfig) => void;
  onCancel:     () => void;
}

/** 차트·설정 화면 공통 — 입력·스타일·가시성 단일 화면 (탭 없음) */
const IndicatorSettingsModal: React.FC<IndicatorSettingsModalProps> = ({
  config,
  chartMarket = '',
  onSave,
  onCancel,
}) => {
  const def = getIndicatorDef(config.type);
  const draftRef = useRef(enrichIndicatorConfig(config));
  const [formRevision, setFormRevision] = useState(0);
  const [chartHidden, setChartHidden] = useState(() => draftRef.current.hidden ?? false);

  const {
    panelRef,
    dragging,
    onHeaderPointerDown, headerTouchStyle,
    panelStyle,
    headerCursor,
  } = useDraggablePanel({ centerOnMount: true });

  const openedIdRef = React.useRef<string | null>(null);
  useEffect(() => {
    if (openedIdRef.current !== config.id) {
      openedIdRef.current = config.id;
      draftRef.current = enrichIndicatorConfig(config);
      setChartHidden(draftRef.current.hidden ?? false);
      setFormRevision(r => r + 1);
    }
  }, [config]);

  const title = def
    ? `${def.koreanName} (${def.name})`
    : config.type;

  const handleSave = useCallback(() => {
    onSave(enrichIndicatorConfig(draftRef.current));
  }, [onSave]);

  const handleDefaults = useCallback(() => {
    draftRef.current = resetConfigToDefaults(draftRef.current);
    setChartHidden(draftRef.current.hidden ?? false);
    setFormRevision(r => r + 1);
  }, []);

  const handleHidden = useCallback((showOnChart: boolean) => {
    draftRef.current = { ...draftRef.current, hidden: !showOnChart };
    setChartHidden(!showOnChart);
  }, []);

  const handleDraftRef = useCallback((updated: IndicatorConfig) => {
    draftRef.current = updated;
  }, []);

  return (
    <div
      className="ism-overlay"
      onMouseDown={e => { if (e.target === e.currentTarget) onCancel(); }}
    >
      <div
        ref={panelRef}
        className="ism-dialog ism-dialog-unified"
        style={{
          ...panelStyle,
          zIndex: 5001,
          cursor: dragging ? 'grabbing' : undefined,
        }}
        onMouseDown={e => e.stopPropagation()}
        onPointerDown={e => e.stopPropagation()}
      >
        <div
          className="gc-popup-header"
          onPointerDown={onHeaderPointerDown}
          style={{ cursor: headerCursor, ...headerTouchStyle }}
        >
          <span className="gc-popup-title">{title}</span>
          <button type="button" className="gc-popup-close" onClick={onCancel}>✕</button>
        </div>

        <div
          className="ism-body ism-body-unified"
          onMouseDown={e => e.stopPropagation()}
          onPointerDown={e => e.stopPropagation()}
        >
          <IndicatorSettingsForm
            key={`${config.id}-${formRevision}`}
            config={draftRef.current}
            chartMarket={chartMarket}
            variant="modal"
            deferParentSync
            chartHidden={chartHidden}
            onChartHiddenChange={handleHidden}
            onChange={handleDraftRef}
          />
        </div>

        <div className="ism-footer">
          <button type="button" className="ism-btn-defaults" onClick={handleDefaults}>
            기본값 <span style={{ opacity: 0.6, fontSize: 11 }}>▾</span>
          </button>
          <div className="ism-footer-right">
            <button type="button" className="ism-btn-cancel" onClick={onCancel}>취소</button>
            <button type="button" className="ism-btn-ok" onClick={handleSave}>확인</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default IndicatorSettingsModal;