path: root/lib/rfq-last/attachment/rfq-attachments-table.tsx

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { 
  Download, 
  FileText, 
  Upload, 
  RefreshCw, 
  Eye,
  Trash2,
  History,
  Plus,
  File,
  FileImage,
  FileSpreadsheet,
  FileCode
} from "lucide-react";
import { format, formatDistanceToNow } from "date-fns";
import { ko } from "date-fns/locale";
import { type ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import { ClientDataTableColumnHeaderSimple } from "@/components/client-data-table/data-table-column-simple-header";
import { ClientDataTable } from "@/components/client-data-table/data-table";
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import type {
  DataTableAdvancedFilterField,
  DataTableRowAction,
} from "@/types/table";
import { cn } from "@/lib/utils";
import { getRfqAllAttachments } from "@/lib/rfq-last/service";
import { downloadFile } from "@/lib/file-download";
import { DeleteAttachmentsDialog } from "./delete-attachments-dialog";
import { AddAttachmentDialog } from "./add-attachment-dialog";
import { UpdateRevisionDialog } from "./update-revision-dialog";
import { toast } from "sonner";
import { RevisionHistoryDialog } from "./revision-historty-dialog";
import { createFilterFn } from "@/components/client-data-table/table-filters";

// 타입 정의
interface RfqAttachment {
  id: number;
  attachmentType: "설계" | "구매";
  serialNo: string | null;
  rfqId: number;
  currentRevision: string | null;
  latestRevisionId: number | null;
  description: string | null;
  createdBy: number;
  createdAt: Date;
  updatedAt: Date;
  fileName: string | null;
  originalFileName: string | null;
  filePath: string | null;
  fileSize: number | null;
  fileType: string | null;
  revisionComment: string | null;
  createdByName: string | null;
}

interface RfqAttachmentsTableProps {
  rfqId: number;
  initialData: RfqAttachment[];
}

// 파일 타입별 아이콘 반환
const getFileIcon = (fileType: string | null) => {
  if (!fileType) return <File className="h-4 w-4" />;
  
  const type = fileType.toLowerCase();
  if (type.includes('image') || ['jpg', 'jpeg', 'png', 'gif'].includes(type)) {
    return <FileImage className="h-4 w-4 text-blue-500" />;
  }
  if (type.includes('excel') || type.includes('spreadsheet') || ['xls', 'xlsx'].includes(type)) {
    return <FileSpreadsheet className="h-4 w-4 text-green-500" />;
  }
  if (type.includes('pdf')) {
    return <FileText className="h-4 w-4 text-red-500" />;
  }
  if (type.includes('code') || ['js', 'ts', 'tsx', 'jsx', 'html', 'css'].includes(type)) {
    return <FileCode className="h-4 w-4 text-purple-500" />;
  }
  return <File className="h-4 w-4 text-gray-500" />;
};

// 파일 크기 포맷팅
const formatFileSize = (bytes: number | null) => {
  if (!bytes) return "-";
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
};

export function RfqAttachmentsTable({
  rfqId,
  initialData,
}: RfqAttachmentsTableProps) {
  const [activeTab, setActiveTab] = React.useState<'설계' | '구매'>('설계');
  const [data, setData] = React.useState<RfqAttachment[]>(initialData);
  const [selectedAttachment, setSelectedAttachment] = React.useState<RfqAttachment | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
  const [updateRevisionDialogOpen, setUpdateRevisionDialogOpen] = React.useState(false);
  const [revisionHistoryDialogOpen, setRevisionHistoryDialogOpen] = React.useState(false);
  const [addDialogOpen, setAddDialogOpen] = React.useState(false);
  const [isRefreshing, setIsRefreshing] = React.useState(false);
  const [selectedRows, setSelectedRows] = React.useState<RfqAttachment[]>([]);

  // 탭에 따른 데이터 필터링
  const filteredData = React.useMemo(() => {
    return data.filter(item => item.attachmentType === activeTab);
  }, [data, activeTab]);

  // 데이터 새로고침
  const handleRefresh = React.useCallback(async () => {
    setIsRefreshing(true);
    try {
      const result = await getRfqAllAttachments(rfqId);
      if (result.success && result.data) {
        setData(result.data);
        toast.success("데이터를 새로고침했습니다.");
      } else {
        toast.error("데이터를 불러오는데 실패했습니다.");
      }
    } catch (error) {
      console.error("Refresh error:", error);
      toast.error("새로고침 중 오류가 발생했습니다.");
    } finally {
      setIsRefreshing(false);
    }
  }, [rfqId]);

  // 액션 처리
  const handleAction = React.useCallback(async (action: DataTableRowAction<RfqAttachment>) => {
    const attachment = action.row.original;
    
    switch (action.type) {
      case "download":
        if (attachment.filePath && attachment.originalFileName) {
          await downloadFile(attachment.filePath, attachment.originalFileName, {
            action: 'download',
            showToast: true
          });
        }
        break;
        
      case "preview":
        if (attachment.filePath && attachment.originalFileName) {
          await downloadFile(attachment.filePath, attachment.originalFileName, {
            action: 'preview',
            showToast: true
          });
        }
        break;
        
      case "history":
        setSelectedAttachment(attachment);
        setRevisionHistoryDialogOpen(true);
        break;
        
      case "update":
        setSelectedAttachment(attachment);
        setUpdateRevisionDialogOpen(true);
        break;
        
      case "delete":
        setSelectedAttachment(attachment);
        setDeleteDialogOpen(true);
        break;
    }
  }, []);

  // 선택된 항목 일괄 삭제
  const handleBulkDelete = React.useCallback(() => {
    if (selectedRows.length === 0) {
      toast.warning("삭제할 항목을 선택해주세요.");
      return;
    }
    setDeleteDialogOpen(true);
  }, [selectedRows]);

  // 선택된 항목 일괄 다운로드
  const handleBulkDownload = React.useCallback(async () => {
    if (selectedRows.length === 0) {
      toast.warning("다운로드할 항목을 선택해주세요.");
      return;
    }
    
    for (const attachment of selectedRows) {
      if (attachment.filePath && attachment.originalFileName) {
        await downloadFile(attachment.filePath, attachment.originalFileName, {
          action: 'download',
          showToast: false
        });
      }
    }
    toast.success(`${selectedRows.length}개 파일을 다운로드했습니다.`);
  }, [selectedRows]);

  // 컬럼 정의
  const columns: ColumnDef<RfqAttachment>[] = React.useMemo(() => [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
          onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
          aria-label="select all"
          className="translate-y-0.5"
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(v) => row.toggleSelected(!!v)}
          aria-label="select row"
          className="translate-y-0.5"
        />
      ),
      size: 40,
      enableSorting: false,
      enableHiding: false,
      enablePinning: true,
    },
    {
      accessorKey: "serialNo",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="일련번호" />,
      filterFn: createFilterFn("text"), // 추가
      cell: ({ row }) => (
        <span className="font-mono text-sm">{row.original.serialNo || "-"}</span>
      ),
      size: 100,
      meta: { excelHeader: "일련번호" },
      enablePinning: true,
    },
    {
      accessorKey: "originalFileName",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="파일명" />,
      filterFn: createFilterFn("text"), // 추가
      cell: ({ row }) => {
        const file = row.original;
        return (
          <div className="flex items-center gap-2">
            {getFileIcon(file.fileType)}
            <div className="flex flex-col">
              <span className="text-sm font-medium truncate max-w-[250px]" title={file.originalFileName || ""}>
                {file.originalFileName || file.fileName || "-"}
              </span>
            </div>
          </div>
        );
      },
      size: 300,
    },
    {
      accessorKey: "description",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="설명" />,
      filterFn: createFilterFn("text"), // 추가
      cell: ({ row }) => (
        <div className="max-w-[200px] truncate" title={row.original.description || ""}>
          {row.original.description || "-"}
        </div>
      ),
      size: 200,
    },
    {
      accessorKey: "currentRevision",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="리비전" />,
      filterFn: createFilterFn("text"), // 추가
      cell: ({ row }) => {
        const revision = row.original.currentRevision;
        return revision ? (
          <Badge variant="outline" className="font-mono">
            Rev. {revision}
          </Badge>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 100,
    },
    {
      accessorKey: "fileSize",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="크기" />,
      filterFn: createFilterFn("number"), // number 타입으로 변경
      cell: ({ row }) => (
        <span className="text-sm text-muted-foreground">
          {formatFileSize(row.original.fileSize)}
        </span>
      ),
      size: 80,
    },
    {
      accessorKey: "fileType",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="파일 타입" />,
      filterFn: createFilterFn("select"), // 추가
      cell: ({ row }) => {
        const fileType = row.original.fileType;
        if (!fileType) return <span className="text-muted-foreground">-</span>;
        
        const type = fileType.toLowerCase();
        let displayType = "기타";
        let color = "text-gray-500";
        
        if (type.includes('pdf')) {
          displayType = "PDF";
          color = "text-red-500";
        } else if (type.includes('excel') || ['xls', 'xlsx'].includes(type)) {
          displayType = "Excel";
          color = "text-green-500";
        } else if (type.includes('word') || ['doc', 'docx'].includes(type)) {
          displayType = "Word";
          color = "text-blue-500";
        } else if (type.includes('image') || ['jpg', 'jpeg', 'png', 'gif'].includes(type)) {
          displayType = "이미지";
          color = "text-purple-500";
        }
        
        return (
          <Badge variant="outline" className={cn("text-xs", color)}>
            {displayType}
          </Badge>
        );
      },
      size: 100,
    },
    {
      accessorKey: "createdByName",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="업로드자" />,
      filterFn: createFilterFn("text"), // 추가
      cell: ({ row }) => row.original.createdByName || "-",
      size: 100,
    },
    {
      accessorKey: "createdAt",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="업로드일" />,
      filterFn: createFilterFn("date"), // date 타입으로 변경
      cell: ({ row }) => {
        const date = row.original.createdAt;
        return date ? (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <span className="text-sm cursor-help">
                  {format(new Date(date), "MM-dd HH:mm")}
                </span>
              </TooltipTrigger>
              <TooltipContent>
                <p>{format(new Date(date), "yyyy년 MM월 dd일 HH시 mm분")}</p>
                <p className="text-xs text-muted-foreground">
                  ({formatDistanceToNow(new Date(date), { addSuffix: true, locale: ko })})
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        ) : (
          "-"
        );
      },
      size: 100,
    },
    {
      accessorKey: "updatedAt",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="수정일" />,
      filterFn: createFilterFn("date"), // date 타입으로 변경
      cell: ({ row }) => {
        const date = row.original.updatedAt;
        return date ? format(new Date(date), "MM-dd HH:mm") : "-";
      },
      size: 100,
    },
    {
      accessorKey: "revisionComment",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="리비전 코멘트" />,
      filterFn: createFilterFn("text"), // 추가
      cell: ({ row }) => {
        const comment = row.original.revisionComment;
        return comment ? (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <span className="text-sm truncate max-w-[150px] block cursor-help">
                  {comment}
                </span>
              </TooltipTrigger>
              <TooltipContent className="max-w-[300px]">
                <p className="text-sm">{comment}</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 150,
    },
    {
      id: "actions",
      header: "작업",
      cell: ({ row }) => {
        // 구매 탭에서만 작업 버튼 표시
        if (activeTab !== '구매') {
          return <span className="text-muted-foreground text-sm">-</span>;
        }
        
        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">메뉴 열기</span>
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path>
                </svg>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => handleAction({ type: "download", row })}>
                다운로드
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => handleAction({ type: "preview", row })}>
                미리보기
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => handleAction({ type: "history", row })}>
                리비전 히스토리
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => handleAction({ type: "update", row })}>
                새 버전 업로드
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem 
                onClick={() => handleAction({ type: "delete", row })}
                className="text-red-600"
              >
                삭제
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
      size: 60,
      enablePinning: true,
    },
  ], [handleAction]);

  const advancedFilterFields: DataTableAdvancedFilterField<RfqAttachment>[] = [
    { id: "serialNo", label: "일련번호", type: "text" },
    { id: "originalFileName", label: "파일명", type: "text" },
    { id: "description", label: "설명", type: "text" },
    { id: "currentRevision", label: "리비전", type: "text" },
    // {
    //   id: "fileType",
    //   label: "파일 타입",
    //   type: "select",
    //   options: [
    //     { label: "PDF", value: "pdf" },
    //     { label: "Excel", value: "xlsx" },
    //     { label: "Word", value: "docx" },
    //     { label: "이미지", value: "image" },
    //     { label: "기타", value: "other" },
    //   ]
    // },
    { id: "createdByName", label: "업로드자", type: "text" },
    { id: "createdAt", label: "업로드일", type: "date" },
    { id: "updatedAt", label: "수정일", type: "date" },
  ];

  // 탭별 데이터 카운트
  const designCount = React.useMemo(() => 
    data.filter(item => item.attachmentType === "설계").length, [data]
  );
  const purchaseCount = React.useMemo(() => 
    data.filter(item => item.attachmentType === "구매").length, [data]
  );

  // 추가 액션 버튼들
  const additionalActions = React.useMemo(() => (
    <div className="flex items-center gap-2">
      {selectedRows.length > 0 && (
        <>
          <Button
            variant="outline"
            size="sm"
            onClick={handleBulkDownload}
          >
            <Download className="h-4 w-4 mr-2" />
            다운로드 ({selectedRows.length})
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={handleBulkDelete}
            className="text-red-600"
          >
            <Trash2 className="h-4 w-4 mr-2" />
            삭제 ({selectedRows.length})
          </Button>
        </>
      )}
      <Button
        variant="outline"
        size="sm"
        onClick={handleRefresh}
        disabled={isRefreshing}
      >
        <RefreshCw className={cn("h-4 w-4 mr-2", isRefreshing && "animate-spin")} />
        새로고침
      </Button>
      
      {/* 구매 탭에서만 파일 업로드 버튼 표시 */}
      {activeTab === "구매" && (
        <AddAttachmentDialog 
          rfqId={rfqId}
          attachmentType="구매"
          onSuccess={handleRefresh}
          open={addDialogOpen}
          onOpenChange={setAddDialogOpen}
        />
      )}
    </div>
  ), [selectedRows, activeTab, isRefreshing, addDialogOpen, handleBulkDownload, handleBulkDelete, handleRefresh, rfqId]);

  return (
    <div className={cn("w-full space-y-4")}>
      <Tabs 
        value={activeTab}
        onValueChange={(value) => setActiveTab(value as '설계' | '구매')}
      >
        <div className="flex items-center justify-between mb-4">
          <TabsList>
            <TabsTrigger value="설계">
              설계 첨부파일
              <Badge variant="secondary" className="ml-2">
                {designCount}
              </Badge>
            </TabsTrigger>
            <TabsTrigger value="구매">
              구매 첨부파일
              <Badge variant="secondary" className="ml-2">
                {purchaseCount}
              </Badge>
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="설계" className="mt-0">

              <ClientDataTable
                columns={columns}
                data={filteredData}
                advancedFilterFields={advancedFilterFields}
                autoSizeColumns={true}
                compact={true}
                maxHeight="34rem"
                onSelectedRowsChange={setSelectedRows}
                initialColumnPinning={{
                  left: ["select", "serialNo"],
                  right: ["actions"],
                }}
              >
                {additionalActions}
              </ClientDataTable>

        </TabsContent>

        <TabsContent value="구매" className="mt-0">

              <ClientDataTable
                columns={columns}
                data={filteredData}
                advancedFilterFields={advancedFilterFields}
                autoSizeColumns={true}
                compact={true}
                maxHeight="34rem"
                onSelectedRowsChange={setSelectedRows}
                initialColumnPinning={{
                  left: ["select", "serialNo"],
                  right: ["actions"],
                }}
              >
                {additionalActions}
              </ClientDataTable>

        </TabsContent>
      </Tabs>

      {/* 삭제 다이얼로그 */}
      {(selectedAttachment || selectedRows.length > 0) && (
        <DeleteAttachmentsDialog
          open={deleteDialogOpen}
          onOpenChange={(open) => {
            setDeleteDialogOpen(open);
            if (!open) {
              setSelectedAttachment(null);
            }
          }}
          attachments={selectedAttachment ? [selectedAttachment] : selectedRows}
          onSuccess={handleRefresh}
        />
      )}

      {/* 새 버전 업로드 다이얼로그 */}
      {selectedAttachment && (
        <UpdateRevisionDialog
          open={updateRevisionDialogOpen}
          onOpenChange={(open) => {
            setUpdateRevisionDialogOpen(open);
            if (!open) {
              setSelectedAttachment(null);
            }
          }}
          attachment={selectedAttachment}
          onSuccess={handleRefresh}
        />
      )}

       {/* 리비전 히스토리 다이얼로그 */}
       {selectedAttachment && (
        <RevisionHistoryDialog
          open={revisionHistoryDialogOpen}
          onOpenChange={(open) => {
            setRevisionHistoryDialogOpen(open);
            if (!open) {
              setSelectedAttachment(null);
            }
          }}
          attachmentId={selectedAttachment.id}
          attachmentName={selectedAttachment.originalFileName || selectedAttachment.fileName || undefined}
        />
      )}
    </div>
  );
}