"use client"

import * as React from "react"
import { type ColumnDef } from "@tanstack/react-table"
import { ArrowUpDown, Copy, MoreHorizontal } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { toast } from "sonner"
import { formatDate } from "@/lib/utils"
import { OcrRow } from "@/db/schema"
import { type DataTableRowAction } from "@/types/table"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"

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

export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<OcrRow>[] {
  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,
    },

    // Report No 컬럼
    {
      accessorKey: "reportNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Report No" />
      ),
      cell: ({ getValue }) => {
        const reportNo = getValue() as string
        return (
          <div className="flex items-center gap-2">
            {/* <Badge variant="outline" className="font-mono text-xs"> */}
              {reportNo || "N/A"}
            {/* </Badge> */}
          
          </div>
        )
      },
      enableSorting: true,
      enableHiding: false,
    },

    // No 컬럼
    {
      accessorKey: "no",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="No" />
      ),
      cell: ({ getValue }) => {
        const no = getValue() as string
        return (
          <div className="font-medium">
            {no || "-"}
          </div>
        )
      },
      enableSorting: true,
    },

    // Identification No 컬럼
    {
      accessorKey: "identificationNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Identification No" />
      ),
      cell: ({ getValue }) => {
        const identificationNo = getValue() as string
        return (
          <div className="max-w-[200px] truncate font-mono text-sm" title={identificationNo}>
            {identificationNo || "-"}
          </div>
        )
      },
      enableSorting: true,
    },

    // Tag No 컬럼
    {
      accessorKey: "tagNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Tag No" />
      ),
      cell: ({ getValue }) => {
        const tagNo = getValue() as string
        return (
          <div className="font-mono text-sm">
            {tagNo || "-"}
          </div>
        )
      },
      enableSorting: true,
    },

    // Joint No 컬럼
    {
      accessorKey: "jointNo",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Joint No" />
      ),
      cell: ({ getValue }) => {
        const jointNo = getValue() as string
        return (
          <div className="font-mono text-sm">
            {jointNo || "-"}
          </div>
        )
      },
      enableSorting: true,
    },

    // Joint Type 컬럼
    {
      accessorKey: "jointType",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Joint Type" />
      ),
      cell: ({ getValue }) => {
        const jointType = getValue() as string
        return (
          <Badge variant={jointType === "B" ? "default" : "secondary"}>
            {jointType || "N/A"}
          </Badge>
        )
      },
      enableSorting: true,
    },

    // Welding Date 컬럼
    {
      accessorKey: "weldingDate",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Welding Date" />
      ),
      cell: ({ getValue }) => {
        const weldingDate = getValue() as string
        return (
          <div className="text-sm">
            {weldingDate || "-"}
          </div>
        )
      },
      enableSorting: true,
    },

    // Confidence 컬럼
    {
      accessorKey: "confidence",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Confidence" />
      ),
      cell: ({ getValue }) => {
        const confidence = parseFloat(getValue() as string) || 0
        const percentage = Math.round(confidence * 100)
        
        let variant: "default" | "secondary" | "destructive" = "default"
        if (percentage < 70) variant = "destructive"
        else if (percentage < 90) variant = "secondary"

        return (
          <Badge variant={variant}>
            {percentage}%
          </Badge>
        )
      },
      enableSorting: true,
    },

    // Source Table 컬럼
    // {
    //   accessorKey: "sourceTable",
    //   header: ({ column }) => (
    //     <DataTableColumnHeaderSimple column={column} title="Table" />
    //   ),
    //   cell: ({ getValue }) => {
    //     const sourceTable = getValue() as number
    //     return (
    //       <div className="text-center">
    //         <Badge variant="outline" className="text-xs">
    //           T{sourceTable}
    //         </Badge>
    //       </div>
    //     )
    //   },
    //   enableSorting: true,
    // },

    // // Source Row 컬럼
    // {
    //   accessorKey: "sourceRow",
    //   header: ({ column }) => (
    //     <DataTableColumnHeaderSimple column={column} title="Row" />
    //   ),
    //   cell: ({ getValue }) => {
    //     const sourceRow = getValue() as number
    //     return (
    //       <div className="text-center text-sm text-muted-foreground">
    //         {sourceRow}
    //       </div>
    //     )
    //   },
    //   enableSorting: true,
    // },


    {
      accessorKey: "userName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="User Name" />
      ),
      cell: ({ getValue }) => {
        const userName = getValue() as string
        return (
          <div className="text-sm">
            {userName || "-"}
          </div>
        )
      },
      enableSorting: true,
    },

    {
      accessorKey: "userEmail",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="User Email" />
      ),
      cell: ({ getValue }) => {
        const userEmail = getValue() as string
        return (
          <div className="text-sm">
            {userEmail || "-"}
          </div>
        )
      },
      enableSorting: true,
    },
    // Created At 컬럼
    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="생성일" />
      ),
      cell: ({ cell }) => {
        const date = cell.getValue() as Date
        return (
          <div className="text-sm text-muted-foreground">
            {formatDate(date)}
          </div>
        )
      },
      enableSorting: true,
    },

    // Actions 컬럼
    {
      id: "actions",
      cell: ({ row }) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              aria-label="Open menu"
              variant="ghost"
              className="flex size-8 p-0 data-[state=open]:bg-muted"
            >
              <MoreHorizontal className="size-4" aria-hidden="true" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-40">
                        <DropdownMenuItem
              onClick={() => {
                setRowAction({ type: "update", row })
              }}
              // className="text-destructive focus:text-destructive"
            >
              Update
            </DropdownMenuItem>

            <DropdownMenuSeparator />

            <DropdownMenuItem
              onClick={() => {
                setRowAction({ type: "delete", row })
              }}
              className="text-destructive focus:text-destructive"
            >
              Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
      enableSorting: false,
      enableHiding: false,
    },
  ]
}