"use client";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

interface ColorPickerWithTransparentProps {
  id?: string;
  value: string | undefined;
  onChange: (value: string | undefined) => void;
  defaultColor?: string;
  placeholder?: string;
  className?: string;
}

/**
 * 투명 옵션이 포함된 색상 선택 컴포넌트
 * - 색상 선택기 (color input)
 * - 텍스트 입력 (HEX 값 직접 입력)
 * - 투명 버튼 (투명/색상 토글)
 */
export function ColorPickerWithTransparent({
  id,
  value,
  onChange,
  defaultColor = "#000000",
  placeholder = "#000000",
  className = "",
}: ColorPickerWithTransparentProps) {
  const isTransparent = value === "transparent" || value === "";
  const displayValue = isTransparent ? defaultColor : (value || defaultColor);

  return (
    <div className={`flex gap-1 items-center ${className}`}>
      {/* 색상 선택기 */}
      <div className="relative">
        <Input
          id={id}
          type="color"
          value={displayValue}
          onChange={(e) => onChange(e.target.value)}
          className="h-6 w-12 p-1 text-xs cursor-pointer"
          disabled={isTransparent}
        />
        {/* 투명 표시 오버레이 (체커보드 패턴) */}
        {isTransparent && (
          <div 
            className="absolute inset-0 flex items-center justify-center border rounded pointer-events-none"
            style={{
              backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
              backgroundSize: "8px 8px",
              backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
            }}
          >
            <span className="text-[8px] font-bold text-muted-foreground bg-white/80 px-0.5 rounded">투명</span>
          </div>
        )}
      </div>
      
      {/* 텍스트 입력 */}
      <Input
        type="text"
        value={isTransparent ? "transparent" : (value || "")}
        onChange={(e) => {
          const newValue = e.target.value;
          if (newValue === "transparent" || newValue === "") {
            onChange("transparent");
          } else {
            onChange(newValue);
          }
        }}
        placeholder={placeholder}
        className="h-6 flex-1 text-xs"
      />
      
      {/* 투명 버튼 */}
      <Button
        type="button"
        variant={isTransparent ? "default" : "outline"}
        size="sm"
        className="h-6 px-2 text-[10px] shrink-0"
        onClick={() => {
          if (isTransparent) {
            onChange(defaultColor);
          } else {
            onChange("transparent");
          }
        }}
        title={isTransparent ? "색상 선택" : "투명으로 설정"}
      >
        {isTransparent ? "색상" : "투명"}
      </Button>
    </div>
  );
}

export default ColorPickerWithTransparent;

