ERP-node/frontend/components/screen/InteractiveScreenViewer.tsx

"use client";

import React, { useState, useCallback, useEffect, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { CalendarIcon, File, Upload, X, Loader2 } from "lucide-react";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import { useAuth } from "@/hooks/useAuth";
import { uploadFilesAndCreateData } from "@/lib/api/file";
import { toast } from "sonner";
import { useCascadingDropdown } from "@/hooks/useCascadingDropdown";
import { CascadingDropdownConfig } from "@/types/screen-management";
import {
  ComponentData,
  WidgetComponent,
  DataTableComponent,
  FileComponent,
  TextTypeConfig,
  NumberTypeConfig,
  DateTypeConfig,
  SelectTypeConfig,
  RadioTypeConfig,
  CheckboxTypeConfig,
  TextareaTypeConfig,
  FileTypeConfig,
  CodeTypeConfig,
  EntityTypeConfig,
  ButtonTypeConfig,
} from "@/types";
import { InteractiveDataTable } from "./InteractiveDataTable";
import { FileUpload } from "./widgets/FileUpload";
import { dynamicFormApi, DynamicFormData } from "@/lib/api/dynamicForm";
import { useParams } from "next/navigation";
import { screenApi, tableTypeApi } from "@/lib/api/screen";
import { DynamicWebTypeRenderer } from "@/lib/registry/DynamicWebTypeRenderer";
import { enhancedFormService } from "@/lib/services/enhancedFormService";
import { FormValidationIndicator } from "@/components/common/FormValidationIndicator";
import { useFormValidation } from "@/hooks/useFormValidation";
import { UnifiedColumnInfo as ColumnInfo } from "@/types";
import { isFileComponent } from "@/lib/utils/componentTypeUtils";
import { buildGridClasses } from "@/lib/constants/columnSpans";
import { cn } from "@/lib/utils";
import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
import { useMultiLang } from "@/hooks/useMultiLang";
import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
import { TableOptionsToolbar } from "./table-options/TableOptionsToolbar";
import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
import { ActiveTabProvider } from "@/contexts/ActiveTabContext";

/**
 * 🔗 연쇄 드롭다운 래퍼 컴포넌트
 * InteractiveScreenViewer 내에서 사용
 */
interface CascadingDropdownWrapperProps {
  /** 직접 설정 방식 */
  config?: CascadingDropdownConfig;
  /** 공통 관리 방식 (관계 코드) */
  relationCode?: string;
  /** 부모 필드명 (relationCode 사용 시 필요) */
  parentFieldName?: string;
  parentValue?: string | number | null;
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  required?: boolean;
}

const CascadingDropdownWrapper: React.FC<CascadingDropdownWrapperProps> = ({
  config,
  relationCode,
  parentFieldName,
  parentValue,
  value,
  onChange,
  placeholder,
  disabled,
  required,
}) => {
  const { options, loading, error, relationConfig } = useCascadingDropdown({
    config,
    relationCode,
    parentValue,
  });

  // 실제 사용할 설정 (직접 설정 또는 API에서 가져온 설정)
  const effectiveConfig = config || relationConfig;

  // 부모 값이 없을 때 메시지
  const getPlaceholder = () => {
    if (!parentValue) {
      return effectiveConfig?.emptyParentMessage || "상위 항목을 먼저 선택하세요";
    }
    if (loading) {
      return effectiveConfig?.loadingMessage || "로딩 중...";
    }
    if (options.length === 0) {
      return effectiveConfig?.noOptionsMessage || "선택 가능한 항목이 없습니다";
    }
    return placeholder || "선택하세요";
  };

  const isDisabled = disabled || !parentValue || loading;

  return (
    <Select value={value || ""} onValueChange={(newValue) => onChange?.(newValue)} disabled={isDisabled}>
      <SelectTrigger className="h-full w-full">
        {loading ? (
          <div className="flex items-center gap-2">
            <Loader2 className="h-4 w-4 animate-spin" />
            <span className="text-muted-foreground text-sm">로딩 중...</span>
          </div>
        ) : (
          <SelectValue placeholder={getPlaceholder()} />
        )}
      </SelectTrigger>
      <SelectContent>
        {options.length === 0 ? (
          <div className="text-muted-foreground px-2 py-4 text-center text-sm">
            {!parentValue
              ? config.emptyParentMessage || "상위 항목을 먼저 선택하세요"
              : config.noOptionsMessage || "선택 가능한 항목이 없습니다"}
          </div>
        ) : (
          options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))
        )}
      </SelectContent>
    </Select>
  );
};

interface InteractiveScreenViewerProps {
  component: ComponentData;
  allComponents: ComponentData[];
  formData?: Record<string, any>;
  onFormDataChange?: (fieldName: string, value: any) => void;
  hideLabel?: boolean;
  screenInfo?: {
    id: number;
    tableName?: string;
  };
  menuObjid?: number; // 🆕 메뉴 OBJID (코드 스코프용)
  // 새로운 검증 관련 옵션들
  enableEnhancedValidation?: boolean;
  tableColumns?: ColumnInfo[];
  showValidationPanel?: boolean;
  validationOptions?: {
    enableRealTimeValidation?: boolean;
    validationDelay?: number;
    enableAutoSave?: boolean;
    showToastMessages?: boolean;
  };
}

