"use client"

import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
import { Ellipsis, Eye } from "lucide-react"

import { formatDate, formatDateTime } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { type GtcDocumentWithRelations } from "@/db/schema/gtc"
import { useRouter } from "next/navigation"

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

/**
 * GTC Documents 테이블 컬럼 정의
 */
export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<GtcDocumentWithRelations>[] {
  const router = useRouter()

  // ----------------------------------------------------------------
  // 1) select 컬럼 (체크박스)
  // ----------------------------------------------------------------
  const selectColumn: ColumnDef<GtcDocumentWithRelations> = {
    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"
      />
    ),
    size: 40,
    enableSorting: false,
    enableHiding: false,
  }

  // ----------------------------------------------------------------
  // 2) 기본 정보 그룹
  // ----------------------------------------------------------------
  const basicInfoColumns: ColumnDef<GtcDocumentWithRelations>[] = [
    {
      accessorKey: "type",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="구분" />,
      cell: ({ row }) => {
        const type = row.getValue("type") as string;
        return (
          <Badge variant={type === "standard" ? "default" : "secondary"}>
            {type === "standard" ? "표준" : "프로젝트"}
          </Badge>
        );
      },
      size: 100,
      enableResizing: true,
      meta: {
        excelHeader: "구분",
      },
    },
    {
      accessorKey: "project",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="프로젝트" />,
      cell: ({ row }) => {
        const project = row.original.project;
        if (!project) {
          return <span className="text-muted-foreground">-</span>;
        }
        return (
          <div className="flex flex-col min-w-0">
            <span className="font-medium truncate">{project.name}</span>
            <span className="text-xs text-muted-foreground">{project.code}</span>
          </div>
        );
      },
      size: 200,
      enableResizing: true,
      meta: {
        excelHeader: "프로젝트",
      },
    },
    {
      accessorKey: "revision",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="Rev." />,
      cell: ({ row }) => {
        const revision = row.getValue("revision") as number;
        return <span className="font-mono text-sm">v{revision}</span>;
      },
      size: 80,
      enableResizing: true,
      meta: {
        excelHeader: "Rev.",
      },
    },
  ];

  // ----------------------------------------------------------------
  // 3) 등록/수정 정보 그룹
  // ----------------------------------------------------------------
  const auditColumns: ColumnDef<GtcDocumentWithRelations>[] = [
    {
      accessorKey: "createdAt",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="최초등록일" />,
      cell: ({ row }) => {
        const date = row.getValue("createdAt") as Date;
        return date ? formatDate(date, "KR") : "-";
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "최초등록일",
      },
    },
    {
      accessorKey: "createdBy",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="최초등록자" />,
      cell: ({ row }) => {
        const createdBy = row.original.createdBy;
        return createdBy ? (
          <span className="text-sm">{createdBy.name}</span>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "최초등록자",
      },
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="최종수정일" />,
      cell: ({ row }) => {
        const date = row.getValue("updatedAt") as Date;
        return date ? formatDate(date, "KR") : "-";
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "최종수정일",
      },
    },
    {
      accessorKey: "updatedBy",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="최종수정자" />,
      cell: ({ row }) => {
        const updatedBy = row.original.updatedBy;
        return updatedBy ? (
          <span className="text-sm">{updatedBy.name}</span>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 120,
      enableResizing: true,
      meta: {
        excelHeader: "최종수정자",
      },
    },
    {
      accessorKey: "editReason",
      header: ({ column }) => <DataTableColumnHeaderSimple column={column} title="최종 편집사유" />,
      cell: ({ row }) => {
        const reason = row.getValue("editReason") as string;
        return reason ? (
          <span className="text-sm" title={reason}>
            {reason.length > 30 ? `${reason.substring(0, 30)}...` : reason}
          </span>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 200,
      enableResizing: true,
      meta: {
        excelHeader: "최종 편집사유",
      },
    },
  ];

  // ----------------------------------------------------------------
  // 4) actions 컬럼 (Dropdown 메뉴)
  // ----------------------------------------------------------------
  const actionsColumn: ColumnDef<GtcDocumentWithRelations> = {
    id: "actions",
    enableHiding: false,
    cell: function Cell({ row }) {
      const [isUpdatePending, startUpdateTransition] = React.useTransition()
      const gtcDocument = row.original;

      const handleViewDetails = () => {
        router.push(`/evcp/gtc-documents/${gtcDocument.id}`);
      };

      const handleCreateNewRevision = () => {
        setRowAction({ row, type: "createRevision" });
      };

      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-48">
            <DropdownMenuItem onSelect={handleViewDetails}>
              <Eye className="mr-2 h-4 w-4" />
              View Details
            </DropdownMenuItem>
            
            <DropdownMenuSeparator />
            
            <DropdownMenuItem
              onSelect={() => setRowAction({ row, type: "update" })}
            >
              Edit
            </DropdownMenuItem>

            <DropdownMenuItem onSelect={handleCreateNewRevision}>
              Create New Revision
            </DropdownMenuItem>

            <DropdownMenuSeparator />
            <DropdownMenuItem
              onSelect={() => setRowAction({ row, type: "delete" })}
            >
              Delete
              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
    size: 40,
  }

  // ----------------------------------------------------------------
  // 5) 중첩 컬럼 그룹 생성
  // ----------------------------------------------------------------
  const nestedColumns: ColumnDef<GtcDocumentWithRelations>[] = [
    {
      id: "기본 정보",
      header: "기본 정보",
      columns: basicInfoColumns,
    },
    {
      id: "등록/수정 정보",
      header: "등록/수정 정보",
      columns: auditColumns,
    },
  ]

  // ----------------------------------------------------------------
  // 6) 최종 컬럼 배열
  // ----------------------------------------------------------------
  return [
    selectColumn,
    ...nestedColumns,
    actionsColumn,
  ]
}