"use client"

import * as React from "react"
import { Header } from "@tanstack/react-table"
import { useSortable } from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"
import { flexRender } from "@tanstack/react-table"
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
import {
  ArrowDown,
  ArrowUp,
  ChevronsUpDown,
  EyeOff,
  PinOff,
  MoveLeft,
  MoveRight,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { ClientTableFilter } from "./client-table-filter"

interface ClientTableColumnHeaderProps<TData, TValue>
  extends React.HTMLAttributes<HTMLTableHeaderCellElement> {
  header: Header<TData, TValue>
  enableReordering?: boolean
}

export function ClientTableColumnHeader<TData, TValue>({
  header,
  enableReordering = true,
  className,
  ...props
}: ClientTableColumnHeaderProps<TData, TValue>) {
  const column = header.column
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: header.id,
    disabled: !enableReordering,
  })

  // -- Styles --
  const style: React.CSSProperties = {
    // Apply transform only if reordering is enabled and active
    transform: enableReordering ? CSS.Translate.toString(transform) : undefined,
    transition: enableReordering ? transition : undefined,
    width: header.getSize(),
    zIndex: isDragging ? 100 : 0,
    position: "relative",
    ...props.style,
  }

  // Pinning Styles
  const isPinned = column.getIsPinned()
  if (isPinned === "left") {
    style.left = `${column.getStart("left")}px`
    style.position = "sticky"
    style.zIndex = 20
  } else if (isPinned === "right") {
    style.right = `${column.getAfter("right")}px`
    style.position = "sticky"
    style.zIndex = 20
  }

  // -- Handlers --
  const handleHide = () => column.toggleVisibility(false)
  const handlePinLeft = () => column.pin("left")
  const handlePinRight = () => column.pin("right")
  const handleUnpin = () => column.pin(false)

  // -- Content --
  const content = (
    <>
      <div
        className={cn(
          "flex items-center gap-2",
          column.getCanSort() ? "cursor-pointer select-none" : ""
        )}
        onClick={column.getToggleSortingHandler()}
      >
        {flexRender(column.columnDef.header, header.getContext())}
        {column.getCanSort() && (
          <span className="flex items-center">
            {column.getIsSorted() === "desc" ? (
              <ArrowDown className="h-4 w-4" />
            ) : column.getIsSorted() === "asc" ? (
              <ArrowUp className="h-4 w-4" />
            ) : (
              <ChevronsUpDown className="h-4 w-4 opacity-50" />
            )}
          </span>
        )}
      </div>

      {/* Resize Handle */}
      <div
        onMouseDown={header.getResizeHandler()}
        onTouchStart={header.getResizeHandler()}
        onClick={(e) => e.stopPropagation()} // Prevent sort trigger
        className={cn(
          "absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none z-10",
          "after:absolute after:right-0 after:top-0 after:h-full after:w-[1px] after:bg-border", // 시각적 구분선
          "hover:bg-primary/20 hover:w-4 hover:-right-2", // 호버 시 클릭 영역 확장
          header.column.getIsResizing() ? "bg-primary/50 w-1" : "bg-transparent"
        )}
      />

      {/* Filter */}
      {column.getCanFilter() && <ClientTableFilter column={column} />}
    </>
  )

  if (header.isPlaceholder) {
    return (
      <th
        colSpan={header.colSpan}
        style={style}
        className={cn("border-b px-4 py-2 text-left text-sm font-medium bg-muted", className)}
        {...props}
      >
        {null}
      </th>
    )
  }

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <th
          ref={setNodeRef}
          colSpan={header.colSpan}
          style={style}
          className={cn(
            "border-b px-4 py-2 text-left text-sm font-medium bg-muted group",
            isDragging ? "opacity-50 bg-accent" : "",
            isPinned ? "bg-muted shadow-[0_0_10px_rgba(0,0,0,0.1)]" : "",
            className
          )}
          {...attributes}
          {...listeners}
          {...props}
        >
          {content}
        </th>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuItem onClick={handleHide}>
          <EyeOff className="mr-2 h-4 w-4" />
          Hide Column
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem onClick={handlePinLeft}>
          <MoveLeft className="mr-2 h-4 w-4" />
          Pin Left
        </ContextMenuItem>
        <ContextMenuItem onClick={handlePinRight}>
          <MoveRight className="mr-2 h-4 w-4" />
          Pin Right
        </ContextMenuItem>
        {isPinned && (
          <ContextMenuItem onClick={handleUnpin}>
            <PinOff className="mr-2 h-4 w-4" />
            Unpin
          </ContextMenuItem>
        )}
      </ContextMenuContent>
    </ContextMenu>
  )
}