import { useState } from 'react';
import { Check } from 'lucide-react';
import { ROLE_DEFAULT_PALETTE } from '@shared/constants/userRoles';

interface ColorPickerProps {
  /** 현재 선택된 hex 색상 (#RRGGBB) */
  value: string | null | undefined;
  /** 색상 변경 콜백 */
  onChange: (hex: string) => void;
  /** 사용자 지정 팔레트. 미지정 시 ROLE_DEFAULT_PALETTE 사용 */
  palette?: string[];
  /** 직접 입력 허용 여부 (default: true) */
  allowCustom?: boolean;
  className?: string;
  label?: string;
}

/**
 * 미리 정의된 팔레트에서 색상을 선택하는 컴포넌트.
 * 사용자 정의 hex 입력도 지원.
 *
 * 사용처: 역할 생성/수정 다이얼로그
 */
export function ColorPicker({
  value,
  onChange,
  palette = ROLE_DEFAULT_PALETTE,
  allowCustom = true,
  className = '',
  label,
}: ColorPickerProps) {
  const [customHex, setCustomHex] = useState<string>(value ?? '');

  const handleCustomChange = (hex: string) => {
    setCustomHex(hex);
    if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
      onChange(hex);
    }
  };

  return (
    <div className={`space-y-2 ${className}`}>
      {label && <div className="text-[10px] text-hint">{label}</div>}
      <div className="flex flex-wrap gap-1.5">
        {palette.map((color) => {
          const selected = value?.toLowerCase() === color.toLowerCase();
          return (
            <button
              key={color}
              type="button"
              onClick={() => {
                onChange(color);
                setCustomHex(color);
              }}
              className={`w-6 h-6 rounded-md border-2 transition-all flex items-center justify-center ${
                selected ? 'border-white scale-110' : 'border-transparent hover:border-white/40'
              }`}
              style={{ backgroundColor: color }}
              title={color}
            >
              {selected && <Check className="w-3 h-3 text-slate-900" strokeWidth={3} />}
            </button>
          );
        })}
      </div>
      {allowCustom && (
        <div className="flex items-center gap-2">
          <input
            type="color"
            value={value ?? '#808080'}
            onChange={(e) => {
              onChange(e.target.value);
              setCustomHex(e.target.value);
            }}
            className="w-7 h-7 rounded border border-border bg-transparent cursor-pointer"
            title="색상 직접 선택"
          />
          <input
            type="text"
            value={customHex}
            onChange={(e) => handleCustomChange(e.target.value)}
            placeholder="#RRGGBB"
            maxLength={7}
            className="flex-1 px-2 py-1 bg-surface-overlay border border-border rounded text-[11px] text-label font-mono focus:outline-none focus:border-blue-500/50"
          />
        </div>
      )}
    </div>
  );
}
