path: root/lib/procurement-rfqs/table/rfq-table-column.tsx

"use client"

import * as React from "react"
import { ColumnDef } from "@tanstack/react-table"
import { formatDate, formatDateTime } from "@/lib/utils"
import { Checkbox } from "@/components/ui/checkbox"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { DataTableRowAction } from "@/types/table"
import { ProcurementRfqsView } from "@/db/schema"
import { Check, Pencil, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
import { Input } from "@/components/ui/input"
import { updateRfqRemark } from "../services"

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ProcurementRfqsView> | null>>;
  // 상태와 상태 설정 함수를 props로 받음
  editingCell: EditingCellState | null;
  setEditingCell: (state: EditingCellState | null) => void;
  updateRemark: (rfqId: number, remark: string) => Promise<void>;
}

export interface EditingCellState {
  rowId: string | number;
  value: string;
}


export function getColumns({
  setRowAction,
  editingCell,
  setEditingCell,
  updateRemark,
}: GetColumnsProps): ColumnDef<ProcurementRfqsView>[] {
  


  return [
    {
      id: "select",
      // Remove the "Select all" checkbox in header since we're doing single-select
      header: () => <span className="sr-only">Select</span>,
      cell: ({ row, table }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => {
            // If selecting this row
            if (value) {
              // First deselect all rows (to ensure single selection)
              table.toggleAllRowsSelected(false)
              // Then select just this row
              row.toggleSelected(true)
              // Trigger the same action that was in the "Select" button
              setRowAction({ row, type: "select" })
            } else {
              // Just deselect this row
              row.toggleSelected(false)
            }
          }}
          aria-label="Select row"
          className="translate-y-0.5"
        />
      ),
      enableSorting: false,
      enableHiding: false,
      enableResizing: false,
      size: 40,
      minSize: 40,
      maxSize: 40,
    },
    
    {
      accessorKey: "status",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="status" />
      ),
      cell: ({ row }) => <div>{row.getValue("status")}</div>,
      meta: {
        excelHeader: "status"
      },
      enableResizing: true,
      minSize: 80,
      size: 100,
    },
    {
      accessorKey: "projectCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트" />
      ),
      cell: ({ row }) => <div>{row.getValue("projectCode")}</div>,
      meta: {
        excelHeader: "프로젝트"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "series",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="시리즈" />
      ),
      cell: ({ row }) => <div>{row.getValue("series")}</div>,
      meta: {
        excelHeader: "시리즈"
      },
      enableResizing: true,
      minSize: 80,
      size: 100,
    },
    {
      accessorKey: "rfqSealedYn",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="RFQ 밀봉" />
      ),
      cell: ({ row }) => <div>{row.getValue("rfqSealedYn") ? "Y":"N"}</div>,
      meta: {
        excelHeader: "RFQ 밀봉"
      },
      enableResizing: true,
      minSize: 80,
      size: 100,
    },
    {
      accessorKey: "rfqCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="RFQ NO." />
      ),
      cell: ({ row }) => <div>{row.getValue("rfqCode")}</div>,
      meta: {
        excelHeader: "RFQ NO."
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "po_no",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="대표 PR NO." />
      ),
      cell: ({ row }) => <div>{row.getValue("po_no")}</div>,
      meta: {
        excelHeader: "대표 PR NO."
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "itemCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="자재그룹" />
      ),
      cell: ({ row }) => <div>{row.getValue("itemCode")}</div>,
      meta: {
        excelHeader: "자재그룹"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "majorItemMaterialCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="자재코드" />
      ),
      cell: ({ row }) => <div>{row.getValue("majorItemMaterialCode")}</div>,
      meta: {
        excelHeader: "자재코드"
      },
      enableResizing: true,
      minSize: 80,
      size: 120,
    },
    {
      accessorKey: "itemName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="자재명" />
      ),
      cell: ({ row }) => <div>{row.getValue("itemName")}</div>,
      meta: {
        excelHeader: "자재명"
      },
      enableResizing: true,
      size: 140,
    },
    {
      accessorKey: "prItemsCount",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="PR 건수" />
      ),
      cell: ({ row }) => <div>{row.getValue("prItemsCount")}</div>,
      meta: {
        excelHeader: "PR 건수"
      },
      enableResizing: true,
      // size: 80,
    },
    {
      accessorKey: "rfqSendDate",
      header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="RFQ 전송일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDate(value as Date, "KR") : "";
      },
      meta: {
        excelHeader: "RFQ 전송일"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "earliestQuotationSubmittedAt",
      header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="첫회신 접수일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDate(value as Date, "KR") : "";
      },
      meta: {
        excelHeader: "첫회신 접수일"
      },
      enableResizing: true,
      // size: 140,
    },
    {
      accessorKey: "dueDate",
      header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="RFQ 마감일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDate(value as Date, "KR") : "";
      },
      meta: {
        excelHeader: "RFQ 마감일"
      },
      enableResizing: true,
      minSize: 80,
      size: 120,
    },
    {
      accessorKey: "sentByUserName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="RFQ 요청자" />
      ),
      cell: ({ row }) => <div>{row.getValue("sentByUserName")}</div>,
      meta: {
        excelHeader: "RFQ 요청자"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="Updated At" />
      ),
      cell: ({ cell }) => formatDateTime(cell.getValue() as Date, "KR"),
      meta: {
        excelHeader: "updated At"
      },
      enableResizing: true,
      size: 140,
    },
    
    {
      accessorKey: "remark",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="비고" />
      ),
      cell: ({ row }) => {
        const rowId = row.id
        const value = row.getValue("remark") as string
        const isEditing = editingCell && editingCell.rowId === rowId
        
        const startEditing = () => {
          setEditingCell({
            rowId,
            value: value || ""
          })
        }
        
        const cancelEditing = () => {
          setEditingCell(null)
        }
        
        const saveChanges = async () => {
          if (!editingCell) return
          
          try {

            // 컴포넌트에서 전달받은 업데이트 함수 사용
            await updateRemark(row.original.id, editingCell.value)
            row.original.remark = editingCell.value;
            
            // 편집 모드 종료
            setEditingCell(null)
          } catch (error) {
            console.error("비고 업데이트 오류:", error)
          }
        }
        
        // 키보드 이벤트 처리
        const handleKeyDown = (e: React.KeyboardEvent) => {
          if (e.key === "Enter") {
            saveChanges()
          } else if (e.key === "Escape") {
            cancelEditing()
          }
        }
        
        if (isEditing) {
          return (
            <div className="flex items-center space-x-1">
              <Input
                value={editingCell.value}
                onChange={(e) => setEditingCell({
                  ...editingCell,
                  value: e.target.value
                })}
                onKeyDown={handleKeyDown}
                autoFocus
                className="h-8 w-full"
              />
              <div className="flex items-center">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={saveChanges}
                  className="h-7 w-7"
                >
                  <Check className="h-4 w-4 text-green-500" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={cancelEditing}
                  className="h-7 w-7"
                >
                  <X className="h-4 w-4 text-red-500" />
                </Button>
              </div>
            </div>
          )
        }
        
        return (
          <div 
            className="flex items-center justify-between group"
            onDoubleClick={startEditing} // 더블클릭 이벤트 추가
          >
            <div className="truncate">{value || "-"}</div>
            <Button
              variant="ghost"
              size="icon"
              onClick={startEditing}
              className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
            </Button>
          </div>
        )
      },
      meta: {
        excelHeader: "비고"
      },
      enableResizing: true,
      size: 200,
    }
  ]
}