'use client';

/* IMPORT */
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Copy, Eye, MoreHorizontal, Trash } from 'lucide-react';
import { DataTableColumnHeaderSimple } from '@/components/data-table/data-table-column-simple-header';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { formatDate } from '@/lib/utils';
import { getCategoryDisplayName, getCategoryVariant } from '../validations';
import Link from 'next/link';
import { type ColumnDef } from '@tanstack/react-table';
import { type Dispatch, type SetStateAction } from 'react';
import { type DataTableRowAction } from '@/types/table';
import { type TemplateListView } from '@/db/schema';

// ----------------------------------------------------------------------------------------------------

/* TYPES */
interface GetColumnsProps {
  setRowAction: Dispatch<SetStateAction<DataTableRowAction<TemplateListView> | null>>;
}

// ----------------------------------------------------------------------------------------------------

/* FUNCTION FOR GETTING COLUMNS SETTING */
export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TemplateListView>[] {
  return [
    // [1] Checkbox Column
    {
      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,
    },
    // [2] Template Name Column
    {
      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,
    },
    // [3] Email Subject Column
    {
      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,
    },
    // [4] Slug Column
    {
      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,
    },
    // [5] Category Column
    {
      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>
        );
      },
      filterFn: (row, id, value) => {
        return value.includes(row.getValue(id));
      },
      enableSorting: true,
      size: 120,
    },
    // [6] Variable Count Column
    {
      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,
    },
    // [7] Version Column
    {
      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,
    },
    // [8] Created At Column
    {
      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: 150,
    },
    // [9] Updated At Column
    {
      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: 150,
    },
    // [10] Actions Column
    {
      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: '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
    },
  ];
}