path: root/lib/vendor-rfq-response/vendor-cbe-table/cbe-table-columns.tsx

"use client"

import * as React from "react"
import { type DataTableRowAction } from "@/types/table"
import { type ColumnDef } from "@tanstack/react-table"
import { Download, Loader2, MessageSquare, FileEdit } from "lucide-react"
import { formatDate } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
import { useRouter } from "next/navigation"
import { VendorWithCbeFields, vendorResponseCbeColumnsConfig } from "@/config/vendorCbeColumnsConfig"
import { toast } from "sonner"


type NextRouter = ReturnType<typeof useRouter>

interface GetColumnsProps {
  setRowAction: React.Dispatch<
    React.SetStateAction<DataTableRowAction<VendorWithCbeFields> | null>
  >
  router: NextRouter
  openCommentSheet: (vendorId: number) => void
  handleDownloadCbeFiles: (vendorId: number, rfqId: number) => void
  loadingVendors: Record<string, boolean>
  openVendorContactsDialog: (rfqId: number, rfq: VendorWithCbeFields) => void
  // New prop for handling commercial response
  openCommercialResponseSheet: (responseId: number, rfq: VendorWithCbeFields) => void
}

/**
 * tanstack table 컬럼 정의 (중첩 헤더 버전)
 */
export function getColumns({
  setRowAction,
  router,
  openCommentSheet,
  handleDownloadCbeFiles,
  loadingVendors,
  openVendorContactsDialog,
  openCommercialResponseSheet
}: GetColumnsProps): ColumnDef<VendorWithCbeFields>[] {
  // ----------------------------------------------------------------
  // 1) Select 컬럼 (체크박스)
  // ----------------------------------------------------------------
  const selectColumn: ColumnDef<VendorWithCbeFields> = {
    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) 그룹화(Nested) 컬럼 구성
  // ----------------------------------------------------------------
  const groupMap: Record<string, ColumnDef<VendorWithCbeFields>[]> = {}

  vendorResponseCbeColumnsConfig.forEach((cfg) => {
    const groupName = cfg.group || "_noGroup"
    if (!groupMap[groupName]) {
      groupMap[groupName] = []
    }

    // childCol: ColumnDef<VendorWithCbeFields>
    const childCol: ColumnDef<VendorWithCbeFields> = {
      accessorKey: cfg.id,
      enableResizing: true,
      header: ({ column }) => (
        <DataTableColumnHeaderSimple column={column} title={cfg.label} />
      ),
      meta: {
        excelHeader: cfg.excelHeader,
        group: cfg.group,
        type: cfg.type,
      },
      maxSize: 120,
      // 셀 렌더링
      cell: ({ row, getValue }) => {
        // 1) 필드값 가져오기
        const val = getValue()

        
        if (cfg.id === "rfqCode") {
          const rfq = row.original;
          const rfqId = rfq.rfqId;
          
          // 협력업체 이름을 클릭할 수 있는 버튼으로 렌더링
          const handleVendorNameClick = () => {
            if (rfqId) {
              openVendorContactsDialog(rfqId, rfq); // vendor 전체 객체 전달
            } else {
              toast.error("협력업체 ID를 찾을 수 없습니다.");
            }
          };
          
          return (
            <Button
              variant="link"
              className="p-0 h-auto text-left font-normal justify-start hover:underline"
              onClick={handleVendorNameClick}
            >
              {val as string}
            </Button>
          );
        }
        
        // Commercial Response Status에 배지 적용
        if (cfg.id === "commercialResponseStatus") {
          const status = val as string;
          
          if (!status) return <span className="text-muted-foreground">-</span>;
          
          let variant: "default" | "outline" | "secondary" | "destructive" = "outline";
          
          switch (status) {
            case "SUBMITTED":
              variant = "default"; // Green
              break;
            case "IN_PROGRESS":
              variant = "secondary"; // Orange/Yellow
              break;
            case "PENDING":
              variant = "outline"; // Gray
              break;
            default:
              variant = "outline";
          }
          
          return (
            <Badge variant={variant} className="capitalize">
              {status.toLowerCase().replace("_", " ")}
            </Badge>
          );
        }

        // 예) TBE Updated (날짜)
        if (cfg.id === "respondedAt" || cfg.id === "rfqDueDate" ) {
          const dateVal = val as Date | undefined
          if (!dateVal) return null
          return formatDate(dateVal)
        }

        // 그 외 필드는 기본 값 표시
        return val ?? ""
      },
    }

    groupMap[groupName].push(childCol)
  })

  // groupMap → nestedColumns
  const nestedColumns: ColumnDef<VendorWithCbeFields>[] = []
  Object.entries(groupMap).forEach(([groupName, colDefs]) => {
    if (groupName === "_noGroup") {
      nestedColumns.push(...colDefs)
    } else {
      nestedColumns.push({
        id: groupName,
        header: groupName,
        columns: colDefs,
      })
    }
  })
  
  // ----------------------------------------------------------------
  // 3) Respond 컬럼 (새로 추가)
  // ----------------------------------------------------------------
  const respondColumn: ColumnDef<VendorWithCbeFields> = {
    id: "respond",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="Response" />
    ),
    cell: ({ row }) => {
      const vendor = row.original
      const responseId = vendor.responseId
      
      if (!responseId) {
        return <div className="text-center text-muted-foreground">-</div>
      }
      
      const handleClick = () => {
        openCommercialResponseSheet(responseId, vendor)
      }
      
      // Status에 따라 버튼 variant 변경
      let variant: "default" | "outline" | "ghost" | "secondary" = "default"
      let buttonText = "Respond"
      
      if (vendor.commercialResponseStatus === "SUBMITTED") {
        variant = "outline"
        buttonText = "Update"
      } else if (vendor.commercialResponseStatus === "IN_PROGRESS") {
        variant = "secondary"
        buttonText = "Continue"
      }
      
      return (
        <Button
          variant={variant}
          size="sm"
          // className="w-20"
          onClick={handleClick}
        >
          <FileEdit className="h-3.5 w-3.5 mr-1" />
          {buttonText}
        </Button>
      )
    },
    enableSorting: false,
    maxSize: 200,
    minSize: 115,
  }

  // ----------------------------------------------------------------
  // 4) Comments 컬럼
  // ----------------------------------------------------------------
  const commentsColumn: ColumnDef<VendorWithCbeFields> = {
    id: "comments",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="Comments" />
    ),
    cell: ({ row }) => {
      const vendor = row.original
      const commCount = vendor.comments?.length ?? 0

      function handleClick() {
        // rowAction + openCommentSheet
        setRowAction({ row, type: "comments" })
        openCommentSheet(vendor.responseId ?? 0)
      }

      return (
        <Button
          variant="ghost"
          size="sm"
          className="relative h-8 w-8 p-0 group"
          onClick={handleClick}
          aria-label={
            commCount > 0 ? `View ${commCount} comments` : "No comments"
          }
        >
          <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
          {commCount > 0 && (
            <Badge
              variant="secondary"
              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
            >
              {commCount}
            </Badge>
          )}
          <span className="sr-only">
            {commCount > 0 ? `${commCount} Comments` : "No Comments"}
          </span>
        </Button>
      )
    },
    enableSorting: false,
    maxSize: 80
  }

  // ----------------------------------------------------------------
  // 5) 파일 다운로드 컬럼 (개별 로딩 상태 적용)
  // ----------------------------------------------------------------
  const downloadColumn: ColumnDef<VendorWithCbeFields> = {
    id: "attachDownload",
    header: ({ column }) => (
      <DataTableColumnHeaderSimple column={column} title="Attach Download" />
    ),
    cell: ({ row }) => {
      const vendor = row.original
      const vendorId = vendor.vendorId
      const rfqId = vendor.rfqId
      const files = vendor.files?.length || 0

      if (!vendorId || !rfqId) {
        return <div className="text-center text-muted-foreground">-</div>
      }

      // 각 행별로 로딩 상태 확인 (vendorId_rfqId 형식의 키 사용)
      const rowKey = `${vendorId}_${rfqId}`
      const isRowLoading = loadingVendors[rowKey] === true
      
      // 템플릿 파일이 없으면 다운로드 버튼 비활성화
      const isDisabled = files <= 0 || isRowLoading

      return (
        <Button
          variant="ghost"
          size="sm"
          className="relative h-8 w-8 p-0 group"
          onClick={
            isDisabled
              ? undefined
              : () => handleDownloadCbeFiles(vendorId, rfqId)
          }
          aria-label={
            isRowLoading
              ? "다운로드 중..."
              : files > 0
                ? `CBE 첨부 다운로드 (${files}개)`
                : "다운로드할 파일 없음"
          }
          disabled={isDisabled}
        >
          {isRowLoading ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : (
            <Download className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
          )}

          {/* 파일이 1개 이상인 경우 뱃지로 개수 표시 (로딩 중이 아닐 때만) */}
          {!isRowLoading && files > 0 && (
            <Badge
              variant="secondary"
              className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center"
            >
              {files}
            </Badge>
          )}

          <span className="sr-only">
            {isRowLoading
              ? "다운로드 중..."
              : files > 0
                ? `CBE 첨부 다운로드 (${files}개)`
                : "다운로드할 파일 없음"}
          </span>
        </Button>
      )
    },
    enableSorting: false,
    maxSize: 80,
  }
  
  // ----------------------------------------------------------------
  // 6) 최종 컬럼 배열 (respondColumn 추가)
  // ----------------------------------------------------------------
  return [
    selectColumn,
    ...nestedColumns,
    respondColumn, // 응답 컬럼 추가
    downloadColumn,
    commentsColumn,
  ]
}