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

"use client";

import React, { useState, useEffect } from "react";
import { ComponentData, WebType, isWidgetComponent, isContainerComponent } from "@/types";
import { isFileComponent } from "@/lib/utils/componentTypeUtils";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { FileUpload } from "./widgets/FileUpload";
import { useAuth } from "@/hooks/useAuth";
import { DynamicWebTypeRenderer, WebTypeRegistry } from "@/lib/registry";
import { DataTableTemplate } from "@/components/screen/templates/DataTableTemplate";
import {
  Database,
  Type,
  Hash,
  List,
  AlignLeft,
  CheckSquare,
  Radio,
  Calendar,
  Code,
  Building,
  File,
  Group,
  ChevronDown,
  ChevronRight,
  Search,
  RotateCcw,
  Plus,
  Edit,
  Trash2,
  Upload,
  Square,
  CreditCard,
  Layout,
  Grid3x3,
  Columns,
  Rows,
  SidebarOpen,
  Folder,
  ChevronUp,
  Image as ImageIcon,
  FileText,
  Video,
  Music,
  Archive,
  Presentation,
} from "lucide-react";

interface RealtimePreviewProps {
  component: ComponentData;
  isSelected?: boolean;
  onClick?: (e?: React.MouseEvent) => void;
  onDragStart?: (e: React.DragEvent) => void;
  onDragEnd?: () => void;
  onGroupToggle?: (groupId: string) => void; // 그룹 접기/펼치기
  children?: React.ReactNode; // 그룹 내 자식 컴포넌트들
}

// 영역 레이아웃에 따른 아이콘 반환
const getAreaIcon = (layoutDirection?: "horizontal" | "vertical") => {
  switch (layoutDirection) {
    case "horizontal":
      return <Layout className="h-4 w-4 text-blue-600" />;
    case "vertical":
      return <Columns className="h-4 w-4 text-purple-600" />;
    default:
      return <Square className="h-4 w-4 text-gray-500" />;
  }
};

// 영역 렌더링
const renderArea = (component: ComponentData, children?: React.ReactNode) => {
  if (!isContainerComponent(component) || component.type !== "area") {
    return null;
  }
  const area = component;
  const { layoutDirection, label } = area;

  const renderPlaceholder = () => (
    <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
      <div className="text-center">
        {getAreaIcon(layoutDirection)}
        <p className="mt-2 text-sm text-gray-600">{label || `${layoutDirection || "기본"} 영역`}</p>
        <p className="text-xs text-gray-400">컴포넌트를 드래그해서 추가하세요</p>
      </div>
    </div>
  );

  return (
    <div className="relative h-full w-full">
      <div className="absolute inset-0 h-full w-full">
        {children && React.Children.count(children) > 0 ? children : renderPlaceholder()}
      </div>
    </div>
  );
};

