"use client"

import * as React from "react"
import { Table } from "@tanstack/react-table"
import { toast } from "sonner"
import { Calendar, type CalendarProps } from "@/components/ui/calendar"
import { Button } from "@/components/ui/button"
import { Portal } from "@/components/ui/portal"
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectValue,
} from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip"
import { Kbd } from "@/components/kbd"
import { ActionConfirmDialog } from "@/components/ui/action-dialog"

import { ArrowUp, CheckCircle2, Download, Loader, Trash2, X, CalendarIcon } from "lucide-react"

import { exportTableToExcel } from "@/lib/export"

import { RfqWithItemCount, rfqs } from "@/db/schema/rfq"
import { modifyRfqs, removeRfqs } from "../service"

interface RfqsTableFloatingBarProps {
  table: Table<RfqWithItemCount>
}

/**
 * 추가된 로직:
 * - 달력(캘린더) 아이콘 버튼
 * - 눌렀을 때 Popover로 Calendar 표시
 * - 날짜 선택 시 Confirm 다이얼로그 → modifyRfqs({ dueDate })
 */
export function RfqsTableFloatingBar({ table }: RfqsTableFloatingBarProps) {
  const rows = table.getFilteredSelectedRowModel().rows
  const [isPending, startTransition] = React.useTransition()
  const [action, setAction] = React.useState<"update-status" | "export" | "delete" | "update-dueDate">()
  const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false)

  const [confirmProps, setConfirmProps] = React.useState<{
    title: string
    description?: string
    onConfirm: () => Promise<void> | void
  }>({
    title: "",
    description: "",
    onConfirm: () => {},
  })

  // 캘린더 Popover 열림 여부
  const [calendarOpen, setCalendarOpen] = React.useState(false)
  const [selectedDate, setSelectedDate] = React.useState<Date | null>(null)

  // 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])

  function handleDeleteConfirm() {
    setAction("delete")
    setConfirmProps({
      title: `Delete ${rows.length} RFQ${rows.length > 1 ? "s" : ""}?`,
      description: "This action cannot be undone.",
      onConfirm: async () => {
        startTransition(async () => {
          const { error } = await removeRfqs({
            ids: rows.map((row) => row.original.rfqId),
          })
          if (error) {
            toast.error(error)
            return
          }
          toast.success("RFQs deleted")
          table.toggleAllRowsSelected(false)
          setConfirmDialogOpen(false)
        })
      },
    })
    setConfirmDialogOpen(true)
  }

  function handleSelectStatus(newStatus: RfqWithItemCount["status"]) {
    setAction("update-status")
    setConfirmProps({
      title: `Update ${rows.length} RFQ${rows.length > 1 ? "s" : ""} with status: ${newStatus}?`,
      description: "This action will override their current status.",
      onConfirm: async () => {
        startTransition(async () => {
          const { error } = await modifyRfqs({
            ids: rows.map((row) => row.original.rfqId),
            status: newStatus as "DRAFT" | "PUBLISHED" | "EVALUATION" | "AWARDED",
          })
          if (error) {
            toast.error(error)
            return
          }
          toast.success("RFQs updated")
          setConfirmDialogOpen(false)
        })
      },
    })
    setConfirmDialogOpen(true)
  }

  // 1) 달력에서 날짜를 선택했을 때 → Confirm 다이얼로그
  function handleDueDateSelect(newDate: Date) {
    setAction("update-dueDate")

    setConfirmProps({
      title: `Update ${rows.length} RFQ${rows.length > 1 ? "s" : ""} Due Date to ${newDate.toDateString()}?`,
      description: "This action will override their current due date.",
      onConfirm: async () => {
        startTransition(async () => {
          const { error } = await modifyRfqs({
            ids: rows.map((r) => r.original.rfqId),
            dueDate: newDate,
          })
          if (error) {
            toast.error(error)
            return
          }
          toast.success("Due date updated")
          setConfirmDialogOpen(false)
          setCalendarOpen(false)
        })
      },
    })
    setConfirmDialogOpen(true)
  }

  // 2) Export
  function handleExport() {
    setAction("export")
    startTransition(() => {
      exportTableToExcel(table, {
        excludeColumns: ["select", "actions"],
        onlySelected: true,
      })
    })
  }

  // Floating bar UI
  return (
    <Portal>
      <div className="fixed inset-x-0 bottom-10 z-50 mx-auto w-fit px-2.5">
        <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">
            {/* Selection Info + Clear */}
            <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">
              {/* 1) Status Update */}
              <Select
                onValueChange={(value: RfqWithItemCount["status"]) => handleSelectStatus(value)}
              >
                <Tooltip>
                  <SelectTrigger asChild>
                    <TooltipTrigger asChild>
                      <Button
                        variant="secondary"
                        size="icon"
                        className="size-7 border data-[state=open]:bg-accent data-[state=open]:text-accent-foreground"
                        disabled={isPending}
                      >
                        {isPending && action === "update-status" ? (
                          <Loader className="size-3.5 animate-spin" aria-hidden="true" />
                        ) : (
                          <CheckCircle2 className="size-3.5" aria-hidden="true" />
                        )}
                      </Button>
                    </TooltipTrigger>
                  </SelectTrigger>
                  <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
                    <p>Update status</p>
                  </TooltipContent>
                </Tooltip>
                <SelectContent align="center">
                  <SelectGroup>
                    {rfqs.status.enumValues.map((status) => (
                      <SelectItem key={status} value={status} className="capitalize">
                        {status}
                      </SelectItem>
                    ))}
                  </SelectGroup>
                </SelectContent>
              </Select>

              {/* 2) Due Date Update: Calendar Popover */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="size-7 border"
                    disabled={isPending}
                    onClick={() => setCalendarOpen((open) => !open)}
                  >
                    {isPending && action === "update-dueDate" ? (
                      <Loader className="size-3.5 animate-spin" aria-hidden="true" />
                    ) : (
                      <CalendarIcon className="size-3.5" aria-hidden="true" />
                    )}
                  </Button>
                </TooltipTrigger>
                <TooltipContent className="border bg-accent font-semibold text-foreground dark:bg-zinc-900">
                  <p>Update Due Date</p>
                </TooltipContent>
              </Tooltip>

              {/* Calendar Popover (간단 구현) */}
              {calendarOpen && (
                <div className="absolute bottom-16 z-50 rounded-md border bg-background p-2 shadow">
                  <Calendar
                    mode="single"
                    selected={selectedDate || new Date()}
                    onSelect={(date) => {
                      if (date) {
                        setSelectedDate(date)
                        handleDueDateSelect(date)
                      }
                    }}
                    initialFocus
                  />
                </div>
              )}

              {/* 3) Export */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="size-7 border"
                    onClick={handleExport}
                    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>

              {/* 4) Delete */}
              <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-status" || action === "update-dueDate")
        }
        confirmLabel={
          action === "delete"
            ? "Delete"
            : action === "update-status"
            ? "Update"
            : action === "update-dueDate"
            ? "Update"
            : "Confirm"
        }
        confirmVariant={action === "delete" ? "destructive" : "default"}
      />
    </Portal>
  )
}