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";

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

export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
  component,
  allComponents,
  formData: externalFormData,
  onFormDataChange,
  hideLabel = false,
}) => {
  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 = () => {
          if (config?.actionType === "popup" && config.popupTitle) {
            alert(`${config.popupTitle}\n\n${config.popupContent || "팝업 내용이 없습니다."}`);
          } else if (config?.actionType === "navigate" && config.navigateUrl) {
            if (config.navigateTarget === "_blank") {
              window.open(config.navigateUrl, "_blank");
            } else {
              window.location.href = config.navigateUrl;
            }
          } else if (config?.actionType === "custom" && config.customAction) {
            try {
              // 간단한 JavaScript 실행 (보안상 제한적)
              eval(config.customAction);
            } catch (error) {
              console.error("커스텀 액션 실행 오류:", error);
            }
          } else if (config?.actionType === "delete" && config.confirmMessage) {
            if (confirm(config.confirmMessage)) {
              console.log("삭제 확인됨");
            }
          } else {
            console.log(`버튼 클릭: ${config?.actionType || "기본"} 액션`);
          }
        };

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