"use client"

import * as React from "react"
import { ColumnDef } from "@tanstack/react-table"
import { formatDate } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Ellipsis } from "lucide-react"
// 기존 헤더 컴포넌트 사용 (리사이저가 내장된 헤더는 따로 구현할 예정)
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { Tag } from "@/db/schema/vendorData"
import { DataTableRowAction } from "@/types/table"

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Tag> | null>>
}

export function getColumns({
  setRowAction,
}: GetColumnsProps): ColumnDef<Tag>[] {
  return [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && "indeterminate")
          }
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="Select all"
          className="translate-y-0.5"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="Select row"
          className="translate-y-0.5"
        />
      ),
      enableSorting: false,
      enableHiding: false,
      enableResizing: false, // 체크박스 열은 리사이징 비활성화
      size: 40,
      minSize: 40,
      maxSize: 40,
    },

    {
      accessorKey: "tagNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Tag No." />
      ),
      cell: ({ row }) => <div>{row.getValue("tagNo")}</div>,
      meta: {
        excelHeader: "Tag No"
      },
      enableResizing: true, // 리사이징 활성화
      minSize: 100, // 최소 너비
      size: 160, // 기본 너비
    },
    {
      accessorKey: "description",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Tag Description" />
      ),
      cell: ({ row }) => <div>{row.getValue("description")}</div>,
      meta: {
        excelHeader: "Tag Descripiton"
      },
      enableResizing: true,
      minSize: 150,
      size: 240,
    },
        {
      accessorKey: "class",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Class" />
      ),
      cell: ({ row }) => <div>{row.getValue("class")}</div>,
      meta: {
        excelHeader: "Class"
      },
      enableResizing: true,
      minSize: 100,
      size: 150,
    },
    {
      accessorKey: "subclass",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Item Class" />
      ),
      cell: ({ row }) => <div>{row.getValue("subclass")}</div>,
      meta: {
        excelHeader: "Item Class"
      },
      enableResizing: true,
      minSize: 100,
      size: 150,
    },
    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Created At" />
      ),
      cell: ({ cell }) => formatDate(cell.getValue() as Date, "KR"),
      meta: {
        excelHeader: "created At"
      },
      enableResizing: true,
      minSize: 120,
      size: 180,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Updated At" />
      ),
      cell: ({ cell }) => formatDate(cell.getValue() as Date, "KR"),
      meta: {
        excelHeader: "updated At"
      },
      enableResizing: true,
      minSize: 120,
      size: 180,
    },
    {
      id: "actions",
      cell: function Cell({ row }) {
        const [isUpdatePending, startUpdateTransition] = React.useTransition()

        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                aria-label="Open menu"
                variant="ghost"
                className="flex size-8 p-0 data-[state=open]:bg-muted"
              >
                <Ellipsis className="size-6" aria-hidden="true" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-40">
              <DropdownMenuItem
                onSelect={() => setRowAction({ row, type: "update" })}
              >
                Edit
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onSelect={() => setRowAction({ row, type: "delete" })}
              >
                Delete
                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )
      },
      enableResizing: false, // 액션 열은 리사이징 비활성화
      size: 40,
      minSize: 40,
      maxSize: 40,
      enableHiding: false,
    },
  ]
}