"use client";

import React from "react";
import { ComponentData, AreaComponent, AreaLayoutType } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Square, CreditCard, Layout, Grid3x3, Columns, Rows, SidebarOpen, Folder } from "lucide-react";

// 영역 레이아웃에 따른 아이콘 반환
const getAreaIcon = (layoutType: AreaLayoutType): React.ReactNode => {
  const iconMap: Record<AreaLayoutType, React.ReactNode> = {
    container: <Square className="h-4 w-4" />,
    card: <CreditCard className="h-4 w-4" />,
    panel: <Layout className="h-4 w-4" />,
    grid: <Grid3x3 className="h-4 w-4" />,
    flex_row: <Columns className="h-4 w-4" />,
    flex_column: <Rows className="h-4 w-4" />,
    sidebar: <SidebarOpen className="h-4 w-4" />,
    section: <Folder className="h-4 w-4" />,
  };
  return iconMap[layoutType] || <Square className="h-4 w-4" />;
};

// 영역 렌더링 함수
const renderArea = (component: ComponentData, children?: React.ReactNode) => {
  const area = component as AreaComponent;
  const { title, description, layoutType = "container" } = area;

  const renderPlaceholder = () => (
    <div className="flex h-full flex-col items-center justify-center text-center">
      {getAreaIcon(layoutType)}
      <div className="mt-2 text-sm font-medium text-gray-600">{title || "영역"}</div>
      {description && <div className="mt-1 text-xs text-gray-400">{description}</div>}
      <div className="mt-1 text-xs text-gray-400">레이아웃: {layoutType}</div>
    </div>
  );

  return (
    <div className="relative h-full w-full rounded border border-dashed border-gray-300 bg-gray-50 p-2">
      <div className="relative h-full w-full">
        {children && React.Children.count(children) > 0 ? children : renderPlaceholder()}
      </div>
    </div>
  );
};

// 영역 컴포넌트 렌더러
const AreaRenderer: ComponentRenderer = ({ component, children, ...props }) => {
  return renderArea(component, children);
};

// 레지스트리에 등록
componentRegistry.register("area", AreaRenderer);

export { AreaRenderer };