"use client"

import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"

import { formatDate} from "@/lib/utils"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { ExtendedLoginSession } from "../validation"
import { Eye, Shield, LogOut, Ellipsis } from "lucide-react"

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

export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ExtendedLoginSession>[] {
  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,
    },
    {
      id: "사용자 정보",
      header: "사용자 정보",
      columns: [
        {
          accessorKey: "userEmail",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="이메일" />
          ),
          cell: ({ row }) => (
            <div className="flex flex-col">
              <span className="font-medium">{row.getValue("userEmail")}</span>
              <span className="text-xs text-muted-foreground">
                {row.original.userName}
              </span>
            </div>
          ),
        },
      ],
    },
    {
      id: "세션 정보",
      header: "세션 정보",
      columns: [
        {
          accessorKey: "loginAt",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="로그인 시간" />
          ),
          cell: ({ row }) => {
            const date = row.getValue("loginAt") as Date
            return (
              <Tooltip>
                <TooltipTrigger>
                  <div className="text-sm">
                    {formatDate(date, "KR")}
                  </div>
                </TooltipTrigger>
                <TooltipContent>
                  {formatDate(date, "KR")}
                </TooltipContent>
              </Tooltip>
            )
          },
        },
        {
          accessorKey: "logoutAt",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="로그아웃 시간" />
          ),
          cell: ({ row }) => {
            const date = row.getValue("logoutAt") as Date | null
            if (!date) {
              return <span className="text-muted-foreground">-</span>
            }
            return (
              <Tooltip>
                <TooltipTrigger>
                  <div className="text-sm">
                    {formatDate(date, "KR")}
                  </div>
                </TooltipTrigger>
                <TooltipContent>
                  {formatDate(date, "KR")}
                </TooltipContent>
              </Tooltip>
            )
          },
        },
        {
          accessorKey: "sessionDuration",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="세션 지속시간" />
          ),
          cell: ({ row }) => {
            const duration = row.getValue("sessionDuration") as number | null
            if (!duration) {
              return <span className="text-muted-foreground">-</span>
            }
            
            const hours = Math.floor(duration / 60)
            const minutes = Math.floor(duration % 60)
            
            if (hours > 0) {
              return `${hours}시간 ${minutes}분`
            }
            return `${minutes}분`
          },
        },
      ],
    },
    {
      id: "인증 및 보안",
      header: "인증 및 보안",
      columns: [
        {
          accessorKey: "authMethod",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="인증 방식" />
          ),
          cell: ({ row }) => {
            const authMethod = row.getValue("authMethod") as string
            const variants = {
              otp: "default",
              email: "secondary", 
              sgips: "outline",
              saml: "destructive",
            } as const
            
            return (
              <Badge variant={variants[authMethod as keyof typeof variants] || "default"}>
                {authMethod.toUpperCase()}
              </Badge>
            )
          },
        },
        {
          accessorKey: "ipAddress",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="IP 주소" />
          ),
          cell: ({ row }) => (
            <code className="text-xs bg-muted px-2 py-1 rounded">
              {row.getValue("ipAddress")}
            </code>
          ),
        },
        {
          accessorKey: "isCurrentlyActive",
          header: ({ column }) => (
            <DataTableColumnHeaderSimple column={column} title="상태" />
          ),
          cell: ({ row }) => {
            const isActive = row.getValue("isCurrentlyActive") as boolean
            return (
              <Badge variant={isActive ? "default" : "secondary"}>
                {isActive ? "활성" : "비활성"}
              </Badge>
            )
          },
        },
      ],
    },
    // {
    //   id: "actions",
    //   cell: function Cell({ row }) {
    //     const session = row.original

    //     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({ type: "view", row })}
    //           >
    //             <Eye className="mr-2 size-4" aria-hidden="true" />
    //             상세 보기
    //           </DropdownMenuItem>
    //           <DropdownMenuItem
    //             onSelect={() => setRowAction({ type: "viewSecurity", row })}
    //           >
    //             <Shield className="mr-2 size-4" aria-hidden="true" />
    //             보안 정보
    //           </DropdownMenuItem>
    //           {session.isCurrentlyActive && (
    //             <DropdownMenuItem
    //               onSelect={() => setRowAction({ type: "forceLogout", row })}
    //               className="text-red-600"
    //             >
    //               <LogOut className="mr-2 size-4" aria-hidden="true" />
    //               강제 로그아웃
    //               <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
    //             </DropdownMenuItem>
    //           )}
    //         </DropdownMenuContent>
    //       </DropdownMenu>
    //     )
    //   },
    //   enableSorting: false,
    //   enableHiding: false,
    // },
  ]
}