path: root/lib/dolce/table/drawing-list-table-v2.tsx

"use client";

import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
  getSortedRowModel,
  SortingState,
  getPaginationRowModel,
} from "@tanstack/react-table";
import { useState } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ArrowUpDown, ArrowUp, ArrowDown, ChevronLeft, ChevronRight } from "lucide-react";

// 도면 데이터의 기본 인터페이스
interface DrawingData {
  RegisterGroupId?: string | number | null;
  DrawingNo?: string | null;
  Discipline?: string | null;
  CreateDt?: string | Date | null;
}

interface DrawingListTableV2Props<TData extends DrawingData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  onRowClick?: (row: TData) => void;
  selectedRow?: TData;
  getRowId?: (row: TData) => string;
  maxHeight?: string; // e.g., "45vh"
  minHeight?: string; // e.g., "400px"
  defaultPageSize?: number;
}

export function DrawingListTableV2<TData extends DrawingData, TValue>({
  columns,
  data,
  onRowClick,
  selectedRow,
  getRowId,
  maxHeight,
  minHeight = "400px",
  defaultPageSize,
}: DrawingListTableV2Props<TData, TValue>) {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [pageIndex, setPageIndex] = useState(0);
  // defaultPageSize가 없으면 전체 데이터 길이를 사용
  const [pageSize, setPageSize] = useState(defaultPageSize ?? data.length);

  // 기본 getRowId 함수: RegisterGroupId + DrawingNo + Discipline + CreateDt 조합
  const defaultGetRowId = (row: TData): string => {
    const registerId = row.RegisterGroupId || '';
    const drawingNo = row.DrawingNo || '';
    const discipline = row.Discipline || '';
    const createDt = row.CreateDt 
      ? (row.CreateDt instanceof Date ? row.CreateDt.toISOString() : String(row.CreateDt))
      : '';
    
    return `${registerId}-${drawingNo}-${discipline}-${createDt}`;
  };

  const rowIdGetter = getRowId || defaultGetRowId;

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    onPaginationChange: (updater) => {
      if (typeof updater === 'function') {
        const newState = updater({ pageIndex, pageSize });
        setPageIndex(newState.pageIndex);
        setPageSize(newState.pageSize);
      }
    },
    state: {
      sorting,
      pagination: {
        pageIndex,
        pageSize,
      },
    },
  });

  // 행이 선택되었는지 확인하는 함수
  const isRowSelected = (row: TData): boolean => {
    if (!selectedRow) return false;
    return rowIdGetter(row) === rowIdGetter(selectedRow);
  };

  const handlePageSizeChange = (value: string) => {
    const newSize = value === "all" ? data.length : parseInt(value, 10);
    setPageSize(newSize);
    setPageIndex(0);
  };

  return (
    <div className="flex flex-col h-full" style={{ minHeight }}>
      {/* 테이블 영역 */}
      <div 
        className="rounded-md border overflow-auto flex-1"
        style={{ 
          maxHeight,
          minHeight: data.length === 0 ? minHeight : undefined,
        }}
      >
        <Table className="w-full">
          <TableHeader className="sticky top-0 z-10 bg-background">
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  const isSorted = header.column.getIsSorted();
                  const canSort = header.column.getCanSort();
                  
                  return (
                    <TableHead 
                      key={header.id}
                      style={{ minWidth: header.column.columnDef.minSize }}
                      className="bg-background"
                    >
                      {header.isPlaceholder ? null : (
                        <div
                          className={`flex items-center gap-2 ${
                            canSort ? "cursor-pointer select-none hover:text-primary" : ""
                          }`}
                          onClick={
                            canSort
                              ? header.column.getToggleSortingHandler()
                              : undefined
                          }
                        >
                          {flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                          {canSort && (
                            <span className="text-muted-foreground">
                              {isSorted === "asc" ? (
                                <ArrowUp className="h-4 w-4" />
                              ) : isSorted === "desc" ? (
                                <ArrowDown className="h-4 w-4" />
                              ) : (
                                <ArrowUpDown className="h-4 w-4 opacity-50" />
                              )}
                            </span>
                          )}
                        </div>
                      )}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => {
                const isSelected = isRowSelected(row.original);
                return (
                  <TableRow
                    key={row.id}
                    data-state={row.getIsSelected() && "selected"}
                    onClick={() => onRowClick?.(row.original)}
                    className={`cursor-pointer transition-colors ${
                      isSelected
                        ? "bg-accent hover:bg-accent"
                        : "hover:bg-muted/50"
                    }`}
                  >
                    {row.getVisibleCells().map((cell) => (
                      <TableCell 
                        key={cell.id}
                        style={{ minWidth: cell.column.columnDef.minSize }}
                      >
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </TableCell>
                    ))}
                  </TableRow>
                );
              })
            ) : (
              <TableRow>
                <TableCell 
                  colSpan={columns.length} 
                  className="text-center text-muted-foreground"
                  style={{ height: "300px" }}
                >
                  <div className="flex items-center justify-center h-full">
                    No Data.
                  </div>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      {/* 페이지네이션 컨트롤 - 항상 렌더링하여 높이 일관성 유지 */}
      <div className="flex items-center justify-between py-2 px-2 border-t flex-shrink-0">
        {data.length > 0 ? (
          <>
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">
                Rows per page:
              </span>
              <Select value={pageSize === data.length ? "all" : String(pageSize)} onValueChange={handlePageSizeChange}>
                <SelectTrigger className="w-[100px] h-8">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="20">20</SelectItem>
                  <SelectItem value="100">100</SelectItem>
                  <SelectItem value="all">All</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">
                {table.getState().pagination.pageIndex * pageSize + 1}-
                {Math.min(
                  (table.getState().pagination.pageIndex + 1) * pageSize,
                  data.length
                )}{" "}
                / {data.length}
              </span>
              <div className="flex gap-1">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => table.previousPage()}
                  disabled={!table.getCanPreviousPage()}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => table.nextPage()}
                  disabled={!table.getCanNextPage()}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </>
        ) : (
          <div className="text-sm text-muted-foreground opacity-0">
            Placeholder for consistent height
          </div>
        )}
      </div>
    </div>
  );
}