"use client";

import React, { useState, useEffect, 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 { Switch } from "@/components/ui/switch";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Button } from "@/components/ui/button";
import { Check, ChevronsUpDown, Search } from "lucide-react";
import { cn } from "@/lib/utils";
import { ComponentData } from "@/types/screen";
import { apiClient } from "@/lib/api/client";
import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigPanel";
import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";

interface ButtonConfigPanelProps {
  component: ComponentData;
  onUpdateProperty: (path: string, value: any) => void;
  allComponents?: ComponentData[]; // 🆕 플로우 위젯 감지용
  currentTableName?: string; // 현재 화면의 테이블명 (자동 감지용)
  currentScreenCompanyCode?: string; // 현재 편집 중인 화면의 회사 코드
}

interface ScreenOption {
  id: number;
  name: string;
  description?: string;
}

export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
  component,
  onUpdateProperty,
  allComponents = [], // 🆕 기본값 빈 배열
  currentTableName, // 현재 화면의 테이블명
  currentScreenCompanyCode, // 현재 편집 중인 화면의 회사 코드
}) => {
  // 🔧 component에서 직접 읽기 (useMemo 제거)
  const config = component.componentConfig || {};
  const currentAction = component.componentConfig?.action || {};

  // 로컬 상태 관리 (실시간 입력 반영)
  const [localInputs, setLocalInputs] = useState({
    text: config.text !== undefined ? config.text : "버튼",
    modalTitle: String(config.action?.modalTitle || ""),
    modalDescription: String(config.action?.modalDescription || ""),
    editModalTitle: String(config.action?.editModalTitle || ""),
    editModalDescription: String(config.action?.editModalDescription || ""),
    targetUrl: String(config.action?.targetUrl || ""),
  });

  const [screens, setScreens] = useState<ScreenOption[]>([]);
  const [screensLoading, setScreensLoading] = useState(false);
  const [modalScreenOpen, setModalScreenOpen] = useState(false);
  const [navScreenOpen, setNavScreenOpen] = useState(false);
  const [modalSearchTerm, setModalSearchTerm] = useState("");
  const [navSearchTerm, setNavSearchTerm] = useState("");

  // 테이블 컬럼 목록 상태
  const [tableColumns, setTableColumns] = useState<string[]>([]);
  const [columnsLoading, setColumnsLoading] = useState(false);
  const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
  const [displayColumnSearch, setDisplayColumnSearch] = useState("");

  // 🎯 플로우 위젯이 화면에 있는지 확인
  const hasFlowWidget = useMemo(() => {
    const found = allComponents.some((comp: any) => {
      // ScreenDesigner에서 저장하는 componentType 속성 확인!
      const compType = comp.componentType || comp.widgetType || "";

      // "flow-widget" 체크
      const isFlow = compType === "flow-widget" || compType?.toLowerCase().includes("flow");

      if (isFlow) {
        console.log("✅ 플로우 위젯 발견!", { id: comp.id, componentType: comp.componentType });
      }
      return isFlow;
    });
    console.log("🎯 플로우 위젯 존재 여부:", found);
    return found;
  }, [allComponents]);

  // 컴포넌트 prop 변경 시 로컬 상태 동기화 (Input만)
  useEffect(() => {
    const latestConfig = component.componentConfig || {};
    const latestAction = latestConfig.action || {};

    setLocalInputs({
      text: latestConfig.text !== undefined ? latestConfig.text : "버튼",
      modalTitle: String(latestAction.modalTitle || ""),
      modalDescription: String(latestAction.modalDescription || ""),
      editModalTitle: String(latestAction.editModalTitle || ""),
      editModalDescription: String(latestAction.editModalDescription || ""),
      targetUrl: String(latestAction.targetUrl || ""),
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [component.id]);

  // 화면 목록 가져오기 (현재 편집 중인 화면의 회사 코드 기준)
  useEffect(() => {
    const fetchScreens = async () => {
      try {
        setScreensLoading(true);
        // 현재 편집 중인 화면의 회사 코드 기준으로 화면 목록 조회
        const params: any = {
          page: 1,
          size: 9999, // 매우 큰 값으로 설정하여 전체 목록 가져오기
        };
        
        // 현재 화면의 회사 코드가 있으면 필터링 파라미터로 전달
        if (currentScreenCompanyCode) {
          params.companyCode = currentScreenCompanyCode;
        }
        
        const response = await apiClient.get("/screen-management/screens", {
          params,
        });

        if (response.data.success && Array.isArray(response.data.data)) {
          const screenList = response.data.data.map((screen: any) => ({
            id: screen.screenId,
            name: screen.screenName,
            description: screen.description,
          }));
          setScreens(screenList);
        }
      } catch (error) {
        // console.error("❌ 화면 목록 로딩 실패:", error);
      } finally {
        setScreensLoading(false);
      }
    };

    fetchScreens();
  }, [currentScreenCompanyCode]);

  // 테이블 컬럼 목록 가져오기 (테이블 이력 보기 액션일 때)
  useEffect(() => {
    const fetchTableColumns = async () => {
      // 테이블 이력 보기 액션이 아니면 스킵
      if (config.action?.type !== "view_table_history") {
        return;
      }

      // 1. 수동 입력된 테이블명 우선
      // 2. 없으면 현재 화면의 테이블명 사용
      const tableName = config.action?.historyTableName || currentTableName;

      // 테이블명이 없으면 스킵
      if (!tableName) {
        return;
      }

      try {
        setColumnsLoading(true);
        const response = await apiClient.get(`/table-management/tables/${tableName}/columns`, {
          params: {
            page: 1,
            size: 9999, // 전체 컬럼 가져오기
          },
        });

        // API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
        const columnData = response.data.data?.columns;

        if (!columnData || !Array.isArray(columnData)) {
          console.error("❌ 컬럼 데이터가 배열이 아닙니다:", columnData);
          setTableColumns([]);
          return;
        }

        if (response.data.success) {
          // ID 컬럼과 날짜 관련 컬럼 제외
          const filteredColumns = columnData
            .filter((col: any) => {
              const colName = col.columnName.toLowerCase();
              const dataType = col.dataType?.toLowerCase() || "";

              // ID 컬럼 제외 (id, _id로 끝나는 컬럼)
              if (colName === "id" || colName.endsWith("_id")) {
                return false;
              }

              // 날짜/시간 타입 제외 (데이터 타입 기준)
              if (dataType.includes("date") || dataType.includes("time") || dataType.includes("timestamp")) {
                return false;
              }

              // 날짜/시간 관련 컬럼명 제외 (컬럼명에 date, time, at 포함)
              if (
                colName.includes("date") ||
                colName.includes("time") ||
                colName.endsWith("_at") ||
                colName.startsWith("created") ||
                colName.startsWith("updated")
              ) {
                return false;
              }

              return true;
            })
            .map((col: any) => col.columnName);

          setTableColumns(filteredColumns);
        }
      } catch (error) {
        console.error("❌ 테이블 컬럼 로딩 실패:", error);
      } finally {
        setColumnsLoading(false);
      }
    };

    fetchTableColumns();
  }, [config.action?.type, config.action?.historyTableName, currentTableName]);

  // 검색 필터링 함수
  const filterScreens = (searchTerm: string) => {
    if (!searchTerm.trim()) return screens;
    return screens.filter(
      (screen) =>
        screen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (screen.description && screen.description.toLowerCase().includes(searchTerm.toLowerCase())),
    );
  };

  // console.log("🔧 config-panels/ButtonConfigPanel 렌더링:", {
  //   component,
  //   config,
  //   action: config.action,
  //   actionType: config.action?.type,
  //   screensCount: screens.length,
  // });

  return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="button-text">버튼 텍스트</Label>
        <Input
          id="button-text"
          value={localInputs.text}
          onChange={(e) => {
            const newValue = e.target.value;
            setLocalInputs((prev) => ({ ...prev, text: newValue }));
            onUpdateProperty("componentConfig.text", newValue);
          }}
          placeholder="버튼 텍스트를 입력하세요"
        />
      </div>

      <div>
        <Label htmlFor="button-action">버튼 액션</Label>
        <Select
          key={`action-${component.id}-${component.componentConfig?.action?.type || "save"}`}
          value={component.componentConfig?.action?.type || "save"}
          onValueChange={(value) => {
            // 🔥 action.type 업데이트
            onUpdateProperty("componentConfig.action.type", value);

            // 🔥 색상 업데이트는 충분히 지연 (React 리렌더링 완료 후)
            setTimeout(() => {
              const newColor = value === "delete" ? "#ef4444" : "#212121";
              onUpdateProperty("style.labelColor", newColor);
            }, 100); // 0 → 100ms로 증가
          }}
        >
          <SelectTrigger>
            <SelectValue placeholder="버튼 액션 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="save">저장</SelectItem>
            <SelectItem value="delete">삭제</SelectItem>
            <SelectItem value="edit">편집</SelectItem>
            <SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
            <SelectItem value="navigate">페이지 이동</SelectItem>
            <SelectItem value="openModalWithData">데이터 전달 + 모달 열기 🆕</SelectItem>
            <SelectItem value="modal">모달 열기</SelectItem>
            <SelectItem value="control">제어 흐름</SelectItem>
            <SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
            <SelectItem value="excel_download">엑셀 다운로드</SelectItem>
            <SelectItem value="excel_upload">엑셀 업로드</SelectItem>
            <SelectItem value="barcode_scan">바코드 스캔</SelectItem>
            <SelectItem value="code_merge">코드 병합</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 모달 열기 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "modal" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
          <h4 className="text-sm font-medium text-foreground">모달 설정</h4>

          <div>
            <Label htmlFor="modal-title">모달 제목</Label>
            <Input
              id="modal-title"
              placeholder="모달 제목을 입력하세요"
              value={localInputs.modalTitle}
              onChange={(e) => {
                const newValue = e.target.value;
                setLocalInputs((prev) => ({ ...prev, modalTitle: newValue }));
                onUpdateProperty("componentConfig.action.modalTitle", newValue);
              }}
            />
          </div>

          <div>
            <Label htmlFor="modal-description">모달 설명</Label>
            <Input
              id="modal-description"
              placeholder="모달 설명을 입력하세요 (선택사항)"
              value={localInputs.modalDescription}
              onChange={(e) => {
                const newValue = e.target.value;
                setLocalInputs((prev) => ({ ...prev, modalDescription: newValue }));
                onUpdateProperty("componentConfig.action.modalDescription", newValue);
              }}
            />
            <p className="mt-1 text-xs text-muted-foreground">모달 제목 아래에 표시됩니다</p>
          </div>

          <div>
            <Label htmlFor="modal-size">모달 크기</Label>
            <Select
              value={component.componentConfig?.action?.modalSize || "md"}
              onValueChange={(value) => {
                onUpdateProperty("componentConfig.action.modalSize", value);
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="모달 크기 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="sm">작음 (Small)</SelectItem>
                <SelectItem value="md">보통 (Medium)</SelectItem>
                <SelectItem value="lg">큼 (Large)</SelectItem>
                <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="target-screen-modal">대상 화면 선택</Label>
            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={modalScreenOpen}
                  className="h-6 w-full justify-between px-2 py-0"
                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
                      "화면을 선택하세요..."
                    : "화면을 선택하세요..."}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
                <div className="flex flex-col">
                  <div className="flex items-center border-b px-3 py-2">
                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                    <Input
                      placeholder="화면 검색..."
                      value={modalSearchTerm}
                      onChange={(e) => setModalSearchTerm(e.target.value)}
                      className="border-0 p-0 focus-visible:ring-0"
                    />
                  </div>
                  <div className="max-h-[200px] overflow-auto">
                    {(() => {
                      const filteredScreens = filterScreens(modalSearchTerm);
                      if (screensLoading) {
                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                      }
                      if (filteredScreens.length === 0) {
                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                      }
                      return filteredScreens.map((screen, index) => (
                        <div
                          key={`modal-screen-${screen.id}-${index}`}
                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                          onClick={() => {
                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                            setModalScreenOpen(false);
                            setModalSearchTerm("");
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{screen.name}</span>
                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                          </div>
                        </div>
                      ));
                    })()}
                  </div>
                </div>
              </PopoverContent>
            </Popover>
          </div>
        </div>
      )}

      {/* 🆕 데이터 전달 + 모달 열기 액션 설정 */}
      {component.componentConfig?.action?.type === "openModalWithData" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4 dark:bg-blue-950/20">
          <h4 className="text-sm font-medium text-foreground">데이터 전달 + 모달 설정</h4>
          <p className="text-xs text-muted-foreground">
            TableList에서 선택된 데이터를 다음 모달로 전달합니다
          </p>

          <div>
            <Label htmlFor="data-source-id">
              데이터 소스 ID <span className="text-primary">(선택사항)</span>
            </Label>
            <Input
              id="data-source-id"
              placeholder="비워두면 자동으로 감지됩니다"
              value={component.componentConfig?.action?.dataSourceId || ""}
              onChange={(e) => {
                onUpdateProperty("componentConfig.action.dataSourceId", e.target.value);
              }}
            />
            <p className="mt-1 text-xs text-primary font-medium">
              ✨ 비워두면 같은 화면의 TableList를 자동으로 감지합니다
            </p>
            <p className="mt-1 text-xs text-muted-foreground">
              직접 지정하려면 테이블명을 입력하세요 (예: item_info)
            </p>
          </div>

          <div>
            <Label htmlFor="modal-title-with-data">모달 제목</Label>
            <Input
              id="modal-title-with-data"
              placeholder="예: 상세 정보 입력"
              value={localInputs.modalTitle}
              onChange={(e) => {
                const newValue = e.target.value;
                setLocalInputs((prev) => ({ ...prev, modalTitle: newValue }));
                onUpdateProperty("componentConfig.action.modalTitle", newValue);
              }}
            />
          </div>

          <div>
            <Label htmlFor="modal-size-with-data">모달 크기</Label>
            <Select
              value={component.componentConfig?.action?.modalSize || "lg"}
              onValueChange={(value) => {
                onUpdateProperty("componentConfig.action.modalSize", value);
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="모달 크기 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="sm">작음 (Small)</SelectItem>
                <SelectItem value="md">보통 (Medium)</SelectItem>
                <SelectItem value="lg">큼 (Large) - 권장</SelectItem>
                <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label htmlFor="target-screen-with-data">대상 화면 선택</Label>
            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={modalScreenOpen}
                  className="h-6 w-full justify-between px-2 py-0"
                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
                      "화면을 선택하세요..."
                    : "화면을 선택하세요..."}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
                <div className="flex flex-col">
                  <div className="flex items-center border-b px-3 py-2">
                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                    <Input
                      placeholder="화면 검색..."
                      value={modalSearchTerm}
                      onChange={(e) => setModalSearchTerm(e.target.value)}
                      className="border-0 p-0 focus-visible:ring-0"
                    />
                  </div>
                  <div className="max-h-[200px] overflow-auto">
                    {(() => {
                      const filteredScreens = filterScreens(modalSearchTerm);
                      if (screensLoading) {
                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                      }
                      if (filteredScreens.length === 0) {
                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                      }
                      return filteredScreens.map((screen, index) => (
                        <div
                          key={`modal-data-screen-${screen.id}-${index}`}
                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                          onClick={() => {
                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                            setModalScreenOpen(false);
                            setModalSearchTerm("");
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{screen.name}</span>
                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                          </div>
                        </div>
                      ));
                    })()}
                  </div>
                </div>
              </PopoverContent>
            </Popover>
            <p className="mt-1 text-xs text-muted-foreground">
              SelectedItemsDetailInput 컴포넌트가 있는 화면을 선택하세요
            </p>
          </div>
        </div>
      )}

      {/* 수정 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "edit" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-success/10 p-4">
          <h4 className="text-sm font-medium text-foreground">수정 설정</h4>

          <div>
            <Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={modalScreenOpen}
                  className="h-6 w-full justify-between px-2 py-0"
                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
                      "수정 폼 화면을 선택하세요..."
                    : "수정 폼 화면을 선택하세요..."}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
                <div className="flex flex-col">
                  <div className="flex items-center border-b px-3 py-2">
                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                    <Input
                      placeholder="화면 검색..."
                      value={modalSearchTerm}
                      onChange={(e) => setModalSearchTerm(e.target.value)}
                      className="border-0 p-0 focus-visible:ring-0"
                    />
                  </div>
                  <div className="max-h-[200px] overflow-auto">
                    {(() => {
                      const filteredScreens = filterScreens(modalSearchTerm);
                      if (screensLoading) {
                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                      }
                      if (filteredScreens.length === 0) {
                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                      }
                      return filteredScreens.map((screen, index) => (
                        <div
                          key={`edit-screen-${screen.id}-${index}`}
                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                          onClick={() => {
                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                            setModalScreenOpen(false);
                            setModalSearchTerm("");
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{screen.name}</span>
                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                          </div>
                        </div>
                      ));
                    })()}
                  </div>
                </div>
              </PopoverContent>
            </Popover>
            <p className="mt-1 text-xs text-muted-foreground">
              선택된 데이터가 이 폼 화면에 자동으로 로드되어 수정할 수 있습니다
            </p>
          </div>

          <div>
            <Label htmlFor="edit-mode">수정 모드</Label>
            <Select
              value={component.componentConfig?.action?.editMode || "modal"}
              onValueChange={(value) => {
                onUpdateProperty("componentConfig.action.editMode", value);
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="수정 모드 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="modal">모달로 열기</SelectItem>
                <SelectItem value="navigate">새 페이지로 이동</SelectItem>
                <SelectItem value="inline">현재 화면에서 수정</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {(component.componentConfig?.action?.editMode || "modal") === "modal" && (
            <>
              <div>
                <Label htmlFor="edit-modal-title">모달 제목</Label>
                <Input
                  id="edit-modal-title"
                  placeholder="모달 제목을 입력하세요 (예: 데이터 수정)"
                  value={localInputs.editModalTitle}
                  onChange={(e) => {
                    const newValue = e.target.value;
                    setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
                    onUpdateProperty("componentConfig.action.editModalTitle", newValue);
                    onUpdateProperty("webTypeConfig.editModalTitle", newValue);
                  }}
                />
                <p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
              </div>

              <div>
                <Label htmlFor="edit-modal-description">모달 설명</Label>
                <Input
                  id="edit-modal-description"
                  placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 수정합니다)"
                  value={localInputs.editModalDescription}
                  onChange={(e) => {
                    const newValue = e.target.value;
                    setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
                    onUpdateProperty("componentConfig.action.editModalDescription", newValue);
                    onUpdateProperty("webTypeConfig.editModalDescription", newValue);
                  }}
                />
                <p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
              </div>

              <div>
                <Label htmlFor="edit-modal-size">모달 크기</Label>
                <Select
                  value={component.componentConfig?.action?.modalSize || "md"}
                  onValueChange={(value) => {
                    onUpdateProperty("componentConfig.action.modalSize", value);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="모달 크기 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="sm">작음 (Small)</SelectItem>
                    <SelectItem value="md">보통 (Medium)</SelectItem>
                    <SelectItem value="lg">큼 (Large)</SelectItem>
                    <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
                    <SelectItem value="full">전체 화면 (Full)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </>
          )}
        </div>
      )}

      {/* 복사 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "copy" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
          <h4 className="text-sm font-medium text-foreground">복사 설정 (품목코드 자동 초기화)</h4>

          <div>
            <Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={modalScreenOpen}
                  className="h-6 w-full justify-between px-2 py-0"
                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
                      "복사 폼 화면을 선택하세요..."
                    : "복사 폼 화면을 선택하세요..."}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
                <div className="flex flex-col">
                  <div className="flex items-center border-b px-3 py-2">
                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                    <Input
                      placeholder="화면 검색..."
                      value={modalSearchTerm}
                      onChange={(e) => setModalSearchTerm(e.target.value)}
                      className="border-0 p-0 focus-visible:ring-0"
                    />
                  </div>
                  <div className="max-h-[200px] overflow-auto">
                    {(() => {
                      const filteredScreens = filterScreens(modalSearchTerm);
                      if (screensLoading) {
                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                      }
                      if (filteredScreens.length === 0) {
                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                      }
                      return filteredScreens.map((screen, index) => (
                        <div
                          key={`copy-screen-${screen.id}-${index}`}
                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                          onClick={() => {
                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                            setModalScreenOpen(false);
                            setModalSearchTerm("");
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{screen.name}</span>
                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                          </div>
                        </div>
                      ));
                    })()}
                  </div>
                </div>
              </PopoverContent>
            </Popover>
            <p className="mt-1 text-xs text-muted-foreground">
              선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
            </p>
          </div>

          <div>
            <Label htmlFor="copy-mode">복사 모드</Label>
            <Select
              value={component.componentConfig?.action?.editMode || "modal"}
              onValueChange={(value) => {
                onUpdateProperty("componentConfig.action.editMode", value);
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder="복사 모드 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="modal">모달로 열기</SelectItem>
                <SelectItem value="navigate">새 페이지로 이동</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {(component.componentConfig?.action?.editMode || "modal") === "modal" && (
            <>
              <div>
                <Label htmlFor="copy-modal-title">모달 제목</Label>
                <Input
                  id="copy-modal-title"
                  placeholder="모달 제목을 입력하세요 (예: 데이터 복사)"
                  value={localInputs.editModalTitle}
                  onChange={(e) => {
                    const newValue = e.target.value;
                    setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
                    onUpdateProperty("componentConfig.action.editModalTitle", newValue);
                    onUpdateProperty("webTypeConfig.editModalTitle", newValue);
                  }}
                />
                <p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
              </div>

              <div>
                <Label htmlFor="copy-modal-description">모달 설명</Label>
                <Input
                  id="copy-modal-description"
                  placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 복사합니다)"
                  value={localInputs.editModalDescription}
                  onChange={(e) => {
                    const newValue = e.target.value;
                    setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
                    onUpdateProperty("componentConfig.action.editModalDescription", newValue);
                    onUpdateProperty("webTypeConfig.editModalDescription", newValue);
                  }}
                />
                <p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
              </div>

              <div>
                <Label htmlFor="copy-modal-size">모달 크기</Label>
                <Select
                  value={component.componentConfig?.action?.modalSize || "md"}
                  onValueChange={(value) => {
                    onUpdateProperty("componentConfig.action.modalSize", value);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="모달 크기 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="sm">작음 (Small)</SelectItem>
                    <SelectItem value="md">보통 (Medium)</SelectItem>
                    <SelectItem value="lg">큼 (Large)</SelectItem>
                    <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
                    <SelectItem value="full">전체 화면 (Full)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </>
          )}
        </div>
      )}

      {/* 테이블 이력 보기 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "view_table_history" && (
        <div className="mt-4 space-y-4">
          <div>
            <Label>
              전체 이력 표시 컬럼 (필수) <span className="text-destructive">*</span>
            </Label>

            <Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={displayColumnOpen}
                  className="mt-2 h-8 w-full justify-between text-xs"
                  style={{ fontSize: "12px" }}
                  disabled={columnsLoading || tableColumns.length === 0}
                >
                  {columnsLoading
                    ? "로딩 중..."
                    : config.action?.historyDisplayColumn
                      ? config.action.historyDisplayColumn
                      : tableColumns.length === 0
                        ? "사용 가능한 컬럼이 없습니다"
                        : "컬럼을 선택하세요"}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                <Command>
                  <CommandInput placeholder="컬럼 검색..." className="text-xs" style={{ fontSize: "12px" }} />
                  <CommandList>
                    <CommandEmpty className="text-xs" style={{ fontSize: "12px" }}>
                      컬럼을 찾을 수 없습니다.
                    </CommandEmpty>
                    <CommandGroup>
                      {tableColumns.map((column) => (
                        <CommandItem
                          key={column}
                          value={column}
                          onSelect={(currentValue) => {
                            onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
                            setDisplayColumnOpen(false);
                          }}
                          className="text-xs"
                          style={{ fontSize: "12px" }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              config.action?.historyDisplayColumn === column ? "opacity-100" : "opacity-0",
                            )}
                          />
                          {column}
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>
        </div>
      )}

      {/* 페이지 이동 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "navigate" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
          <h4 className="text-sm font-medium text-foreground">페이지 이동 설정</h4>

          <div>
            <Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
            <Popover open={navScreenOpen} onOpenChange={setNavScreenOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={navScreenOpen}
                  className="h-6 w-full justify-between px-2 py-0"
                  style={{ fontSize: "12px" }}
                  disabled={screensLoading}
                >
                  {config.action?.targetScreenId
                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
                      "화면을 선택하세요..."
                    : "화면을 선택하세요..."}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
                <div className="flex flex-col">
                  <div className="flex items-center border-b px-3 py-2">
                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                    <Input
                      placeholder="화면 검색..."
                      value={navSearchTerm}
                      onChange={(e) => setNavSearchTerm(e.target.value)}
                      className="border-0 p-0 focus-visible:ring-0"
                    />
                  </div>
                  <div className="max-h-[200px] overflow-auto">
                    {(() => {
                      const filteredScreens = filterScreens(navSearchTerm);
                      if (screensLoading) {
                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                      }
                      if (filteredScreens.length === 0) {
                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                      }
                      return filteredScreens.map((screen, index) => (
                        <div
                          key={`navigate-screen-${screen.id}-${index}`}
                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                          onClick={() => {
                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                            setNavScreenOpen(false);
                            setNavSearchTerm("");
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{screen.name}</span>
                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                          </div>
                        </div>
                      ));
                    })()}
                  </div>
                </div>
              </PopoverContent>
            </Popover>
            <p className="mt-1 text-xs text-muted-foreground">
              선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
            </p>
          </div>

          <div>
            <Label htmlFor="target-url">또는 직접 URL 입력 (고급)</Label>
            <Input
              id="target-url"
              placeholder="예: /admin/users 또는 https://example.com"
              value={localInputs.targetUrl}
              onChange={(e) => {
                const newValue = e.target.value;
                setLocalInputs((prev) => ({ ...prev, targetUrl: newValue }));
                onUpdateProperty("componentConfig.action.targetUrl", newValue);
              }}
              className="h-6 w-full px-2 py-0 text-xs"
              style={{ fontSize: "12px" }}
            />
            <p className="mt-1 text-xs text-muted-foreground">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
          </div>
        </div>
      )}

      {/* 엑셀 다운로드 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "excel_download" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
          <h4 className="text-sm font-medium text-foreground">엑셀 다운로드 설정</h4>

          <div>
            <Label htmlFor="excel-filename">파일명 (선택사항)</Label>
            <Input
              id="excel-filename"
              placeholder="예: 데이터목록 (기본값: export)"
              value={config.action?.excelFileName || ""}
              onChange={(e) => onUpdateProperty("componentConfig.action.excelFileName", e.target.value)}
              className="h-8 text-xs"
            />
            <p className="mt-1 text-xs text-muted-foreground">확장자(.xlsx)는 자동으로 추가됩니다</p>
          </div>

          <div>
            <Label htmlFor="excel-sheetname">시트명 (선택사항)</Label>
            <Input
              id="excel-sheetname"
              placeholder="예: Sheet1 (기본값)"
              value={config.action?.excelSheetName || ""}
              onChange={(e) => onUpdateProperty("componentConfig.action.excelSheetName", e.target.value)}
              className="h-8 text-xs"
            />
          </div>

          <div className="flex items-center justify-between">
            <Label htmlFor="excel-include-headers">헤더 포함</Label>
            <Switch
              id="excel-include-headers"
              checked={config.action?.excelIncludeHeaders !== false}
              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.excelIncludeHeaders", checked)}
            />
          </div>
        </div>
      )}

      {/* 엑셀 업로드 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "excel_upload" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
          <h4 className="text-sm font-medium text-foreground">📤 엑셀 업로드 설정</h4>

          <div>
            <Label htmlFor="excel-upload-mode">업로드 모드</Label>
            <Select
              value={config.action?.excelUploadMode || "insert"}
              onValueChange={(value) => onUpdateProperty("componentConfig.action.excelUploadMode", value)}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="insert">신규 삽입 (INSERT)</SelectItem>
                <SelectItem value="update">기존 수정 (UPDATE)</SelectItem>
                <SelectItem value="upsert">삽입/수정 (UPSERT)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {(config.action?.excelUploadMode === "update" || config.action?.excelUploadMode === "upsert") && (
            <div>
              <Label htmlFor="excel-key-column">
                키 컬럼명 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="excel-key-column"
                placeholder="예: id, code"
                value={config.action?.excelKeyColumn || ""}
                onChange={(e) => onUpdateProperty("componentConfig.action.excelKeyColumn", e.target.value)}
                className="h-8 text-xs"
              />
              <p className="mt-1 text-xs text-muted-foreground">UPDATE/UPSERT 시 기준이 되는 컬럼명</p>
            </div>
          )}
        </div>
      )}

      {/* 바코드 스캔 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "barcode_scan" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
          <h4 className="text-sm font-medium text-foreground">📷 바코드 스캔 설정</h4>

          <div>
            <Label htmlFor="barcode-target-field">
              대상 필드명 <span className="text-destructive">*</span>
            </Label>
            <Input
              id="barcode-target-field"
              placeholder="예: barcode, qr_code"
              value={config.action?.barcodeTargetField || ""}
              onChange={(e) => onUpdateProperty("componentConfig.action.barcodeTargetField", e.target.value)}
              className="h-8 text-xs"
            />
            <p className="mt-1 text-xs text-muted-foreground">스캔 결과가 입력될 폼 필드명</p>
          </div>

          <div>
            <Label htmlFor="barcode-format">바코드 형식</Label>
            <Select
              value={config.action?.barcodeFormat || "all"}
              onValueChange={(value) => onUpdateProperty("componentConfig.action.barcodeFormat", value)}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">모든 형식</SelectItem>
                <SelectItem value="1d">1D 바코드만 (CODE128, EAN13 등)</SelectItem>
                <SelectItem value="2d">2D 바코드만 (QR코드, DataMatrix 등)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center justify-between">
            <Label htmlFor="barcode-auto-submit">스캔 후 자동 저장</Label>
            <Switch
              id="barcode-auto-submit"
              checked={config.action?.barcodeAutoSubmit === true}
              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.barcodeAutoSubmit", checked)}
            />
          </div>
        </div>
      )}

      {/* 코드 병합 액션 설정 */}
      {(component.componentConfig?.action?.type || "save") === "code_merge" && (
        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
          <h4 className="text-sm font-medium text-foreground">🔀 코드 병합 설정</h4>

          <div>
            <Label htmlFor="merge-column-name">
              병합할 컬럼명 <span className="text-destructive">*</span>
            </Label>
            <Input
              id="merge-column-name"
              placeholder="예: item_code, product_id"
              value={config.action?.mergeColumnName || ""}
              onChange={(e) => onUpdateProperty("componentConfig.action.mergeColumnName", e.target.value)}
              className="h-8 text-xs"
            />
            <p className="mt-1 text-xs text-muted-foreground">
              병합할 컬럼명 (예: item_code). 이 컬럼이 있는 모든 테이블에 병합이 적용됩니다.
            </p>
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <Label htmlFor="merge-show-preview">병합 전 미리보기</Label>
              <p className="text-xs text-muted-foreground">영향받을 테이블과 행 수를 미리 확인합니다</p>
            </div>
            <Switch
              id="merge-show-preview"
              checked={config.action?.mergeShowPreview !== false}
              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.mergeShowPreview", checked)}
            />
          </div>

          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
            <p className="text-xs text-blue-900 dark:text-blue-100">
              <strong>사용 방법:</strong>
              <br />
              1. 테이블에서 병합할 두 개의 행을 선택합니다
              <br />
              2. 이 버튼을 클릭하면 병합 방향을 선택할 수 있습니다
              <br />
              3. 데이터는 삭제되지 않고, 컬럼 값만 변경됩니다
            </p>
          </div>
        </div>
      )}

      {/* 제어 기능 섹션 */}
      <div className="mt-8 border-t border-border pt-6">
        <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
      </div>

      {/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
      {hasFlowWidget && (
        <div className="mt-8 border-t border-border pt-6">
          <FlowVisibilityConfigPanel
            component={component}
            allComponents={allComponents}
            onUpdateProperty={onUpdateProperty}
          />
        </div>
      )}
    </div>
  );
};