// 동적 웹 타입 위젯 렌더링 컴포넌트
const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) => {
  // 위젯 컴포넌트가 아닌 경우 빈 div 반환
  if (!isWidgetComponent(component)) {
    return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
  }

  const widget = component;
  const { widgetType, label, placeholder, required, readonly, columnName, style } = widget;

  // 디버깅: 실제 widgetType 값 확인
  console.log("RealtimePreviewDynamic - widgetType:", widgetType, "columnName:", columnName);

  // 사용자가 테두리를 설정했는지 확인
  const hasCustomBorder = style && (style.borderWidth || style.borderStyle || style.borderColor || style.border);

  // 기본 테두리 제거 여부 결정 - Shadcn UI 기본 border 클래스를 덮어쓰기
  const borderClass = hasCustomBorder ? "!border-0" : "";

  const commonProps = {
    placeholder: placeholder || "입력하세요...",
    disabled: readonly,
    required: required,
    className: `w-full h-full ${borderClass}`,
  };

  // 파일 컴포넌트 강제 체크
  if (isFileComponent(widget)) {
    console.log("🎯 RealtimePreview - 파일 컴포넌트 강제 감지:", {
      componentId: widget.id,
      widgetType: widgetType,
      isFileComponent: true
    });
    
    try {
      return (
        <DynamicWebTypeRenderer
          webType="file"
          props={{
            ...commonProps,
            component: widget,
            value: undefined, // 미리보기이므로 값은 없음
            readonly: readonly,
          }}
          config={widget.webTypeConfig}
        />
      );
    } catch (error) {
      console.error(`파일 웹타입 렌더링 실패:`, error);
      return <div className="text-xs text-gray-500 p-2">파일 컴포넌트 (렌더링 오류)</div>;
    }
  }

  // 동적 웹타입 렌더링 사용
  if (widgetType) {
    try {
      return (
        <DynamicWebTypeRenderer
          webType={widgetType}
          props={{
            ...commonProps,
            component: widget,
            value: undefined, // 미리보기이므로 값은 없음
            readonly: readonly,
          }}
          config={widget.webTypeConfig}
        />
      );
    } catch (error) {
      console.error(`웹타입 "${widgetType}" 렌더링 실패:`, error);
      // 오류 발생 시 폴백으로 기본 input 렌더링
      return <Input type="text" {...commonProps} placeholder={`${widgetType} (렌더링 오류)`} />;
    }
  }

  // 웹타입이 없는 경우 기본 input 렌더링 (하위 호환성)
  return <Input type="text" {...commonProps} />;
};

// 동적 위젯 타입 아이콘 (레지스트리에서 조회)
const getWidgetIcon = (widgetType: WebType | undefined) => {
  if (!widgetType) {
    return <Type className="h-4 w-4 text-gray-500" />;
  }

  // 레지스트리에서 웹타입 정의 조회
  const webTypeDefinition = WebTypeRegistry.getWebType(widgetType);
  if (webTypeDefinition && webTypeDefinition.icon) {
    const IconComponent = webTypeDefinition.icon;
    return <IconComponent className="h-4 w-4" />;
  }

  // 기본 아이콘 매핑 (하위 호환성)
  switch (widgetType) {
    case "text":
    case "email":
    case "tel":
      return <Type className="h-4 w-4 text-blue-600" />;
    case "number":
    case "decimal":
      return <Hash className="h-4 w-4 text-green-600" />;
    case "date":
    case "datetime":
      return <Calendar className="h-4 w-4 text-purple-600" />;
    case "select":
    case "dropdown":
      return <List className="h-4 w-4 text-orange-600" />;
    case "textarea":
      return <AlignLeft className="h-4 w-4 text-indigo-600" />;
    case "boolean":
    case "checkbox":
      return <CheckSquare className="h-4 w-4 text-blue-600" />;
    case "radio":
      return <Radio className="h-4 w-4 text-blue-600" />;
    case "code":
      return <Code className="h-4 w-4 text-gray-600" />;
    case "entity":
      return <Building className="h-4 w-4 text-cyan-600" />;
    case "file":
      return <File className="h-4 w-4 text-yellow-600" />;
    default:
      return <Type className="h-4 w-4 text-gray-500" />;
  }
};

