"use client";

import React, { useState, useCallback } 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 } 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 {
  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 } 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";

interface InteractiveScreenViewerProps {
  component: ComponentData;
  allComponents: ComponentData[];
  formData?: Record<string, any>;
  onFormDataChange?: (fieldName: string, value: any) => void;
  hideLabel?: boolean;
  screenInfo?: {
    id: number;
    tableName?: string;
  };
  // 새로운 검증 관련 옵션들
  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,
  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 [localFormData, setLocalFormData] = useState<Record<string, any>>({});
  const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
  
  // 팝업 화면 상태
  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((autoValueType: string): 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()}`;
      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 = () => {
      // console.log("🔧 initAutoInputFields 실행 시작");
      allComponents.forEach(comp => {
        if (comp.type === 'widget') {
          const widget = comp as WidgetComponent;
          const fieldName = widget.columnName || widget.id;
          
          // 텍스트 타입 위젯의 자동입력 처리
          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]); // 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) => {
    // 데이터 테이블 컴포넌트 처리
    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 { widgetType, label, placeholder, required, readonly, columnName } = comp;
    const fieldName = columnName || comp.id;
    const currentValue = formData[fieldName] || "";

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

      return React.cloneElement(element, {
        style: {
          ...element.props.style, // 기존 스타일 유지
          ...comp.style,
          // 크기는 부모 컨테이너에서 처리하므로 제거 (하지만 다른 스타일은 유지)
          width: "100%",
          height: "100%",
          minHeight: "100%",
          maxHeight: "100%",
          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={readonly || 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={readonly}
            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={readonly}
            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,
          },
        });

        const finalPlaceholder = config?.placeholder || placeholder || "선택하세요...";
        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={readonly}
            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={readonly}
              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={readonly}
                  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={readonly || 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={readonly}
              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={readonly}
                >
                  <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={readonly}
            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-sm font-medium text-foreground">
                업로드된 파일 ({fileData.length}개)
              </div>
              {fileData.map((fileInfo: any, index: number) => {
                const isImage = fileInfo.type?.startsWith('image/');
                
                return (
                  <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
                    <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/50">
                      {isImage ? (
                        <div className="text-success text-xs font-medium">IMG</div>
                      ) : (
                        <File className="h-8 w-8 text-muted-foreground" />
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-foreground truncate">{fileInfo.name}</p>
                      <p className="text-xs text-muted-foreground">
                        {(fileInfo.size / 1024 / 1024).toFixed(2)} MB
                      </p>
                      <p className="text-xs text-muted-foreground">{fileInfo.type || '알 수 없는 형식'}</p>
                      <p className="text-xs text-muted-foreground/70">업로드: {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={readonly}
                required={required}
                multiple={config?.multiple}
                accept={config?.accept}
                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer 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="flex h-8 w-8 items-center justify-center rounded-full bg-success/20">
                          <svg className="h-5 w-5 text-success" 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-sm font-medium text-success">
                        {currentValue.totalCount === 1 
                          ? '파일 선택됨' 
                          : `${currentValue.totalCount}개 파일 선택됨`}
                      </p>
                      <p className="text-xs text-success/80">
                        총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
                      </p>
                      <p className="text-xs text-success/80">클릭하여 다른 파일 선택</p>
                    </>
                  ) : (
                    <>
                      <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
                      <p className="text-sm text-muted-foreground">
                        {config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
                      </p>
                      {(config?.accept || config?.maxSize) && (
                        <div className="text-xs text-muted-foreground space-y-1">
                          {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,
          widgetType: widget.widgetType,
          columnName: widget.columnName,
          fieldName,
          currentValue,
          formData,
          config,
          codeCategory: config?.codeCategory,
        });

        // 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",
              }}
              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={readonly}
              required={required}
            >
              <SelectTrigger className="h-full w-full">
                <SelectValue placeholder={config?.placeholder || "코드를 선택하세요..."} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="loading">로딩 중...</SelectItem>
              </SelectContent>
            </Select>
          );
        }
      }

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

        console.log("🏢 InteractiveScreenViewer - Entity 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            entityName: config?.entityName,
            displayField: config?.displayField,
            valueField: config?.valueField,
            multiple: config?.multiple,
            defaultValue: config?.defaultValue,
          },
        });

        const finalPlaceholder = config?.placeholder || "엔티티를 선택하세요...";
        const defaultOptions = [
          { label: "사용자", value: "user" },
          { label: "제품", value: "product" },
          { label: "주문", value: "order" },
          { label: "카테고리", value: "category" },
        ];

        return (
          <Select
            value={currentValue || config?.defaultValue || ""}
            onValueChange={(value) => updateFormData(fieldName, value)}
            disabled={readonly}
            required={required}
          >
            <SelectTrigger 
              className="w-full"
            style={{ height: "100%" }}
              style={{
                ...comp.style,
                width: "100%",
                height: "100%",
              }}
            >
              <SelectValue placeholder={finalPlaceholder} />
            </SelectTrigger>
            <SelectContent>
              {defaultOptions.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {config?.displayFormat
                    ? config.displayFormat.replace("{label}", option.label).replace("{value}", option.value)
                    : option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>,
        );
      }

      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 (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"; // 기본값

            // 🆕 자동으로 작성자 정보 추가
            const writerValue = user?.userId || userName || "unknown";
            console.log("👤 현재 사용자 정보:", {
              userId: user?.userId,
              userName: userName,
              writerValue: writerValue,
            });

            const dataWithUserInfo = {
              ...mappedData,
              writer: writerValue, // 테이블 생성 시 자동 생성되는 컬럼
              created_by: writerValue,
              updated_by: writerValue,
            };

            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 });

            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName);

            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("⚡ 커스텀 액션이 설정되지 않았습니다.");
          }
        };

        return (
          <Button
            onClick={handleButtonClick}
            disabled={readonly}
            size="sm"
            variant={config?.variant || "default"}
            className="w-full"
            style={{ height: "100%" }}
            style={{
              // 컴포넌트 스타일과 설정 스타일 모두 적용
              ...comp.style,
              // 크기는 className으로 처리하므로 CSS 크기 속성 제거
              width: "100%",
              height: "100%",
              // 설정값이 있으면 우선 적용, 없으면 컴포넌트 스타일 사용
              backgroundColor: config?.backgroundColor || comp.style?.backgroundColor,
              color: config?.textColor || comp.style?.color,
              borderColor: config?.borderColor || comp.style?.borderColor,
            }}
          >
            {label || "버튼"}
          </Button>
        );
      }

      default:
        return applyStyles(
          <Input
            type="text"
            placeholder={placeholder || "입력하세요..."}
            value={currentValue}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={readonly}
            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); // 템플릿 컴포넌트는 라벨 표시 안함

  const labelText = component.style?.labelText || component.label || "";

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

  // 라벨 스타일 적용
  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 (
    <>
      <div className="h-full w-full">
          {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
          {shouldShowLabel && (
            <label className="mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
              {labelText}
              {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
            </label>
          )}

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

      {/* 개선된 검증 패널 (선택적 표시) */}
      {showValidationPanel && enhancedValidation && (
        <div className="absolute bottom-4 right-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-w-4xl max-h-[90vh] 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="relative bg-background border rounded" 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>
    </>
  );
};