"use client"

import * as React from "react"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Download, FileText, File, ImageIcon, AlertCircle } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { formatDate } from "@/lib/utils"
import prettyBytes from "pretty-bytes"

// 견적서 첨부파일 타입 정의
export interface QuotationAttachment {
  id: number
  quotationId: number
  revisionId: number
  fileName: string
  originalFileName: string
  fileSize: number
  fileType: string | null
  filePath: string
  description: string | null
  uploadedBy: number
  vendorId: number
  isVendorUpload: boolean
  createdAt: Date
  updatedAt: Date
}

// 견적서 정보 타입
interface QuotationInfo {
  id: number
  quotationCode: string | null
  vendorName?: string
  rfqCode?: string
}

interface TechSalesQuotationAttachmentsSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  quotation: QuotationInfo | null
  attachments: QuotationAttachment[]
  isLoading?: boolean
}

export function TechSalesQuotationAttachmentsSheet({
  quotation,
  attachments,
  isLoading = false,
  ...props
}: TechSalesQuotationAttachmentsSheetProps) {
  
  // 파일 아이콘 선택 함수
  const getFileIcon = (fileName: string) => {
    const ext = fileName.split('.').pop()?.toLowerCase();
    if (!ext) return <File className="h-5 w-5 text-gray-500" />;
    
    // 이미지 파일
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(ext)) {
      return <ImageIcon className="h-5 w-5 text-blue-500" />;
    }
    // PDF 파일
    if (ext === 'pdf') {
      return <FileText className="h-5 w-5 text-red-500" />;
    }
    // Excel 파일
    if (['xlsx', 'xls', 'csv'].includes(ext)) {
      return <FileText className="h-5 w-5 text-green-500" />;
    }
    // Word 파일
    if (['docx', 'doc'].includes(ext)) {
      return <FileText className="h-5 w-5 text-blue-500" />;
    }
    // 기본 파일
    return <File className="h-5 w-5 text-gray-500" />;
  };

  // 파일 다운로드 처리
  const handleDownload = (attachment: QuotationAttachment) => {
    const link = document.createElement('a');
    link.href = attachment.filePath;
    link.download = attachment.originalFileName || attachment.fileName;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // 리비전별로 첨부파일 그룹핑
  const groupedAttachments = React.useMemo(() => {
    const groups = new Map<number, QuotationAttachment[]>();
    
    attachments.forEach(attachment => {
      const revisionId = attachment.revisionId;
      if (!groups.has(revisionId)) {
        groups.set(revisionId, []);
      }
      groups.get(revisionId)!.push(attachment);
    });

    // 리비전 ID 기준 내림차순 정렬 (최신 버전이 위에)
    return Array.from(groups.entries())
      .sort(([a], [b]) => b - a)
      .map(([revisionId, files]) => ({
        revisionId,
        files: files.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      }));
  }, [attachments]);
  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
        <SheetHeader className="text-left">
          <SheetTitle>견적서 첨부파일</SheetTitle>
          <SheetDescription>
            <div className="space-y-1">
              <div>견적서: {quotation?.quotationCode || "N/A"}</div>
              {quotation?.vendorName && (
                <div>벤더: {quotation.vendorName}</div>
              )}
              {quotation?.rfqCode && (
                <div>RFQ: {quotation.rfqCode}</div>
              )}
            </div>
          </SheetDescription>
        </SheetHeader>

        <div className="flex-1 overflow-auto">
          {isLoading ? (
            <div className="flex items-center justify-center py-8">
              <div className="text-center">
                <div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full mx-auto mb-2" />
                <p className="text-sm text-muted-foreground">첨부파일 로딩 중...</p>
              </div>
            </div>
          ) : attachments.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <AlertCircle className="h-12 w-12 text-muted-foreground mb-4" />
              <p className="text-muted-foreground mb-2">첨부파일이 없습니다</p>
              <p className="text-sm text-muted-foreground">
                이 견적서에는 첨부된 파일이 없습니다.
              </p>
            </div>
          ) : (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <h6 className="font-semibold text-sm">
                  첨부파일 ({attachments.length}개)
                </h6>
              </div>
              
              {groupedAttachments.map((group, groupIndex) => (
                <div key={group.revisionId} className="space-y-3">
                  {/* 리비전 헤더 */}
                  <div className="flex items-center gap-2">
                    <Badge variant={group.revisionId === 0 ? "secondary" : "outline"} className="text-xs">
                      {group.revisionId === 0 ? "초기 버전" : `버전 ${group.revisionId}`}
                    </Badge>
                    <span className="text-xs text-muted-foreground">
                      ({group.files.length}개 파일)
                    </span>
                  </div>

                  {/* 해당 리비전의 첨부파일들 */}
                  {group.files.map((attachment) => (
                    <div 
                      key={attachment.id}
                      className="flex items-start gap-3 p-3 border rounded-lg hover:bg-muted/50 transition-colors ml-4"
                    >
                      <div className="mt-1">
                        {getFileIcon(attachment.fileName)}
                      </div>
                      
                      <div className="flex-1 min-w-0">
                        <div className="flex items-start justify-between gap-2">
                          <div className="min-w-0 flex-1">
                            <p className="text-sm font-medium break-words leading-tight">
                              {attachment.originalFileName || attachment.fileName}
                            </p>
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-xs text-muted-foreground">
                                {prettyBytes(attachment.fileSize)}
                              </span>
                              <Badge variant="outline" className="text-xs">
                                {attachment.isVendorUpload ? "벤더 업로드" : "시스템"}
                              </Badge>
                            </div>
                            <p className="text-xs text-muted-foreground mt-1">
                              {formatDate(attachment.createdAt)}
                            </p>
                            {attachment.description && (
                              <p className="text-xs text-muted-foreground mt-1 break-words">
                                {attachment.description}
                              </p>
                            )}
                          </div>
                        </div>
                      </div>

                      <div className="flex flex-col gap-1">
                        {/* 다운로드 버튼 */}
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8"
                          onClick={() => handleDownload(attachment)}
                          title="다운로드"
                        >
                          <Download className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}

                  {/* 그룹 간 구분선 (마지막 그룹 제외) */}
                  {groupIndex < groupedAttachments.length - 1 && (
                    <Separator className="my-4" />
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      </SheetContent>
    </Sheet>
  )
}