"use client";

/**
 * V2Select 설정 패널
 * 통합 선택 컴포넌트의 세부 설정을 관리합니다.
 */

import React, { useState, useEffect, useCallback, useMemo } 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 { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Plus, Trash2, Loader2, Filter } from "lucide-react";
import { apiClient } from "@/lib/api/client";
import type { V2SelectFilter } from "@/types/v2-components";

interface ColumnOption {
  columnName: string;
  columnLabel: string;
}

interface CategoryValueOption {
  valueCode: string;
  valueLabel: string;
}

const OPERATOR_OPTIONS = [
  { value: "=", label: "같음 (=)" },
  { value: "!=", label: "다름 (!=)" },
  { value: ">", label: "초과 (>)" },
  { value: "<", label: "미만 (<)" },
  { value: ">=", label: "이상 (>=)" },
  { value: "<=", label: "이하 (<=)" },
  { value: "in", label: "포함 (IN)" },
  { value: "notIn", label: "미포함 (NOT IN)" },
  { value: "like", label: "유사 (LIKE)" },
  { value: "isNull", label: "NULL" },
  { value: "isNotNull", label: "NOT NULL" },
] as const;

const VALUE_TYPE_OPTIONS = [
  { value: "static", label: "고정값" },
  { value: "field", label: "폼 필드 참조" },
  { value: "user", label: "로그인 사용자" },
] as const;

const USER_FIELD_OPTIONS = [
  { value: "companyCode", label: "회사코드" },
  { value: "userId", label: "사용자ID" },
  { value: "deptCode", label: "부서코드" },
  { value: "userName", label: "사용자명" },
] as const;

/**
 * 필터 조건 설정 서브 컴포넌트
 */
