"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 {
  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 타입

            // 메모이제이션 없이 직접 계산
            const visibleColumns = dataTableComponent.columns?.filter((col: any) => col.visible) || [];
            const filters = dataTableComponent.filters || [];

            return (
              <div className="flex h-full w-full flex-col overflow-hidden rounded border bg-white">
                {/* 테이블 제목 */}
                {dataTableComponent.title && (
                  <div className="border-b bg-gray-50 px-4 py-2">
                    <h3 className="text-sm font-medium">{dataTableComponent.title}</h3>
                  </div>
                )}

                {/* 검색 및 필터 영역 */}
                {(dataTableComponent.showSearchButton || filters.length > 0) && (
                  <div className="border-b bg-gray-50 px-4 py-2">
                    <div className="flex items-center space-x-2">
                      {dataTableComponent.showSearchButton && (
                        <div className="flex items-center space-x-2">
                          <Input placeholder="검색..." className="h-8 w-48" />
                          <Button size="sm" variant="outline">
                            {dataTableComponent.searchButtonText || "검색"}
                          </Button>
                        </div>
                      )}
                      {filters.length > 0 && (
                        <div className="flex items-center space-x-2">
                          <span className="text-xs text-gray-500">필터:</span>
                          {filters.slice(0, 2).map((filter: any, index: number) => (
                            <Badge key={index} variant="secondary" className="text-xs">
                              {filter.label || filter.columnName}
                            </Badge>
                          ))}
                          {filters.length > 2 && (
                            <Badge variant="secondary" className="text-xs">
                              +{filters.length - 2}
                            </Badge>
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                )}

                {/* 테이블 본체 */}
                <div className="flex-1 overflow-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        {visibleColumns.length > 0 ? (
                          visibleColumns.map((col: any, index: number) => (
                            <TableHead key={col.id || index} className="text-xs">
                              {col.label || col.columnName}
                              {col.sortable && <span className="ml-1 text-gray-400">↕</span>}
                            </TableHead>
                          ))
                        ) : (
                          <>
                            <TableHead className="text-xs">컬럼 1</TableHead>
                            <TableHead className="text-xs">컬럼 2</TableHead>
                            <TableHead className="text-xs">컬럼 3</TableHead>
                          </>
                        )}
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {/* 샘플 데이터 행들 */}
                      {[1, 2, 3].map((rowIndex) => (
                        <TableRow key={rowIndex}>
                          {visibleColumns.length > 0 ? (
                            visibleColumns.map((col: any, colIndex: number) => (
                              <TableCell key={col.id || colIndex} className="text-xs">
                                {col.widgetType === "checkbox" ? (
                                  <input type="checkbox" className="h-3 w-3" />
                                ) : col.widgetType === "select" ? (
                                  `옵션 ${rowIndex}`
                                ) : col.widgetType === "date" ? (
                                  "2024-01-01"
                                ) : col.widgetType === "number" ? (
                                  `${rowIndex * 100}`
                                ) : (
                                  `데이터 ${rowIndex}-${colIndex + 1}`
                                )}
                              </TableCell>
                            ))
                          ) : (
                            <>
                              <TableCell className="text-xs">데이터 {rowIndex}-1</TableCell>
                              <TableCell className="text-xs">데이터 {rowIndex}-2</TableCell>
                              <TableCell className="text-xs">데이터 {rowIndex}-3</TableCell>
                            </>
                          )}
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>

                {/* 페이지네이션 */}
                {dataTableComponent.pagination && (
                  <div className="border-t bg-gray-50 px-4 py-2">
                    <div className="flex items-center justify-between text-xs text-gray-600">
                      <span>총 3개 항목</span>
                      <div className="flex items-center space-x-2">
                        <Button size="sm" variant="outline" disabled>
                          이전
                        </Button>
                        <span>1 / 1</span>
                        <Button size="sm" variant="outline" disabled>
                          다음
                        </Button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })()}

        {/* 그룹 타입 */}
        {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";