"use client"

import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
import { Ellipsis } from "lucide-react"

import { formatDateTime } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
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 { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { codeGroups } from "@/db/schema/docu-list-rule"

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<typeof codeGroups.$inferSelect> | null>>
}

/**
 * tanstack table 컬럼 정의
 */
export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<typeof codeGroups.$inferSelect>[] {
  // ----------------------------------------------------------------
  // 1) select 컬럼 (체크박스)
  // ----------------------------------------------------------------
  const selectColumn: ColumnDef<typeof codeGroups.$inferSelect> = {
    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"
      />
    ),
    maxSize: 20,
    enableSorting: false,
    enableHiding: false,
  }

  // ----------------------------------------------------------------
  // 2) actions 컬럼 (Dropdown 메뉴)
  // ----------------------------------------------------------------
  const actionsColumn: ColumnDef<typeof codeGroups.$inferSelect> = {
    id: "actions",
    enableHiding: false,
    cell: function Cell({ row }) {
      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-4" 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>
      )
    },
    maxSize: 20,
  }

  // ----------------------------------------------------------------
  // 3) 데이터 컬럼들
  // ----------------------------------------------------------------
  const dataColumns: ColumnDef<typeof codeGroups.$inferSelect>[] = [
    {
      accessorKey: "projectCode",
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트 코드" />
      ),
      meta: {
        excelHeader: "프로젝트 코드",
        type: "text",
      },
      cell: ({ row }) => row.getValue("projectCode") ?? "",
      minSize: 120
    },
    {
      accessorKey: "groupId",
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Group ID" />
      ),
      meta: {
        excelHeader: "Group ID",
        type: "text",
      },
      cell: ({ row }) => row.getValue("groupId") ?? "",
      minSize: 60
    },
    {
      accessorKey: "description",
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Description" />
      ),
      meta: {
        excelHeader: "Description",
        type: "text",
      },
      cell: ({ row }) => row.getValue("description") ?? "",
      minSize: 80
    },
    {
      accessorKey: "codeFormat",
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Code Format" />
      ),
      meta: {
        excelHeader: "Code Format",
        type: "text",
      },
      cell: ({ row }) => row.getValue("codeFormat") ?? "",
      minSize: 70
    },

    {
      accessorKey: "controlType",
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Control Type" />
      ),
      meta: {
        excelHeader: "Control Type",
        type: "text",
      },
      cell: ({ row }) => {
        const controlType = row.getValue("controlType") as string
        return (
          <Badge variant="outline">
            {controlType}
          </Badge>
        )
      },
      minSize: 70
    },
    {
      accessorKey: "createdAt",
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Created At" />
      ),
      meta: {
        excelHeader: "Created At",
        type: "date",
      },
      cell: ({ row }) => {
        const dateVal = row.getValue("createdAt") as Date
        return formatDateTime(dateVal, "KR")
      },
      minSize: 60
    }
  ]

  // ----------------------------------------------------------------
  // 4) 최종 컬럼 배열: select, dataColumns, actions
  // ----------------------------------------------------------------
  return [
    selectColumn,
    ...dataColumns,
    actionsColumn,
  ]
}