export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
  component,
  allComponents,
  formData: externalFormData,
  onFormDataChange,
  hideLabel = false,
  screenInfo,
  menuObjid, // 🆕 메뉴 OBJID
  enableEnhancedValidation = false,
  tableColumns = [],
  showValidationPanel = false,
  validationOptions = {},
}) => {
  // component가 없으면 빈 div 반환
  if (!component) {
    console.warn("⚠️ InteractiveScreenViewer: component가 undefined입니다.");
    return <div className="h-full w-full" />;
  }

  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
  const { userName, user } = useAuth(); // 현재 로그인한 사용자명과 사용자 정보 가져오기
  const { userLang } = useMultiLang(); // 다국어 훅
  const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
  const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});

  // 다국어 번역 상태 (langKeyId가 있는 컴포넌트들의 번역 텍스트)
  const [translations, setTranslations] = useState<Record<string, string>>({});

  // 다국어 키 수집 및 번역 로드
  useEffect(() => {
    const loadTranslations = async () => {
      // 모든 컴포넌트에서 langKey 수집
      const langKeysToFetch: string[] = [];

      const collectLangKeys = (comps: ComponentData[]) => {
        comps.forEach((comp) => {
          // 컴포넌트 라벨의 langKey
          if ((comp as any).langKey) {
            langKeysToFetch.push((comp as any).langKey);
          }
          // componentConfig 내의 langKey (버튼 텍스트 등)
          if ((comp as any).componentConfig?.langKey) {
            langKeysToFetch.push((comp as any).componentConfig.langKey);
          }
          // 자식 컴포넌트 재귀 처리
          if ((comp as any).children) {
            collectLangKeys((comp as any).children);
          }
        });
      };

      collectLangKeys(allComponents);

      // langKey가 있으면 배치 조회
      if (langKeysToFetch.length > 0 && userLang) {
        try {
          const { apiClient } = await import("@/lib/api/client");
          const response = await apiClient.post(
            "/multilang/batch",
            {
              langKeys: [...new Set(langKeysToFetch)], // 중복 제거
            },
            {
              params: {
                userLang,
                companyCode: user?.companyCode || "*",
              },
            },
          );

          if (response.data?.success && response.data?.data) {
            setTranslations(response.data.data);
          }
        } catch (error) {
          console.error("다국어 번역 로드 실패:", error);
        }
      }
    };

    loadTranslations();
  }, [allComponents, userLang, user?.companyCode]);

  // 팝업 화면 상태
  const [popupScreen, setPopupScreen] = useState<{
    screenId: number;
    title: string;
    size: string;
  } | null>(null);

  // 팝업 화면 레이아웃 상태
  const [popupLayout, setPopupLayout] = useState<ComponentData[]>([]);
  const [popupLoading, setPopupLoading] = useState(false);
  const [popupScreenResolution, setPopupScreenResolution] = useState<{ width: number; height: number } | null>(null);
  const [popupScreenInfo, setPopupScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);

  // 팝업 전용 formData 상태
  const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});

  // 통합된 폼 데이터
  const finalFormData = { ...localFormData, ...externalFormData };

  // 개선된 검증 시스템 (선택적 활성화)
  const enhancedValidation =
    enableEnhancedValidation && screenInfo && tableColumns.length > 0
      ? useFormValidation(
          finalFormData,
          allComponents.filter((c) => c.type === "widget") as WidgetComponent[],
          tableColumns,
          {
            id: screenInfo.id,
            screenName: screenInfo.tableName || "unknown",
            tableName: screenInfo.tableName,
            screenResolution: { width: 800, height: 600 },
            gridSettings: { size: 20, color: "#e0e0e0", opacity: 0.5 },
            description: "동적 화면",
          },
          {
            enableRealTimeValidation: true,
            validationDelay: 300,
            enableAutoSave: false,
            showToastMessages: true,
            ...validationOptions,
          },
        )
      : null;

  // 자동값 생성 함수
  const generateAutoValue = useCallback(
    async (autoValueType: string, ruleId?: string): Promise<string> => {
      const now = new Date();
      switch (autoValueType) {
        case "current_datetime":
          return now.toISOString().slice(0, 19).replace("T", " "); // YYYY-MM-DD HH:mm:ss
        case "current_date":
          return now.toISOString().slice(0, 10); // YYYY-MM-DD
        case "current_time":
          return now.toTimeString().slice(0, 8); // HH:mm:ss
        case "current_user":
          // 실제 접속중인 사용자명 사용
          return userName || "사용자"; // 사용자명이 없으면 기본값
        case "uuid":
          return crypto.randomUUID();
        case "sequence":
          return `SEQ_${Date.now()}`;
        case "numbering_rule":
          // 채번 규칙 사용
          if (ruleId) {
            try {
              const { generateNumberingCode } = await import("@/lib/api/numberingRule");
              const response = await generateNumberingCode(ruleId);
              if (response.success && response.data) {
                return response.data.generatedCode;
              }
            } catch (error) {
              console.error("채번 규칙 코드 생성 실패:", error);
            }
          }
          return "";
        default:
          return "";
      }
    },
    [userName],
  ); // userName 의존성 추가

  // 팝업 화면 레이아웃 로드
  React.useEffect(() => {
    if (popupScreen) {
      const loadPopupLayout = async () => {
        try {
          setPopupLoading(true);
          // console.log("🔍 팝업 화면 로드 시작:", popupScreen);

          // 화면 레이아웃과 화면 정보를 병렬로 가져오기
          const [layout, screen] = await Promise.all([
            screenApi.getLayout(popupScreen.screenId),
            screenApi.getScreen(popupScreen.screenId),
          ]);

          console.log("📊 팝업 화면 로드 완료:", {
            componentsCount: layout.components?.length || 0,
            screenInfo: {
              screenId: screen.screenId,
              tableName: screen.tableName,
            },
            popupFormData: {},
          });

          setPopupLayout(layout.components || []);
          setPopupScreenResolution(layout.screenResolution || null);
          setPopupScreenInfo({
            id: popupScreen.screenId,
            tableName: screen.tableName,
          });

          // 팝업 formData 초기화
          setPopupFormData({});
        } catch (error) {
          // console.error("❌ 팝업 화면 로드 실패:", error);
          setPopupLayout([]);
          setPopupScreenInfo(null);
        } finally {
          setPopupLoading(false);
        }
      };

      loadPopupLayout();
    }
  }, [popupScreen]);

  // 실제 사용할 폼 데이터 (외부와 로컬 데이터 병합)
  const formData = { ...localFormData, ...externalFormData };
  console.log("🔄 formData 구성:", {
    external: externalFormData,
    local: localFormData,
    merged: formData,
    hasExternalCallback: !!onFormDataChange,
  });

  // 폼 데이터 업데이트
  const updateFormData = (fieldName: string, value: any) => {
    // 프리뷰 모드에서는 데이터 업데이트 하지 않음
    if (isPreviewMode) {
      return;
    }

    // console.log(`🔄 updateFormData: ${fieldName} = "${value}" (외부콜백: ${!!onFormDataChange})`);

    // 항상 로컬 상태도 업데이트
    setLocalFormData((prev) => ({
      ...prev,
      [fieldName]: value,
    }));
    // console.log(`💾 로컬 상태 업데이트: ${fieldName} = "${value}"`);

    // 외부 콜백이 있는 경우에도 전달 (개별 필드 단위로)
    if (onFormDataChange) {
      onFormDataChange(fieldName, value);
      // console.log(`📤 외부 콜백으로 전달: ${fieldName} = "${value}"`);
    }
  };

  // 자동입력 필드들의 값을 formData에 초기 설정
  React.useEffect(() => {
    // console.log("🚀 자동입력 초기화 useEffect 실행 - allComponents 개수:", allComponents.length);
    const initAutoInputFields = async () => {
      // console.log("🔧 initAutoInputFields 실행 시작");
      for (const comp of allComponents) {
        // 🆕 type: "component" 또는 type: "widget" 모두 처리
        if (comp.type === "widget" || comp.type === "component") {
          const widget = comp as WidgetComponent;
          const fieldName = widget.columnName || widget.id;

          // 🆕 autoFill 처리 (테이블 조회 기반 자동 입력)
          if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
            const autoFillConfig = widget.autoFill || (comp as any).autoFill;
            const currentValue = formData[fieldName];
            if (currentValue === undefined || currentValue === "") {
              const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;

              // 사용자 정보에서 필터 값 가져오기
              const userValue = user?.[userField];

              if (userValue && sourceTable && filterColumn && displayColumn) {
                try {
                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);

                  updateFormData(fieldName, result.value);
                } catch (error) {
                  console.error(`autoFill 조회 실패: ${fieldName}`, error);
                }
              }
            }
            continue; // autoFill이 활성화되면 일반 자동입력은 건너뜀
          }

          // 기존 widget 타입 전용 로직은 widget인 경우만
          if (comp.type !== "widget") continue;

          // 텍스트 타입 위젯의 자동입력 처리 (기존 로직)
          if (
            (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
            widget.webTypeConfig
          ) {
            const config = widget.webTypeConfig as TextTypeConfig;
            const isAutoInput = config?.autoInput || false;

            if (isAutoInput && config?.autoValueType) {
              // 이미 값이 있으면 덮어쓰지 않음
              const currentValue = formData[fieldName];
              console.log(`🔍 자동입력 필드 체크: ${fieldName}`, {
                currentValue,
                isEmpty: currentValue === undefined || currentValue === "",
                isAutoInput,
                autoValueType: config.autoValueType,
              });

              if (currentValue === undefined || currentValue === "") {
                const autoValue =
                  config.autoValueType === "custom"
                    ? config.customValue || ""
                    : generateAutoValue(config.autoValueType);

                console.log("🔄 자동입력 필드 초기화:", {
                  fieldName,
                  autoValueType: config.autoValueType,
                  autoValue,
                });

                updateFormData(fieldName, autoValue);
              } else {
                // console.log(`⏭️ 자동입력 건너뜀 (값 있음): ${fieldName} = "${currentValue}"`);
              }
            }
          }
        }
      }
    };

    // 초기 로드 시 자동입력 필드들 설정
    initAutoInputFields();
  }, [allComponents, generateAutoValue, user]); // formData는 의존성에서 제외 (무한 루프 방지)

  // 날짜 값 업데이트
  const updateDateValue = (fieldName: string, date: Date | undefined) => {
    setDateValues((prev) => ({
      ...prev,
      [fieldName]: date,
    }));
    updateFormData(fieldName, date ? format(date, "yyyy-MM-dd") : "");
  };

  // 실제 사용 가능한 위젯 렌더링
  const renderInteractiveWidget = (comp: ComponentData) => {
    console.log("🎯 renderInteractiveWidget 호출:", {
      type: comp.type,
      id: comp.id,
      componentId: (comp as any).componentId,
      hasComponentConfig: !!(comp as any).componentConfig,
      componentConfig: (comp as any).componentConfig,
    });

    // 데이터 테이블 컴포넌트 처리
    if (comp.type === "datatable") {
      return (
        <InteractiveDataTable
          component={comp as DataTableComponent}
          className="h-full w-full"
          style={{
            width: "100%",
            height: "100%",
          }}
          onRefresh={() => {
            // 테이블 내부에서 loadData 호출하므로 여기서는 빈 함수
            console.log("🔄 InteractiveDataTable 새로고침 트리거됨");
          }}
        />
      );
    }

    // 플로우 위젯 컴포넌트 처리
    if (comp.type === "flow" || (comp.type === "component" && (comp as any).componentConfig?.type === "flow-widget")) {
      const FlowWidget = require("@/components/screen/widgets/FlowWidget").FlowWidget;
      // componentConfig에서 flowId 추출
      const flowConfig = (comp as any).componentConfig || {};

      console.log("🔍 InteractiveScreenViewer 플로우 위젯 변환:", {
        compType: comp.type,
        hasComponentConfig: !!(comp as any).componentConfig,
        flowConfig,
        flowConfigFlowId: flowConfig.flowId,
        finalFlowId: flowConfig.flowId,
      });

      const flowComponent = {
        ...comp,
        type: "flow" as const,
        flowId: flowConfig.flowId,
        flowName: flowConfig.flowName,
        showStepCount: flowConfig.showStepCount !== false,
        allowDataMove: flowConfig.allowDataMove || false,
        displayMode: flowConfig.displayMode || "horizontal",
      };

      console.log("🔍 InteractiveScreenViewer 최종 flowComponent:", flowComponent);

      return (
        <div className="w-full">
          <FlowWidget component={flowComponent as any} />
        </div>
      );
    }

    // 탭 컴포넌트 처리
    const componentType = (comp as any).componentType || (comp as any).componentId;
    if (comp.type === "tabs" || (comp.type === "component" && componentType === "tabs-widget")) {
      const TabsWidget = require("@/components/screen/widgets/TabsWidget").TabsWidget;

      // componentConfig에서 탭 정보 추출
      const tabsConfig = comp.componentConfig || {};
      const tabsComponent = {
        ...comp,
        type: "tabs" as const,
        tabs: tabsConfig.tabs || [],
        defaultTab: tabsConfig.defaultTab,
        orientation: tabsConfig.orientation || "horizontal",
        variant: tabsConfig.variant || "default",
        allowCloseable: tabsConfig.allowCloseable || false,
        persistSelection: tabsConfig.persistSelection || false,
      };

      console.log("🔍 탭 컴포넌트 렌더링:", {
        originalType: comp.type,
        componentType,
        componentId: (comp as any).componentId,
        tabs: tabsComponent.tabs,
        tabsConfig,
      });

      return (
        <div className="h-full w-full">
          <TabsWidget
            component={tabsComponent as any}
            menuObjid={menuObjid} // 🆕 부모의 menuObjid 전달
          />
        </div>
      );
    }

    // 🆕 렉 구조 컴포넌트 처리
    if (comp.type === "component" && componentType === "rack-structure") {
      const { RackStructureComponent } = require("@/lib/registry/components/rack-structure/RackStructureComponent");
      const componentConfig = (comp as any).componentConfig || {};
      // config가 중첩되어 있을 수 있음: componentConfig.config 또는 componentConfig 직접
      const rackConfig = componentConfig.config || componentConfig;

      console.log("🏗️ 렉 구조 컴포넌트 렌더링:", {
        componentType,
        componentConfig,
        rackConfig,
        fieldMapping: rackConfig.fieldMapping,
        formData,
      });

      return (
        <div className="h-full w-full overflow-auto">
          <RackStructureComponent
            config={rackConfig}
            formData={formData}
            tableName={tableName}
            onChange={(locations: any[]) => {
              console.log("📦 렉 구조 위치 데이터 변경:", locations.length, "개");
              // 컴포넌트의 columnName을 키로 사용
              const fieldKey = (comp as any).columnName || "_rackStructureLocations";
              updateFormData(fieldKey, locations);
            }}
            isPreview={false}
          />
        </div>
      );
    }

    const { widgetType, label: originalLabel, placeholder, required, readonly, columnName } = comp;
    const fieldName = columnName || comp.id;
    const currentValue = formData[fieldName] || "";

    // 🆕 엔티티 조인 컬럼은 읽기 전용으로 처리
    const isEntityJoin = (comp as any).isEntityJoin === true;
    const isReadonly = readonly || isEntityJoin;

    // 다국어 라벨 적용 (langKey가 있으면 번역 텍스트 사용)
    const compLangKey = (comp as any).langKey;
    const label = compLangKey && translations[compLangKey] ? translations[compLangKey] : originalLabel;

    // 스타일 적용
    const applyStyles = (element: React.ReactElement) => {
      if (!comp.style) return element;

      // ✅ 격자 시스템 잔재 제거: style.width, style.height는 무시
      // size.width, size.height가 부모 컨테이너에서 적용되므로
      const { width, height, ...styleWithoutSize } = comp.style;

      return React.cloneElement(element, {
        style: {
          ...element.props.style, // 기존 스타일 유지
          ...styleWithoutSize, // width/height 제외한 스타일만 적용
          boxSizing: "border-box",
        },
      });
    };

    switch (widgetType) {
      case "text":
      case "email":
      case "tel": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as TextTypeConfig | undefined;

        // 자동입력 관련 처리
        const isAutoInput = config?.autoInput || false;
        const autoValue =
          isAutoInput && config?.autoValueType
            ? config.autoValueType === "custom"
              ? config.customValue || ""
              : generateAutoValue(config.autoValueType)
            : "";

        // 기본값 또는 자동값 설정
        const displayValue = isAutoInput ? autoValue : currentValue || config?.defaultValue || "";

        console.log("📝 InteractiveScreenViewer - Text 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            format: config?.format,
            minLength: config?.minLength,
            maxLength: config?.maxLength,
            pattern: config?.pattern,
            placeholder: config?.placeholder,
            defaultValue: config?.defaultValue,
            autoInput: isAutoInput,
            autoValueType: config?.autoValueType,
            autoValue,
            displayValue,
          },
        });

        // 형식별 패턴 생성
        const getPatternByFormat = (format: string) => {
          switch (format) {
            case "korean":
              return "[가-힣\\s]*";
            case "english":
              return "[a-zA-Z\\s]*";
            case "alphanumeric":
              return "[a-zA-Z0-9]*";
            case "numeric":
              return "[0-9]*";
            case "email":
              return "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}";
            case "phone":
              return "\\d{3}-\\d{4}-\\d{4}";
            case "url":
              return "https?://[\\w\\-]+(\\.[\\w\\-]+)+([\\w\\-\\.,@?^=%&:/~\\+#]*[\\w\\-\\@?^=%&/~\\+#])?";
            default:
              return config?.pattern || undefined;
          }
        };

        // 입력 검증 함수
        const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
          const value = e.target.value;
          // console.log(`📝 입력 변경: ${fieldName} = "${value}"`);

          // 형식별 실시간 검증
          if (config?.format && config.format !== "none") {
            const pattern = getPatternByFormat(config.format);
            if (pattern) {
              const regex = new RegExp(`^${pattern}$`);
              if (value && !regex.test(value)) {
                // console.log(`❌ 형식 검증 실패: ${fieldName} = "${value}"`);
                return; // 유효하지 않은 입력 차단
              }
            }
          }

          // 길이 제한 검증
          if (config?.maxLength && value.length > config.maxLength) {
            // console.log(`❌ 길이 제한 초과: ${fieldName} = "${value}" (최대: ${config.maxLength})`);
            return; // 최대 길이 초과 차단
          }

          // console.log(`✅ updateFormData 호출: ${fieldName} = "${value}"`);
          updateFormData(fieldName, value);
        };

        const finalPlaceholder = config?.placeholder || placeholder || "입력하세요...";
        const inputType = widgetType === "email" ? "email" : widgetType === "tel" ? "tel" : "text";

        return applyStyles(
          <Input
            type={inputType}
            placeholder={isAutoInput ? `자동입력: ${config?.autoValueType}` : finalPlaceholder}
            value={displayValue}
            onChange={isAutoInput ? undefined : handleInputChange}
            disabled={isReadonly || isAutoInput}
            readOnly={isAutoInput}
            required={required}
            minLength={config?.minLength}
            maxLength={config?.maxLength}
            pattern={getPatternByFormat(config?.format || "none")}
            className={`w-full ${isAutoInput ? "bg-muted text-muted-foreground" : ""}`}
          />,
        );
      }

      case "number":
      case "decimal": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as NumberTypeConfig | undefined;

        console.log("🔢 InteractiveScreenViewer - Number 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            format: config?.format,
            min: config?.min,
            max: config?.max,
            step: config?.step,
            decimalPlaces: config?.decimalPlaces,
            thousandSeparator: config?.thousandSeparator,
            prefix: config?.prefix,
            suffix: config?.suffix,
          },
        });

        const step = config?.step || (widgetType === "decimal" ? 0.01 : 1);
        const finalPlaceholder = config?.placeholder || placeholder || "숫자를 입력하세요...";

        return applyStyles(
          <Input
            type="number"
            placeholder={finalPlaceholder}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.valueAsNumber || 0)}
            disabled={isReadonly}
            required={required}
            min={config?.min}
            max={config?.max}
            step={step}
            className="w-full"
            style={{ height: "100%" }}
          />,
        );
      }

      case "textarea":
      case "text_area": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as TextareaTypeConfig | undefined;

        console.log("📄 InteractiveScreenViewer - Textarea 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            rows: config?.rows,
            maxLength: config?.maxLength,
            minLength: config?.minLength,
            placeholder: config?.placeholder,
            defaultValue: config?.defaultValue,
            resizable: config?.resizable,
            wordWrap: config?.wordWrap,
          },
        });

        const finalPlaceholder = config?.placeholder || placeholder || "내용을 입력하세요...";
        const rows = config?.rows || 3;

        return applyStyles(
          <Textarea
            placeholder={finalPlaceholder}
            value={currentValue || config?.defaultValue || ""}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={isReadonly}
            required={required}
            minLength={config?.minLength}
            maxLength={config?.maxLength}
            rows={rows}
            className={`h-full w-full ${config?.resizable === false ? "resize-none" : ""}`}
            style={{
              whiteSpace: config?.wordWrap === false ? "nowrap" : "normal",
            }}
          />,
        );
      }

      case "select":
      case "dropdown": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as SelectTypeConfig | undefined;

        console.log("📋 InteractiveScreenViewer - Select 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            options: config?.options,
            multiple: config?.multiple,
            searchable: config?.searchable,
            placeholder: config?.placeholder,
            defaultValue: config?.defaultValue,
            cascading: config?.cascading,
          },
        });

        const finalPlaceholder = config?.placeholder || placeholder || "선택하세요...";

        // 🆕 연쇄 드롭다운 처리 (방법 1: 관계 코드 방식 - 권장)
        if (config?.cascadingRelationCode && config?.cascadingParentField) {
          const parentFieldValue = formData[config.cascadingParentField];

          console.log("🔗 연쇄 드롭다운 (관계코드 방식):", {
            relationCode: config.cascadingRelationCode,
            parentField: config.cascadingParentField,
            parentValue: parentFieldValue,
          });

          return applyStyles(
            <CascadingDropdownWrapper
              relationCode={config.cascadingRelationCode}
              parentFieldName={config.cascadingParentField}
              parentValue={parentFieldValue}
              value={currentValue}
              onChange={(value) => updateFormData(fieldName, value)}
              placeholder={finalPlaceholder}
              disabled={isReadonly}
              required={required}
            />,
          );
        }

        // 🔄 연쇄 드롭다운 처리 (방법 2: 직접 설정 방식 - 레거시)
        if (config?.cascading?.enabled) {
          const cascadingConfig = config.cascading;
          const parentValue = formData[cascadingConfig.parentField];

          return applyStyles(
            <CascadingDropdownWrapper
              config={cascadingConfig}
              parentValue={parentValue}
              value={currentValue}
              onChange={(value) => updateFormData(fieldName, value)}
              placeholder={finalPlaceholder}
              disabled={isReadonly}
              required={required}
            />,
          );
        }

        // 일반 Select
        const options = config?.options || [
          { label: "옵션 1", value: "option1" },
          { label: "옵션 2", value: "option2" },
          { label: "옵션 3", value: "option3" },
        ];

        return applyStyles(
          <Select
            value={currentValue || config?.defaultValue || ""}
            onValueChange={(value) => updateFormData(fieldName, value)}
            disabled={isReadonly}
            required={required}
          >
            <SelectTrigger className="h-full w-full">
              <SelectValue placeholder={finalPlaceholder} />
            </SelectTrigger>
            <SelectContent>
              {options.map((option, index) => (
                <SelectItem key={index} value={option.value} disabled={option.disabled}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>,
        );
      }

      case "checkbox":
      case "boolean": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as CheckboxTypeConfig | undefined;

        console.log("☑️ InteractiveScreenViewer - Checkbox 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            defaultChecked: config?.defaultChecked,
            labelPosition: config?.labelPosition,
            checkboxText: config?.checkboxText,
            trueValue: config?.trueValue,
            falseValue: config?.falseValue,
          },
        });

        const isChecked = currentValue === true || currentValue === "true" || config?.defaultChecked;
        const checkboxText = config?.checkboxText || label || "확인";
        const labelPosition = config?.labelPosition || "right";

        return applyStyles(
          <div
            className={`flex h-full w-full items-center space-x-2 ${labelPosition === "left" ? "flex-row-reverse" : ""}`}
          >
            <Checkbox
              id={fieldName}
              checked={isChecked}
              onCheckedChange={(checked) => updateFormData(fieldName, checked)}
              disabled={isReadonly}
              required={required}
            />
            <label htmlFor={fieldName} className="text-sm">
              {checkboxText}
            </label>
          </div>,
        );
      }

      case "radio": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as RadioTypeConfig | undefined;

        console.log("🔘 InteractiveScreenViewer - Radio 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            options: config?.options,
            defaultValue: config?.defaultValue,
            layout: config?.layout,
            allowNone: config?.allowNone,
          },
        });

        const options = config?.options || [
          { label: "옵션 1", value: "option1" },
          { label: "옵션 2", value: "option2" },
          { label: "옵션 3", value: "option3" },
        ];

        const layout = config?.layout || "vertical";
        const selectedValue = currentValue || config?.defaultValue || "";

        return applyStyles(
          <div className={`h-full w-full ${layout === "horizontal" ? "flex flex-wrap gap-4" : "space-y-2"}`}>
            {config?.allowNone && (
              <div className="flex items-center space-x-2">
                <input
                  type="radio"
                  id={`${fieldName}_none`}
                  name={fieldName}
                  value=""
                  checked={selectedValue === ""}
                  onChange={(e) => updateFormData(fieldName, e.target.value)}
                  disabled={isReadonly}
                  required={required}
                  className="h-4 w-4"
                />
                <label htmlFor={`${fieldName}_none`} className="text-sm">
                  선택 안함
                </label>
              </div>
            )}
            {options.map((option, index) => (
              <div key={index} className="flex items-center space-x-2">
                <input
                  type="radio"
                  id={`${fieldName}_${index}`}
                  name={fieldName}
                  value={option.value}
                  checked={selectedValue === option.value}
                  onChange={(e) => updateFormData(fieldName, e.target.value)}
                  disabled={isReadonly || option.disabled}
                  required={required}
                  className="h-4 w-4"
                />
                <label htmlFor={`${fieldName}_${index}`} className="text-sm">
                  {option.label}
                </label>
              </div>
            ))}
          </div>,
        );
      }

      case "date": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as DateTypeConfig | undefined;

        console.log("📅 InteractiveScreenViewer - Date 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            format: config?.format,
            showTime: config?.showTime,
            defaultValue: config?.defaultValue,
            minDate: config?.minDate,
            maxDate: config?.maxDate,
          },
        });

        const shouldShowTime = config?.showTime || config?.format?.includes("HH:mm");
        const finalPlaceholder = config?.placeholder || placeholder || "날짜를 선택하세요";

        if (shouldShowTime) {
          // 시간 포함 날짜 입력
          return applyStyles(
            <Input
              type="datetime-local"
              placeholder={finalPlaceholder}
              value={currentValue || config?.defaultValue || ""}
              onChange={(e) => updateFormData(fieldName, e.target.value)}
              disabled={isReadonly}
              required={required}
              min={config?.minDate}
              max={config?.maxDate}
              className="w-full"
              style={{ height: "100%" }}
            />,
          );
        } else {
          // 날짜만 입력
          const dateValue = dateValues[fieldName];
          return applyStyles(
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  className="h-full w-full justify-start text-left font-normal"
                  disabled={isReadonly}
                >
                  <CalendarIcon className="mr-2 h-4 w-4" />
                  {dateValue ? format(dateValue, "PPP", { locale: ko }) : config?.defaultValue || finalPlaceholder}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0">
                <Calendar
                  mode="single"
                  selected={dateValue}
                  onSelect={(date) => updateDateValue(fieldName, date)}
                  initialFocus
                />
              </PopoverContent>
            </Popover>,
          );
        }
      }

      case "datetime": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as DateTypeConfig | undefined;

        console.log("🕐 InteractiveScreenViewer - DateTime 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            format: config?.format,
            defaultValue: config?.defaultValue,
            minDate: config?.minDate,
            maxDate: config?.maxDate,
          },
        });

        const finalPlaceholder = config?.placeholder || placeholder || "날짜와 시간을 입력하세요...";

        return applyStyles(
          <Input
            type="datetime-local"
            placeholder={finalPlaceholder}
            value={currentValue || config?.defaultValue || ""}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={isReadonly}
            required={required}
            min={config?.minDate}
            max={config?.maxDate}
            className="w-full"
            style={{ height: "100%" }}
          />,
        );
      }

      case "file": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as FileTypeConfig | undefined;

        // 현재 파일 값 가져오기
        const getCurrentValue = () => {
          const fieldName = widget.columnName || widget.id;
          return (externalFormData?.[fieldName] || localFormData[fieldName]) as any;
        };

        const currentValue = getCurrentValue();

        // 화면 ID 추출 (URL에서)
        const screenId =
          typeof window !== "undefined" && window.location.pathname.includes("/screens/")
            ? parseInt(window.location.pathname.split("/screens/")[1])
            : null;

        console.log("📁 InteractiveScreenViewer - File 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          currentValue,
          screenId,
          appliedSettings: {
            accept: config?.accept,
            multiple: config?.multiple,
            maxSize: config?.maxSize,
            preview: config?.preview,
          },
        });

        const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
          // 프리뷰 모드에서는 파일 업로드 차단
          if (isPreviewMode) {
            e.target.value = ""; // 파일 선택 취소
            return;
          }

          const files = e.target.files;
          const fieldName = widget.columnName || widget.id;

          // 파일 선택을 취소한 경우 (files가 null이거나 길이가 0)
          if (!files || files.length === 0) {
            // console.log("📁 파일 선택 취소됨 - 기존 파일 유지");

            // 현재 저장된 파일이 있는지 확인
            const currentStoredValue = externalFormData?.[fieldName] || localFormData[fieldName];
            if (currentStoredValue) {
              // console.log("📁 기존 파일 있음 - 유지:", currentStoredValue);
              // 기존 파일이 있으면 그대로 유지 (아무것도 하지 않음)
              return;
            } else {
              // console.log("📁 기존 파일 없음 - 빈 상태 유지");
              // 기존 파일이 없으면 빈 상태 유지
              return;
            }
          }

          // 파일 크기 검증
          if (config?.maxSize) {
            for (let i = 0; i < files.length; i++) {
              const file = files[i];
              if (file.size > config.maxSize * 1024 * 1024) {
                alert(`파일 크기가 ${config.maxSize}MB를 초과합니다: ${file.name}`);
                e.target.value = "";
                return;
              }
            }
          }

          // 실제 서버로 파일 업로드
          try {
            toast.loading(`${files.length}개 파일 업로드 중...`);

            const uploadResult = await uploadFilesAndCreateData(files);

            if (uploadResult.success) {
              // console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data);

              setLocalFormData((prev) => ({ ...prev, [fieldName]: uploadResult.data }));

              // 외부 폼 데이터 변경 콜백 호출
              if (onFormDataChange) {
                onFormDataChange(fieldName, uploadResult.data);
              }

              toast.success(uploadResult.message);
            } else {
              throw new Error("파일 업로드에 실패했습니다.");
            }
          } catch (error) {
            // console.error("파일 업로드 오류:", error);
            toast.error("파일 업로드에 실패했습니다.");

            // 파일 입력 초기화
            e.target.value = "";
            return;
          }
        };

        const clearFile = () => {
          const fieldName = widget.columnName || widget.id;
          setLocalFormData((prev) => ({ ...prev, [fieldName]: null }));

          // 외부 폼 데이터 변경 콜백 호출
          if (onFormDataChange) {
            onFormDataChange(fieldName, null);
          }

          // 파일 input 초기화
          const fileInput = document.querySelector(`input[type="file"][data-field="${fieldName}"]`) as HTMLInputElement;
          if (fileInput) {
            fileInput.value = "";
          }
        };

        const renderFilePreview = () => {
          if (!currentValue || !config?.preview) return null;

          // 새로운 JSON 구조에서 파일 정보 추출
          const fileData = currentValue.files || [];
          if (fileData.length === 0) return null;

          return (
            <div className="mt-2 space-y-2">
              <div className="text-foreground text-sm font-medium">업로드된 파일 ({fileData.length}개)</div>
              {fileData.map((fileInfo: any, index: number) => {
                const isImage = fileInfo.type?.startsWith("image/");

                return (
                  <div key={index} className="bg-muted flex items-center gap-2 rounded border p-2">
                    <div className="bg-muted/50 flex h-16 w-16 items-center justify-center rounded">
                      {isImage ? (
                        <div className="text-success text-xs font-medium">IMG</div>
                      ) : (
                        <File className="text-muted-foreground h-8 w-8" />
                      )}
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="text-foreground truncate text-sm font-medium">{fileInfo.name}</p>
                      <p className="text-muted-foreground text-xs">{(fileInfo.size / 1024 / 1024).toFixed(2)} MB</p>
                      <p className="text-muted-foreground text-xs">{fileInfo.type || "알 수 없는 형식"}</p>
                      <p className="text-muted-foreground/70 text-xs">
                        업로드: {new Date(fileInfo.uploadedAt).toLocaleString("ko-KR")}
                      </p>
                    </div>
                    <Button type="button" variant="ghost" size="sm" onClick={clearFile} className="h-8 w-8 p-0">
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                );
              })}
            </div>
          );
        };

        const fieldName = widget.columnName || widget.id;

        return applyStyles(
          <div className="w-full space-y-2">
            {/* 파일 선택 영역 */}
            <div className="relative">
              <input
                type="file"
                data-field={fieldName}
                onChange={handleFileChange}
                disabled={isReadonly}
                required={required}
                multiple={config?.multiple}
                accept={config?.accept}
                className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
                style={{ zIndex: 1 }}
              />
              <div
                className={cn(
                  "flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors",
                  currentValue && currentValue.files && currentValue.files.length > 0
                    ? "border-success/30 bg-success/10"
                    : "border-input bg-muted hover:border-input/80 hover:bg-muted/80",
                  readonly && "cursor-not-allowed opacity-50",
                  !readonly && "cursor-pointer",
                )}
              >
                <div className="space-y-2">
                  {currentValue && currentValue.files && currentValue.files.length > 0 ? (
                    <>
                      <div className="flex items-center justify-center">
                        <div className="bg-success/20 flex h-8 w-8 items-center justify-center rounded-full">
                          <svg className="text-success h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                          </svg>
                        </div>
                      </div>
                      <p className="text-success text-sm font-medium">
                        {currentValue.totalCount === 1 ? "파일 선택됨" : `${currentValue.totalCount}개 파일 선택됨`}
                      </p>
                      <p className="text-success/80 text-xs">
                        총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
                      </p>
                      <p className="text-success/80 text-xs">클릭하여 다른 파일 선택</p>
                    </>
                  ) : (
                    <>
                      <Upload className="text-muted-foreground mx-auto h-8 w-8" />
                      <p className="text-muted-foreground text-sm">
                        {config?.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
                      </p>
                      {(config?.accept || config?.maxSize) && (
                        <div className="text-muted-foreground space-y-1 text-xs">
                          {config.accept && <div>허용 형식: {config.accept}</div>}
                          {config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
                          {config.multiple && <div>다중 선택 가능</div>}
                        </div>
                      )}
                    </>
                  )}
                </div>
              </div>
            </div>

            {/* 파일 미리보기 */}
            {renderFilePreview()}
          </div>,
        );
      }

      case "code": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as CodeTypeConfig | undefined;

        console.log("🔍 [InteractiveScreenViewer] Code 위젯 렌더링:", {
          componentId: widget.id,
          columnName: widget.columnName,
          codeCategory: config?.codeCategory,
          menuObjid,
          hasMenuObjid: !!menuObjid,
        });

        // code 타입은 공통코드 선택박스로 처리
        // DynamicWebTypeRenderer를 사용하여 SelectBasicComponent 렌더링
        try {
          return applyStyles(
            <DynamicWebTypeRenderer
              webType="select"
              props={{
                component: widget,
                value: currentValue,
                onChange: (value: any) => updateFormData(fieldName, value),
                onFormDataChange: updateFormData,
                isInteractive: true,
                readonly: readonly,
                required: required,
                placeholder: config?.placeholder || "코드를 선택하세요...",
                className: "w-full h-full",
                menuObjid: menuObjid, // 🆕 메뉴 OBJID 전달
              }}
              config={{
                ...config,
                codeCategory: config?.codeCategory,
                isCodeType: true, // 코드 타입임을 명시
              }}
              onEvent={(event: string, data: any) => {
                // console.log(`Code widget event: ${event}`, data);
              }}
            />,
          );
        } catch (error) {
          // console.error("DynamicWebTypeRenderer 로딩 실패, 기본 Select 사용:", error);

          // 폴백: 기본 Select 컴포넌트 사용
          return applyStyles(
            <Select
              value={currentValue || ""}
              onValueChange={(value) => updateFormData(fieldName, value)}
              disabled={isReadonly}
              required={required}
            >
              <SelectTrigger className="h-full w-full">
                <SelectValue placeholder={config?.placeholder || "코드를 선택하세요..."} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="loading">로딩 중...</SelectItem>
              </SelectContent>
            </Select>,
          );
        }
      }

      case "entity": {
        // DynamicWebTypeRenderer로 위임하여 EntitySearchInputWrapper 사용
        const widget = comp as WidgetComponent;
        return applyStyles(
          <DynamicWebTypeRenderer
            webType="entity"
            config={widget.webTypeConfig}
            props={{
              component: widget,
              value: currentValue,
              onChange: (value: any) => updateFormData(fieldName, value),
              onFormDataChange: updateFormData,
              formData: formData,
              readonly: readonly,
              required: required,
              placeholder: widget.placeholder || "엔티티를 선택하세요",
              isInteractive: true,
              className: "w-full h-full",
            }}
          />,
        );
      }

      case "button": {
        const widget = comp as WidgetComponent;
        const config = widget.webTypeConfig as ButtonTypeConfig | undefined;

        const handleButtonClick = async () => {
          // 프리뷰 모드에서는 버튼 동작 차단
          if (isPreviewMode) {
            return;
          }

          const actionType = config?.actionType || "save";

          try {
            switch (actionType) {
              case "save":
                await handleSaveAction();
                break;
              case "delete":
                await handleDeleteAction();
                break;
              case "edit":
                handleEditAction();
                break;
              case "add":
                handleAddAction();
                break;
              case "search":
                handleSearchAction();
                break;
              case "reset":
                handleResetAction();
                break;
              case "submit":
                await handleSubmitAction();
                break;
              case "close":
                handleCloseAction();
                break;
              case "popup":
                handlePopupAction();
                break;
              case "navigate":
                handleNavigateAction();
                break;
              case "custom":
                await handleCustomAction();
                break;
              default:
              // console.log(`알 수 없는 액션 타입: ${actionType}`);
            }
          } catch (error) {
            // console.error(`버튼 액션 실행 오류 (${actionType}):`, error);
            alert(`작업 중 오류가 발생했습니다: ${error.message}`);
          }
        };

        // 저장 액션 (개선된 버전)
        const handleSaveAction = async () => {
          // console.log("💾 저장 시작");

          // ✅ 사용자 정보가 로드되지 않았으면 저장 불가
          if (!user?.userId) {
            alert("사용자 정보를 불러오는 중입니다. 잠시 후 다시 시도해주세요.");
            return;
          }

          // 개선된 검증 시스템이 활성화된 경우
          if (enhancedValidation) {
            // console.log("🔍 개선된 검증 시스템 사용");
            const success = await enhancedValidation.saveForm();
            if (success) {
              toast.success("데이터가 성공적으로 저장되었습니다!");
            }
            return;
          }

          // 기존 방식 (레거시 지원)
          const currentFormData = { ...localFormData, ...externalFormData };
          // console.log("💾 기존 방식으로 저장 - currentFormData:", currentFormData);

          // formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
          const hasWidgets = allComponents.some((comp) => comp.type === "widget");
          if (!hasWidgets) {
            alert("저장할 입력 컴포넌트가 없습니다.");
            return;
          }

          // 필수 항목 검증
          const requiredFields = allComponents.filter((c) => c.required && (c.columnName || c.id));
          const missingFields = requiredFields.filter((field) => {
            const fieldName = field.columnName || field.id;
            const value = currentFormData[fieldName];
            return !value || value.toString().trim() === "";
          });

          if (missingFields.length > 0) {
            const fieldNames = missingFields.map((f) => f.label || f.columnName || f.id).join(", ");
            alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`);
            return;
          }

          if (!screenInfo?.id) {
            alert("화면 정보가 없어 저장할 수 없습니다.");
            return;
          }

          try {
            // 컬럼명 기반으로 데이터 매핑
            const mappedData: Record<string, any> = {};

            // 입력 가능한 컴포넌트에서 데이터 수집
            allComponents.forEach((comp) => {
              // 위젯 컴포넌트이고 입력 가능한 타입인 경우
              if (comp.type === "widget") {
                const widget = comp as WidgetComponent;
                const fieldName = widget.columnName || widget.id;
                let value = currentFormData[fieldName];

                console.log(`🔍 컴포넌트 처리: ${fieldName}`, {
                  widgetType: widget.widgetType,
                  formDataValue: value,
                  hasWebTypeConfig: !!widget.webTypeConfig,
                  config: widget.webTypeConfig,
                });

                // 자동입력 필드인 경우에만 값이 없을 때 생성
                if (
                  (widget.widgetType === "text" || widget.widgetType === "email" || widget.widgetType === "tel") &&
                  widget.webTypeConfig
                ) {
                  const config = widget.webTypeConfig as TextTypeConfig;
                  const isAutoInput = config?.autoInput || false;

                  console.log(`📋 ${fieldName} 자동입력 체크:`, {
                    isAutoInput,
                    autoValueType: config?.autoValueType,
                    hasValue: !!value,
                    value,
                  });

                  if (isAutoInput && config?.autoValueType && (!value || value === "")) {
                    // 자동입력이고 값이 없을 때만 생성
                    value =
                      config.autoValueType === "custom"
                        ? config.customValue || ""
                        : generateAutoValue(config.autoValueType);

                    console.log("💾 자동입력 값 저장 (값이 없어서 생성):", {
                      fieldName,
                      autoValueType: config.autoValueType,
                      generatedValue: value,
                    });
                  } else if (isAutoInput && value) {
                    console.log("💾 자동입력 필드지만 기존 값 유지:", {
                      fieldName,
                      existingValue: value,
                    });
                  } else if (!isAutoInput) {
                    // console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`);
                  }
                }

                // 값이 있는 경우만 매핑 (빈 문자열도 포함하되, undefined는 제외)
                if (value !== undefined && value !== null && value !== "undefined") {
                  // columnName이 있으면 columnName을 키로, 없으면 컴포넌트 ID를 키로 사용
                  const saveKey = widget.columnName || `comp_${widget.id}`;
                  mappedData[saveKey] = value;
                } else if (widget.columnName) {
                  // 값이 없지만 columnName이 있는 경우, 빈 문자열로 저장
                  // console.log(`⚠️ ${widget.columnName} 필드에 값이 없어 빈 문자열로 저장`);
                  mappedData[widget.columnName] = "";
                }
              }
            });

            console.log("💾 저장할 데이터 매핑:", {
              원본데이터: currentFormData,
              매핑된데이터: mappedData,
              화면정보: screenInfo,
              전체컴포넌트수: allComponents.length,
              위젯컴포넌트수: allComponents.filter((c) => c.type === "widget").length,
            });

            // 각 컴포넌트의 상세 정보 로그
            // console.log("🔍 컴포넌트별 데이터 수집 상세:");
            allComponents.forEach((comp) => {
              if (comp.type === "widget") {
                const widget = comp as WidgetComponent;
                const fieldName = widget.columnName || widget.id;
                const value = currentFormData[fieldName];
                const hasValue = value !== undefined && value !== null && value !== "";
                // console.log(`  - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`);
              }
            });

            // 매핑된 데이터가 비어있으면 경고
            if (Object.keys(mappedData).length === 0) {
              // console.warn("⚠️ 매핑된 데이터가 없습니다. 빈 데이터로 저장됩니다.");
            }

            // 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
            const tableName =
              screenInfo.tableName || allComponents.find((c) => c.columnName)?.tableName || "dynamic_form_data"; // 기본값

            // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
            const writerValue = user.userId;
            const companyCodeValue = user.companyCode || "";

            console.log("👤 현재 사용자 정보:", {
              userId: user.userId,
              userName: userName,
              companyCode: user.companyCode, // ✅ 회사 코드
              formDataWriter: mappedData.writer, // ✅ 폼에서 입력한 writer 값
              formDataCompanyCode: mappedData.company_code, // ✅ 폼에서 입력한 company_code 값
              defaultWriterValue: writerValue,
              companyCodeValue, // ✅ 최종 회사 코드 값
            });

            const dataWithUserInfo = {
              ...mappedData,
              writer: mappedData.writer || writerValue, // ✅ 입력값 우선, 없으면 userId
              created_by: writerValue, // created_by는 항상 로그인한 사람
              updated_by: writerValue, // updated_by는 항상 로그인한 사람
              company_code: mappedData.company_code || companyCodeValue, // ✅ 입력값 우선, 없으면 user.companyCode
            };

            const saveData: DynamicFormData = {
              screenId: screenInfo.id,
              tableName: tableName,
              data: dataWithUserInfo,
            };

            console.log("🚀 API 저장 요청:", saveData);

            const result = await dynamicFormApi.saveFormData(saveData);

            if (result.success) {
              alert("저장되었습니다.");
              // console.log("✅ 저장 성공:", result.data);

              // 저장 후 데이터 초기화 (선택사항)
              if (onFormDataChange) {
                const resetData: Record<string, any> = {};
                Object.keys(formData).forEach((key) => {
                  resetData[key] = "";
                });
                onFormDataChange(resetData);
              }
            } else {
              throw new Error(result.message || "저장에 실패했습니다.");
            }
          } catch (error: any) {
            // console.error("❌ 저장 실패:", error);
            alert(`저장 중 오류가 발생했습니다: ${error.message}`);
          }
        };

        // 삭제 액션
        const handleDeleteAction = async () => {
          const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";

          if (!confirm(confirmMessage)) {
            return;
          }

          // 삭제할 레코드 ID가 필요 (폼 데이터에서 id 필드 찾기)
          const recordId = formData["id"] || formData["ID"] || formData["objid"];

          if (!recordId) {
            alert("삭제할 데이터를 찾을 수 없습니다. (ID가 없음)");
            return;
          }

          // 테이블명 결정
          const tableName =
            screenInfo?.tableName || allComponents.find((c) => c.columnName)?.tableName || "unknown_table";

          if (!tableName || tableName === "unknown_table") {
            alert("테이블 정보가 없어 삭제할 수 없습니다.");
            return;
          }

          try {
            // console.log("🗑️ 삭제 실행:", { recordId, tableName, formData });

            // screenId 전달하여 제어관리 실행 가능하도록 함
            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName, screenInfo?.id);

            if (result.success) {
              alert("삭제되었습니다.");
              // console.log("✅ 삭제 성공");

              // 삭제 후 폼 초기화
              if (onFormDataChange) {
                const resetData: Record<string, any> = {};
                Object.keys(formData).forEach((key) => {
                  resetData[key] = "";
                });
                onFormDataChange(resetData);
              }
            } else {
              throw new Error(result.message || "삭제에 실패했습니다.");
            }
          } catch (error: any) {
            // console.error("❌ 삭제 실패:", error);
            alert(`삭제 중 오류가 발생했습니다: ${error.message}`);
          }
        };

        // 편집 액션
        const handleEditAction = () => {
          console.log("✏️ 수정 액션 실행");

          // 버튼 컴포넌트의 수정 모달 설정 가져오기
          const editModalTitle = config?.editModalTitle || "";
          const editModalDescription = config?.editModalDescription || "";

          console.log("📝 버튼 수정 모달 설정:", { editModalTitle, editModalDescription });

          // EditModal 열기 이벤트 발생
          const event = new CustomEvent("openEditModal", {
            detail: {
              screenId: screenInfo?.id,
              modalSize: "lg",
              editData: formData,
              modalTitle: editModalTitle,
              modalDescription: editModalDescription,
              onSave: () => {
                console.log("✅ 수정 완료");
                // 필요시 폼 새로고침 또는 콜백 실행
              },
            },
          });
          window.dispatchEvent(event);
        };

        // 추가 액션
        const handleAddAction = () => {
          // console.log("➕ 새 항목 추가");
          // 새 항목 추가 로직
          alert("새 항목을 추가할 수 있습니다.");
        };

        // 검색 액션
        const handleSearchAction = () => {
          // console.log("🔍 검색 실행:", formData);
          // 검색 로직
          const searchTerms = Object.values(formData).filter((v) => v && v.toString().trim());
          if (searchTerms.length === 0) {
            alert("검색할 내용을 입력해주세요.");
          } else {
            alert(`검색 실행: ${searchTerms.join(", ")}`);
          }
        };

        // 초기화 액션
        const handleResetAction = () => {
          if (confirm("모든 입력을 초기화하시겠습니까?")) {
            if (onFormDataChange) {
              const resetData: Record<string, any> = {};
              Object.keys(formData).forEach((key) => {
                resetData[key] = "";
              });
              onFormDataChange(resetData);
            }
            // console.log("🔄 폼 초기화 완료");
            alert("입력이 초기화되었습니다.");
          }
        };

        // 제출 액션
        const handleSubmitAction = async () => {
          // console.log("📤 폼 제출:", formData);
          // 제출 로직
          alert("제출되었습니다.");
        };

        // 닫기 액션
        const handleCloseAction = () => {
          // console.log("❌ 닫기 액션 실행");

          // 모달 내부에서 실행되는지 확인
          const isInModal = document.querySelector('[role="dialog"]') !== null;
          const isInPopup = window.opener !== null;

          if (isInModal) {
            // 모달 내부인 경우: 모달의 닫기 버튼 클릭하거나 모달 닫기 이벤트 발생
            // console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도");

            // 모달의 닫기 버튼을 찾아서 클릭
            const modalCloseButton = document.querySelector(
              '[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close',
            );
            if (modalCloseButton) {
              (modalCloseButton as HTMLElement).click();
            } else {
              // ESC 키 이벤트 발생시키기
              const escEvent = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, which: 27 });
              document.dispatchEvent(escEvent);
            }
          } else if (isInPopup) {
            // 팝업 창인 경우
            // console.log("🔄 팝업 창 닫기");
            window.close();
          } else {
            // 일반 페이지인 경우 - 이전 페이지로 이동하지 않고 아무것도 하지 않음
            // console.log("🔄 일반 페이지에서 닫기 - 아무 동작 하지 않음");
            alert("닫기 버튼이 클릭되었습니다.");
          }
        };

        // 팝업 액션
        const handlePopupAction = () => {
          // console.log("🎯 팝업 액션 실행:", { popupScreenId: config?.popupScreenId });

          if (config?.popupScreenId) {
            // 화면 모달 열기
            setPopupScreen({
              screenId: config.popupScreenId,
              title: config.popupTitle || "상세 정보",
              size: "lg",
            });
          } else if (config?.popupTitle && config?.popupContent) {
            // 텍스트 모달 표시
            alert(`${config.popupTitle}\n\n${config.popupContent}`);
          } else {
            alert("모달을 표시합니다.");
          }
        };

        // 네비게이션 액션
        const handleNavigateAction = () => {
          const navigateType = config?.navigateType || "url";

          if (navigateType === "screen" && config?.navigateScreenId) {
            // 화면으로 이동
            const screenPath = `/screens/${config.navigateScreenId}`;

            console.log("🎯 화면으로 이동:", {
              screenId: config.navigateScreenId,
              target: config.navigateTarget || "_self",
              path: screenPath,
            });

            if (config.navigateTarget === "_blank") {
              window.open(screenPath, "_blank");
            } else {
              window.location.href = screenPath;
            }
          } else if (navigateType === "url" && config?.navigateUrl) {
            // URL로 이동
            console.log("🔗 URL로 이동:", {
              url: config.navigateUrl,
              target: config.navigateTarget || "_self",
            });

            if (config.navigateTarget === "_blank") {
              window.open(config.navigateUrl, "_blank");
            } else {
              window.location.href = config.navigateUrl;
            }
          } else {
            console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
              navigateType,
              hasUrl: !!config?.navigateUrl,
              hasScreenId: !!config?.navigateScreenId,
            });
          }
        };

        // 커스텀 액션
        const handleCustomAction = async () => {
          if (config?.customAction) {
            try {
              // 보안상 제한적인 eval 사용
              const result = eval(config.customAction);
              if (result instanceof Promise) {
                await result;
              }
              // console.log("⚡ 커스텀 액션 실행 완료");
            } catch (error) {
              throw new Error(`커스텀 액션 실행 실패: ${error.message}`);
            }
          } else {
            // console.log("⚡ 커스텀 액션이 설정되지 않았습니다.");
          }
        };

        // 버튼 텍스트 다국어 적용 (componentConfig.langKey 확인)
        const buttonLangKey = (widget as any).componentConfig?.langKey;
        const buttonText =
          buttonLangKey && translations[buttonLangKey]
            ? translations[buttonLangKey]
            : (widget as any).componentConfig?.text || label || "버튼";

        // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
        const hasCustomColors = config?.backgroundColor || config?.textColor;

        return applyStyles(
          <button
            onClick={handleButtonClick}
            disabled={isReadonly}
            className={`focus:ring-ring w-full rounded-md px-3 py-2 text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none disabled:opacity-50 ${
              hasCustomColors
                ? ""
                : "bg-background border-foreground text-foreground hover:bg-muted/50 border shadow-xs"
            }`}
            style={{
              height: "100%",
              backgroundColor: config?.backgroundColor,
              color: config?.textColor,
              borderColor: config?.borderColor,
            }}
          >
            {buttonText}
          </button>,
        );
      }

      default:
        return applyStyles(
          <Input
            type="text"
            placeholder={placeholder || "입력하세요..."}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={isReadonly}
            required={required}
            className="w-full"
            style={{ height: "100%" }}
          />,
        );
    }
  };

  // 파일 첨부 컴포넌트 처리
  if (isFileComponent(component)) {
    const fileComponent = component as FileComponent;

    console.log("🎯 File 컴포넌트 렌더링:", {
      componentId: fileComponent.id,
      currentUploadedFiles: fileComponent.uploadedFiles?.length || 0,
      hasOnFormDataChange: !!onFormDataChange,
      userInfo: user ? { userId: user.userId, companyCode: user.companyCode } : "no user",
    });

    const handleFileUpdate = useCallback(
      async (updates: Partial<FileComponent>) => {
        // 실제 화면에서는 파일 업데이트를 처리
        console.log("📎 InteractiveScreenViewer - 파일 컴포넌트 업데이트:", {
          updates,
          hasUploadedFiles: !!updates.uploadedFiles,
          uploadedFilesCount: updates.uploadedFiles?.length || 0,
          hasOnFormDataChange: !!onFormDataChange,
        });

        if (updates.uploadedFiles && onFormDataChange) {
          const fieldName = fileComponent.columnName || fileComponent.id;

          // attach_file_info 테이블 구조에 맞는 데이터 생성
          const fileInfoForDB = updates.uploadedFiles.map((file) => ({
            objid: file.objid.replace("temp_", ""), // temp_ 제거
            target_objid: "",
            saved_file_name: file.savedFileName,
            real_file_name: file.realFileName,
            doc_type: file.docType,
            doc_type_name: file.docTypeName,
            file_size: file.fileSize,
            file_ext: file.fileExt,
            file_path: file.filePath,
            writer: file.writer,
            regdate: file.regdate,
            status: file.status,
            parent_target_objid: "",
            company_code: file.companyCode,
          }));

          // console.log("💾 attach_file_info 형태로 변환된 데이터:", fileInfoForDB);

          // FormData에는 파일 연결 정보만 저장 (간단한 형태)
          const formDataValue = {
            fileCount: updates.uploadedFiles.length,
            docType: fileComponent.fileConfig.docType,
            files: updates.uploadedFiles.map((file) => ({
              objid: file.objid,
              realFileName: file.realFileName,
              fileSize: file.fileSize,
              status: file.status,
            })),
          };

          // console.log("📝 FormData 저장값:", { fieldName, formDataValue });
          onFormDataChange(fieldName, formDataValue);

          // TODO: 실제 API 연동 시 attach_file_info 테이블에 저장
          // await saveFilesToDatabase(fileInfoForDB);
        } else {
          console.warn("⚠️ 파일 업데이트 실패:", {
            hasUploadedFiles: !!updates.uploadedFiles,
            hasOnFormDataChange: !!onFormDataChange,
          });
        }
      },
      [fileComponent, onFormDataChange],
    );

    return (
      <div className="h-full w-full">
        <FileUpload
          component={fileComponent}
          onUpdateComponent={handleFileUpdate}
          userInfo={user} // 사용자 정보를 프롭으로 전달
        />
      </div>
    );
  }

  // 그룹 컴포넌트 처리
  if (component.type === "group") {
    const children = allComponents.filter((comp) => comp.parentId === component.id);

    return (
      <div className="relative h-full w-full">
        {/* 그룹 내의 자식 컴포넌트들 렌더링 */}
        {children.map((child) => (
          <div
            key={child.id}
            style={{
              position: "absolute",
              left: `${child.position.x - component.position.x}px`,
              top: `${child.position.y - component.position.y}px`,
              width: child.style?.width || `${child.size.width}px`,
              height: child.style?.height || `${child.size.height}px`,
              zIndex: child.position.z || 1,
            }}
          >
            <InteractiveScreenViewer
              component={child}
              allComponents={allComponents}
              formData={externalFormData}
              onFormDataChange={onFormDataChange}
            />
          </div>
        ))}
      </div>
    );
  }

  // 일반 위젯 컴포넌트
  // 템플릿 컴포넌트 목록 (자체적으로 제목을 가지므로 라벨 불필요)
  const templateTypes = ["datatable"];

  // 라벨 표시 여부 계산
  const shouldShowLabel =
    !hideLabel && // hideLabel이 true면 라벨 숨김
    (component.style?.labelDisplay ?? true) &&
    (component.label || component.style?.labelText) &&
    !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함

  // 다국어 라벨 텍스트 결정 (langKey가 있으면 번역 텍스트 사용)
  const langKey = (component as any).langKey;
  const originalLabelText = component.style?.labelText || component.label || "";
  const labelText = langKey && translations[langKey] ? translations[langKey] : originalLabelText;

  // 라벨 표시 여부 로그 (디버깅용)
  if (component.type === "widget") {
    console.log("🏷️ 라벨 표시 체크:", {
      componentId: component.id,
      hideLabel,
      shouldShowLabel,
      labelText,
      langKey,
      hasTranslation: !!translations[langKey],
    });
  }

  // 라벨 스타일 적용
  const labelStyle = {
    fontSize: component.style?.labelFontSize || "14px",
    color: component.style?.labelColor || "#212121",
    fontWeight: component.style?.labelFontWeight || "500",
    backgroundColor: component.style?.labelBackgroundColor || "transparent",
    padding: component.style?.labelPadding || "0",
    borderRadius: component.style?.labelBorderRadius || "0",
    marginBottom: component.style?.labelMarginBottom || "4px",
  };

  // 상위에서 라벨을 표시한 경우, 컴포넌트 내부에서는 라벨을 숨김
  const componentForRendering = shouldShowLabel
    ? {
        ...component,
        style: {
          ...component.style,
          labelDisplay: false, // 상위에서 라벨을 표시했으므로 컴포넌트 내부에서는 숨김
        },
      }
    : component;

  return (
    <SplitPanelProvider>
      <ActiveTabProvider>
        <TableOptionsProvider>
          <div className="flex h-full flex-col">
            {/* 테이블 옵션 툴바 */}
            <TableOptionsToolbar />

            {/* 메인 컨텐츠 */}
            <div className="h-full flex-1" style={{ width: "100%" }}>
              {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
              {shouldShowLabel && (
                <label className="mb-2 block text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                  {labelText}
                  {(component.required || component.componentConfig?.required) && (
                    <span className="text-destructive ml-1">*</span>
                  )}
                </label>
              )}

              {/* 실제 위젯 - 상위에서 라벨을 렌더링했으므로 자식은 라벨 숨김 */}
              <div className="h-full" style={{ width: "100%", height: "100%" }}>
                {renderInteractiveWidget(componentForRendering)}
              </div>
            </div>
          </div>

          {/* 개선된 검증 패널 (선택적 표시) */}
          {showValidationPanel && enhancedValidation && (
            <div className="absolute right-4 bottom-4 z-50">
              <FormValidationIndicator
                validationState={enhancedValidation.validationState}
                saveState={enhancedValidation.saveState}
                onSave={async () => {
                  const success = await enhancedValidation.saveForm();
                  if (success) {
                    toast.success("데이터가 성공적으로 저장되었습니다!");
                  }
                }}
                canSave={enhancedValidation.canSave}
                compact={true}
                showDetails={false}
              />
            </div>
          )}

          {/* 모달 화면 */}
          <Dialog
            open={!!popupScreen}
            onOpenChange={() => {
              setPopupScreen(null);
              setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
            }}
          >
            <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden p-0">
              <DialogHeader className="px-6 pt-4 pb-2">
                <DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
              </DialogHeader>

              <div className="overflow-y-auto px-6 pb-6" style={{ maxHeight: "calc(90vh - 80px)" }}>
                {popupLoading ? (
                  <div className="flex items-center justify-center py-8">
                    <div className="text-muted-foreground">화면을 불러오는 중...</div>
                  </div>
                ) : popupLayout.length > 0 ? (
                  <div
                    className="bg-background relative rounded border"
                    style={{
                      width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
                      height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
                      minHeight: "400px",
                      position: "relative",
                      overflow: "hidden",
                    }}
                  >
                    {/* 팝업에서도 실제 위치와 크기로 렌더링 */}
                    {popupLayout.map((popupComponent) => (
                      <div
                        key={popupComponent.id}
                        className="absolute"
                        style={{
                          left: `${popupComponent.position.x}px`,
                          top: `${popupComponent.position.y}px`,
                          width: popupComponent.style?.width || `${popupComponent.size.width}px`,
                          height: popupComponent.style?.height || `${popupComponent.size.height}px`,
                          zIndex: Math.min(popupComponent.position.z || 1, 20), // 최대 z-index 20으로 제한
                        }}
                      >
                        {/* 🎯 핵심 수정: 팝업 전용 formData 사용 */}
                        <InteractiveScreenViewer
                          component={popupComponent}
                          allComponents={popupLayout}
                          hideLabel={false}
                          screenInfo={popupScreenInfo || undefined}
                          formData={popupFormData}
                          onFormDataChange={(fieldName, value) => {
                            console.log("💾 팝업 formData 업데이트:", {
                              fieldName,
                              value,
                              valueType: typeof value,
                              prevFormData: popupFormData,
                            });

                            setPopupFormData((prev) => ({
                              ...prev,
                              [fieldName]: value,
                            }));
                          }}
                        />
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="flex items-center justify-center py-8">
                    <div className="text-muted-foreground">화면 데이터가 없습니다.</div>
                  </div>
                )}
              </div>
            </DialogContent>
          </Dialog>
        </TableOptionsProvider>
      </ActiveTabProvider>
    </SplitPanelProvider>
  );
};