path: root/lib/techsales-rfq/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 { Check, Pencil, X, Info } from "lucide-react"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
import { Input } from "@/components/ui/input"

// 기본적인 RFQ 타입 정의 (rfq-table.tsx 파일과 일치해야 함)
type TechSalesRfq = {
  id: number
  rfqCode: string | null
  itemId: number
  itemName: string | null
  materialCode: string | null
  dueDate: Date
  rfqSendDate: Date | null
  status: "RFQ Created" | "RFQ Vendor Assignned" | "RFQ Sent" | "Quotation Analysis" | "Closed"
  picCode: string | null
  remark: string | null
  cancelReason: string | null
  createdAt: Date
  updatedAt: Date
  createdBy: number | null
  createdByName: string
  updatedBy: number | null
  updatedByName: string
  sentBy: number | null
  sentByName: string | null
  projectSnapshot: any
  seriesSnapshot: any
  pspid: string
  projNm: string
  sector: string
  projMsrm: number
  ptypeNm: string
  attachmentCount: number
  quotationCount: number
  // 나머지 필드는 사용할 때마다 추가
  [key: string]: any
}

interface GetColumnsProps {
  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TechSalesRfq> | 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<TechSalesRfq>[] {
  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="진행상태" />
      ),
      cell: ({ row }) => <div>{row.getValue("status")}</div>,
      meta: {
        excelHeader: "진행상태"
      },
      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: "materialCode",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="자재코드" />
      ),
      cell: ({ row }) => <div>{row.getValue("materialCode")}</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: 180,
    },
    {
      accessorKey: "pspid",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트 번호" />
      ),
      cell: ({ row }) => <div>{row.getValue("pspid")}</div>,
      meta: {
        excelHeader: "프로젝트 번호"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "projNm",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="프로젝트명" />
      ),
      cell: ({ row }) => <div>{row.getValue("projNm")}</div>,
      meta: {
        excelHeader: "프로젝트명"
      },
      enableResizing: true,
      size: 160,
    },
    {
      accessorKey: "projMsrm",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="척수" />
      ),
      cell: ({ row }) => <div>{row.getValue("projMsrm")}</div>,
      meta: {
        excelHeader: "척수"
      },
      enableResizing: true,
      minSize: 60,
      size: 80,
    },
    {
      accessorKey: "ptypeNm",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="선종" />
      ),
      cell: ({ row }) => <div>{row.getValue("ptypeNm")}</div>,
      meta: {
        excelHeader: "선종"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "quotationCount",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="견적수" />
      ),
      cell: ({ row }) => <div>{row.getValue("quotationCount")}</div>,
      meta: {
        excelHeader: "견적수"
      },
      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: "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: "createdByName",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="요청자" />
      ),
      cell: ({ row }) => <div>{row.getValue("createdByName")}</div>,
      meta: {
        excelHeader: "요청자"
      },
      enableResizing: true,
      size: 120,
    },
    {
      accessorKey: "createdAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="등록일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDateTime(value as Date) : "";
      },
      meta: {
        excelHeader: "등록일"
      },
      enableResizing: true,
      size: 160,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="수정일" />
      ),
      cell: ({ cell }) => {
        const value = cell.getValue();
        return value ? formatDateTime(value as Date) : "";
      },
      meta: {
        excelHeader: "수정일"
      },
      enableResizing: true,
      size: 160,
    },
    // {
    //   accessorKey: "remark",
    //   header: ({ column }) => (
    //     <DataTableColumnHeaderSimple column={column} title="비고" />
    //   ),
    //   cell: ({ row }) => {
    //     const id = row.original.id;
    //     const value = row.getValue("remark") as string;
        
    //     const isEditing = 
    //       editingCell?.rowId === row.id &&
    //       editingCell.value !== undefined;
        
    //     const startEditing = () => {
    //       setEditingCell({
    //         rowId: row.id,
    //         value: value || ""
    //       });
    //     };
        
    //     const cancelEditing = () => {
    //       setEditingCell(null);
    //     };
        
    //     const saveChanges = async () => {
    //       if (!editingCell) return;
          
    //       try {
    //         await updateRemark(id, editingCell.value);
    //         setEditingCell(null);
    //       } catch (error) {
    //         toast.error("비고 업데이트 중 오류가 발생했습니다.");
    //         console.error("Error updating remark:", 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 gap-1">
    //           <Input
    //             value={editingCell?.value || ""}
    //             onChange={(e) => setEditingCell({
    //               rowId: row.id, 
    //               value: e.target.value
    //             })}
    //             onKeyDown={handleKeyDown}
    //             autoFocus
    //             className="h-8 w-full"
    //           />
    //             <Button
    //               variant="ghost"
    //               size="icon"
    //               onClick={saveChanges}
    //             className="h-8 w-8"
    //             >
    //             <Check className="h-4 w-4" />
    //             </Button>
    //             <Button
    //               variant="ghost"
    //               size="icon"
    //               onClick={cancelEditing}
    //             className="h-8 w-8"
    //             >
    //             <X className="h-4 w-4" />
    //             </Button>
    //         </div>
    //       );
    //     }
        
    //     return (
    //       <div className="flex items-center gap-1 group">
    //         <span className="truncate">{value || ""}</span>
    //         <Button
    //           variant="ghost"
    //           size="icon"
    //           onClick={startEditing}
    //           className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
    //         >
    //           <Pencil className="h-3 w-3" />
    //         </Button>
    //       </div>
    //     );
    //   },
    //   meta: {
    //     excelHeader: "비고"
    //   },
    //   enableResizing: true,
    //   size: 200,
    // },
    {
      id: "actions",
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title="액션" />
      ),
      cell: ({ row }) => {
        return (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setRowAction({ row, type: "project-detail" })}
            className="h-8 px-2 gap-1"
          >
            <Info className="h-4 w-4" />
            <span className="hidden sm:inline">프로젝트 상세</span>
          </Button>
        );
      },
      enableSorting: false,
      enableHiding: false,
      enableResizing: false,
      size: 120,
      minSize: 120,
      maxSize: 120,
    },
  ]
}