"use client";

/**
 * UnifiedInput 설정 패널
 * 통합 입력 컴포넌트의 세부 설정을 관리합니다.
 */

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";

interface UnifiedInputConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
}

export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = ({ config, onChange }) => {
  // 설정 업데이트 핸들러
  const updateConfig = (field: string, value: any) => {
    onChange({ ...config, [field]: value });
  };

  return (
    <div className="space-y-4">
      {/* 입력 타입 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">입력 타입</Label>
        <Select
          value={config.inputType || config.type || "text"}
          onValueChange={(value) => updateConfig("inputType", value)}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue placeholder="입력 타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="text">텍스트</SelectItem>
            <SelectItem value="number">숫자</SelectItem>
            <SelectItem value="password">비밀번호</SelectItem>
            <SelectItem value="textarea">여러 줄 텍스트</SelectItem>
            <SelectItem value="slider">슬라이더</SelectItem>
            <SelectItem value="color">색상 선택</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Separator />

      {/* 형식 (텍스트/숫자용) */}
      {(config.inputType === "text" || !config.inputType) && (
        <div className="space-y-2">
          <Label className="text-xs font-medium">입력 형식</Label>
          <Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
            <SelectTrigger className="h-8 text-xs">
              <SelectValue placeholder="형식 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="none">제한 없음</SelectItem>
              <SelectItem value="email">이메일</SelectItem>
              <SelectItem value="tel">전화번호</SelectItem>
              <SelectItem value="url">URL</SelectItem>
              <SelectItem value="currency">통화</SelectItem>
              <SelectItem value="biz_no">사업자번호</SelectItem>
            </SelectContent>
          </Select>
        </div>
      )}

      {/* 플레이스홀더 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">플레이스홀더</Label>
        <Input
          value={config.placeholder || ""}
          onChange={(e) => updateConfig("placeholder", e.target.value)}
          placeholder="입력 안내 텍스트"
          className="h-8 text-xs"
        />
      </div>

      {/* 숫자/슬라이더 전용 설정 */}
      {(config.inputType === "number" || config.inputType === "slider") && (
        <>
          <Separator />
          <div className="grid grid-cols-3 gap-2">
            <div className="space-y-2">
              <Label className="text-xs font-medium">최소값</Label>
              <Input
                type="number"
                value={config.min ?? ""}
                onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
                placeholder="0"
                className="h-8 text-xs"
              />
            </div>
            <div className="space-y-2">
              <Label className="text-xs font-medium">최대값</Label>
              <Input
                type="number"
                value={config.max ?? ""}
                onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
                placeholder="100"
                className="h-8 text-xs"
              />
            </div>
            <div className="space-y-2">
              <Label className="text-xs font-medium">단계</Label>
              <Input
                type="number"
                value={config.step ?? ""}
                onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
                placeholder="1"
                className="h-8 text-xs"
              />
            </div>
          </div>
        </>
      )}

      {/* 여러 줄 텍스트 전용 설정 */}
      {config.inputType === "textarea" && (
        <div className="space-y-2">
          <Label className="text-xs font-medium">줄 수</Label>
          <Input
            type="number"
            value={config.rows || 3}
            onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
            min={2}
            max={20}
            className="h-8 text-xs"
          />
        </div>
      )}

      {/* 마스크 입력 (선택) */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">입력 마스크 (선택)</Label>
        <Input
          value={config.mask || ""}
          onChange={(e) => updateConfig("mask", e.target.value)}
          placeholder="예: ###-####-####"
          className="h-8 text-xs"
        />
        <p className="text-muted-foreground text-[10px]"># = 숫자, A = 문자, * = 모든 문자</p>
      </div>
    </div>
  );
};

UnifiedInputConfigPanel.displayName = "UnifiedInputConfigPanel";

export default UnifiedInputConfigPanel;