"use client";

import React, { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Link2, ExternalLink } from "lucide-react";
import Link from "next/link";
import { SelectBasicConfig } from "./types";
import { cascadingRelationApi, CascadingRelation } from "@/lib/api/cascadingRelation";
import { categoryValueCascadingApi, CategoryValueCascadingGroup } from "@/lib/api/categoryValueCascading";

export interface SelectBasicConfigPanelProps {
  config: SelectBasicConfig;
  onChange: (config: Partial<SelectBasicConfig>) => void;
  /** 현재 화면의 모든 컴포넌트 목록 (부모 필드 자동 감지용) */
  allComponents?: any[];
  /** 현재 컴포넌트 정보 */
  currentComponent?: any;
}

/**
 * SelectBasic 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
  config,
  onChange,
  allComponents = [],
  currentComponent,
}) => {
  // 연쇄 드롭다운 관련 상태
  const [cascadingEnabled, setCascadingEnabled] = useState(!!config.cascadingRelationCode);
  const [relationList, setRelationList] = useState<CascadingRelation[]>([]);
  const [loadingRelations, setLoadingRelations] = useState(false);

  // 🆕 카테고리 값 연쇄관계 상태
  const [categoryRelationEnabled, setCategoryRelationEnabled] = useState(!!(config as any).categoryRelationCode);
  const [categoryRelationList, setCategoryRelationList] = useState<CategoryValueCascadingGroup[]>([]);
  const [loadingCategoryRelations, setLoadingCategoryRelations] = useState(false);

  // 연쇄 관계 목록 로드
  useEffect(() => {
    if (cascadingEnabled && relationList.length === 0) {
      loadRelationList();
    }
  }, [cascadingEnabled]);

  // 🆕 카테고리 값 연쇄관계 목록 로드
  useEffect(() => {
    if (categoryRelationEnabled && categoryRelationList.length === 0) {
      loadCategoryRelationList();
    }
  }, [categoryRelationEnabled]);

  // config 변경 시 상태 동기화
  useEffect(() => {
    setCascadingEnabled(!!config.cascadingRelationCode);
    setCategoryRelationEnabled(!!(config as any).categoryRelationCode);
  }, [config.cascadingRelationCode, (config as any).categoryRelationCode]);

  const loadRelationList = async () => {
    setLoadingRelations(true);
    try {
      const response = await cascadingRelationApi.getList("Y");
      if (response.success && response.data) {
        setRelationList(response.data);
      }
    } catch (error) {
      console.error("연쇄 관계 목록 로드 실패:", error);
    } finally {
      setLoadingRelations(false);
    }
  };

  // 🆕 카테고리 값 연쇄관계 목록 로드
  const loadCategoryRelationList = async () => {
    setLoadingCategoryRelations(true);
    try {
      const response = await categoryValueCascadingApi.getGroups("Y");
      if (response.success && response.data) {
        setCategoryRelationList(response.data);
      }
    } catch (error) {
      console.error("카테고리 값 연쇄관계 목록 로드 실패:", error);
    } finally {
      setLoadingCategoryRelations(false);
    }
  };

  const handleChange = (key: keyof SelectBasicConfig, value: any) => {
    // 기존 config와 병합하여 전체 객체 전달 (다른 속성 보호)
    const newConfig = { ...config, [key]: value };
    onChange(newConfig);
  };

  // 연쇄 드롭다운 토글
  const handleCascadingToggle = (enabled: boolean) => {
    setCascadingEnabled(enabled);
    if (!enabled) {
      // 비활성화 시 관계 설정 제거
      const newConfig = {
        ...config,
        cascadingRelationCode: undefined,
        cascadingRole: undefined,
        cascadingParentField: undefined,
      };
      onChange(newConfig);
    } else {
      loadRelationList();
      // 카테고리 값 연쇄관계 비활성화 (둘 중 하나만 사용)
      if (categoryRelationEnabled) {
        setCategoryRelationEnabled(false);
        onChange({ ...config, categoryRelationCode: undefined } as any);
      }
    }
  };

  // 🆕 카테고리 값 연쇄관계 토글
  const handleCategoryRelationToggle = (enabled: boolean) => {
    setCategoryRelationEnabled(enabled);
    if (!enabled) {
      // 비활성화 시 관계 설정 제거
      const newConfig = {
        ...config,
        categoryRelationCode: undefined,
        cascadingRole: undefined,
        cascadingParentField: undefined,
      } as any;
      onChange(newConfig);
    } else {
      loadCategoryRelationList();
      // 일반 연쇄관계 비활성화 (둘 중 하나만 사용)
      if (cascadingEnabled) {
        setCascadingEnabled(false);
        onChange({ ...config, cascadingRelationCode: undefined });
      }
    }
  };

  // 🆕 같은 연쇄 관계의 부모 역할 컴포넌트 찾기
  const findParentComponent = (relationCode: string) => {
    console.log("🔍 findParentComponent 호출:", {
      relationCode,
      allComponentsLength: allComponents?.length,
      currentComponentId: currentComponent?.id,
    });

    if (!allComponents || allComponents.length === 0) {
      console.log("❌ allComponents가 비어있음");
      return null;
    }

    // 모든 컴포넌트의 cascading 설정 확인
    allComponents.forEach((comp: any) => {
      const compConfig = comp.componentConfig || {};
      if (compConfig.cascadingRelationCode) {
        console.log("📦 컴포넌트 cascading 설정:", {
          id: comp.id,
          columnName: comp.columnName,
          cascadingRelationCode: compConfig.cascadingRelationCode,
          cascadingRole: compConfig.cascadingRole,
        });
      }
    });

    const found = allComponents.find((comp: any) => {
      const compConfig = comp.componentConfig || {};
      return (
        comp.id !== currentComponent?.id && // 자기 자신 제외
        compConfig.cascadingRelationCode === relationCode &&
        compConfig.cascadingRole === "parent"
      );
    });

    console.log("🔍 찾은 부모 컴포넌트:", found);
    return found;
  };

  // 역할 변경 시 부모 필드 자동 감지
  const handleRoleChange = (role: "parent" | "child") => {
    let parentField = config.cascadingParentField;

    // 자식 역할 선택 시 부모 필드 자동 감지
    if (role === "child" && config.cascadingRelationCode) {
      const parentComp = findParentComponent(config.cascadingRelationCode);
      if (parentComp) {
        parentField = parentComp.columnName;
        console.log("🔗 부모 필드 자동 감지:", parentField);
      }
    }

    const newConfig = {
      ...config,
      cascadingRole: role,
      // 부모 역할일 때는 부모 필드 불필요, 자식일 때는 자동 감지된 값 또는 기존 값
      cascadingParentField: role === "parent" ? undefined : parentField,
    };
    onChange(newConfig);
  };

  // 선택된 관계 정보
  const selectedRelation = relationList.find((r) => r.relation_code === config.cascadingRelationCode);

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">select-basic 설정</div>

      {/* select 관련 설정 */}
      <div className="space-y-2">
        <Label htmlFor="placeholder">플레이스홀더</Label>
        <Input
          id="placeholder"
          value={config.placeholder || ""}
          onChange={(e) => handleChange("placeholder", e.target.value)}
        />
      </div>

      {/* 공통 설정 */}
      <div className="space-y-2">
        <Label htmlFor="disabled">비활성화</Label>
        <Checkbox
          id="disabled"
          checked={config.disabled || false}
          onCheckedChange={(checked) => handleChange("disabled", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="required">필수 입력</Label>
        <Checkbox
          id="required"
          checked={config.required || false}
          onCheckedChange={(checked) => handleChange("required", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="readonly">읽기 전용</Label>
        <Checkbox
          id="readonly"
          checked={config.readonly || false}
          onCheckedChange={(checked) => handleChange("readonly", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="multiple">다중 선택</Label>
        <Checkbox
          id="multiple"
          checked={config.multiple || false}
          onCheckedChange={(checked) => handleChange("multiple", checked)}
        />
      </div>

      {/* 연쇄 드롭다운 설정 */}
      <div className="mt-4 space-y-3 border-t pt-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Link2 className="h-4 w-4" />
            <Label className="text-sm font-medium">연쇄 드롭다운</Label>
          </div>
          <Switch checked={cascadingEnabled} onCheckedChange={handleCascadingToggle} />
        </div>
        <p className="text-muted-foreground text-xs">다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.</p>

        {cascadingEnabled && (
          <div className="bg-muted/30 space-y-3 rounded-md border p-3">
            {/* 관계 선택 */}
            <div className="space-y-2">
              <Label className="text-xs">연쇄 관계 선택</Label>
              <Select
                value={config.cascadingRelationCode || ""}
                onValueChange={(value) => handleChange("cascadingRelationCode", value || undefined)}
              >
                <SelectTrigger className="text-xs">
                  <SelectValue placeholder={loadingRelations ? "로딩 중..." : "관계 선택"} />
                </SelectTrigger>
                <SelectContent>
                  {relationList.map((relation) => (
                    <SelectItem key={relation.relation_code} value={relation.relation_code}>
                      <div className="flex flex-col">
                        <span>{relation.relation_name}</span>
                        <span className="text-muted-foreground text-xs">
                          {relation.parent_table} → {relation.child_table}
                        </span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 역할 선택 */}
            {config.cascadingRelationCode && (
              <div className="space-y-2">
                <Label className="text-xs">역할 선택</Label>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "parent" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("parent")}
                  >
                    부모 (상위 선택)
                  </Button>
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "child" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("child")}
                  >
                    자식 (하위 선택)
                  </Button>
                </div>
                <p className="text-muted-foreground text-xs">
                  {config.cascadingRole === "parent"
                    ? "이 필드가 상위 선택 역할을 합니다. (예: 창고 선택)"
                    : config.cascadingRole === "child"
                      ? "이 필드는 상위 필드 값에 따라 옵션이 변경됩니다. (예: 위치 선택)"
                      : "이 필드의 역할을 선택하세요."}
                </p>
              </div>
            )}

            {/* 부모 필드 설정 (자식 역할일 때만) */}
            {config.cascadingRelationCode &&
              config.cascadingRole === "child" &&
              (() => {
                // 선택된 관계에서 부모 값 컬럼 가져오기
                const expectedParentColumn = selectedRelation?.parent_value_column;

                // 부모 역할에 맞는 컴포넌트만 필터링
                const parentFieldCandidates = allComponents.filter((comp) => {
                  // 현재 컴포넌트 제외
                  if (currentComponent && comp.id === currentComponent.id) return false;
                  // 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
                  if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
                  // columnName이 있어야 함
                  return !!comp.columnName;
                });

                return (
                  <div className="space-y-2">
                    <Label className="text-xs">부모 필드 선택</Label>
                    {expectedParentColumn && (
                      <p className="text-muted-foreground text-xs">
                        관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
                      </p>
                    )}
                    <Select
                      value={config.cascadingParentField || ""}
                      onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
                    >
                      <SelectTrigger className="text-xs">
                        <SelectValue placeholder="부모 필드 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {parentFieldCandidates.map((comp) => (
                          <SelectItem key={comp.id} value={comp.columnName}>
                            {comp.label || comp.columnName} ({comp.columnName})
                          </SelectItem>
                        ))}
                        {parentFieldCandidates.length === 0 && (
                          <div className="text-muted-foreground px-2 py-1.5 text-xs">
                            {expectedParentColumn
                              ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
                              : "선택 가능한 부모 필드가 없습니다"}
                          </div>
                        )}
                      </SelectContent>
                    </Select>
                    <p className="text-muted-foreground text-xs">상위 값을 제공할 필드를 선택하세요.</p>
                  </div>
                );
              })()}

            {/* 선택된 관계 정보 표시 */}
            {selectedRelation && config.cascadingRole && (
              <div className="bg-background space-y-1 rounded-md p-2 text-xs">
                {config.cascadingRole === "parent" ? (
                  <>
                    <div className="font-medium text-blue-600">부모 역할 (상위 선택)</div>
                    <div>
                      <span className="text-muted-foreground">데이터 소스:</span>{" "}
                      <span className="font-medium">{selectedRelation.parent_table}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">저장 값:</span>{" "}
                      <span className="font-medium">{selectedRelation.parent_value_column}</span>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="font-medium text-green-600">자식 역할 (하위 선택)</div>
                    <div>
                      <span className="text-muted-foreground">데이터 소스:</span>{" "}
                      <span className="font-medium">{selectedRelation.child_table}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">필터 기준:</span>{" "}
                      <span className="font-medium">{selectedRelation.child_filter_column}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">저장 값:</span>{" "}
                      <span className="font-medium">{selectedRelation.child_value_column}</span>
                    </div>
                  </>
                )}
              </div>
            )}

            {/* 관계 관리 페이지 링크 */}
            <div className="flex justify-end">
              <Link href="/admin/cascading-relations" target="_blank">
                <Button variant="link" size="sm" className="h-auto p-0 text-xs">
                  <ExternalLink className="mr-1 h-3 w-3" />
                  관계 관리
                </Button>
              </Link>
            </div>
          </div>
        )}
      </div>

      {/* 🆕 카테고리 값 연쇄관계 설정 */}
      <div className="mt-4 space-y-3 border-t pt-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Link2 className="h-4 w-4" />
            <Label className="text-sm font-medium">카테고리 값 연쇄</Label>
          </div>
          <Switch checked={categoryRelationEnabled} onCheckedChange={handleCategoryRelationToggle} />
        </div>
        <p className="text-muted-foreground text-xs">
          부모 카테고리 값 선택에 따라 자식 카테고리 옵션이 변경됩니다.
          <br />
          예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
        </p>

        {categoryRelationEnabled && (
          <div className="bg-muted/30 space-y-3 rounded-md border p-3">
            {/* 관계 선택 */}
            <div className="space-y-2">
              <Label className="text-xs">카테고리 값 연쇄 관계 선택</Label>
              <Select
                value={(config as any).categoryRelationCode || ""}
                onValueChange={(value) => handleChange("categoryRelationCode" as any, value || undefined)}
              >
                <SelectTrigger className="text-xs">
                  <SelectValue placeholder={loadingCategoryRelations ? "로딩 중..." : "관계 선택"} />
                </SelectTrigger>
                <SelectContent>
                  {categoryRelationList.map((relation) => (
                    <SelectItem key={relation.relation_code} value={relation.relation_code}>
                      <div className="flex flex-col">
                        <span>{relation.relation_name}</span>
                        <span className="text-muted-foreground text-xs">
                          {relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.
                          {relation.child_column_name}
                        </span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 역할 선택 */}
            {(config as any).categoryRelationCode && (
              <div className="space-y-2">
                <Label className="text-xs">역할 선택</Label>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "parent" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("parent")}
                  >
                    부모 (상위 선택)
                  </Button>
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "child" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("child")}
                  >
                    자식 (하위 선택)
                  </Button>
                </div>
                <p className="text-muted-foreground text-xs">
                  {config.cascadingRole === "parent"
                    ? "이 필드가 상위 카테고리 선택 역할을 합니다. (예: 검사유형)"
                    : config.cascadingRole === "child"
                      ? "이 필드는 상위 카테고리 값에 따라 옵션이 변경됩니다. (예: 적용대상)"
                      : "이 필드의 역할을 선택하세요."}
                </p>
              </div>
            )}

            {/* 부모 필드 설정 (자식 역할일 때만) */}
            {(config as any).categoryRelationCode &&
              config.cascadingRole === "child" &&
              (() => {
                // 선택된 관계 정보 가져오기
                const selectedRelation = categoryRelationList.find(
                  (r) => r.relation_code === (config as any).categoryRelationCode,
                );
                const expectedParentColumn = selectedRelation?.parent_column_name;

                // 부모 역할에 맞는 컴포넌트만 필터링
                const parentFieldCandidates = allComponents.filter((comp) => {
                  // 현재 컴포넌트 제외
                  if (currentComponent && comp.id === currentComponent.id) return false;
                  // 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
                  if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
                  // columnName이 있어야 함
                  return !!comp.columnName;
                });

                return (
                  <div className="space-y-2">
                    <Label className="text-xs">부모 필드 선택</Label>
                    {expectedParentColumn && (
                      <p className="text-muted-foreground text-xs">
                        관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
                      </p>
                    )}
                    <Select
                      value={config.cascadingParentField || ""}
                      onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
                    >
                      <SelectTrigger className="text-xs">
                        <SelectValue placeholder="부모 필드 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {parentFieldCandidates.map((comp) => (
                          <SelectItem key={comp.id} value={comp.columnName}>
                            {comp.label || comp.columnName} ({comp.columnName})
                          </SelectItem>
                        ))}
                        {parentFieldCandidates.length === 0 && (
                          <div className="text-muted-foreground px-2 py-1.5 text-xs">
                            {expectedParentColumn
                              ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
                              : "선택 가능한 부모 필드가 없습니다"}
                          </div>
                        )}
                      </SelectContent>
                    </Select>
                    <p className="text-muted-foreground text-xs">상위 카테고리 값을 제공할 필드를 선택하세요.</p>
                  </div>
                );
              })()}

            {/* 관계 관리 페이지 링크 */}
            <div className="flex justify-end">
              <Link href="/admin/cascading-management?tab=category-value" target="_blank">
                <Button variant="link" size="sm" className="h-auto p-0 text-xs">
                  <ExternalLink className="mr-1 h-3 w-3" />
                  카테고리 값 연쇄 관리
                </Button>
              </Link>
            </div>
          </div>
        )}
      </div>

      {/* 계층구조 코드 설정 */}
      <div className="mt-4 space-y-3 border-t pt-4">
        <div className="flex items-center gap-2">
          <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M12 2v4m0 12v4m-6-10H2m20 0h-4m-1.5-6.5L18 4m-12 0 1.5 1.5M6 18l-1.5 1.5M18 18l1.5 1.5" />
          </svg>
          <Label className="text-sm font-medium">계층구조 코드 설정</Label>
        </div>
        <div className="rounded border border-blue-200 bg-blue-50 p-2 text-xs text-blue-800">
          공통코드에 계층구조(depth 2 이상)가 있으면 자동으로 대분류 → 중분류 → 소분류 셀렉트박스로 표시됩니다.
        </div>

        {/* 상세 설정 (항상 표시, 계층구조가 있을 때 적용됨) */}
        <div className="bg-muted/30 space-y-3 rounded-md border p-3">
          <p className="text-muted-foreground text-xs">계층구조 코드가 감지되면 아래 설정이 적용됩니다.</p>

          {/* 코드 카테고리 선택 안내 */}
          {!config.codeCategory && (
            <div className="rounded border border-yellow-200 bg-yellow-50 p-2 text-xs text-yellow-800">
              먼저 상단에서 코드 카테고리를 선택해주세요.
            </div>
          )}

          {/* 최대 깊이 선택 */}
          <div className="space-y-2">
            <Label className="text-xs">최대 깊이</Label>
            <Select
              value={String(config.hierarchicalMaxDepth || 3)}
              onValueChange={(value) => handleChange("hierarchicalMaxDepth", Number(value) as 1 | 2 | 3)}
            >
              <SelectTrigger className="text-xs">
                <SelectValue placeholder="깊이 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1단계만</SelectItem>
                <SelectItem value="2">2단계까지</SelectItem>
                <SelectItem value="3">3단계까지</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-muted-foreground text-xs">표시할 계층의 최대 깊이를 선택하세요.</p>
          </div>

          {/* 1단계 라벨 */}
          <div className="space-y-2">
            <Label className="text-xs">1단계 라벨</Label>
            <Input
              value={config.hierarchicalLabels?.[0] || ""}
              onChange={(e) => {
                const newLabels: [string, string?, string?] = [
                  e.target.value,
                  config.hierarchicalLabels?.[1],
                  config.hierarchicalLabels?.[2],
                ];
                handleChange("hierarchicalLabels", newLabels);
              }}
              placeholder="예: 대분류"
              className="h-8 text-xs"
            />
          </div>

          {/* 2단계 라벨 */}
          {(config.hierarchicalMaxDepth || 3) >= 2 && (
            <div className="space-y-2">
              <Label className="text-xs">2단계 라벨</Label>
              <Input
                value={config.hierarchicalLabels?.[1] || ""}
                onChange={(e) => {
                  const newLabels: [string, string?, string?] = [
                    config.hierarchicalLabels?.[0] || "대분류",
                    e.target.value,
                    config.hierarchicalLabels?.[2],
                  ];
                  handleChange("hierarchicalLabels", newLabels);
                }}
                placeholder="예: 중분류"
                className="h-8 text-xs"
              />
            </div>
          )}

          {/* 3단계 라벨 */}
          {(config.hierarchicalMaxDepth || 3) >= 3 && (
            <div className="space-y-2">
              <Label className="text-xs">3단계 라벨</Label>
              <Input
                value={config.hierarchicalLabels?.[2] || ""}
                onChange={(e) => {
                  const newLabels: [string, string?, string?] = [
                    config.hierarchicalLabels?.[0] || "대분류",
                    config.hierarchicalLabels?.[1] || "중분류",
                    e.target.value,
                  ];
                  handleChange("hierarchicalLabels", newLabels);
                }}
                placeholder="예: 소분류"
                className="h-8 text-xs"
              />
            </div>
          )}

          {/* 인라인 표시 */}
          <div className="flex items-center justify-between">
            <Label className="text-xs">가로 배치</Label>
            <Switch
              checked={config.hierarchicalInline || false}
              onCheckedChange={(checked) => handleChange("hierarchicalInline", checked)}
            />
          </div>
          <p className="text-muted-foreground text-xs">셀렉트박스를 가로로 나란히 표시합니다.</p>
        </div>
      </div>
    </div>
  );
};