"use client"

import * as React from "react"
import { type DataTableAdvancedFilterField } 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 { getColumns, type AcceptedQuotationItem } from "./accepted-quotations-table-columns"
import { AcceptedQuotationsTableToolbarActions } from "./accepted-quotations-table-toolbar-actions"

interface AcceptedQuotationsTableProps {
  data: AcceptedQuotationItem[]
  pageCount: number
  onRefresh?: () => void
}

export function AcceptedQuotationsTable({
  data,
  pageCount,
  onRefresh,
}: AcceptedQuotationsTableProps) {

  // 필터 필드 정의
  const filterFields: DataTableAdvancedFilterField<AcceptedQuotationItem>[] = [
    {
      id: "rfqCode",
      label: "RFQ 코드",
      type: "text",
      placeholder: "RFQ 코드로 필터...",
    },
    {
      id: "vendorName",
      label: "업체명",
      type: "text",
      placeholder: "업체명으로 필터...",
    },
    {
      id: "vendorCode",
      label: "업체 코드",
      type: "text",
      placeholder: "업체 코드로 필터...",
    },
    {
      id: "projNm",
      label: "프로젝트명",
      type: "text",
      placeholder: "프로젝트명으로 필터...",
    },
    {
      id: "vendorCountry",
      label: "국가",
      type: "text",
      placeholder: "국가로 필터...",
    },
    {
      id: "currency",
      label: "통화",
      type: "select",
      options: [
        { label: "USD", value: "USD" },
        { label: "EUR", value: "EUR" },
        { label: "KRW", value: "KRW" },
        { label: "JPY", value: "JPY" },
        { label: "CNY", value: "CNY" },
      ],
    },
    {
      id: "rfqType",
      label: "RFQ 타입",
      type: "select",
      options: [
        { label: "TOP", value: "TOP" },
        { label: "HULL", value: "HULL" },
      ],
    },
    {
      id: "dueDate",
      label: "마감일",
      type: "date",
    },
    {
      id: "acceptedAt",
      label: "승인일",
      type: "date",
    },
  ]

  const columns = React.useMemo(
    () => getColumns(),
    []
  )

  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    filterFields,
    initialState: {
      sorting: [{ id: "acceptedAt", desc: true }],
      columnPinning: { left: ["select"] },
    },
    getRowId: (originalRow) => `${originalRow.id}`,
  })

  return (
    <div className="w-full space-y-2.5 overflow-auto">
      <DataTableAdvancedToolbar table={table} filterFields={filterFields}>
        <AcceptedQuotationsTableToolbarActions 
          table={table} 
          onRefresh={onRefresh}
        />
      </DataTableAdvancedToolbar>
      <DataTable table={table} />
    </div>
  )
}