"use client";

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

interface ProgressBarConfigPanelProps {
  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: "label",
        label: "라벨",
        type: "text",
        placeholder: "진행률 라벨을 입력하세요",
      },
      {
        key: "value",
        label: "현재 값",
        type: "number",
        min: 0,
        placeholder: "현재 값",
      },
      {
        key: "max",
        label: "최대 값",
        type: "number",
        min: 1,
        placeholder: "최대 값",
      },
    ],
  },
  {
    id: "style",
    title: "스타일",
    fields: [
      {
        key: "color",
        label: "진행률 색상",
        type: "color",
      },
    ],
  },
  {
    id: "display",
    title: "표시 옵션",
    fields: [
      {
        key: "showPercentage",
        label: "퍼센트 표시",
        type: "switch",
      },
      {
        key: "showValue",
        label: "값 표시",
        type: "switch",
      },
    ],
  },
];

export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({
  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}
    />
  );
};