"use client"

import * as React from "react"
import { type Table } from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"
import { Plus, Download, Upload, Settings } from "lucide-react"
import { type ApprovalLine } from "../service"
import { CategoryManagementDialog } from "@/lib/approval-template/table/category-management-dialog"

interface ApprovalLineTableToolbarActionsProps {
  table: Table<ApprovalLine>
  onCreateLine: () => void
}

export function ApprovalLineTableToolbarActions({
  table,
  onCreateLine,
}: ApprovalLineTableToolbarActionsProps) {
  const [showCategoryDialog, setShowCategoryDialog] = React.useState(false)
  const isFiltered = table.getState().columnFilters.length > 0

  return (
    <div className="flex items-center justify-between">
      <div className="flex flex-1 items-center space-x-2">
        <Input
          placeholder="결재선 검색..."
          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
          onChange={(event) =>
            table.getColumn("name")?.setFilterValue(event.target.value)
          }
          className="h-8 w-[150px] lg:w-[250px]"
        />
        {isFiltered && (
          <Button
            variant="ghost"
            onClick={() => table.resetColumnFilters()}
            className="h-8 px-2 lg:px-3"
          >
            초기화
          </Button>
        )}
      </div>
      <div className="flex items-center space-x-2">
        {/* 카테고리 관리 버튼 */}
        <CategoryManagementDialog
          open={showCategoryDialog}
          onOpenChange={setShowCategoryDialog}
          showTrigger={false}
        />

        <Button
          variant="outline"
          size="sm"
          onClick={() => setShowCategoryDialog(true)}
        >
          <Settings className="mr-2 h-4 w-4" />
          카테고리 관리
        </Button>

        <Button
          variant="outline"
          size="sm"
          className="ml-auto hidden h-8 lg:flex"
        >
          <Upload className="mr-2 h-4 w-4" />
          가져오기
        </Button>
        <Button
          variant="outline"
          size="sm"
          className="ml-auto hidden h-8 lg:flex"
        >
          <Download className="mr-2 h-4 w-4" />
          내보내기
        </Button>
        <DataTableViewOptions table={table} />
        <Button
          variant="outline"
          size="sm"
          className="ml-auto h-8"
          onClick={onCreateLine}
        >
          <Plus className="mr-2 h-4 w-4" />
          결재선 생성
        </Button>
      </div>
    </div>
  )
}