"use client"

import * as React from "react"
import { ColumnDef } from "@tanstack/react-table"
import { formatDate } from "@/lib/utils"
import { Checkbox } from "@/components/ui/checkbox"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { DataTableRowAction } from "@/types/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { Ellipsis } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { PqCriterias } from "@/db/schema/pq"

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

export function getColumns({
  setRowAction,
}: GetColumnsProps): ColumnDef<PqCriterias>[] {
  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"
      />
    ),
    size:40,
    enableSorting: false,
    enableHiding: false,
  },

  {
    accessorKey: "groupName",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="대분류" />
    ),
    cell: ({ row }) => <div>{row.getValue("groupName")}</div>,
    meta: {
      excelHeader: "Group Name"
    },
    enableResizing: true,
    minSize: 60,
    size: 100,
  },
  {
    accessorKey: "subGroupName",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="소분류" />
    ),
    cell: ({ row }) => <div>{row.getValue("subGroupName") || "-"}</div>,
    meta: {
      excelHeader: "Sub Group Name"
    },
    enableResizing: true,
    minSize: 60,
    size: 100,
  },
    {
      accessorKey: "code",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="일련번호" />
      ),
      cell: ({ row }) => <div>{row.getValue("code")}</div>,
      meta: {
        excelHeader: "Code"
      },
      enableResizing: true,
      minSize: 50,
      size: 100,
    },
    {
      accessorKey: "checkPoint",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="PQ 항목" />
      ),
      cell: ({ row }) => <div>{row.getValue("checkPoint")}</div>,
      meta: {
        excelHeader: "Check Point"
      },
      enableResizing: true,
      minSize: 180,
      size: 180,
    },

    {
      accessorKey: "description",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="설명" />
      ),
      cell: ({ row }) => {
        const text = row.getValue("description") as string
        return (
          <div style={{ whiteSpace: "pre-wrap" }}>
            {text}
          </div>
        )
      },
      meta: {
        excelHeader: "Description"
      },
      enableResizing: true,
      minSize: 180,
      size: 180,
    },
    // {
    //   accessorKey: "remarks",
    //   header: ({ column }) => (
    //     <DataTableColumnHeaderSimple column={column} title="SHI Comment" />
    //   ),
    //   cell: ({ row }) => {
    //     const text = row.getValue("remarks") as string
    //     return (
    //       <div style={{ whiteSpace: "pre-wrap" }}>
    //         {text || "-"}
    //       </div>
    //     )
    //   },
    //   meta: {
    //     excelHeader: "Remarks"
    //   },
    //   enableResizing: true,
    //   minSize: 180,
    //   size: 180,
    // },
    {
      accessorKey: "inputFormat",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="협력업체 입력사항" />
      ),
      cell: ({ row }) => {
        const format = row.getValue("inputFormat") as string
        const formatLabels = {
          TEXT: "텍스트",
          FILE: "파일",
          EMAIL: "이메일",
          PHONE: "전화번호",
          NUMBER: "숫자",
          "TEXT_FILE": "텍스트 + 파일"
        }
        return (
          <Badge variant="outline">
            {formatLabels[format as keyof typeof formatLabels] || format}
          </Badge>
        )
      },
      meta: {
        excelHeader: "Input Format"
      },
      enableResizing: true,
      minSize: 100,
      size: 120,
    },

    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="생성일" />
      ),
      cell: ({ cell }) => formatDate(cell.getValue() as Date, "ko-KR"),
      enableResizing: true,
      minSize: 180,
      size: 180,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="수정일" />
      ),
      cell: ({ cell }) => formatDate(cell.getValue() as Date, "ko-KR"),
      enableResizing: true,
      minSize: 180,
      size: 180,
    },
    {
      id: "actions",
      enableHiding: false,
      cell: function Cell({ row }) {
        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                aria-label="Open menu"
                variant="ghost"
                className="flex size-7 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>

              <DropdownMenuItem
                onSelect={() => setRowAction({ row, type: "delete" })}
              >
                Delete
                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )
      },
      size: 40,
    }
  ]
}