// @/lib/rfq-last/vendor/vendor-response-table.tsx

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { 
  Download, 
  FileText, 
  RefreshCw, 
  Eye,
  Trash2,
  File,
  FileImage,
  FileSpreadsheet,
  FileCode,
  Building2,
  Calendar,
  AlertCircle, X
} from "lucide-react";
import { format, formatDistanceToNow, isValid, isBefore, isAfter } 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 { getRfqVendorAttachments } from "@/lib/rfq-last/service";
import { downloadFile } from "@/lib/file-download";
import { toast } from "sonner";
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { 
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";


// 타입 정의
interface VendorAttachment {
  id: number;
  vendorResponseId: number;
  attachmentType: string;
  documentNo: string | null;
  fileName: string;
  originalFileName: string;
  filePath: string;
  fileSize: number | null;
  fileType: string | null;
  description: string | null;
  validFrom: Date | null;
  validTo: Date | null;
  uploadedBy: number;
  uploadedAt: Date;
  uploadedByName: string | null;
  vendorId: number | null;
  vendorName: string | null;
  vendorCode: string | null;
  responseStatus: "작성중" | "제출완료" | "수정요청" | "최종확정" | "취소" | null;
  responseVersion: number | null;
}

interface VendorResponseTableProps {
  rfqId: number;
  initialData: VendorAttachment[];
}

// 파일 타입별 아이콘 반환
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]}`;
};

// 응답 상태별 색상
const getStatusVariant = (status: string | null) => {
  switch (status) {
    case "작성중": return "outline";
    case "제출완료": return "default";
    case "수정요청": return "secondary";
    case "최종확정": return "success";
    case "취소": return "destructive";
    default: return "outline";
  }
};

// 유효기간 체크
const checkValidity = (validTo: Date | null) => {
  if (!validTo) return null;
  const today = new Date();
  const expiry = new Date(validTo);
  
  if (isBefore(expiry, today)) {
    return "expired";
  } else if (isBefore(expiry, new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000))) {
    return "expiring-soon"; // 30일 이내 만료
  }
  return "valid";
};

export function VendorResponseTable({
  rfqId,
  initialData,
}: VendorResponseTableProps) {
  const [data, setData] = React.useState<VendorAttachment[]>(initialData);
  const [isRefreshing, setIsRefreshing] = React.useState(false);
  const [selectedRows, setSelectedRows] = React.useState<VendorAttachment[]>([]);



  const [isUpdating, setIsUpdating] = React.useState(false);
  const [showTypeDialog, setShowTypeDialog] = React.useState(false);
  const [selectedType, setSelectedType] = React.useState<"구매" | "설계" | "">("");
  console.log(data,"data")

  const [selectedVendor, setSelectedVendor] = React.useState<string | null>(null);

  const filteredData = React.useMemo(() => {
    if (!selectedVendor) return data;
    return data.filter(item => item.vendorName === selectedVendor);
  }, [data, selectedVendor]);



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

    const toggleVendorFilter = (vendor: string) => {
      if (selectedVendor === vendor) {
        setSelectedVendor(null); // 이미 선택된 벤더를 다시 클릭하면 필터 해제
      } else {
        setSelectedVendor(vendor);
        // 필터 변경 시 선택 초기화 (옵션)
        setSelectedRows([]);
      }
    };

   // 문서 유형 일괄 변경
   const handleBulkTypeChange = React.useCallback(async () => {
    if (!selectedType || selectedRows.length === 0) return;

    setIsUpdating(true);
    try {
      const ids = selectedRows.map(row => row.id);
      const result = await updateAttachmentTypes(ids, selectedType as "구매" | "설계");
      
      if (result.success) {
        toast.success(result.message);
        // 데이터 새로고침
        await handleRefresh();
        // 선택 초기화
        setSelectedRows([]);
        setShowTypeDialog(false);
        setSelectedType("");
      } else {
        toast.error(result.message);
      }
    } catch (error) {
      toast.error("문서 유형 변경 중 오류가 발생했습니다.");
    } finally {
      setIsUpdating(false);
    }
  }, [selectedType, selectedRows, handleRefresh]);



  // 액션 처리
  const handleAction = React.useCallback(async (action: DataTableRowAction<VendorAttachment>) => {
    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;
    }
  }, []);

  // 선택된 항목 일괄 다운로드
  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<VendorAttachment>[] = 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: "vendorName",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="벤더" />,
      cell: ({ row }) => {
        const vendor = row.original;
        return (
          <div className="flex items-center gap-2">
            <Building2 className="h-4 w-4 text-muted-foreground" />
            <div className="flex flex-col">
              <span className="text-sm font-medium">{vendor.vendorName || "-"}</span>
              <span className="text-xs text-muted-foreground">{vendor.vendorCode}</span>
            </div>
          </div>
        );
      },
      size: 150,
      enablePinning: true,
    },
    {
      accessorKey: "attachmentType",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="문서 유형" />,
      cell: ({ row }) => {
        const type = row.original.attachmentType;
        return (
          <Badge variant="outline" className="font-mono">
            {type}
          </Badge>
        );
      },
      size: 100,
    },
    {
      accessorKey: "documentNo",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="문서번호" />,
      cell: ({ row }) => (
        <span className="font-mono text-sm">{row.original.documentNo || "-"}</span>
      ),
      size: 120,
    },
    {
      accessorKey: "originalFileName",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="파일명" />,
      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="설명" />,
    //   cell: ({ row }) => (
    //     <div className="max-w-[200px] truncate" title={row.original.description || ""}>
    //       {row.original.description || "-"}
    //     </div>
    //   ),
    //   size: 200,
    // },
    // {
    //   accessorKey: "validTo",
    //   header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="유효기간" />,
    //   cell: ({ row }) => {
    //     const { validFrom, validTo } = row.original;
    //     const validity = checkValidity(validTo);
        
    //     if (!validTo) return <span className="text-muted-foreground">-</span>;
        
    //     return (
    //       <TooltipProvider>
    //         <Tooltip>
    //           <TooltipTrigger asChild>
    //             <div className="flex items-center gap-2">
    //               {validity === "expired" && (
    //                 <AlertCircle className="h-4 w-4 text-red-500" />
    //               )}
    //               {validity === "expiring-soon" && (
    //                 <AlertCircle className="h-4 w-4 text-yellow-500" />
    //               )}
    //               <span className={cn(
    //                 "text-sm",
    //                 validity === "expired" && "text-red-500",
    //                 validity === "expiring-soon" && "text-yellow-500"
    //               )}>
    //                 {format(new Date(validTo), "yyyy-MM-dd")}
    //               </span>
    //             </div>
    //           </TooltipTrigger>
    //           <TooltipContent>
    //             <p>유효기간: {validFrom ? format(new Date(validFrom), "yyyy-MM-dd") : "?"} ~ {format(new Date(validTo), "yyyy-MM-dd")}</p>
    //             {validity === "expired" && <p className="text-red-500">만료됨</p>}
    //             {validity === "expiring-soon" && <p className="text-yellow-500">곧 만료 예정</p>}
    //           </TooltipContent>
    //         </Tooltip>
    //       </TooltipProvider>
    //     );
    //   },
    //   size: 120,
    // },
    {
      accessorKey: "responseStatus",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="응답 상태" />,
      cell: ({ row }) => {
        const status = row.original.responseStatus;
        return status ? (
          <Badge variant={getStatusVariant(status)}>
            {status}
          </Badge>
        ) : (
          <span className="text-muted-foreground">-</span>
        );
      },
      size: 100,
    },
    {
      accessorKey: "fileSize",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="크기" />,
      cell: ({ row }) => (
        <span className="text-sm text-muted-foreground">
          {formatFileSize(row.original.fileSize)}
        </span>
      ),
      size: 80,
    },
    {
      accessorKey: "uploadedAt",
      header: ({ column }) => <ClientDataTableColumnHeaderSimple column={column} title="업로드일" />,
      cell: ({ row }) => {
        const date = row.original.uploadedAt;
        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,
    },
    {
      id: "actions",
      header: "작업",
      cell: ({ row }) => {
        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({ row, type: "download" })}>
                <Download className="mr-2 h-4 w-4" />
                다운로드
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => handleAction({ row, type: "preview" })}>
                <Eye className="mr-2 h-4 w-4" />
                미리보기
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
      size: 60,
      enablePinning: true,
    },
  ], [handleAction]);

  const advancedFilterFields: DataTableAdvancedFilterField<VendorAttachment>[] = [
    { id: "vendorName", label: "벤더명", type: "text" },
    { id: "vendorCode", label: "벤더코드", type: "text" },
    {
      id: "attachmentType",
      label: "문서 유형",
      type: "select",
      options: [
        { label: "구매", value: "구매" },
        { label: "설계", value: "설계" },
        // { label: "인증서", value: "인증서" },
        // { label: "카탈로그", value: "카탈로그" },
        // { label: "도면", value: "도면" },
        // { label: "테스트성적서", value: "테스트성적서" },
        // { label: "기타", value: "기타" },
      ]
    },
    { id: "documentNo", label: "문서번호", type: "text" },
    { id: "originalFileName", label: "파일명", type: "text" },
    { id: "description", label: "설명", type: "text" },
    {
      id: "responseStatus",
      label: "응답 상태",
      type: "select",
      options: [
        { label: "작성중", value: "작성중" },
        { label: "제출완료", value: "제출완료" },
        { label: "수정요청", value: "수정요청" },
        { label: "최종확정", value: "최종확정" },
        { label: "취소", value: "취소" },
      ]
    },
    // { id: "validFrom", label: "유효시작일", type: "date" },
    // { id: "validTo", label: "유효종료일", type: "date" },
    { id: "uploadedAt", label: "업로드일", type: "date" },
  ];

  // 추가 액션 버튼들 수정
  const additionalActions = React.useMemo(() => (
    <div className="flex items-center gap-2">
      {selectedRows.length > 0 && (
        <>
          {/* 문서 유형 변경 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => setShowTypeDialog(true)}
          >
            <FileText className="h-4 w-4 mr-2" />
            유형 변경 ({selectedRows.length})
          </Button>
          
          <Button
            variant="outline"
            size="sm"
            onClick={handleBulkDownload}
          >
            <Download 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>
    </div>
  ), [selectedRows, isRefreshing, handleBulkDownload, handleRefresh])

  // 벤더별 그룹 카운트
  const vendorCounts = React.useMemo(() => {
    const counts = new Map<string, number>();
    data.forEach(item => {
      const vendor = item.vendorName || "Unknown";
      counts.set(vendor, (counts.get(vendor) || 0) + 1);
    });
    return counts;
  }, [data]);

  return (
    <div className={cn("w-full space-y-4")}>
      {/* 벤더 필터 섹션 */}
      <div className="space-y-2">
        {/* 필터 헤더 */}
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-muted-foreground">
            벤더별 필터
          </span>
          {selectedVendor && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setSelectedVendor(null)}
              className="h-7 px-2 text-xs"
            >
              <X className="h-3 w-3 mr-1" />
              필터 초기화
            </Button>
          )}
        </div>
        
        {/* 벤더 버튼들 */}
        <div className="flex gap-2 flex-wrap">
          {/* 전체 보기 버튼 */}
          <Button
            variant={selectedVendor === null ? "default" : "outline"}
            size="sm"
            onClick={() => setSelectedVendor(null)}
            className="h-7"
          >
            <span className="text-xs">
              전체 ({data.length})
            </span>
          </Button>
          
          {/* 각 벤더별 버튼 */}
          {Array.from(vendorCounts.entries()).map(([vendor, count]) => (
            <Button
              key={vendor}
              variant={selectedVendor === vendor ? "default" : "outline"}
              size="sm"
              onClick={() => toggleVendorFilter(vendor)}
              className="h-7"
            >
              <Building2 className="h-3 w-3 mr-1" />
              <span className="text-xs">
                {vendor} ({count})
              </span>
            </Button>
          ))}
        </div>

        {/* 현재 필터 상태 표시 */}
        {selectedVendor && (
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <AlertCircle className="h-3 w-3" />
            <span>
              "{selectedVendor}" 벤더의 {filteredData.length}개 항목만 표시 중
            </span>
          </div>
        )}
      </div>

      <ClientDataTable
        columns={columns}
        data={filteredData} // 필터링된 데이터 사용
        advancedFilterFields={advancedFilterFields}
        autoSizeColumns={true}
        compact={true}
        maxHeight="34rem"
        onSelectedRowsChange={setSelectedRows}
        initialColumnPinning={{
          left: ["select", "vendorName"],
          right: ["actions"],
        }}
      >
        {additionalActions}
      </ClientDataTable>

       {/* 문서 유형 변경 다이얼로그 */}
       <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>문서 유형 변경</DialogTitle>
            <DialogDescription>
              선택한 {selectedRows.length}개 항목의 문서 유형을 변경합니다.
            </DialogDescription>
          </DialogHeader>
          
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <label htmlFor="type" className="text-right">
                문서 유형
              </label>
              <Select
                value={selectedType}
                onValueChange={(value) => setSelectedType(value as "구매" | "설계")}
              >
                <SelectTrigger className="col-span-3">
                  <SelectValue placeholder="문서 유형 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="구매">구매</SelectItem>
                  <SelectItem value="설계">설계</SelectItem>
                </SelectContent>
              </Select>
            </div>
            
            {/* 현재 선택된 항목들의 정보 표시 */}
            <div className="text-sm text-muted-foreground">
              <p>변경될 항목:</p>
              <ul className="mt-2 max-h-32 overflow-y-auto space-y-1">
                {selectedRows.slice(0, 5).map((row) => (
                  <li key={row.id} className="text-xs">
                    • {row.vendorName} - {row.originalFileName}
                  </li>
                ))}
                {selectedRows.length > 5 && (
                  <li className="text-xs italic">
                    ... 외 {selectedRows.length - 5}개
                  </li>
                )}
              </ul>
            </div>
          </div>
          
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setShowTypeDialog(false);
                setSelectedType("");
              }}
              disabled={isUpdating}
            >
              취소
            </Button>
            <Button
              onClick={handleBulkTypeChange}
              disabled={!selectedType || isUpdating}
            >
              {isUpdating ? (
                <>
                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                  변경 중...
                </>
              ) : (
                "변경"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}