"use client"

import * as React from "react"
import { SelectTrigger } from "@radix-ui/react-select"
import { type Table } from "@tanstack/react-table"
import {
  ArrowUp,
  CheckCircle2,
  Download,
  Loader,
  Trash2,
  X,
} from "lucide-react"
import { toast } from "sonner"

import { exportTableToExcel } from "@/lib/export"
import { Button } from "@/components/ui/button"
import { Portal } from "@/components/ui/portal"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
} from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Kbd } from "@/components/kbd"

import { removeTags } from "@/lib//tags/service"
import { ActionConfirmDialog } from "@/components/ui/action-dialog"
import { Tag } from "@/db/schema/vendorData"

interface TagsTableFloatingBarProps {
  table: Table<Tag>
  packageCode: string
  projectCode: string

}


export function TagsTableFloatingBar({ table, packageCode, projectCode}: TagsTableFloatingBarProps) {
  const rows = table.getFilteredSelectedRowModel().rows

  const [isPending, startTransition] = React.useTransition()
  const [action, setAction] = React.useState<
    "update-status" | "update-priority" | "export" | "delete"
  >()
  const [popoverOpen, setPopoverOpen] = React.useState(false)

  // Clear selection on Escape key press
  React.useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        table.toggleAllRowsSelected(false)
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [table])



  // 공용 confirm dialog state
  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
  const [confirmProps, setConfirmProps] = React.useState<{
    title: string
    description?: string
    onConfirm: () => Promise<void> | void
  }>({
    title: "",
    description: "",
    onConfirm: () => { },
  })

  // 1) "삭제" Confirm 열기
  function handleDeleteConfirm() {
    setAction("delete")
    setConfirmProps({
      title: `Delete ${rows.length} tag${rows.length > 1 ? "s" : ""}?`,
      description: "This action cannot be undone.",
      onConfirm: async () => {
        startTransition(async () => {
          const { error } = await removeTags({
            ids: rows.map((row) => row.original.id),
            selectedPackageId
          })
          if (error) {
            toast.error(error)
            return
          }
          toast.success("Tags deleted")
          table.toggleAllRowsSelected(false)
          setConfirmDialogOpen(false)
        })
      },
    })
    setConfirmDialogOpen(true)
  }



  return (
    <Portal >
      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5" style={{ bottom: '1.5rem' }}>
        <div className="w-full overflow-x-auto">
          <div className="mx-auto flex w-fit items-center gap-2 rounded-md border bg-background p-2 text-foreground shadow">
            <div className="flex h-7 items-center rounded-md border border-dashed pl-2.5 pr-1">
              <span className="whitespace-nowrap text-xs">
                {rows.length} selected
              </span>
              <Separator orientation="vertical" className="ml-2 mr-1" />
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="size-5 hover:border"
                    onClick={() => table.toggleAllRowsSelected(false)}
                  >
                    <X className="size-3.5 shrink-0" aria-hidden="true" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent className="flex items-center border bg-accent px-2 py-1 font-semibold text-foreground dark:bg-zinc-900">
                  <p className="mr-2">Clear selection</p>
                  <Kbd abbrTitle="Escape" variant="outline">
                    Esc
                  </Kbd>
                </TooltipContent>
              </Tooltip>
            </div>
            <Separator orientation="vertical" className="hidden h-5 sm:block" />
            <div className="flex items-center gap-1.5">
       
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="size-7 border"
                    onClick={() => {
                      setAction("export")

                      startTransition(() => {
                        exportTableToExcel(table, {
                          excludeColumns: ["select", "actions"],
                          onlySelected: true,
                        })
                      })
                    }}
                    disabled={isPending}
                  >
                    {isPending && action === "export" ? (
                      <Loader
                        className="size-3.5 animate-spin"
                        aria-hidden="true"
                      />
                    ) : (
                      <Download className="size-3.5" aria-hidden="true" />
                    )}
                  </Button>
                </TooltipTrigger>
                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
                  <p>Export tasks</p>
                </TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="size-7 border"
                    onClick={handleDeleteConfirm}
                    disabled={isPending}
                  >
                    {isPending && action === "delete" ? (
                      <Loader
                        className="size-3.5 animate-spin"
                        aria-hidden="true"
                      />
                    ) : (
                      <Trash2 className="size-3.5" aria-hidden="true" />
                    )}
                  </Button>
                </TooltipTrigger>
                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
                  <p>Delete tasks</p>
                </TooltipContent>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>


      {/* 공용 Confirm Dialog */}
      <ActionConfirmDialog
        open={confirmDialogOpen}
        onOpenChange={setConfirmDialogOpen}
        title={confirmProps.title}
        description={confirmProps.description}
        onConfirm={confirmProps.onConfirm}
        isLoading={isPending && (action === "delete" || action === "update-priority" || action === "update-status")}
        confirmLabel={
          action === "delete"
            ? "Delete"
            : action === "update-priority" || action === "update-status"
            ? "Update"
            : "Confirm"
        }
        confirmVariant={
          action === "delete" ? "destructive" : "default"
        }
      />
    </Portal>
  )
}