import type { ColumnDef, Row } from "@tanstack/react-table"
import { ClientDataTableColumnHeaderSimple } from "../client-data-table/data-table-column-simple-header"
import { Button } from "@/components/ui/button"
import { Ellipsis } from "lucide-react"
import { formatDate } from "@/lib/utils"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
/** row 액션 관련 타입 */
export interface DataTableRowAction<TData> {
  row: Row<TData>
  type: "open" | "edit" | "update"
}

/** 컬럼 타입 (필요에 따라 확장) */
export type ColumnType = "STRING" | "NUMBER" | "LIST" 


export interface DataTableColumnJSON {
  key: string;
  /** 실제 Excel 등에서 구분용으로 쓰이는 label (고정) */
  label: string

  /** UI 표시용 label (예: 단위를 함께 표시) */
  displayLabel?: string

  type: ColumnType;
  options?: string[];
  uom?: string;
}
/**
 * getColumns 함수에 필요한 props
 * - TData: 테이블에 표시할 행(Row)의 타입
 */
interface GetColumnsProps<TData> {
  columnsJSON: DataTableColumnJSON[];
  setRowAction: React.Dispatch<
    React.SetStateAction<DataTableRowAction<TData> | null>
  >;
  setReportData: React.Dispatch<React.SetStateAction<{ [key: string]: any }[]>>;
}

/**
 * getColumns 함수
 * 1) columnsJSON 배열을 순회하면서 accessorKey / header / cell 등을 설정
 * 2) 마지막에 "Action" 칼럼(예: update 버튼) 추가
 */
export function getColumns<TData extends object>({
  columnsJSON,
  setRowAction,
  setReportData,
}: GetColumnsProps<TData>): ColumnDef<TData>[] {
  // (1) 기본 컬럼들
  const baseColumns: ColumnDef<TData>[] = columnsJSON.map((col) => ({
    accessorKey: col.key,
    header: ({ column }) => (
      <ClientDataTableColumnHeaderSimple
        column={column}
        title={col.displayLabel || col.label}
      />
    ),

    meta: {
      excelHeader: col.label,
      minWidth: 80,
      paddingFactor: 1.2,
      maxWidth: col.key === "tagNumber" ? 120 : 150,
    },
    // (2) 실제 셀(cell) 렌더링: type에 따라 분기 가능
    cell: ({ row }) => {
      const cellValue = row.getValue(col.key)

      // 데이터 타입별 처리
      switch (col.type) {
        case "NUMBER":
          // 예: number인 경우 콤마 등 표시
          return (
            <div>{cellValue ? Number(cellValue).toLocaleString() : ""}</div>
          );

        // case "date":
        //   // 예: 날짜 포맷팅
        //   // 실제론 dayjs / date-fns 등으로 포맷
        //   if (!cellValue) return <div></div>
        //   const dateString = cellValue as string
        //   if (!dateString) return null
        //   return formatDate(new Date(dateString))

        case "LIST":
          // 예: select인 경우 label만 표시
          return  <div>{String(cellValue ?? "")}</div>

        case "STRING":
        default:
          return <div>{String(cellValue ?? "")}</div>
      }
    },
  }))

  // (3) 액션 칼럼 - update 버튼 예시
  const actionColumn: ColumnDef<TData> = {
    id: "update",
    header: "",
    cell: ({ row }) => (
      <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>
          <DropdownMenuItem
            onSelect={() => {
              const { original } = row;
              setReportData([original]);
            }}
          >
            Create Report
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    ),
    size: 40,
    meta: {
      // maxWidth: 40,
    },
    enablePinning: true,
  };

  // (4) 최종 반환
  return [...baseColumns, actionColumn]
}