"use client"

import * as React from "react"
import type {
  DataTableFilterField,
  DataTableAdvancedFilterField,
  DataTableRowAction,
} from "@/types/table"

import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { getOffshoreHullItems } from "../../service"
import { getOffshoreHullColumns } from "./offshore-hull-table-columns"
import { OffshoreHullTableToolbarActions } from "./offshore-hull-table-toolbar-actions"
import { DeleteItemsDialog } from "../delete-items-dialog"
import { UpdateItemSheet } from "../update-items-sheet"

// 서비스에서 반환하는 데이터 타입 정의
type OffshoreHullItem = {
  id: number;
  itemId: number;
  workType: "HA" | "HE" | "HH" | "HM" | "NC";
  itemList: string | null;
  subItemList: string | null;
  itemCode: string;
  itemName: string;
  description: string | null;
  createdAt: Date;
  updatedAt: Date;
}

interface OffshoreHullTableProps {
  promises: Promise<Awaited<ReturnType<typeof getOffshoreHullItems>>>
}

export function OffshoreHullTable({ promises }: OffshoreHullTableProps) {
  const { data, pageCount } = React.use(promises)

  // 아이템 타입에 따른 행 액션 상태 관리
  const [rowAction, setRowAction] = React.useState<DataTableRowAction<OffshoreHullItem> | null>(null)
  const columns = getOffshoreHullColumns({ setRowAction })
  const filterFields: DataTableFilterField<OffshoreHullItem>[] = [
    {
      id: "itemCode",
      label: "Item Code",
    },
    {
      id: "itemName",
      label: "Item Name",
    },
    {
      id: "workType",
      label: "기능(공종)",
    },
    {
      id: "itemList",
      label: "아이템 리스트",
    },
    {
      id: "subItemList",
      label: "서브 아이템 리스트",
    },
  ]

  const advancedFilterFields: DataTableAdvancedFilterField<OffshoreHullItem>[] = [
    {
      id: "itemCode",
      label: "Item Code",
      type: "text",
    },
    {
      id: "workType",
      label: "기능(공종)",
      type: "select",
      options: [
        { label: "HA", value: "HA" },
        { label: "HE", value: "HE" },
        { label: "HH", value: "HH" },
        { label: "HM", value: "HM" },
        { label: "NC", value: "NC" },
      ],
    },
    {
      id: "itemList",
      label: "아이템 리스트",
      type: "text",
    },
    {
      id: "subItemList",
      label: "서브 아이템 리스트",
      type: "text",
    },
  ]

  const { table } = useDataTable({
    data: data as OffshoreHullItem[],
    columns,
    pageCount,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "createdAt", desc: true }],
      columnPinning: { right: ["actions"] },
    },
    getRowId: (originalRow) => String(originalRow.id),
    shallow: false,
    clearOnDefault: true,
  })

  return (
    <>
      <DataTable table={table}>
        <DataTableAdvancedToolbar
          table={table}
          filterFields={advancedFilterFields}
          shallow={false}
        >
          <OffshoreHullTableToolbarActions table={table} />
        </DataTableAdvancedToolbar>
      </DataTable>
      <DeleteItemsDialog
        open={rowAction?.type === "delete"}
        onOpenChange={() => setRowAction(null)}
        items={rowAction?.row.original ? [rowAction?.row.original] : []}
        showTrigger={false}
        onSuccess={() => rowAction?.row.toggleSelected(false)}
        itemType="offshoreHull"
      />
      {rowAction?.type === "update" && rowAction.row.original && (
        <UpdateItemSheet
          item={rowAction.row.original}
          itemType="offshoreHull"
          open={true}
          onOpenChange={() => setRowAction(null)}
        />
      )}
    </>
  )
}