"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 { getOffshoreTopItems } from "../../service"
import { getOffshoreTopColumns } from "./offshore-top-table-columns"
import { OffshoreTopTableToolbarActions } from "./offshore-top-table-toolbar-actions"
import { DeleteItemsDialog } from "../delete-items-dialog"
import { UpdateItemSheet } from "../update-items-sheet"

// 서비스에서 반환하는 데이터 타입 정의
type OffshoreTopItem = {
  id: number;
  itemId: number;
  workType: "TM" | "TS" | "TE" | "TP";
  itemList: string | null;
  subItemList: string | null;
  itemCode: string;
  itemName: string;
  description: string | null;
  createdAt: Date;
  updatedAt: Date;
}

interface OffshoreTopTableProps {
  promises: Promise<Awaited<ReturnType<typeof getOffshoreTopItems>>>
}

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

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

  const advancedFilterFields: DataTableAdvancedFilterField<OffshoreTopItem>[] = [
    {
      id: "itemCode",
      label: "Item Code",
      type: "text",
    },
    {
      id: "workType",
      label: "기능(공종)",
      type: "select",
      options: [
        { label: "TM", value: "TM" },
        { label: "TS", value: "TS" },
        { label: "TE", value: "TE" },
        { label: "TP", value: "TP" },
      ],
    },
    {
      id: "itemList",
      label: "아이템 리스트",
      type: "text",
    },
    {
      id: "subItemList",
      label: "서브 아이템 리스트",
      type: "text",
    },

  ]

  const { table } = useDataTable({
    data: data as OffshoreTopItem[],
    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}
        >
          <OffshoreTopTableToolbarActions 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="offshoreTop"
      />
      
      {rowAction?.type === "update" && rowAction.row.original && (
        <UpdateItemSheet
          item={rowAction.row.original}
          itemType="offshoreTop"
          open={true}
          onOpenChange={() => setRowAction(null)}
        />
      )}
    </>
  )
}