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

"use client";

import React from "react";
import { ComponentData, WebType, WidgetComponent, FileComponent, AreaComponent, AreaLayoutType } from "@/types/screen";
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,
} 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 = (layoutType: AreaLayoutType) => {
  switch (layoutType) {
    case "flex-row":
      return <Layout className="h-4 w-4 text-blue-600" />;
    case "grid":
      return <Grid3x3 className="h-4 w-4 text-green-600" />;
    case "flex-column":
      return <Columns className="h-4 w-4 text-purple-600" />;
    case "panel":
      return <Rows className="h-4 w-4 text-orange-600" />;
    case "sidebar":
      return <SidebarOpen className="h-4 w-4 text-indigo-600" />;
    case "tabs":
      return <Folder className="h-4 w-4 text-pink-600" />;
    default:
      return <Square className="h-4 w-4 text-gray-500" />;
  }
};

// 영역 렌더링
const renderArea = (component: ComponentData, children?: React.ReactNode) => {
  const area = component as AreaComponent;
  const { layoutType, title } = 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(layoutType)}
        <p className="mt-2 text-sm text-gray-600">{title || `${layoutType} 영역`}</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 (component.type !== "widget") {
    return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
  }

  const widget = component as WidgetComponent;
  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 (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":
    case "text_area":
      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 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>
        )}

        {/* 파일 타입 */}
        {type === "file" && (
          <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-4">
              <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-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((component as WidgetComponent).widgetType)}
              {(component as WidgetComponent).widgetType || "widget"}
            </div>
          )}
          {type !== "widget" && type}
        </div>
      )}
    </div>
  );
};

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

RealtimePreviewDynamic.displayName = "RealtimePreviewDynamic";