/**
 * MainChartSettingsModal
 * 메인 차트(캔들스틱) 설정 다이얼로그 — TradingView Settings 와 유사.
 * 탭: Symbol (캔들 색상) / 스타일 / 가시성 (미래 확장용)
 */
import React, { useState } from 'react';
import type { MainChartStyle } from '../types';
import { useDraggablePanel } from '../hooks/useDraggablePanel';

interface Props {
  style:    MainChartStyle;
  onSave:   (style: MainChartStyle) => void;
  onCancel: () => void;
}

type Tab = 'symbol';

const TABS: { id: Tab; label: string }[] = [
  { id: 'symbol', label: '심볼 (Symbol)' },
];

const ColorSwatch: React.FC<{ value: string; onChange: (v: string) => void }> = ({ value, onChange }) => {
  const hex6 = value.slice(0, 7);
  return (
    <label className="mcs-swatch" title={hex6}>
      <input
        type="color"
        value={hex6}
        onChange={e => onChange(e.target.value)}
      />
      <span style={{ background: hex6 }} />
    </label>
  );
};

const MainChartSettingsModal: React.FC<Props> = ({ style, onSave, onCancel }) => {
  const [tab,   setTab]   = useState<Tab>('symbol');
  const [draft, setDraft] = useState<MainChartStyle>({ ...style });

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

  const set = (key: keyof MainChartStyle) => (v: string) =>
    setDraft(prev => ({ ...prev, [key]: v }));

  const handleOk = () => onSave(draft);

  const handleDefaults = () => setDraft({
    upColor:         '#ff6b6b',
    downColor:       '#4dabf7',
    borderUpColor:   '#ff6b6b',
    borderDownColor: '#4dabf7',
    wickUpColor:     '#ff6b6b',
    wickDownColor:   '#4dabf7',
  });

  return (
    <div className="mcs-overlay" onMouseDown={e => e.target === e.currentTarget && onCancel()}>
      <div
        ref={panelRef}
        className="mcs-dialog"
        style={{
          ...panelStyle,
          zIndex: 3001,
          cursor: dragging ? 'grabbing' : undefined,
        }}
        onMouseDown={e => e.stopPropagation()}
      >
        <div
          className="gc-popup-header"
          onPointerDown={onHeaderPointerDown}
          style={{ cursor: headerCursor, ...headerTouchStyle }}
        >
          <span className="gc-popup-title">차트 설정 (Settings)</span>
          <button type="button" className="gc-popup-close" onClick={onCancel}>✕</button>
        </div>

        <div className="mcs-tabs">
          {TABS.map(t => (
            <button
              key={t.id}
              className={`mcs-tab${tab === t.id ? ' active' : ''}`}
              onClick={() => setTab(t.id)}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="mcs-body">
          {tab === 'symbol' && (
            <>
              <div className="mcs-section-label">캔들 (CANDLES)</div>
              <div className="mcs-row">
                <span className="mcs-row-label">상승 (Up)</span>
                <div className="mcs-row-colors">
                  <ColorSwatch value={draft.upColor} onChange={set('upColor')} />
                  <ColorSwatch value={draft.borderUpColor} onChange={set('borderUpColor')} />
                  <ColorSwatch value={draft.wickUpColor} onChange={set('wickUpColor')} />
                </div>
              </div>
              <div className="mcs-row">
                <span className="mcs-row-label">하락 (Down)</span>
                <div className="mcs-row-colors">
                  <ColorSwatch value={draft.downColor} onChange={set('downColor')} />
                  <ColorSwatch value={draft.borderDownColor} onChange={set('borderDownColor')} />
                  <ColorSwatch value={draft.wickDownColor} onChange={set('wickDownColor')} />
                </div>
              </div>
            </>
          )}
        </div>

        <div className="mcs-footer">
          <button className="mcs-btn-defaults" onClick={handleDefaults}>기본값</button>
          <div className="mcs-footer-right">
            <button className="mcs-btn-cancel" onClick={onCancel}>취소</button>
            <button className="mcs-btn-ok" onClick={handleOk}>확인</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainChartSettingsModal;