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

"use client";

import React, { useState } 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 { CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import { ko } from "date-fns/locale";
import {
  ComponentData,
  WidgetComponent,
  DataTableComponent,
  TextTypeConfig,
  NumberTypeConfig,
  DateTypeConfig,
  SelectTypeConfig,
  RadioTypeConfig,
  CheckboxTypeConfig,
  TextareaTypeConfig,
  FileTypeConfig,
  CodeTypeConfig,
  EntityTypeConfig,
  ButtonTypeConfig,
} from "@/types/screen";
import { InteractiveDataTable } from "./InteractiveDataTable";
import { dynamicFormApi, DynamicFormData } from "@/lib/api/dynamicForm";
import { useParams } from "next/navigation";

interface InteractiveScreenViewerProps {
  component: ComponentData;
  allComponents: ComponentData[];
  formData?: Record<string, any>;
  onFormDataChange?: (fieldName: string, value: any) => void;
  hideLabel?: boolean;
  screenInfo?: {
    id: number;
    tableName?: string;
  };
}

export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
  component,
  allComponents,
  formData: externalFormData,
  onFormDataChange,
  hideLabel = false,
  screenInfo,
}) => {
  const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
  const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});

  // 실제 사용할 폼 데이터 (외부에서 제공된 경우 우선 사용)
  const formData = externalFormData || localFormData;

  // 폼 데이터 업데이트
  const updateFormData = (fieldName: string, value: any) => {
    if (onFormDataChange) {
      // 외부 콜백이 있는 경우 사용
      onFormDataChange(fieldName, value);
    } else {
      // 로컬 상태 업데이트
      setLocalFormData((prev) => ({
        ...prev,
        [fieldName]: value,
      }));
    }
  };

  // 날짜 값 업데이트
  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%",
          }}
        />
      );
    }

    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;

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

        // 형식별 패턴 생성
        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;

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

          // 길이 제한 검증
          if (config?.maxLength && value.length > config.maxLength) {
            return; // 최대 길이 초과 차단
          }

          updateFormData(fieldName, value);
        };

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

        return applyStyles(
          <Input
            type={inputType}
            placeholder={finalPlaceholder}
            value={currentValue}
            onChange={handleInputChange}
            disabled={readonly}
            required={required}
            minLength={config?.minLength}
            maxLength={config?.maxLength}
            pattern={getPatternByFormat(config?.format || "none")}
            className="w-full"
            style={{ 
              height: "100%",
              minHeight: "100%",
              maxHeight: "100%"
            }}
          />,
        );
      }

      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;

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

        const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
          const files = e.target.files;
          if (!files) 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;
              }
            }
          }

          const file = config?.multiple ? files : files[0];
          updateFormData(fieldName, file);
        };

        return applyStyles(
          <Input
            type="file"
            onChange={handleFileChange}
            disabled={readonly}
            required={required}
            multiple={config?.multiple}
            accept={config?.accept}
            className="w-full"
            style={{ height: "100%" }}
          />,
        );
      }

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

        console.log("💻 InteractiveScreenViewer - Code 위젯:", {
          componentId: widget.id,
          widgetType: widget.widgetType,
          config,
          appliedSettings: {
            language: config?.language,
            theme: config?.theme,
            fontSize: config?.fontSize,
            defaultValue: config?.defaultValue,
            wordWrap: config?.wordWrap,
            tabSize: config?.tabSize,
          },
        });

        const finalPlaceholder = config?.placeholder || "코드를 입력하세요...";
        const rows = config?.rows || 4;

        return applyStyles(
          <Textarea
            placeholder={finalPlaceholder}
            value={currentValue || config?.defaultValue || ""}
            onChange={(e) => updateFormData(fieldName, e.target.value)}
            disabled={readonly}
            required={required}
            rows={rows}
            className="h-full w-full resize-none font-mono text-sm"
            style={{
              fontSize: `${config?.fontSize || 14}px`,
              backgroundColor: config?.theme === "dark" ? "#1e1e1e" : "#ffffff",
              color: config?.theme === "dark" ? "#ffffff" : "#000000",
              whiteSpace: config?.wordWrap === false ? "nowrap" : "normal",
              tabSize: config?.tabSize || 2,
            }}
          />,
        );
      }

      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 () => {
          const actionType = config?.actionType || "save";
          
          try {
            switch (actionType) {
              case "save":
                await handleSaveAction();
                break;
              case "cancel":
                handleCancelAction();
                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 () => {
          if (!formData || Object.keys(formData).length === 0) {
            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 = formData[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.columnName) {
                const fieldName = comp.columnName;
                const componentId = comp.id;
                
                // formData에서 해당 값 찾기 (컬럼명 우선, 없으면 컴포넌트 ID)
                const value = formData[fieldName] || formData[componentId];
                
                if (value !== undefined && value !== "") {
                  mappedData[fieldName] = value;
                }
              }
            });

            console.log("💾 저장할 데이터 매핑:", {
              원본데이터: formData,
              매핑된데이터: mappedData,
              화면정보: screenInfo,
            });

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

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

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

            const result = await dynamicFormApi.saveFormData(saveData);

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

        // 취소 액션
        const handleCancelAction = () => {
          if (confirm("변경사항을 취소하시겠습니까?")) {
            // 폼 초기화 또는 이전 페이지로 이동
            if (onFormDataChange) {
              // 모든 폼 데이터 초기화
              Object.keys(formData).forEach(key => {
                onFormDataChange(key, "");
              });
            }
            console.log("❌ 작업이 취소되었습니다.");
          }
        };

        // 삭제 액션
        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) {
                Object.keys(formData).forEach(key => {
                  onFormDataChange(key, "");
                });
              }
            } else {
              throw new Error(result.message || "삭제에 실패했습니다.");
            }
          } catch (error: any) {
            console.error("❌ 삭제 실패:", error);
            alert(`삭제 중 오류가 발생했습니다: ${error.message}`);
          }
        };

        // 편집 액션
        const handleEditAction = () => {
          console.log("✏️ 편집 모드 활성화");
          // 읽기 전용 모드를 편집 모드로 전환
          alert("편집 모드로 전환되었습니다.");
        };

        // 추가 액션
        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) {
              Object.keys(formData).forEach(key => {
                onFormDataChange(key, "");
              });
            }
            console.log("🔄 폼 초기화 완료");
            alert("입력이 초기화되었습니다.");
          }
        };

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

        // 닫기 액션
        const handleCloseAction = () => {
          console.log("❌ 창 닫기");
          // 창 닫기 또는 모달 닫기
          if (window.opener) {
            window.close();
          } else {
            history.back();
          }
        };

        // 팝업 액션
        const handlePopupAction = () => {
          if (config?.popupTitle && config?.popupContent) {
            // 커스텀 모달 대신 기본 alert 사용 (향후 모달 컴포넌트로 교체 가능)
            alert(`${config.popupTitle}\n\n${config.popupContent}`);
          } else {
            alert("팝업을 표시합니다.");
          }
        };

        // 네비게이션 액션
        const handleNavigateAction = () => {
          if (config?.navigateUrl) {
            if (config.navigateTarget === "_blank") {
              window.open(config.navigateUrl, "_blank");
            } else {
              window.location.href = config.navigateUrl;
            }
          } else {
            console.log("🔗 네비게이션 URL이 설정되지 않았습니다.");
          }
        };

        // 커스텀 액션
        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={config?.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 (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.size.width}px`,
              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 !== false &&
    (component.label || component.style?.labelText) &&
    !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함

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

  // 라벨 스타일 적용
  const labelStyle = {
    fontSize: component.style?.labelFontSize || "14px",
    color: component.style?.labelColor || "#374151",
    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",
  };

  return (
    <div className="h-full w-full">
      {/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
      {shouldShowLabel && (
        <div className="block" style={labelStyle}>
          {labelText}
          {component.required && <span style={{ color: "#f97316", marginLeft: "2px" }}>*</span>}
        </div>
      )}

      {/* 실제 위젯 */}
      <div className="h-full w-full">{renderInteractiveWidget(component)}</div>
    </div>
  );
};