"use client";

import * as React from "react";
import { DataTable } from "@/components/data-table/data-table";
import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { confirmedMaterialsColumns } from "./columns";
import { useDataTable } from "@/hooks/use-data-table";
import { getConfirmedMaterials, VendorPossibleMaterial } from "../vendor-possible-material-service";

interface ConfirmedMaterialsTableProps {
  vendorId: number;
  data: VendorPossibleMaterial[];
  pageCount: number;
}

export function ConfirmedMaterialsTable({
  vendorId,
  data,
  pageCount,
}: ConfirmedMaterialsTableProps) {
  const { table } = useDataTable({
    data,
    columns: confirmedMaterialsColumns,
    pageCount,
    filterFields: [
      {
        id: "itemCode",
        label: "자재그룹",
        placeholder: "자재그룹 검색...",
      },
      {
        id: "itemName", 
        label: "자재그룹명",
        placeholder: "자재그룹명 검색...",
      },
    ],
  });

  const handleAddMaterial = () => {
    // TODO: 확정정보 추가 다이얼로그 열기
    console.log("확정정보 추가 버튼 클릭");
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">확정정보</h3>
        <Button onClick={handleAddMaterial} className="gap-2">
          <Plus className="h-4 w-4" />
          추가등록
        </Button>
      </div>
      
      <DataTable table={table}>
        <DataTableToolbar 
          table={table} 
          filterFields={[
            {
              id: "itemCode",
              label: "자재그룹",
              placeholder: "자재그룹 검색...",
            },
            {
              id: "itemName", 
              label: "자재그룹명",
              placeholder: "자재그룹명 검색...",
            },
          ]}
        >
          {/* 컬럼 선택 기능 제거 - DataTableViewOptions 없음 */}
        </DataTableToolbar>
      </DataTable>
    </div>
  );
}