import type { ChangeEvent } from "react";
import { useState } from "react";

export type ColorPaletteItem = {
  // 팔레트 식별자
  id: string;
  // UI에 보여줄 이름
  label: string;
  // HEX 색상 값
  color: string;
};

export type ColorPickerFieldProps = {
  // 필드 라벨 텍스트
  label: string;
  // 컬러 인풋에 대한 접근성 라벨
  ariaLabelColorInput: string;
  // HEX 텍스트 인풋에 대한 접근성 라벨
  ariaLabelHexInput: string;
  // 현재 선택된 색상 값 (HEX)
  value: string;
  // 값 변경 콜백
  onChange: (value: string) => void;
  // 선택 가능한 팔레트 목록
  palette?: ColorPaletteItem[];
  // 현재 선택된 팔레트 ID (있다면 드롭다운 요약에 표시)
  selectedPaletteId?: string;
  // 팔레트 선택 시 호출되는 콜백 (팔레트 메타 정보까지 필요할 때 사용)
  onPaletteSelect?: (item: ColorPaletteItem) => void;
};

// 텍스트/버튼 등에서 공통으로 사용하는 기본 색상 팔레트
export const TEXT_COLOR_PALETTE: ColorPaletteItem[] = [
  // 기본/중립 계열
  { id: "default", label: "기본", color: "#e5e7eb" },
  // 투명
  { id: "transparent", label: "투명", color: "transparent" },
  { id: "muted", label: "연한", color: "#9ca3af" },
  { id: "strong", label: "강조", color: "#f9fafb" },
  { id: "neutral", label: "중립", color: "#94a3b8" },

  // 브랜드/포인트 계열
  { id: "accent", label: "포인트", color: "#38bdf8" },
  { id: "accent-deep", label: "포인트 진하게", color: "#0ea5e9" },
  { id: "accent-soft", label: "포인트 연하게", color: "#bae6fd" },

  // 상태 계열
  { id: "danger", label: "위험", color: "#f97373" },
  { id: "danger-deep", label: "위험 진하게", color: "#ef4444" },
  { id: "success", label: "성공", color: "#22c55e" },
  { id: "success-soft", label: "성공 연하게", color: "#bbf7d0" },
  { id: "warning", label: "경고", color: "#eab308" },
  { id: "info", label: "정보", color: "#0ea5e9" },

  // 보라/핑크 계열
  { id: "purple", label: "보라", color: "#a855f7" },
  { id: "purple-soft", label: "연한 보라", color: "#e9d5ff" },
  { id: "pink", label: "핑크", color: "#ec4899" },
  { id: "pink-soft", label: "연한 핑크", color: "#f9a8d4" },

  // 배경 대비용 어두운 텍스트
  { id: "dark", label: "어두운 텍스트", color: "#020617" },
  { id: "dark-muted", label: "어두운 연한", color: "#64748b" },
];

export function ColorPickerField({
  label,
  ariaLabelColorInput,
  ariaLabelHexInput,
  value,
  onChange,
  palette = [],
  selectedPaletteId,
  onPaletteSelect,
}: ColorPickerFieldProps) {
  const [open, setOpen] = useState(false);

  const colorInputValue = value && value.startsWith("#") ? value : "#ffffff";
  // 컬러 인풋 변경 시 HEX 문자열을 onChange로 전달한다.
  const handleColorInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    onChange(event.target.value);
  };

  // 텍스트 인풋 변경 시 그대로 onChange로 전달한다.
  const handleHexInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    onChange(event.target.value);
  };

  // 팔레트 버튼 클릭 시 해당 팔레트의 색상으로 onChange를 호출한다.
  const handlePaletteClick = (item: ColorPaletteItem) => {
    onChange(item.color);
    if (onPaletteSelect) {
      onPaletteSelect(item);
    }
  };

  // 현재 선택된 팔레트 정보를 계산한다.
  // 1) selectedPaletteId 가 넘어오면 ID 기준으로 찾고,
  // 2) 없으면 현재 value 와 color 가 일치하는 팔레트 항목을 사용한다.
  let selectedPalette: ColorPaletteItem | null = null;
  if (palette.length > 0) {
    if (selectedPaletteId) {
      selectedPalette = palette.find((item) => item.id === selectedPaletteId) ?? null;
    } else if (value) {
      selectedPalette = palette.find((item) => item.color === value) ?? null;
    }
  }

  return (
    <div className="flex flex-col gap-1 text-xs text-slate-400">
      <span>{label}</span>
      <div className="flex items-center gap-2">
        <input
          type="color"
          aria-label={ariaLabelColorInput}
          className="h-8 w-8 rounded border border-slate-700 bg-slate-900 p-0"
          value={colorInputValue}
          onChange={handleColorInputChange}
        />
        <input
          className="w-28 flex-none rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
          aria-label={ariaLabelHexInput}
          placeholder="예: #ff0000"
          value={value}
          onChange={handleHexInputChange}
        />
        {palette.length > 0 ? (
          <div className="relative text-[11px] flex-none">
            <button
              type="button"
              className="w-28 rounded border border-slate-800 bg-slate-950/60 flex items-center justify-between px-2 py-1 text-left"
              onClick={() => setOpen((prev) => !prev)}
            >
              <span className="flex items-center gap-1">
                <span
                  className="inline-block h-3 w-3 rounded-full"
                  style={{ backgroundColor: selectedPalette?.color ?? value ?? "#ffffff" }}
                />
                <span className="truncate text-slate-200">
                  {selectedPalette?.label ?? "색상 팔레트"}
                </span>
              </span>
              <span className="text-slate-500 text-[10px]">▼</span>
            </button>
            {open ? (
              <div className="absolute right-0 top-full mt-1 w-32 rounded border border-slate-800 bg-slate-950 max-h-40 overflow-auto z-10">
                {palette.map((item) => (
                  <button
                    key={item.id}
                    type="button"
                    className={`w-full flex items-center justify-between px-2 py-1 text-left text-[11px] border-b border-slate-900 last:border-b-0 ${
                      selectedPaletteId === item.id
                        ? "bg-sky-900/40 text-sky-100"
                        : "bg-transparent text-slate-300 hover:bg-slate-900/60"
                    }`}
                    onClick={(event) => {
                      event.stopPropagation();
                      handlePaletteClick(item);
                      setOpen(false);
                    }}
                  >
                    <span className="flex items-center gap-2">
                      <span
                        className="inline-block h-3 w-3 rounded-full"
                        style={{ backgroundColor: item.color }}
                      />
                      <span>{item.label}</span>
                    </span>
                  </button>
                ))}
              </div>
            ) : null}
          </div>
        ) : null}
      </div>
    </div>
  );
}