const FilterConditionsSection: React.FC<{
  filters: V2SelectFilter[];
  columns: ColumnOption[];
  loadingColumns: boolean;
  targetTable: string;
  onFiltersChange: (filters: V2SelectFilter[]) => void;
}> = ({ filters, columns, loadingColumns, targetTable, onFiltersChange }) => {

  const addFilter = () => {
    onFiltersChange([
      ...filters,
      { column: "", operator: "=", valueType: "static", value: "" },
    ]);
  };

  const updateFilter = (index: number, patch: Partial<V2SelectFilter>) => {
    const updated = [...filters];
    updated[index] = { ...updated[index], ...patch };

    if (patch.valueType) {
      if (patch.valueType === "static") {
        updated[index].fieldRef = undefined;
        updated[index].userField = undefined;
      } else if (patch.valueType === "field") {
        updated[index].value = undefined;
        updated[index].userField = undefined;
      } else if (patch.valueType === "user") {
        updated[index].value = undefined;
        updated[index].fieldRef = undefined;
      }
    }

    if (patch.operator === "isNull" || patch.operator === "isNotNull") {
      updated[index].value = undefined;
      updated[index].fieldRef = undefined;
      updated[index].userField = undefined;
      updated[index].valueType = "static";
    }

    onFiltersChange(updated);
  };

  const removeFilter = (index: number) => {
    onFiltersChange(filters.filter((_, i) => i !== index));
  };

  const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-1.5">
          <Filter className="h-3.5 w-3.5 text-muted-foreground" />
          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">DATA FILTER</span>
        </div>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={addFilter}
          className="h-6 px-2 text-xs"
        >
          <Plus className="mr-1 h-3 w-3" />
          추가
        </Button>
      </div>

      <p className="text-muted-foreground text-[10px]">
        {targetTable} 테이블에서 옵션을 불러올 때 적용할 조건
      </p>

      {loadingColumns && (
        <div className="text-muted-foreground flex items-center gap-2 text-xs">
          <Loader2 className="h-3 w-3 animate-spin" />
          컬럼 목록 로딩 중...
        </div>
      )}

      {filters.length === 0 && (
        <p className="text-muted-foreground py-2 text-center text-xs">
          필터 조건이 없습니다
        </p>
      )}

      <div className="space-y-2">
        {filters.map((filter, index) => (
          <div key={index} className="space-y-1.5 rounded-md border p-2">
            <div className="flex items-center gap-1.5">
              <Select
                value={filter.column || ""}
                onValueChange={(v) => updateFilter(index, { column: v })}
              >
                <SelectTrigger className="h-7 flex-1 text-[11px]">
                  <SelectValue placeholder="컬럼" />
                </SelectTrigger>
                <SelectContent>
                  {columns.map((col) => (
                    <SelectItem key={col.columnName} value={col.columnName}>
                      {col.columnLabel}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Select
                value={filter.operator || "="}
                onValueChange={(v) => updateFilter(index, { operator: v as V2SelectFilter["operator"] })}
              >
                <SelectTrigger className="h-7 w-[90px] shrink-0 text-[11px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {OPERATOR_OPTIONS.map((op) => (
                    <SelectItem key={op.value} value={op.value}>
                      {op.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => removeFilter(index)}
                className="text-destructive h-7 w-7 shrink-0 p-0"
              >
                <Trash2 className="h-3 w-3" />
              </Button>
            </div>

            {needsValue(filter.operator) && (
              <div className="flex items-center gap-1.5">
                <Select
                  value={filter.valueType || "static"}
                  onValueChange={(v) => updateFilter(index, { valueType: v as V2SelectFilter["valueType"] })}
                >
                  <SelectTrigger className="h-7 w-[100px] shrink-0 text-[11px]">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {VALUE_TYPE_OPTIONS.map((vt) => (
                      <SelectItem key={vt.value} value={vt.value}>
                        {vt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

                {(filter.valueType || "static") === "static" && (
                  <Input
                    value={String(filter.value ?? "")}
                    onChange={(e) => updateFilter(index, { value: e.target.value })}
                    placeholder={filter.operator === "in" || filter.operator === "notIn" ? "값1, 값2, ..." : "값 입력"}
                    className="h-7 flex-1 text-[11px]"
                  />
                )}

                {filter.valueType === "field" && (
                  <Input
                    value={filter.fieldRef || ""}
                    onChange={(e) => updateFilter(index, { fieldRef: e.target.value })}
                    placeholder="참조할 필드명 (columnName)"
                    className="h-7 flex-1 text-[11px]"
                  />
                )}

                {filter.valueType === "user" && (
                  <Select
                    value={filter.userField || ""}
                    onValueChange={(v) => updateFilter(index, { userField: v as V2SelectFilter["userField"] })}
                  >
                    <SelectTrigger className="h-7 flex-1 text-[11px]">
                      <SelectValue placeholder="사용자 필드" />
                    </SelectTrigger>
                    <SelectContent>
                      {USER_FIELD_OPTIONS.map((uf) => (
                        <SelectItem key={uf.value} value={uf.value}>
                          {uf.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

interface V2SelectConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
  inputType?: string;
  tableName?: string;
  columnName?: string;
}

export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
  config,
  onChange,
  inputType,
  tableName,
  columnName,
}) => {
  const isEntityType = inputType === "entity";
  const isCategoryType = inputType === "category";

  const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);

  const [categoryValues, setCategoryValues] = useState<CategoryValueOption[]>([]);
  const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);

  const [filterColumns, setFilterColumns] = useState<ColumnOption[]>([]);
  const [loadingFilterColumns, setLoadingFilterColumns] = useState(false);

  const updateConfig = (field: string, value: any) => {
    onChange({ ...config, [field]: value });
  };

  const filterTargetTable = useMemo(() => {
    const src = config.source || "static";
    if (src === "entity") return config.entityTable;
    if (src === "db") return config.table;
    if (src === "distinct" || src === "select") return tableName;
    return null;
  }, [config.source, config.entityTable, config.table, tableName]);

  useEffect(() => {
    if (!filterTargetTable) {
      setFilterColumns([]);
      return;
    }

    const loadFilterColumns = async () => {
      setLoadingFilterColumns(true);
      try {
        const response = await apiClient.get(`/table-management/tables/${filterTargetTable}/columns?size=500`);
        const data = response.data.data || response.data;
        const columns = data.columns || data || [];
        setFilterColumns(
          columns.map((col: any) => ({
            columnName: col.columnName || col.column_name || col.name,
            columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
          }))
        );
      } catch {
        setFilterColumns([]);
      } finally {
        setLoadingFilterColumns(false);
      }
    };

    loadFilterColumns();
  }, [filterTargetTable]);

  useEffect(() => {
    if (isCategoryType && config.source !== "category") {
      onChange({ ...config, source: "category" });
    }
  }, [isCategoryType]);

  const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
    if (!catTable || !catColumn) {
      setCategoryValues([]);
      return;
    }

    setLoadingCategoryValues(true);
    try {
      const response = await apiClient.get(`/table-categories/${catTable}/${catColumn}/values`);
      const data = response.data;
      if (data.success && data.data) {
        const flattenTree = (items: any[], depth: number = 0): CategoryValueOption[] => {
          const result: CategoryValueOption[] = [];
          for (const item of items) {
            result.push({
              valueCode: item.valueCode,
              valueLabel: depth > 0 ? `${"  ".repeat(depth)}${item.valueLabel}` : item.valueLabel,
            });
            if (item.children && item.children.length > 0) {
              result.push(...flattenTree(item.children, depth + 1));
            }
          }
          return result;
        };
        setCategoryValues(flattenTree(data.data));
      }
    } catch (error) {
      console.error("카테고리 값 조회 실패:", error);
      setCategoryValues([]);
    } finally {
      setLoadingCategoryValues(false);
    }
  }, []);

  useEffect(() => {
    if (config.source === "category") {
      const catTable = config.categoryTable || tableName;
      const catColumn = config.categoryColumn || columnName;
      if (catTable && catColumn) {
        loadCategoryValues(catTable, catColumn);
      }
    }
  }, [config.source, config.categoryTable, config.categoryColumn, tableName, columnName, loadCategoryValues]);

  const loadEntityColumns = useCallback(async (tblName: string) => {
    if (!tblName) {
      setEntityColumns([]);
      return;
    }

    setLoadingColumns(true);
    try {
      const response = await apiClient.get(`/table-management/tables/${tblName}/columns?size=500`);
      const data = response.data.data || response.data;
      const columns = data.columns || data || [];

      const columnOptions: ColumnOption[] = columns.map((col: any) => {
        const name = col.columnName || col.column_name || col.name;
        const label = col.displayName || col.display_name || col.columnLabel || col.column_label || name;

        return {
          columnName: name,
          columnLabel: label,
        };
      });

      setEntityColumns(columnOptions);
    } catch (error) {
      console.error("컬럼 목록 조회 실패:", error);
      setEntityColumns([]);
    } finally {
      setLoadingColumns(false);
    }
  }, []);

  useEffect(() => {
    if (config.source === "entity" && config.entityTable) {
      loadEntityColumns(config.entityTable);
    }
  }, [config.source, config.entityTable, loadEntityColumns]);

  const options = config.options || [];

  const addOption = () => {
    const newOptions = [...options, { value: "", label: "" }];
    updateConfig("options", newOptions);
  };

  const updateOptionValue = (index: number, value: string) => {
    const newOptions = [...options];
    newOptions[index] = { ...newOptions[index], value, label: value };
    updateConfig("options", newOptions);
  };

  const removeOption = (index: number) => {
    const newOptions = options.filter((_: any, i: number) => i !== index);
    updateConfig("options", newOptions);
  };

  const effectiveSource = isCategoryType ? "category" : config.source || "static";

  return (
    <div className="space-y-1">
      {/* SELECT MODE 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">SELECT MODE</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">선택 모드</span>
          <div className="w-[140px]">
            <Select value={config.mode || "dropdown"} onValueChange={(value) => updateConfig("mode", value)}>
              <SelectTrigger className="h-7 text-xs">
                <SelectValue placeholder="모드 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="dropdown">드롭다운</SelectItem>
                <SelectItem value="combobox">콤보박스 (검색)</SelectItem>
                <SelectItem value="radio">라디오 버튼</SelectItem>
                <SelectItem value="check">체크박스</SelectItem>
                <SelectItem value="tag">태그 선택</SelectItem>
                <SelectItem value="tagbox">태그박스 (태그+드롭다운)</SelectItem>
                <SelectItem value="toggle">토글 스위치</SelectItem>
                <SelectItem value="swap">스왑 선택</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* DATA SOURCE 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATA SOURCE</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">데이터 소스</span>
          <div className="w-[140px]">
            {isCategoryType ? (
              <div className="bg-muted flex h-7 items-center rounded-md px-2">
                <span className="text-[11px] font-medium text-emerald-600">카테고리 (자동)</span>
              </div>
            ) : (
              <Select value={config.source || "static"} onValueChange={(value) => updateConfig("source", value)}>
                <SelectTrigger className="h-7 text-xs">
                  <SelectValue placeholder="소스 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="static">정적 옵션</SelectItem>
                  <SelectItem value="code">공통 코드</SelectItem>
                  <SelectItem value="category">카테고리</SelectItem>
                  {isEntityType && <SelectItem value="entity">엔티티</SelectItem>}
                </SelectContent>
              </Select>
            )}
          </div>
        </div>
      </div>

      {/* CATEGORY 섹션 */}
      {effectiveSource === "category" && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CATEGORY</h4>

          <div className="bg-muted rounded-md p-2 mb-2">
            <div className="flex gap-4">
              <div>
                <p className="text-muted-foreground text-[10px]">테이블</p>
                <p className="text-xs font-medium">{config.categoryTable || tableName || "-"}</p>
              </div>
              <div>
                <p className="text-muted-foreground text-[10px]">컬럼</p>
                <p className="text-xs font-medium">{config.categoryColumn || columnName || "-"}</p>
              </div>
            </div>
          </div>

          {loadingCategoryValues && (
            <div className="text-muted-foreground flex items-center gap-2 text-xs py-1">
              <Loader2 className="h-3 w-3 animate-spin" />
              카테고리 값 로딩 중...
            </div>
          )}

          {categoryValues.length > 0 && (
            <>
              <div className="py-1">
                <span className="text-[10px] text-muted-foreground">값 목록 ({categoryValues.length}개)</span>
                <div className="bg-muted max-h-32 space-y-0.5 overflow-y-auto rounded-md p-1.5 mt-1">
                  {categoryValues.map((cv) => (
                    <div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5">
                      <span className="text-muted-foreground shrink-0 font-mono text-[10px]">{cv.valueCode}</span>
                      <span className="truncate text-xs">{cv.valueLabel}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="flex items-center justify-between py-1.5">
                <span className="text-xs text-muted-foreground">기본값</span>
                <div className="w-[140px]">
                  <Select
                    value={config.defaultValue || "_none_"}
                    onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
                  >
                    <SelectTrigger className="h-7 text-xs">
                      <SelectValue placeholder="기본값 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="_none_">선택 안함</SelectItem>
                      {categoryValues.map((cv) => (
                        <SelectItem key={cv.valueCode} value={cv.valueCode}>
                          {cv.valueLabel}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <p className="text-muted-foreground text-[10px] mt-0.5">화면 로드 시 자동 선택될 카테고리 값</p>
            </>
          )}

          {!loadingCategoryValues && categoryValues.length === 0 && (
            <p className="text-[10px] text-amber-600 py-1">
              카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.
            </p>
          )}
        </div>
      )}

      {/* STATIC OPTIONS 섹션 */}
      {effectiveSource === "static" && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <div className="flex items-center justify-between py-2">
            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">STATIC OPTIONS</h4>
            <Button type="button" variant="ghost" size="sm" onClick={addOption} className="h-6 px-2 text-xs">
              <Plus className="mr-1 h-3 w-3" />
              추가
            </Button>
          </div>
          <div className="max-h-40 space-y-1.5 overflow-y-auto">
            {options.map((option: any, index: number) => (
              <div key={index} className="flex items-center gap-1.5">
                <Input
                  value={option.value || ""}
                  onChange={(e) => updateOptionValue(index, e.target.value)}
                  placeholder={`옵션 ${index + 1}`}
                  className="h-7 flex-1 text-xs"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => removeOption(index)}
                  className="text-destructive h-7 w-7 shrink-0 p-0"
                >
                  <Trash2 className="h-3 w-3" />
                </Button>
              </div>
            ))}
            {options.length === 0 && (
              <p className="text-muted-foreground py-2 text-center text-xs">옵션을 추가해주세요</p>
            )}
          </div>

          {options.length > 0 && (
            <>
              <div className="flex items-center justify-between py-1.5 mt-2">
                <span className="text-xs text-muted-foreground">기본값</span>
                <div className="w-[140px]">
                  <Select
                    value={config.defaultValue || "_none_"}
                    onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
                  >
                    <SelectTrigger className="h-7 text-xs">
                      <SelectValue placeholder="기본값 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="_none_">선택 안함</SelectItem>
                      {options.map((option: any, index: number) => (
                        <SelectItem key={`default-${index}`} value={option.value || `_idx_${index}`}>
                          {option.label || option.value || `옵션 ${index + 1}`}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <p className="text-muted-foreground text-[10px] mt-0.5">화면 로드 시 자동 선택될 값</p>
            </>
          )}
        </div>
      )}

      {/* CODE GROUP 섹션 */}
      {effectiveSource === "code" && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">CODE GROUP</h4>
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">코드 그룹</span>
            <div className="w-[140px]">
              {config.codeGroup ? (
                <span className="text-xs font-medium">{config.codeGroup}</span>
              ) : (
                <span className="text-[10px] text-amber-600">미설정</span>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ENTITY 섹션 */}
      {effectiveSource === "entity" && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">ENTITY</h4>

          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">참조 테이블</span>
            <div className="w-[140px]">
              <Input
                value={config.entityTable || ""}
                readOnly
                disabled
                placeholder="미설정"
                className="bg-muted h-7 text-xs"
              />
            </div>
          </div>

          {loadingColumns && (
            <div className="text-muted-foreground flex items-center gap-2 text-xs py-1">
              <Loader2 className="h-3 w-3 animate-spin" />
              컬럼 목록 로딩 중...
            </div>
          )}

          <div className="flex gap-2 mt-1">
            <div className="flex-1">
              <Label className="text-[10px] text-muted-foreground">값 컬럼</Label>
              {entityColumns.length > 0 ? (
                <Select
                  value={config.entityValueColumn || ""}
                  onValueChange={(value) => updateConfig("entityValueColumn", value)}
                >
                  <SelectTrigger className="h-7 text-xs">
                    <SelectValue placeholder="컬럼 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {entityColumns.map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName}>
                        {col.columnLabel || col.columnName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              ) : (
                <Input
                  value={config.entityValueColumn || ""}
                  onChange={(e) => updateConfig("entityValueColumn", e.target.value)}
                  placeholder="id"
                  className="h-7 text-xs"
                />
              )}
            </div>
            <div className="flex-1">
              <Label className="text-[10px] text-muted-foreground">표시 컬럼</Label>
              {entityColumns.length > 0 ? (
                <Select
                  value={config.entityLabelColumn || ""}
                  onValueChange={(value) => updateConfig("entityLabelColumn", value)}
                >
                  <SelectTrigger className="h-7 text-xs">
                    <SelectValue placeholder="컬럼 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {entityColumns.map((col) => (
                      <SelectItem key={col.columnName} value={col.columnName}>
                        {col.columnLabel || col.columnName}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              ) : (
                <Input
                  value={config.entityLabelColumn || ""}
                  onChange={(e) => updateConfig("entityLabelColumn", e.target.value)}
                  placeholder="name"
                  className="h-7 text-xs"
                />
              )}
            </div>
          </div>

          {config.entityTable && !loadingColumns && entityColumns.length === 0 && (
            <p className="text-[10px] text-amber-600 mt-1">
              테이블 컬럼을 조회할 수 없습니다. 테이블 타입 관리에서 참조 테이블을 설정해주세요.
            </p>
          )}

          {config.entityTable && entityColumns.length > 0 && (
            <p className="text-muted-foreground text-[10px] mt-2">
              같은 폼에 참조 테이블({config.entityTable})의 컬럼이 배치되어 있으면, 엔티티 선택 시 해당 필드가 자동으로
              채워집니다.
            </p>
          )}
        </div>
      )}

      {/* OPTIONS 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">OPTIONS</h4>

        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">다중 선택 허용</span>
          <Checkbox
            checked={config.multiple || false}
            onCheckedChange={(checked) => updateConfig("multiple", checked)}
          />
        </div>

        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">검색 기능</span>
          <Checkbox
            checked={config.searchable || false}
            onCheckedChange={(checked) => updateConfig("searchable", checked)}
          />
        </div>

        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">값 초기화 허용</span>
          <Checkbox
            checked={config.allowClear !== false}
            onCheckedChange={(checked) => updateConfig("allowClear", checked)}
          />
        </div>

        {config.multiple && (
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">최대 선택 개수</span>
            <div className="w-[140px]">
              <Input
                type="number"
                value={config.maxSelect ?? ""}
                onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)}
                placeholder="제한 없음"
                min="1"
                className="h-7 text-xs"
              />
            </div>
          </div>
        )}
      </div>

      {/* DATA FILTER 섹션 */}
      {effectiveSource !== "static" && filterTargetTable && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <FilterConditionsSection
            filters={(config.filters as V2SelectFilter[]) || []}
            columns={filterColumns}
            loadingColumns={loadingFilterColumns}
            targetTable={filterTargetTable}
            onFiltersChange={(filters) => updateConfig("filters", filters)}
          />
        </div>
      )}
    </div>
  );
};

V2SelectConfigPanel.displayName = "V2SelectConfigPanel";

export default V2SelectConfigPanel;
