"use client";

import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { ChartWrapper } from "./ChartComponent";
import { InvChartConfigPanel } from "./InvChartConfigPanel";
import type { ChartConfig } from "./types";

/**
 * Chart — canonical 차트 컴포넌트 (Phase G.3)
 *
 * 4종 차트 (bar / horizontalBar / line / donut) 통합. `dataSource.tableName +
 * groupBy + aggregation` 으로 백엔드 `/aggregate-group` endpoint 호출 → recharts
 * 위에서 렌더.
 *
 * 관련 문서:
 *   notes/gbpark/2026-05-14-studio-data-view-roadmap.md (Phase G.3 Progress)
 */

const DEFAULT_CONFIG: Partial<ChartConfig> = {
  chartType: "bar",
  showAxis: true,
  showLegend: true,
};

export const ChartDefinition = createComponentDefinition({
  id: "chart",
  name: "차트",
  name_eng: "Chart",
  description: "테이블 데이터를 막대 / 도넛 / 선 / 가로막대 차트로 표시",
  category: ComponentCategory.DISPLAY,
  web_type: "text",
  component: ChartWrapper,
  default_config: DEFAULT_CONFIG as Record<string, any>,
  default_size: { width: 480, height: 280 },
  config_panel: InvChartConfigPanel,
  icon: "BarChart3",
  tags: ["차트", "chart", "graph", "bar", "donut", "line", "aggregation"],
  version: "1.0.0",
  author: "INVYONE",
  documentation:
    "notes/gbpark/2026-05-14-studio-data-view-roadmap.md#phase-g3-progress",
  // ─── INVYONE DataPort 선언 (Phase G.0 wiring 비활성 유지) ───
  dataPorts: {
    inputs: [{ name: "data", type: "rows" }],
  },
});

export type { ChartConfig, ChartType, ChartDataSource } from "./types";
export { ChartComponent, ChartWrapper } from "./ChartComponent";
export { InvChartConfigPanel } from "./InvChartConfigPanel";
