ERP-node/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx

"use client";

import React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { ColumnConfig } from "./types";

interface SingleTableWithStickyProps {
  visibleColumns?: ColumnConfig[];
  columns?: ColumnConfig[];
  data: Record<string, any>[];
  columnLabels: Record<string, string>;
  sortColumn: string | null;
  sortDirection: "asc" | "desc";
  tableConfig?: any;
  isDesignMode?: boolean;
  isAllSelected?: boolean;
  handleSort?: (columnName: string) => void;
  onSort?: (columnName: string) => void;
  handleSelectAll?: (checked: boolean) => void;
  handleRowClick?: (row: any) => void;
  renderCheckboxCell?: (row: any, index: number) => React.ReactNode;
  renderCheckboxHeader?: () => React.ReactNode;
  formatCellValue: (value: any, format?: string, columnName?: string, rowData?: Record<string, any>) => string;
  getColumnWidth: (column: ColumnConfig) => number;
  containerWidth?: string; // 컨테이너 너비 설정
  loading?: boolean;
  error?: string | null;
}

export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
  visibleColumns,
  columns,
  data,
  columnLabels,
  sortColumn,
  sortDirection,
  tableConfig,
  isDesignMode = false,
  isAllSelected = false,
  handleSort,
  onSort,
  handleSelectAll,
  handleRowClick,
  renderCheckboxCell,
  renderCheckboxHeader,
  formatCellValue,
  getColumnWidth,
  containerWidth,
  loading = false,
  error = null,
}) => {
  const checkboxConfig = tableConfig?.checkbox || {};
  const actualColumns = visibleColumns || columns || [];
  const sortHandler = onSort || handleSort || (() => {});

  return (
    <div
      className="relative h-full overflow-x-auto overflow-y-auto bg-background shadow-sm backdrop-blur-sm"
      style={{
        width: "100%",
        maxWidth: "100%",
        maxHeight: "100%", // 최대 높이 제한으로 스크롤 활성화
        boxSizing: "border-box",
      }}
    >
      <Table
        className="w-full"
        style={{
          width: "100%",
          minWidth: "100%",
          tableLayout: "auto", // 테이블 크기 자동 조정
          boxSizing: "border-box",
        }}
      >
        <TableHeader
          className={
            tableConfig.stickyHeader
              ? "sticky top-0 z-20 border-b bg-background backdrop-blur-sm"
              : "border-b bg-background backdrop-blur-sm"
          }
        >
          <TableRow className="border-b">
            {actualColumns.map((column, colIndex) => {
              // 왼쪽 고정 컬럼들의 누적 너비 계산
              const leftFixedWidth = actualColumns
                .slice(0, colIndex)
                .filter((col) => col.fixed === "left")
                .reduce((sum, col) => sum + getColumnWidth(col), 0);

              // 오른쪽 고정 컬럼들의 누적 너비 계산
              const rightFixedColumns = actualColumns.filter((col) => col.fixed === "right");
              const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
              const rightFixedWidth =
                rightFixedIndex >= 0
                  ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
                  : 0;

              return (
                <TableHead
                  key={column.columnName}
                  className={cn(
                    column.columnName === "__checkbox__"
                      ? "h-10 border-0 px-3 py-2 text-center align-middle sm:h-12 sm:px-6 sm:py-3"
                      : "h-10 cursor-pointer border-0 px-3 py-2 text-left align-middle font-semibold whitespace-nowrap text-xs text-foreground transition-all duration-200 select-none hover:text-foreground sm:h-12 sm:px-6 sm:py-3 sm:text-sm",
                    `text-${column.align}`,
                    column.sortable && "hover:bg-primary/10",
                    // 고정 컬럼 스타일
                    column.fixed === "left" &&
                      "sticky z-10 border-r border-border bg-background shadow-sm",
                    column.fixed === "right" &&
                      "sticky z-10 border-l border-border bg-background shadow-sm",
                    // 숨김 컬럼 스타일 (디자인 모드에서만)
                    isDesignMode && column.hidden && "bg-muted/50 opacity-40",
                  )}
                  style={{
                    width: getColumnWidth(column),
                    minWidth: "100px", // 최소 너비 보장
                    maxWidth: "300px", // 최대 너비 제한
                    boxSizing: "border-box",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
                    // sticky 위치 설정
                    ...(column.fixed === "left" && { left: leftFixedWidth }),
                    ...(column.fixed === "right" && { right: rightFixedWidth }),
                  }}
                  onClick={() => column.sortable && sortHandler(column.columnName)}
                >
                  <div className="flex items-center gap-2">
                    {column.columnName === "__checkbox__" ? (
                      checkboxConfig.selectAll && (
                        <Checkbox
                          checked={isAllSelected}
                          onCheckedChange={handleSelectAll}
                          aria-label="전체 선택"
                          style={{ zIndex: 1 }}
                        />
                      )
                    ) : (
                      <>
                        <span className="flex-1 truncate">
                          {columnLabels[column.columnName] || column.displayName || column.columnName}
                        </span>
                        {column.sortable && sortColumn === column.columnName && (
                          <span className="ml-1 flex h-4 w-4 items-center justify-center rounded-md bg-background/50 shadow-sm sm:ml-2 sm:h-5 sm:w-5">
                            {sortDirection === "asc" ? (
                              <ArrowUp className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
                            ) : (
                              <ArrowDown className="h-2.5 w-2.5 text-primary sm:h-3.5 sm:w-3.5" />
                            )}
                          </span>
                        )}
                      </>
                    )}
                  </div>
                </TableHead>
              );
            })}
          </TableRow>
        </TableHeader>

        <TableBody>
          {data.length === 0 ? (
            <TableRow>
                    <TableCell colSpan={visibleColumns.length} className="py-12 text-center">
                      <div className="flex flex-col items-center justify-center space-y-3">
                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                          <svg className="h-6 w-6 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                      />
                    </svg>
                  </div>
                        <span className="text-sm font-medium text-muted-foreground">데이터가 없습니다</span>
                        <span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
                    조건을 변경하여 다시 검색해보세요
                  </span>
                </div>
              </TableCell>
            </TableRow>
          ) : (
            data.map((row, index) => (
              <TableRow
                key={`row-${index}`}
                className={cn(
                  "h-14 cursor-pointer border-b transition-colors bg-background sm:h-16",
                  tableConfig.tableStyle?.hoverEffect && "hover:bg-muted/50",
                )}
                onClick={() => handleRowClick(row)}
              >
                {visibleColumns.map((column, colIndex) => {
                  // 왼쪽 고정 컬럼들의 누적 너비 계산
                  const leftFixedWidth = visibleColumns
                    .slice(0, colIndex)
                    .filter((col) => col.fixed === "left")
                    .reduce((sum, col) => sum + getColumnWidth(col), 0);

                  // 오른쪽 고정 컬럼들의 누적 너비 계산
                  const rightFixedColumns = visibleColumns.filter((col) => col.fixed === "right");
                  const rightFixedIndex = rightFixedColumns.findIndex((col) => col.columnName === column.columnName);
                  const rightFixedWidth =
                    rightFixedIndex >= 0
                      ? rightFixedColumns.slice(rightFixedIndex + 1).reduce((sum, col) => sum + getColumnWidth(col), 0)
                      : 0;

                  return (
                    <TableCell
                      key={`cell-${column.columnName}`}
                      className={cn(
                        "h-14 px-3 py-2 align-middle text-xs whitespace-nowrap text-foreground transition-colors sm:h-16 sm:px-6 sm:py-3 sm:text-sm",
                        `text-${column.align}`,
                        // 고정 컬럼 스타일
                        column.fixed === "left" &&
                          "sticky z-10 border-r border-border bg-background/90 backdrop-blur-sm",
                        column.fixed === "right" &&
                          "sticky z-10 border-l border-border bg-background/90 backdrop-blur-sm",
                      )}
                      style={{
                        width: getColumnWidth(column),
                        minWidth: "100px", // 최소 너비 보장
                        maxWidth: "300px", // 최대 너비 제한
                        boxSizing: "border-box",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                        // sticky 위치 설정
                        ...(column.fixed === "left" && { left: leftFixedWidth }),
                        ...(column.fixed === "right" && { right: rightFixedWidth }),
                      }}
                    >
                      {column.columnName === "__checkbox__"
                        ? renderCheckboxCell(row, index)
                        : formatCellValue(row[column.columnName], column.format, column.columnName, row) || "\u00A0"}
                    </TableCell>
                  );
                })}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );
};