"use client";

import React from "react";
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";

interface DashboardConfigPanelProps {
  config?: Record<string, any>;
  onChange?: (key: string, value: any) => void;
  component?: any;
  onUpdateProperty?: (path: string, value: any) => void;
}

const sections: ConfigSectionDefinition[] = [
  {
    id: "content",
    title: "콘텐츠",
    fields: [
      {
        key: "title",
        label: "그리드 제목",
        type: "text",
        placeholder: "그리드 제목을 입력하세요",
      },
    ],
  },
  {
    id: "grid",
    title: "그리드 설정",
    fields: [
      {
        key: "rows",
        label: "행 개수",
        type: "select",
        options: [
          { label: "1행", value: "1" },
          { label: "2행", value: "2" },
          { label: "3행", value: "3" },
          { label: "4행", value: "4" },
        ],
      },
      {
        key: "columns",
        label: "열 개수",
        type: "select",
        options: [
          { label: "1열", value: "1" },
          { label: "2열", value: "2" },
          { label: "3열", value: "3" },
          { label: "4열", value: "4" },
          { label: "6열", value: "6" },
        ],
      },
      {
        key: "gap",
        label: "그리드 간격",
        type: "select",
        options: [
          { label: "없음 (0px)", value: "none" },
          { label: "작게 (8px)", value: "small" },
          { label: "보통 (16px)", value: "medium" },
          { label: "크게 (24px)", value: "large" },
        ],
      },
      {
        key: "itemHeight",
        label: "아이템 높이",
        type: "text",
        placeholder: "120px",
      },
    ],
  },
  {
    id: "style",
    title: "스타일",
    fields: [
      {
        key: "backgroundColor",
        label: "배경색",
        type: "color",
      },
      {
        key: "borderRadius",
        label: "테두리 반경",
        type: "text",
        placeholder: "8px",
      },
    ],
  },
  {
    id: "display",
    title: "표시 옵션",
    fields: [
      {
        key: "responsive",
        label: "반응형 레이아웃",
        type: "switch",
      },
      {
        key: "showBorders",
        label: "그리드 테두리 표시",
        type: "switch",
      },
    ],
  },
];

export const DashboardConfigPanel: React.FC<DashboardConfigPanelProps> = ({
  config: directConfig,
  onChange: directOnChange,
  component,
  onUpdateProperty,
}) => {
  const config = directConfig || component?.componentConfig || {};

  const handleChange = (key: string, value: any) => {
    if (directOnChange) {
      directOnChange(key, value);
    } else if (onUpdateProperty) {
      onUpdateProperty(`componentConfig.${key}`, value);
    }
  };

  return (
    <ConfigPanelBuilder
      config={config}
      onChange={handleChange}
      sections={sections}
    />
  );
};