"use client";

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { tableManagementApi, getTableColumns } from "@/lib/api/tableManagement";
import { screenApi } from "@/lib/api/screen";
import type { RelatedDataButtonsConfig } from "./types";

// 화면 정보 타입
interface ScreenInfo {
  screenId: number;
  screenName: string;
  tableName?: string;
}

// 화면 선택 컴포넌트
interface ScreenSelectorProps {
  value?: number;
  onChange: (screenId: number | undefined, tableName?: string) => void;
  placeholder?: string;
}

const ScreenSelector: React.FC<ScreenSelectorProps> = ({ value, onChange, placeholder = "화면 선택" }) => {
  const [open, setOpen] = useState(false);
  const [screens, setScreens] = useState<ScreenInfo[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const loadScreens = async () => {
      setLoading(true);
      try {
        const response = await screenApi.getScreens({ size: 500 });
        if (response.data) {
          setScreens(response.data.map((s: any) => ({
            screenId: s.screenId,
            screenName: s.screenName || s.name || `화면 ${s.screenId}`,
            tableName: s.tableName || s.table_name,
          })));
        }
      } catch (error) {
        console.error("화면 목록 로드 실패:", error);
      } finally {
        setLoading(false);
      }
    };
    loadScreens();
  }, []);

  const selectedScreen = screens.find(s => s.screenId === value);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" role="combobox" className="w-full justify-between text-xs h-9">
          {loading ? "로딩중..." : selectedScreen ? `${selectedScreen.screenName} (${selectedScreen.screenId})` : placeholder}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-full p-0" align="start">
        <Command>
          <CommandInput placeholder="화면 검색..." className="text-xs" />
          <CommandList>
            <CommandEmpty className="text-xs py-2 text-center">화면을 찾을 수 없습니다.</CommandEmpty>
            <CommandGroup className="max-h-[200px] overflow-auto">
              {screens.map((screen) => (
                <CommandItem
                  key={screen.screenId}
                  value={`${screen.screenName} ${screen.screenId}`}
                  onSelect={() => {
                    onChange(screen.screenId, screen.tableName);
                    setOpen(false);
                  }}
                  className="text-xs"
                >
                  <Check className={cn("mr-2 h-4 w-4", value === screen.screenId ? "opacity-100" : "opacity-0")} />
                  <span className="truncate">{screen.screenName}</span>
                  <span className="ml-auto text-muted-foreground">({screen.screenId})</span>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};

interface TableInfo {
  tableName: string;
  displayName?: string;
}

interface ColumnInfo {
  columnName: string;
  columnLabel?: string;
}

interface RelatedDataButtonsConfigPanelProps {
  config: RelatedDataButtonsConfig;
  onChange: (config: RelatedDataButtonsConfig) => void;
  tables?: TableInfo[];
}

export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPanelProps> = ({
  config,
  onChange,
  tables: propTables = [],
}) => {
  const [allTables, setAllTables] = useState<TableInfo[]>([]);
  const [sourceTableColumns, setSourceTableColumns] = useState<ColumnInfo[]>([]);
  const [buttonTableColumns, setButtonTableColumns] = useState<ColumnInfo[]>([]);
  const [targetModalTableColumns, setTargetModalTableColumns] = useState<ColumnInfo[]>([]); // 대상 모달 테이블 컬럼
  const [targetModalTableName, setTargetModalTableName] = useState<string>(""); // 대상 모달 테이블명
  const [eventTargetTableColumns, setEventTargetTableColumns] = useState<ColumnInfo[]>([]); // 하위 테이블 연동 대상 테이블 컬럼
  
  // Popover 상태
  const [sourceTableOpen, setSourceTableOpen] = useState(false);
  const [buttonTableOpen, setButtonTableOpen] = useState(false);

  // 전체 테이블 로드
  useEffect(() => {
    const loadTables = async () => {
      try {
        const response = await tableManagementApi.getTableList();
        if (response.success && response.data) {
          setAllTables(response.data.map((t: any) => ({
            tableName: t.tableName || t.table_name,
            displayName: t.tableLabel || t.table_label || t.displayName,
          })));
        }
      } catch (error) {
        console.error("테이블 목록 로드 실패:", error);
      }
    };
    loadTables();
  }, []);

  // 소스 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!config.sourceMapping?.sourceTable) {
        setSourceTableColumns([]);
        return;
      }
      try {
        const response = await getTableColumns(config.sourceMapping.sourceTable);
        if (response.success && response.data?.columns) {
          setSourceTableColumns(response.data.columns.map((c: any) => ({
            columnName: c.columnName || c.column_name,
            columnLabel: c.columnLabel || c.column_label || c.displayName,
          })));
        }
      } catch (error) {
        console.error("소스 테이블 컬럼 로드 실패:", error);
      }
    };
    loadColumns();
  }, [config.sourceMapping?.sourceTable]);

  // 버튼 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!config.buttonDataSource?.tableName) {
        setButtonTableColumns([]);
        return;
      }
      try {
        const response = await getTableColumns(config.buttonDataSource.tableName);
        if (response.success && response.data?.columns) {
          setButtonTableColumns(response.data.columns.map((c: any) => ({
            columnName: c.columnName || c.column_name,
            columnLabel: c.columnLabel || c.column_label || c.displayName,
          })));
        }
      } catch (error) {
        console.error("버튼 테이블 컬럼 로드 실패:", error);
      }
    };
    loadColumns();
  }, [config.buttonDataSource?.tableName]);

  // 대상 모달 화면의 테이블명 로드 (초기 로드 및 screenId 변경 시)
  useEffect(() => {
    const loadTargetScreenTable = async () => {
      if (!config.modalLink?.targetScreenId) {
        setTargetModalTableName("");
        return;
      }
      try {
        const screenInfo = await screenApi.getScreen(config.modalLink.targetScreenId);
        if (screenInfo?.tableName) {
          setTargetModalTableName(screenInfo.tableName);
        }
      } catch (error) {
        console.error("대상 모달 화면 정보 로드 실패:", error);
      }
    };
    loadTargetScreenTable();
  }, [config.modalLink?.targetScreenId]);

  // 대상 모달 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!targetModalTableName) {
        setTargetModalTableColumns([]);
        return;
      }
      try {
        const response = await getTableColumns(targetModalTableName);
        if (response.success && response.data?.columns) {
          setTargetModalTableColumns(response.data.columns.map((c: any) => ({
            columnName: c.columnName || c.column_name,
            columnLabel: c.columnLabel || c.column_label || c.displayName,
          })));
        }
      } catch (error) {
        console.error("대상 모달 테이블 컬럼 로드 실패:", error);
      }
    };
    loadColumns();
  }, [targetModalTableName]);

  // 하위 테이블 연동 대상 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!config.events?.targetTable) {
        setEventTargetTableColumns([]);
        return;
      }
      try {
        const response = await getTableColumns(config.events.targetTable);
        if (response.success && response.data?.columns) {
          setEventTargetTableColumns(response.data.columns.map((c: any) => ({
            columnName: c.columnName || c.column_name,
            columnLabel: c.columnLabel || c.column_label || c.displayName,
          })));
        }
      } catch (error) {
        console.error("하위 테이블 연동 대상 테이블 컬럼 로드 실패:", error);
      }
    };
    loadColumns();
  }, [config.events?.targetTable]);

  // 설정 업데이트 헬퍼
  const updateConfig = useCallback((updates: Partial<RelatedDataButtonsConfig>) => {
    onChange({ ...config, ...updates });
  }, [config, onChange]);

  const updateSourceMapping = useCallback((updates: Partial<RelatedDataButtonsConfig["sourceMapping"]>) => {
    onChange({
      ...config,
      sourceMapping: { ...config.sourceMapping, ...updates },
    });
  }, [config, onChange]);

  const updateHeaderDisplay = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["headerDisplay"]>>) => {
    onChange({
      ...config,
      headerDisplay: { ...config.headerDisplay, ...updates } as any,
    });
  }, [config, onChange]);

  const updateButtonDataSource = useCallback((updates: Partial<RelatedDataButtonsConfig["buttonDataSource"]>) => {
    onChange({
      ...config,
      buttonDataSource: { ...config.buttonDataSource, ...updates },
    });
  }, [config, onChange]);

  const updateButtonStyle = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["buttonStyle"]>>) => {
    onChange({
      ...config,
      buttonStyle: { ...config.buttonStyle, ...updates },
    });
  }, [config, onChange]);

  const updateAddButton = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["addButton"]>>) => {
    onChange({
      ...config,
      addButton: { ...config.addButton, ...updates },
    });
  }, [config, onChange]);

  const updateEvents = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["events"]>>) => {
    onChange({
      ...config,
      events: { ...config.events, ...updates },
    });
  }, [config, onChange]);

  const updateModalLink = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["modalLink"]>>) => {
    onChange({
      ...config,
      modalLink: { ...config.modalLink, ...updates },
    });
  }, [config, onChange]);

  const tables = allTables.length > 0 ? allTables : propTables;

  return (
    <div className="space-y-6">
      {/* 소스 매핑 (좌측 패널 연결) */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">소스 테이블 (좌측 패널)</Label>
        
        <div className="space-y-2">
          <Label className="text-xs">테이블</Label>
          <Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
            <PopoverTrigger asChild>
              <Button variant="outline" role="combobox" className="w-full justify-between">
                {config.sourceMapping?.sourceTable || "테이블 선택"}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0">
              <Command>
                <CommandInput placeholder="테이블 검색..." />
                <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
                <CommandGroup className="max-h-[200px] overflow-auto">
                  {tables.map((table) => (
                    <CommandItem
                      key={table.tableName}
                      value={`${table.displayName || ""} ${table.tableName}`}
                      onSelect={() => {
                        updateSourceMapping({ sourceTable: table.tableName });
                        setSourceTableOpen(false);
                      }}
                    >
                      <Check className={cn("mr-2 h-4 w-4", config.sourceMapping?.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
                      {table.displayName || table.tableName}
                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        <div className="space-y-2">
          <Label className="text-xs">필터 컬럼 (버튼 테이블 조회 시 사용)</Label>
          <Select
            value={config.sourceMapping?.sourceColumn || ""}
            onValueChange={(value) => updateSourceMapping({ sourceColumn: value })}
          >
            <SelectTrigger>
              <SelectValue placeholder="컬럼 선택" />
            </SelectTrigger>
            <SelectContent>
              {sourceTableColumns.map((col) => (
                <SelectItem key={col.columnName} value={col.columnName}>
                  {col.columnLabel || col.columnName}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* 헤더 표시 설정 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label className="text-sm font-semibold">헤더 표시</Label>
          <Switch
            checked={config.headerDisplay?.show !== false}
            onCheckedChange={(checked) => updateHeaderDisplay({ show: checked })}
          />
        </div>

        {config.headerDisplay?.show !== false && (
          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
            <div className="space-y-1">
              <Label className="text-xs">제목 컬럼</Label>
              <Select
                value={config.headerDisplay?.titleColumn || ""}
                onValueChange={(value) => updateHeaderDisplay({ titleColumn: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="제목 컬럼 선택" />
                </SelectTrigger>
                <SelectContent>
                  {sourceTableColumns.map((col) => (
                    <SelectItem key={col.columnName} value={col.columnName}>
                      {col.columnLabel || col.columnName}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1">
              <Label className="text-xs">부제목 컬럼 (선택)</Label>
              <Select
                value={config.headerDisplay?.subtitleColumn || "__none__"}
                onValueChange={(value) => updateHeaderDisplay({ subtitleColumn: value === "__none__" ? "" : value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="부제목 컬럼 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="__none__">없음</SelectItem>
                  {sourceTableColumns.map((col) => (
                    <SelectItem key={col.columnName} value={col.columnName}>
                      {col.columnLabel || col.columnName}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        )}
      </div>

      {/* 버튼 데이터 소스 */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">버튼 데이터 소스</Label>

        <div className="space-y-2">
          <Label className="text-xs">테이블</Label>
          <Popover open={buttonTableOpen} onOpenChange={setButtonTableOpen}>
            <PopoverTrigger asChild>
              <Button variant="outline" role="combobox" className="w-full justify-between">
                {config.buttonDataSource?.tableName || "테이블 선택"}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0">
              <Command>
                <CommandInput placeholder="테이블 검색..." />
                <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
                <CommandGroup className="max-h-[200px] overflow-auto">
                  {tables.map((table) => (
                    <CommandItem
                      key={table.tableName}
                      value={`${table.displayName || ""} ${table.tableName}`}
                      onSelect={() => {
                        updateButtonDataSource({ tableName: table.tableName });
                        setButtonTableOpen(false);
                      }}
                    >
                      <Check className={cn("mr-2 h-4 w-4", config.buttonDataSource?.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
                      {table.displayName || table.tableName}
                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">필터 컬럼</Label>
            <Select
              value={config.buttonDataSource?.filterColumn || ""}
              onValueChange={(value) => updateButtonDataSource({ filterColumn: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {buttonTableColumns.map((col) => (
                  <SelectItem key={col.columnName} value={col.columnName}>
                    {col.columnLabel || col.columnName}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1">
            <Label className="text-xs">표시 컬럼</Label>
            <Select
              value={config.buttonDataSource?.displayColumn || ""}
              onValueChange={(value) => updateButtonDataSource({ displayColumn: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {buttonTableColumns.map((col) => (
                  <SelectItem key={col.columnName} value={col.columnName}>
                    {col.columnLabel || col.columnName}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* 버튼 스타일 */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">버튼 스타일</Label>

        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">기본 스타일</Label>
            <Select
              value={config.buttonStyle?.variant || "outline"}
              onValueChange={(value: any) => updateButtonStyle({ variant: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="default">Default</SelectItem>
                <SelectItem value="outline">Outline</SelectItem>
                <SelectItem value="secondary">Secondary</SelectItem>
                <SelectItem value="ghost">Ghost</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1">
            <Label className="text-xs">선택 시 스타일</Label>
            <Select
              value={config.buttonStyle?.activeVariant || "default"}
              onValueChange={(value: any) => updateButtonStyle({ activeVariant: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="default">Default</SelectItem>
                <SelectItem value="outline">Outline</SelectItem>
                <SelectItem value="secondary">Secondary</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* 기본 표시 설정 */}
        <div className="space-y-2">
          <Label className="text-xs">기본 버전 표시 컬럼</Label>
          <Select
            value={config.buttonStyle?.defaultIndicator?.column || "__none__"}
            onValueChange={(value) => updateButtonStyle({
              defaultIndicator: {
                ...config.buttonStyle?.defaultIndicator,
                column: value === "__none__" ? "" : value,
                showStar: config.buttonStyle?.defaultIndicator?.showStar ?? true,
              },
            })}
          >
            <SelectTrigger>
              <SelectValue placeholder="없음" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="__none__">없음</SelectItem>
              {buttonTableColumns.map((col) => (
                <SelectItem key={col.columnName} value={col.columnName}>
                  {col.columnLabel || col.columnName}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {config.buttonStyle?.defaultIndicator?.column && (
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <Switch
                checked={config.buttonStyle?.defaultIndicator?.showStar ?? true}
                onCheckedChange={(checked) => updateButtonStyle({
                  defaultIndicator: {
                    ...config.buttonStyle?.defaultIndicator,
                    column: config.buttonStyle?.defaultIndicator?.column || "",
                    showStar: checked,
                  },
                })}
              />
              <Label className="text-xs">별표 표시</Label>
            </div>
          </div>
        )}
      </div>

      {/* 이벤트 설정 (하위 테이블 연동) */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">하위 테이블 연동</Label>

        <div className="space-y-2">
          <Label className="text-xs">대상 테이블</Label>
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" role="combobox" className="w-full justify-between">
                {config.events?.targetTable || "테이블 선택"}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0">
              <Command>
                <CommandInput placeholder="테이블 검색..." />
                <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
                <CommandGroup className="max-h-[200px] overflow-auto">
                  {tables.map((table) => (
                    <CommandItem
                      key={table.tableName}
                      value={`${table.displayName || ""} ${table.tableName}`}
                      onSelect={() => {
                        updateEvents({ targetTable: table.tableName });
                      }}
                    >
                      <Check className={cn("mr-2 h-4 w-4", config.events?.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
                      {table.displayName || table.tableName}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        <div className="space-y-2">
          <Label className="text-xs">필터 컬럼 (버튼 값 컬럼 → 대상 테이블 컬럼)</Label>
          <Select
            value={config.events?.targetFilterColumn || ""}
            onValueChange={(value) => updateEvents({ targetFilterColumn: value })}
          >
            <SelectTrigger>
              <SelectValue placeholder="컬럼 선택" />
            </SelectTrigger>
            <SelectContent>
              {eventTargetTableColumns.map((col) => (
                <SelectItem key={col.columnName} value={col.columnName}>
                  {col.columnLabel || col.columnName}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {eventTargetTableColumns.length === 0 && config.events?.targetTable && (
            <p className="text-xs text-muted-foreground">컬럼을 불러오는 중...</p>
          )}
          {!config.events?.targetTable && (
            <p className="text-xs text-muted-foreground">먼저 대상 테이블을 선택하세요</p>
          )}
        </div>
      </div>

      {/* 추가 버튼 설정 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label className="text-sm font-semibold">추가 버튼</Label>
          <Switch
            checked={config.addButton?.show ?? false}
            onCheckedChange={(checked) => updateAddButton({ show: checked })}
          />
        </div>

        {config.addButton?.show && (
          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
            <div className="space-y-1">
              <Label className="text-xs">버튼 라벨</Label>
              <Input
                value={config.addButton?.label || ""}
                onChange={(e) => updateAddButton({ label: e.target.value })}
                placeholder="+ 버전 추가"
              />
            </div>

            <div className="space-y-1">
              <Label className="text-xs">위치</Label>
              <Select
                value={config.addButton?.position || "header"}
                onValueChange={(value: any) => updateAddButton({ position: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="header">헤더 우측</SelectItem>
                  <SelectItem value="inline">버튼들과 함께</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1">
              <Label className="text-xs">모달 화면</Label>
              <ScreenSelector
                value={config.addButton?.modalScreenId}
                onChange={(screenId) => updateAddButton({ modalScreenId: screenId })}
                placeholder="화면 선택"
              />
            </div>
          </div>
        )}
      </div>

      {/* 모달 연동 설정 (선택된 버튼 데이터를 모달로 전달) */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label className="text-sm font-semibold">모달 연동 (공정 추가 등)</Label>
          <Switch
            checked={config.modalLink?.enabled ?? false}
            onCheckedChange={(checked) => updateModalLink({ enabled: checked })}
          />
        </div>

        {config.modalLink?.enabled && (
          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
            <div className="space-y-1">
              <Label className="text-xs">트리거 방식</Label>
              <Select
                value={config.modalLink?.triggerType || "external"}
                onValueChange={(value: any) => updateModalLink({ triggerType: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="external">외부 버튼 (별도 버튼에서 호출)</SelectItem>
                  <SelectItem value="button">내부 버튼 (컴포넌트에 버튼 표시)</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {config.modalLink?.triggerType === "button" && (
              <>
                <div className="space-y-1">
                  <Label className="text-xs">버튼 라벨</Label>
                  <Input
                    value={config.modalLink?.buttonLabel || ""}
                    onChange={(e) => updateModalLink({ buttonLabel: e.target.value })}
                    placeholder="공정 추가"
                  />
                </div>

                <div className="space-y-1">
                  <Label className="text-xs">버튼 위치</Label>
                  <Select
                    value={config.modalLink?.buttonPosition || "header"}
                    onValueChange={(value: any) => updateModalLink({ buttonPosition: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="header">헤더 우측</SelectItem>
                      <SelectItem value="inline">버튼들과 함께</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </>
            )}

            <div className="space-y-1">
              <Label className="text-xs">대상 모달 화면</Label>
              <ScreenSelector
                value={config.modalLink?.targetScreenId}
                onChange={(screenId, tableName) => {
                  updateModalLink({ targetScreenId: screenId });
                  if (tableName) {
                    setTargetModalTableName(tableName);
                  }
                }}
                placeholder="화면 선택"
              />
              {targetModalTableName && (
                <p className="text-xs text-muted-foreground mt-1">
                  테이블: {targetModalTableName}
                </p>
              )}
            </div>

            <div className="space-y-2 pt-2 border-t">
              <Label className="text-xs font-medium">데이터 매핑</Label>
              <p className="text-xs text-muted-foreground">
                선택된 버튼 데이터를 모달 초기값으로 전달합니다.
              </p>
              <div className="grid grid-cols-2 gap-2">
                <div className="space-y-1">
                  <Label className="text-xs">소스 필드</Label>
                  <Select
                    value={config.modalLink?.dataMapping?.[0]?.sourceField === "id" ? "__id__" : 
                           config.modalLink?.dataMapping?.[0]?.sourceField === "value" ? "__value__" :
                           config.modalLink?.dataMapping?.[0]?.sourceField || "__id__"}
                    onValueChange={(value) => updateModalLink({
                      dataMapping: [{ 
                        sourceField: value === "__id__" ? "id" : value === "__value__" ? "value" : value, 
                        targetField: config.modalLink?.dataMapping?.[0]?.targetField || "" 
                      }]
                    })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__id__">ID (버튼 고유값)</SelectItem>
                      <SelectItem value="__value__">값 (valueColumn)</SelectItem>
                      {buttonTableColumns
                        .filter(col => col.columnName !== "id") // id 중복 제거
                        .map((col) => (
                        <SelectItem key={col.columnName} value={col.columnName}>
                          {col.columnLabel || col.columnName}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-1">
                  <Label className="text-xs">대상 필드</Label>
                  <Select
                    value={config.modalLink?.dataMapping?.[0]?.targetField || "__none__"}
                    onValueChange={(value) => updateModalLink({
                      dataMapping: [{ 
                        sourceField: config.modalLink?.dataMapping?.[0]?.sourceField || "id", 
                        targetField: value === "__none__" ? "" : value 
                      }]
                    })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="컬럼 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">선택 안함</SelectItem>
                      {targetModalTableColumns.map((col) => (
                        <SelectItem key={col.columnName} value={col.columnName}>
                          {col.columnLabel || col.columnName}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {targetModalTableColumns.length === 0 && targetModalTableName && (
                    <p className="text-xs text-muted-foreground">컬럼을 불러오는 중...</p>
                  )}
                  {!targetModalTableName && (
                    <p className="text-xs text-muted-foreground">먼저 대상 모달 화면을 선택하세요</p>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* 기타 설정 */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">기타 설정</Label>

        <div className="flex items-center gap-2">
          <Switch
            checked={config.autoSelectFirst ?? true}
            onCheckedChange={(checked) => updateConfig({ autoSelectFirst: checked })}
          />
          <Label className="text-xs">첫 번째 항목 자동 선택</Label>
        </div>

        <div className="space-y-1">
          <Label className="text-xs">빈 상태 메시지</Label>
          <Input
            value={config.emptyMessage || ""}
            onChange={(e) => updateConfig({ emptyMessage: e.target.value })}
            placeholder="데이터가 없습니다"
          />
        </div>
      </div>
    </div>
  );
};

export default RelatedDataButtonsConfigPanel;