"use client";

import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { GroupedTableWrapper } from "./GroupedTableComponent";
import { InvGroupedTableConfigPanel } from "./InvGroupedTableConfigPanel";
import type { GroupedTableConfig } from "./types";

/**
 * GroupedTable — canonical 그룹 테이블 (Phase G.3.1)
 *
 * `groupBy` 컬럼으로 row 를 묶어 그룹 헤더 + 안쪽 row 로 표시. 근태 / 일자별 /
 * 부서별 view 같이 한 화면에서 그룹화된 결과를 보고 싶을 때.
 */

const DEFAULT_CONFIG: Partial<GroupedTableConfig> = {
  sortGroups: "none",
};

export const GroupedTableDefinition = createComponentDefinition({
  id: "grouped-table",
  name: "그룹 테이블",
  name_eng: "Grouped Table",
  description: "row 들을 그룹 키로 묶어 헤더 + 안쪽 row 로 두 단계 표 렌더",
  category: ComponentCategory.DATA,
  web_type: "text",
  component: GroupedTableWrapper,
  default_config: DEFAULT_CONFIG as Record<string, any>,
  default_size: { width: 540, height: 300 },
  config_panel: InvGroupedTableConfigPanel,
  icon: "Table2",
  tags: ["그룹", "테이블", "table", "group", "rows"],
  version: "1.0.0",
  author: "INVYONE",
  documentation:
    "notes/gbpark/2026-05-14-studio-data-view-roadmap.md#phase-g31-progress",
  dataPorts: {
    inputs: [{ name: "data", type: "rows" }],
  },
});

export type {
  GroupedTableConfig,
  GroupedTableColumn,
  GroupedTableDataSource,
} from "./types";
export { GroupedTableComponent, GroupedTableWrapper } from "./GroupedTableComponent";
export { InvGroupedTableConfigPanel } from "./InvGroupedTableConfigPanel";
