path: root/lib/items-tech/table/hull/offshore-hull-table-columns.tsx

"use client"

import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
import { Ellipsis } from "lucide-react"

import { formatDate } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"

// 테이블 표시에 필요한 데이터 타입 정의
interface OffshoreHullTableItem {
  id: number;
  itemId: number;
  workType: "HA" | "HE" | "HH" | "HM" | "NC";
  itemList1: string | null;
  itemList2: string | null;
  itemList3: string | null;
  itemList4: string | null;
  itemCode: string;
  itemName: string;
  description: string | null;
  createdAt: Date;
  updatedAt: Date;
}

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<OffshoreHullTableItem> | null>>
}

export function getOffshoreHullColumns({ setRowAction }: GetColumnsProps): ColumnDef<OffshoreHullTableItem>[] {
  // ----------------------------------------------------------------
  // 1) select 컬럼 (체크박스)
  // ----------------------------------------------------------------
  const selectColumn: ColumnDef<OffshoreHullTableItem> = {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
        className="translate-y-0.5"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
        className="translate-y-0.5"
      />
    ),
    size: 40,
    enableSorting: false,
    enableHiding: false,
  }

  // ----------------------------------------------------------------
  // 2) actions 컬럼 (Dropdown 메뉴)
  // ----------------------------------------------------------------
  const actionsColumn: ColumnDef<OffshoreHullTableItem> = {
    id: "actions",
    cell: ({ row }) => (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            aria-label="Open menu"
            variant="ghost"
            className="flex size-8 p-0 data-[state=open]:bg-muted"
          >
            <Ellipsis className="size-4" aria-hidden="true" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-40">
          <DropdownMenuItem
            onSelect={() => setRowAction({ row, type: "update" })}
          >
            수정
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onSelect={() => setRowAction({ row, type: "delete" })}
            className="text-destructive"
          >
            삭제
            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    ),
    size: 40,
    enableSorting: false,
    enableHiding: false,
  }

  // ----------------------------------------------------------------
  // 3) 데이터 컬럼들을 그룹별로 구성
  // ----------------------------------------------------------------
  
  // 3-1) 기본 정보 그룹 컬럼
  const basicInfoColumns: ColumnDef<OffshoreHullTableItem>[] = [
    {
      accessorKey: "itemCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Material Group" />
      ),
      cell: ({ row }) => <div>{row.original.itemCode}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "Material Group",
        group: "기본 정보",
      },
    },
    {
      accessorKey: "itemName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Description" />
      ),
      cell: ({ row }) => <div>{row.original.itemName}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "Description",
        group: "기본 정보",
      },
    },
    {
      accessorKey: "workType",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="기능(공종)" />
      ),
      cell: ({ row }) => <div>{row.original.workType}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "기능(공종)",
        group: "기본 정보",
      },
    },
    {
      accessorKey: "description",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Size/Dimension" />
      ),
      cell: ({ row }) => <div>{row.original.description || "-"}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "Size/Dimension",
        group: "기본 정보",
      },
    },
  ]
  
  // 3-2) 아이템 리스트 그룹 컬럼
  const itemListColumns: ColumnDef<OffshoreHullTableItem>[] = [
    {
      accessorKey: "itemList1",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 1" />
      ),
      cell: ({ row }) => <div>{row.original.itemList1 || "-"}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "아이템 리스트 1",
        group: "아이템 리스트",
      },
    },
    {
      accessorKey: "itemList2",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 2" />
      ),
      cell: ({ row }) => <div>{row.original.itemList2 || "-"}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "아이템 리스트 2",
        group: "아이템 리스트",
      },
    },
    {
      accessorKey: "itemList3",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 3" />
      ),
      cell: ({ row }) => <div>{row.original.itemList3 || "-"}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "아이템 리스트 3",
        group: "아이템 리스트",
      },
    },
    {
      accessorKey: "itemList4",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 4" />
      ),
      cell: ({ row }) => <div>{row.original.itemList4 || "-"}</div>,
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "아이템 리스트 4",
        group: "아이템 리스트",
      },
    },
  ]
  
  // 3-3) 메타데이터 그룹 컬럼
  const metadataColumns: ColumnDef<OffshoreHullTableItem>[] = [
    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="생성일" />
      ),
      cell: ({ row }) => formatDate(row.original.createdAt),
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "생성일",
        group: "Metadata",
      },
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="수정일" />
      ),
      cell: ({ row }) => formatDate(row.original.updatedAt),
      enableSorting: true,
      enableHiding: true,
      meta: {
        excelHeader: "수정일",
        group: "Metadata",
      },
    }
  ]
  
  // 3-4) 그룹별 컬럼 구성
  const groupedColumns: ColumnDef<OffshoreHullTableItem>[] = [
    {
      id: "기본 정보",
      header: "기본 정보",
      columns: basicInfoColumns,
    },
    {
      id: "아이템 리스트",
      header: "아이템 리스트",
      columns: itemListColumns,
    },
    {
      id: "Metadata",
      header: "Metadata",
      columns: metadataColumns,
    }
  ]

  // ----------------------------------------------------------------
  // 4) 최종 컬럼 배열: select, groupedColumns, actions
  // ----------------------------------------------------------------
  return [
    selectColumn,
    ...groupedColumns,
    actionsColumn,
  ]
}