"use client"

import * as React from "react"
import { type ColumnDef } from "@tanstack/react-table"
import { ArrowUpDown, Copy, MoreHorizontal, Edit, Trash, Eye } from "lucide-react"
import Link from "next/link"

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 { type TemplateListView } from "@/db/schema"
import { type DataTableRowAction } from "@/types/table"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { getCategoryDisplayName, getCategoryVariant } from "../validations"

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

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

    // 템플릿 이름 컬럼 (클릭 시 세부 페이지로)
    {
      accessorKey: "name",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="템플릿 이름" />
      ),
      cell: ({ row }) => {
        const template = row.original
        return (
          <div className="flex flex-col gap-1">
            <Link 
              href={`/evcp/email-template/${template.slug}`}
              className="font-medium text-blue-600 hover:text-blue-800 hover:underline"
            >
              {template.name}
            </Link>
            {template.description && (
              <div className="text-xs text-muted-foreground line-clamp-2">
                {template.description}
              </div>
            )}
          </div>
        )
      },
      enableSorting: true,
      enableHiding: false,
      size:200
    },

    {
        accessorKey: "subject",
        header: ({ column }) => (
          <DataTableColumnHeaderSimple column={column} title="이메일 제목" />
        ),
        cell: ({ getValue }) => {
          const subject = getValue() as string
          return (
            <div className="text-sm text-muted-foreground">
              {subject}
            </div>
          )
        },
        enableSorting: true,
        size:250
      },
  
    // Slug 컬럼
    {
      accessorKey: "slug",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Slug" />
      ),
      cell: ({ getValue }) => {
        const slug = getValue() as string
        return (
          <div className="font-mono text-sm text-muted-foreground">
            {slug}
          </div>
        )
      },
      enableSorting: true,
      size:120

    },

    // 카테고리 컬럼
    {
      accessorKey: "category",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="카테고리" />
      ),
      cell: ({ row }) => {
        const category = row.original.category
        const displayName = getCategoryDisplayName(category)
        const variant = getCategoryVariant(category)

        return (
          <Badge variant={variant}>
            {displayName}
          </Badge>
        )
      },
      enableSorting: true,
      filterFn: (row, id, value) => {
        return value.includes(row.getValue(id))
      },
      size:120

    },

    // 변수 개수 컬럼
    {
      accessorKey: "variableCount",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="변수" />
      ),
      cell: ({ row }) => {
        const variableCount = row.original.variableCount
        const requiredCount = row.original.requiredVariableCount
        
        return (
          <div className="text-center">
            <div className="text-sm font-medium">{variableCount}</div>
            {requiredCount > 0 && (
              <div className="text-xs text-muted-foreground">
                필수: {requiredCount}
              </div>
            )}
          </div>
        )
      },
      enableSorting: true,
      size:80

    },

    // 버전 컬럼
    {
      accessorKey: "version",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="버전" />
      ),
      cell: ({ getValue }) => {
        const version = getValue() as number
        return (
          <div className="text-center">
            <Badge variant="outline" className="font-mono text-xs">
              v{version}
            </Badge>
          </div>
        )
      },
      enableSorting: true,
      size:80

    },

    // 생성일 컬럼
    {
      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,
      size:200

    },

    // 수정일 컬럼
    {
      accessorKey: "updatedAt",
      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,
      size:200

    },

    // Actions 컬럼
    {
      id: "actions",
      cell: ({ row }) => {
        const template = row.original
        
        return (
          <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 asChild>
                <Link href={`/evcp/email-template/${template.slug}`}>
                  <Eye className="mr-2 size-4" aria-hidden="true" />
                  상세 보기
                </Link>
              </DropdownMenuItem>
              
              {/* <DropdownMenuItem
                onClick={() => {
                  setRowAction({ type: "update", row })
                }}
              >
                <Edit className="mr-2 size-4" aria-hidden="true" />
                업데이트
              </DropdownMenuItem> */}

              <DropdownMenuItem
                onClick={() => {
                  setRowAction({ type: "duplicate", row })
                }}
              >
                <Copy className="mr-2 size-4" aria-hidden="true" />
                복제하기
              </DropdownMenuItem>

              <DropdownMenuSeparator />

              <DropdownMenuItem
                onClick={() => {
                  setRowAction({ type: "delete", row })
                }}
                className="text-destructive focus:text-destructive"
              >
                <Trash className="mr-2 size-4" aria-hidden="true" />
                삭제하기
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )
      },
      enableSorting: false,
      enableHiding: false,
      size:80

    },
  ]
}