"use client"

import * as React from "react"
import type {
  DataTableAdvancedFilterField,
  DataTableFilterField,
  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 type { PageInformation } from "@/db/schema/information"
import { getInformationColumns } from "./information-table-columns"
import { InformationTableToolbarActions } from "./information-table-toolbar-actions"
import { AddInformationDialog } from "./add-information-dialog"
import { UpdateInformationDialog } from "./update-information-dialog"
import { DeleteInformationDialog } from "./delete-information-dialog"

interface InformationTableProps {
  promises: Promise<{
    data: PageInformation[]
    pageCount: number
    total: number
  }>
}

export function InformationTable({ promises }: InformationTableProps) {
  const [rowAction, setRowAction] = React.useState<DataTableRowAction<PageInformation> | null>(null)
  const [showAddDialog, setShowAddDialog] = React.useState(false)
  const [showUpdateDialog, setShowUpdateDialog] = React.useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)

  const { data, pageCount } = React.use(promises)

  // 컬럼 설정
  const columns = React.useMemo(
    () => getInformationColumns({ setRowAction }),
    [setRowAction]
  )
  
  const filterFields: DataTableFilterField<PageInformation>[] = []

  // 고급 필터 필드 설정
  const advancedFilterFields: DataTableAdvancedFilterField<PageInformation>[] = [
    {
      id: "pageCode",
      label: "페이지 코드",
      type: "text",
    },
    {
      id: "pageName",
      label: "페이지명",
      type: "text",
    },
    {
      id: "title",
      label: "제목",
      type: "text",
    },
    {
      id: "isActive",
      label: "상태",
      type: "select",
      options: [
        { label: "활성", value: "true" },
        { label: "비활성", value: "false" },
      ],
    },
    {
      id: "createdAt",
      label: "생성일",
      type: "date",
    },
    {
      id: "updatedAt",
      label: "수정일",
      type: "date",
    },
  ]

  const { table } = useDataTable({
    data,
    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,
  })

  // 행 액션 처리
  React.useEffect(() => {
    if (rowAction?.type === "update") {
      setShowUpdateDialog(true)
    } else if (rowAction?.type === "delete") {
      setShowDeleteDialog(true)
    }
  }, [rowAction])

  return (
    <>
      <DataTable table={table}>
      <DataTableAdvancedToolbar
          table={table}
          filterFields={advancedFilterFields}
          shallow={false}
        >
          <InformationTableToolbarActions 
            table={table} 
            onAdd={() => setShowAddDialog(true)}
          />
        </DataTableAdvancedToolbar>
      </DataTable>

      <AddInformationDialog
        open={showAddDialog}
        onOpenChange={setShowAddDialog}
      />

      <UpdateInformationDialog
        open={showUpdateDialog}
        onOpenChange={setShowUpdateDialog}
        information={rowAction?.row.original}
        onClose={() => {
          setShowUpdateDialog(false)
          setRowAction(null)
        }}
      />

      <DeleteInformationDialog
        open={showDeleteDialog}
        onOpenChange={setShowDeleteDialog}
        information={rowAction?.row.original}
        onClose={() => {
          setShowDeleteDialog(false)
          setRowAction(null)
        }}
      />
    </>
  )
}