/* =============================================================================
 * E03_StabSection_UI_Table.ts
 * E03 표 하나(553-4) — 표 부품(`ui_template_table` · 데이터표 줄 28)을 부르고 촬영 장면 · 시험이 잡는
 *   걸이(`table.e03-table[data-role]` · `tr`)만 얹음. 모양은 부품 · 여기는 CSS 없음.
 * ========================================================================== */

import { createTable, type Cell } from "@ui/ui_template_table";

export interface E03Column {
  label: string;
  /** 수 칸 — 오른쪽 맞춤 */
  num?: boolean;
  /** 마우스 글 */
  title?: string;
}

export interface E03TableHandle {
  /** 표 감싸개(`.ui-table-wrap`) */
  root: HTMLElement;
  table: HTMLTableElement;
  rows: HTMLTableRowElement[];
}

export function e03Table(
  columns: E03Column[],
  rows: Cell[][],
  role?: string,
  extraClass?: string,
): E03TableHandle {
  const root = createTable(
    columns.map((c) => ({ label: c.label, ...(c.num ? { align: "end" as const } : {}) })),
    rows,
    { density: "data" },
  );
  const table = root.querySelector("table") as HTMLTableElement;
  table.classList.add("e03-table");
  if (extraClass) table.classList.add(...extraClass.split(" "));
  if (role) table.dataset.role = role;
  columns.forEach((c, i) => {
    if (c.title) table.tHead?.rows[0].cells[i].setAttribute("title", c.title);
  });
  return { root, table, rows: [...table.tBodies[0].rows] };
}