"use client"

import * as React from "react"
import type { DataTableAdvancedFilterField } from "@/types/table"
import { type Table } from "@tanstack/react-table"

import { cn } from "@/lib/utils"
import { ClientDataTableViewOptions } from "./data-table-view-options"
import { Button } from "../ui/button"
import { Download } from "lucide-react"

import { exportTableToExcel } from "@/lib/export_all"
import { ClientDataTableSortList } from "./data-table-sort-list"
import { ClientDataTableGroupList } from "./data-table-group-list"
import { ClientDataTableAdvancedFilter } from "./data-table-filter-list"

interface DataTableAdvancedToolbarProps<TData>
  extends React.HTMLAttributes<HTMLDivElement> {
  table: Table<TData>
  filterFields: DataTableAdvancedFilterField<TData>[]
  debounceMs?: number
  shallow?: boolean
  children?: React.ReactNode
}

export function ClientDataTableAdvancedToolbar<TData>({
  table,
  filterFields = [],
  debounceMs = 300,
  shallow = true,
  children,
  className,
  ...props
}: DataTableAdvancedToolbarProps<TData>) {

  // 전체 엑셀 내보내기
  const handleExportAll = async () => {
    try {
      await exportTableToExcel(table, {
        filename: "my-data",
        onlySelected: false,
        excludeColumns: ["select", "actions", "validation", "requestedAmount", "update"],
        useGroupHeader: false,
        allPages: true,

      })
    } catch (err) {
      console.error("Export error:", err)
      // 필요하면 토스트나 알림 처리
    }
  }



  return (
    <div
      className={cn(
        "flex w-full items-center justify-between gap-2 overflow-auto p-1",
        className
      )}
      {...props}
    >
      {/* 왼쪽: 필터 & 정렬 & 뷰 옵션 */}
      <div className="flex items-center gap-2">
        <ClientDataTableAdvancedFilter
          table={table}
          filterFields={filterFields}
        />
        <ClientDataTableSortList table={table} />
        <ClientDataTableViewOptions table={table} />
        <ClientDataTableGroupList table={table}/>
        <Button variant="outline" size="sm" onClick={handleExportAll}>
          <Download className="size-4" />
          {/* i18n 버튼 문구 */}
          <span className="hidden sm:inline">
            {"Export All" }
          </span>
        </Button>
      </div>

      {/* 오른쪽: Export 버튼 + children */}
      <div className="flex items-center gap-2">


        {/* 자식 컴포넌트(추가 버튼 등) */}
        {children}

        {/* 선택된 행만 내보내기 버튼 예시 (필요 시 주석 해제) */}
        {/*
        <Button variant="outline" size="sm" onClick={handleExportSelected}>
          <Download className="size-4" />
          <span className="hidden sm:inline">
            {t("common.exportSelected", { defaultValue: "Export Selected" })}
          </span>
        </Button>
        */}
      </div>
    </div>
  )
}