export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
  component,
  isSelected = false,
  onClick,
  onDragStart,
  onDragEnd,
  onGroupToggle,
  children,
}) => {
  const { user } = useAuth();
  const { type, id, position, size, style = {} } = component;
  const [fileUpdateTrigger, setFileUpdateTrigger] = useState(0);

  // 전역 파일 상태 변경 감지 (해당 컴포넌트만)
  useEffect(() => {
    const handleGlobalFileStateChange = (event: CustomEvent) => {
      if (event.detail.componentId === component.id) {
        console.log("🔄 RealtimePreview 파일 상태 변경 감지:", {
          componentId: component.id,
          filesCount: event.detail.files?.length || 0,
          action: event.detail.action
        });
        setFileUpdateTrigger(prev => prev + 1);
      }
    };

    if (typeof window !== 'undefined') {
      window.addEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
      
      return () => {
        window.removeEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
      };
    }
  }, [component.id]);

  // 컴포넌트 스타일 계산
  const componentStyle = {
    position: "absolute" as const,
    left: position?.x || 0,
    top: position?.y || 0,
    width: size?.width || 200,
    height: size?.height || 40,
    zIndex: position?.z || 1,
    ...style,
  };

  // 선택된 컴포넌트 스타일
  const selectionStyle = isSelected
    ? {
        outline: "2px solid #3b82f6",
        outlineOffset: "2px",
      }
    : {};

  const handleClick = (e: React.MouseEvent) => {
    // 컴포넌트 영역 내에서만 클릭 이벤트 처리
    e.stopPropagation();
    onClick?.(e);
  };

  const handleDragStart = (e: React.DragEvent) => {
    e.stopPropagation();
    onDragStart?.(e);
  };

  const handleDragEnd = () => {
    onDragEnd?.();
  };

  return (
    <div
      id={`component-${id}`}
      className="absolute cursor-pointer"
      style={{ ...componentStyle, ...selectionStyle }}
      onClick={handleClick}
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      {/* 컴포넌트 타입별 렌더링 */}
      <div className="h-full w-full">
        {/* 영역 타입 */}
        {type === "area" && renderArea(component, children)}

        {/* 데이터 테이블 타입 */}
        {type === "datatable" &&
          (() => {
            const dataTableComponent = component as any; // DataTableComponent 타입

            return (
              <DataTableTemplate
                title={dataTableComponent.title || dataTableComponent.label}
                description={`${dataTableComponent.label}을 표시하는 데이터 테이블`}
                columns={dataTableComponent.columns}
                filters={dataTableComponent.filters}
                pagination={dataTableComponent.pagination}
                actions={
                  dataTableComponent.actions || {
                    showSearchButton: dataTableComponent.showSearchButton ?? true,
                    searchButtonText: dataTableComponent.searchButtonText || "검색",
                    enableExport: dataTableComponent.enableExport ?? true,
                    enableRefresh: dataTableComponent.enableRefresh ?? true,
                    enableAdd: dataTableComponent.enableAdd ?? true,
                    enableEdit: dataTableComponent.enableEdit ?? true,
                    enableDelete: dataTableComponent.enableDelete ?? true,
                    addButtonText: dataTableComponent.addButtonText || "추가",
                    editButtonText: dataTableComponent.editButtonText || "수정",
                    deleteButtonText: dataTableComponent.deleteButtonText || "삭제",
                  }
                }
                style={component.style}
                className="h-full w-full"
                isPreview={true}
              />
            );
          })()}

        {/* 그룹 타입 */}
        {type === "group" && (
          <div className="relative h-full w-full">
            <div className="absolute inset-0">{children}</div>
          </div>
        )}

        {/* 위젯 타입 - 동적 렌더링 */}
        {type === "widget" && (
          <div className="flex h-full flex-col">
            <div className="pointer-events-none flex-1">
              <WidgetRenderer component={component} />
            </div>
          </div>
        )}

        {/* 파일 타입 - 레거시 및 신규 타입 지원 */}
        {isFileComponent(component) && (() => {
          const fileComponent = component as any;
          const uploadedFiles = fileComponent.uploadedFiles || [];
          
          // 전역 상태에서 최신 파일 정보 가져오기
          const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
          const globalFiles = globalFileState[component.id] || [];
          
          // 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
          const currentFiles = globalFiles.length > 0 ? globalFiles : uploadedFiles;
          
          console.log("🔍 RealtimePreview 파일 컴포넌트 렌더링:", {
            componentId: component.id,
            uploadedFilesCount: uploadedFiles.length,
            globalFilesCount: globalFiles.length,
            currentFilesCount: currentFiles.length,
            currentFiles: currentFiles.map((f: any) => ({ objid: f.objid, name: f.realFileName || f.name })),
            componentType: component.type,
            fileUpdateTrigger: fileUpdateTrigger,
            timestamp: new Date().toISOString()
          });
          
          return (
            <div className="flex h-full flex-col">
              <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-2">
                {currentFiles.length > 0 ? (
                  <div className="h-full overflow-y-auto">
                    <div className="mb-1 text-xs font-medium text-gray-700">
                      업로드된 파일 ({currentFiles.length})
                    </div>
                    <div className="space-y-1">
                      {currentFiles.map((file: any, index: number) => {
                        // 파일 확장자에 따른 아이콘 선택
                        const getFileIcon = (fileName: string) => {
                          const ext = fileName.split('.').pop()?.toLowerCase() || '';
                          if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
                            return <ImageIcon className="h-4 w-4 text-green-500 flex-shrink-0" />;
                          }
                          if (['pdf', 'doc', 'docx', 'txt', 'rtf', 'hwp', 'hwpx', 'hwpml', 'pages'].includes(ext)) {
                            return <FileText className="h-4 w-4 text-red-500 flex-shrink-0" />;
                          }
                          if (['ppt', 'pptx', 'hpt', 'keynote'].includes(ext)) {
                            return <Presentation className="h-4 w-4 text-orange-600 flex-shrink-0" />;
                          }
                          if (['xls', 'xlsx', 'hcdt', 'numbers'].includes(ext)) {
                            return <FileText className="h-4 w-4 text-green-600 flex-shrink-0" />;
                          }
                          if (['mp4', 'avi', 'mov', 'wmv', 'webm', 'ogg'].includes(ext)) {
                            return <Video className="h-4 w-4 text-purple-500 flex-shrink-0" />;
                          }
                          if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
                            return <Music className="h-4 w-4 text-orange-500 flex-shrink-0" />;
                          }
                          if (['zip', 'rar', '7z', 'tar'].includes(ext)) {
                            return <Archive className="h-4 w-4 text-yellow-500 flex-shrink-0" />;
                          }
                          return <File className="h-4 w-4 text-blue-500 flex-shrink-0" />;
                        };
                        
                        return (
                          <div key={file.objid || index} className="flex items-center space-x-2 bg-white rounded p-2 text-xs">
                            {getFileIcon(file.realFileName || file.name || '')}
                            <div className="flex-1 min-w-0">
                              <p className="truncate font-medium text-gray-900">
                                {file.realFileName || file.name || `파일 ${index + 1}`}
                              </p>
                              <p className="text-gray-500">
                                {file.fileSize ? `${Math.round(file.fileSize / 1024)} KB` : ''}
                              </p>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ) : (
                  <div className="flex h-full flex-col items-center justify-center text-center">
                    <File className="mb-2 h-8 w-8 text-gray-400" />
                    <p className="text-xs font-medium text-gray-700 mb-1">업로드된 파일 (0)</p>
                    <p className="text-sm text-gray-600">파일 업로드 영역</p>
                    <p className="mt-1 text-xs text-gray-400">상세설정에서 파일을 업로드하세요</p>
                  </div>
                )}
              </div>
            </div>
          );
        })()}
      </div>

      {/* 선택된 컴포넌트 정보 표시 */}
      {isSelected && (
        <div className="absolute -top-6 left-0 rounded bg-blue-600 px-2 py-1 text-xs text-white">
          {type === "widget" && (
            <div className="flex items-center gap-1">
              {getWidgetIcon(isWidgetComponent(component) ? (component.widgetType as WebType) : undefined)}
              {isWidgetComponent(component) ? component.widgetType || "widget" : component.type}
            </div>
          )}
          {type !== "widget" && type}
        </div>
      )}
    </div>
  );
};

// 기존 RealtimePreview와의 호환성을 위한 export
export { RealtimePreviewDynamic as RealtimePreview };

RealtimePreviewDynamic.displayName = "RealtimePreviewDynamic";