"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 { getShipbuildingItems } from "../../service"
import { getShipbuildingColumns } from "./items-ship-table-columns"
import { ItemsTableToolbarActions } from "./items-table-toolbar-actions"
import { DeleteItemsDialog } from "../delete-items-dialog"
import { UpdateItemSheet } from "../update-items-sheet"

// 서비스에서 반환하는 데이터 타입 정의
type ShipbuildingItem = {
  id: number;
  itemId: number;
  workType: "기장" | "전장" | "선실" | "배관" | "철의";
  shipTypes: string;
  itemCode: string;
  itemName: string;
  itemList: string | null;
  description: string | null;
  createdAt: Date;
  updatedAt: Date;
}

interface ItemsTableProps {
  promises: Promise<Awaited<ReturnType<typeof getShipbuildingItems>>>
}

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

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

  /**
   * Advanced filter fields for the data table.
   * These fields provide more complex filtering options compared to the regular filterFields.
   *
   * Key differences from regular filterFields:
   * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
   * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
   * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
   * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
   */

  const advancedFilterFields: DataTableAdvancedFilterField<ShipbuildingItem>[] = [
    {
      id: "itemCode",
      label: "Item Code",
      type: "text",
    },
    {
      id: "itemName",
      label: "Item Name",
      type: "text",
    },
    {
      id: "description",
      label: "Description",
      type: "text",
    },
    {
      id: "workType",
      label: "기능(공종)",
      type: "text",
    },
    {
      id: "shipTypes",
      label: "선종",
      type: "text",
    },
    {
      id: "itemList",
      label: "아이템 리스트",
      type: "text",
    },
  ]

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