/**
 * 보조지표 설정 — 색상 + 투명도 (스와치 클릭 시 팔레트·고급 선택기)
 */
import React, { useState, useRef, useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { parsePlotColor, formatPlotColor, plotColorCss } from '../utils/plotColorUtils';
import { getOpacityPercentSpec } from '../utils/indicatorParamSpec';
import NumericParamInput from './NumericParamInput';
import ColorPickerPanel from './ColorPickerPanel';

export interface ColorInputProps {
  value: string;
  onChange: (v: string) => void;
}

const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
  const { hex6, alpha } = parsePlotColor(value);
  const [open, setOpen] = useState(false);
  const anchorRef = useRef<HTMLDivElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);
  const [pos, setPos] = useState({ top: 0, left: 0 });

  const updatePosition = useCallback(() => {
    const el = anchorRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const popW = 280;
    let left = rect.left;
    if (left + popW > window.innerWidth - 12) {
      left = window.innerWidth - popW - 12;
    }
    setPos({ top: rect.bottom + 6, left: Math.max(8, left) });
  }, []);

  useEffect(() => {
    if (!open) return;
    updatePosition();
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setOpen(false);
    };
    const onScroll = () => updatePosition();
    window.addEventListener('keydown', onKey);
    window.addEventListener('resize', updatePosition);
    window.addEventListener('scroll', onScroll, true);
    return () => {
      window.removeEventListener('keydown', onKey);
      window.removeEventListener('resize', updatePosition);
      window.removeEventListener('scroll', onScroll, true);
    };
  }, [open, updatePosition]);

  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      const t = e.target as Node;
      if (anchorRef.current?.contains(t) || popoverRef.current?.contains(t)) return;
      setOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  const patchHex = (h: string) => onChange(formatPlotColor(h, alpha));
  const patchAlpha = (a: number) => onChange(formatPlotColor(hex6, a));

  const popover = open && typeof document !== 'undefined' ? (
    <div
      ref={popoverRef}
      className="ism-color-popover"
      style={{ top: pos.top, left: pos.left }}
      role="dialog"
      aria-label="색상 선택"
      onMouseDown={e => e.stopPropagation()}
    >
      <div className="ism-color-popover-native">
        <label className="ism-color-native-label">
          <span className="ism-style-label">직접 선택</span>
          <input
            type="color"
            className="ism-color-picker"
            value={hex6}
            onChange={e => patchHex(e.target.value)}
          />
        </label>
      </div>
      <ColorPickerPanel hex6={hex6} onHexChange={patchHex} />
    </div>
  ) : null;

  return (
    <div className="ism-color-wrap" ref={anchorRef}>
      <button
        type="button"
        className="ism-color-swatch-btn"
        title="색상 선택"
        aria-expanded={open}
        onClick={() => {
          setOpen(v => !v);
          if (!open) requestAnimationFrame(updatePosition);
        }}
      >
        <span className="ism-color-swatch-preview" style={{ background: plotColorCss(value) }} />
      </button>
      <input
        type="color"
        className="ism-color-picker ism-color-picker--compact"
        value={hex6}
        title="브라우저 색상 선택"
        onChange={e => patchHex(e.target.value)}
      />
      <NumericParamInput
        className="ism-input ism-alpha-input"
        value={alpha}
        spec={getOpacityPercentSpec(alpha)}
        onChange={patchAlpha}
      />
      <span className="ism-alpha-label">%</span>
      {popover ? createPortal(popover, document.body) : null}
    </div>
  );
};

export default ColorInput;