"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { LayoutGrid } from "lucide-react";

// 대시보드 컴포넌트 렌더러
const DashboardRenderer: ComponentRenderer = ({ component, children, isInteractive = false, ...props }) => {
  const config = component.componentConfig || {};
  const { columns = 3, gap = 16, items = [], style = {} } = config;

  console.log("📊 DashboardRenderer 렌더링:", {
    componentId: component.id,
    isInteractive,
    config,
    columns,
    gap,
  });

  return (
    <div
      className="h-full w-full overflow-hidden p-4"
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap: `${gap}px`,
        width: "100%",
        height: "100%",
        boxSizing: "border-box",
        ...style,
      }}
    >
      {children && React.Children.count(children) > 0
        ? children
        : // 플레이스홀더 그리드 아이템들
          Array.from({ length: columns * 2 }).map((_, index) => (
            <div
              key={index}
              className={`flex min-h-0 items-center justify-center rounded p-2 ${
                isInteractive
                  ? "border border-gray-200 bg-white shadow-sm"
                  : "border-2 border-dashed border-gray-300 bg-gray-50"
              }`}
              style={{
                minWidth: 0,
                minHeight: "60px",
                maxWidth: "100%",
              }}
            >
              <div className="text-center">
                <LayoutGrid className={`mx-auto mb-2 h-6 w-6 ${isInteractive ? "text-blue-500" : "text-gray-400"}`} />
                <div className={`text-xs ${isInteractive ? "font-medium text-gray-700" : "text-gray-400"}`}>
                  그리드 {index + 1}
                </div>
                {isInteractive && <div className="mt-1 text-xs text-gray-500">실제 화면</div>}
              </div>
            </div>
          ))}
    </div>
  );
};

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

export { DashboardRenderer };