path: root/components/ship-vendor-document/new-revision-dialog.tsx

"use client"

import React from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter
} from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { 
  Upload, 
  FileText, 
  X, 
  Loader2, 
  CheckCircle,
  Info
} from "lucide-react"
import { toast } from "sonner"
import { useSession } from "next-auth/react"
import { Alert, AlertDescription } from "@/components/ui/alert"

// 기존 메인 컴포넌트에서 추가할 import
// import { NewRevisionDialog } from "./new-revision-dialog"

/* -------------------------------------------------------------------------------------------------
 * Schema & Types
 * -----------------------------------------------------------------------------------------------*/

// 파일 검증 스키마
const MAX_FILE_SIZE = 1024 * 1024 * 1024 // 1GB

// B3 리비전 검증 함수
const validateB3Revision = (value: string) => {
  // B3 리비전 패턴: 단일 알파벳(A-Z) 또는 R01-R99
  const alphabetPattern = /^[A-Z]$/
  const numericPattern = /^R(0[1-9]|[1-9][0-9])$/
  
  return alphabetPattern.test(value) || numericPattern.test(value)
}

// B4 리비전 검증 함수
const validateB4Revision = (value: string) => {
  // B4 리비전 패턴: R01-R99
  const numericPattern = /^R(0[1-9]|[1-9][0-9])$/
  return numericPattern.test(value)
}

// drawingKind에 따른 동적 스키마 생성
const createRevisionUploadSchema = (drawingKind: string) => {
  const baseSchema = {
    usage: z.string().min(1, "Please select a usage"),
    comment: z.string().optional(),
    attachments: z
      .array(z.instanceof(File))
      .min(1, "Please upload at least 1 file")
      .refine(
        (files) => files.every((file) => file.size <= MAX_FILE_SIZE),
        "File size must be 50MB or less"
      ),
  }

  // B3와 B4에 따른 리비전 검증 추가
  const revisionField = drawingKind === 'B3'
    ? z.string()
        .min(1, "Please enter a revision")
        .max(3, "Revision must be 3 characters or less")
        .refine(
          validateB3Revision,
          "Invalid format. Use A-Z or R01-R99"
        )
    : z.string()
        .min(1, "Please enter a revision")
        .max(3, "Revision must be 3 characters or less")
        .refine(
          validateB4Revision,
          "Invalid format. Use R01-R99"
        )

  // B3인 경우에만 usageType 필드 추가
  if (drawingKind === 'B3') {
    return z.object({
      ...baseSchema,
      revision: revisionField,
      usageType: z.string().min(1, "Please select a usage type"),
    })
  } else {
    return z.object({
      ...baseSchema,
      revision: revisionField,
      usageType: z.string().optional(),
    })
  }
}

// drawingKind에 따른 용도 옵션
const getUsageOptions = (drawingKind: string) => {
  switch (drawingKind) {
    case 'B3':
      return [
        { value: "Approval", label: "Approval" },
        { value: "Working", label: "Working" },
        { value: "Comments", label: "Comments" },
      ]
    case 'B4':
      return [
        { value: "Pre", label: "Pre" },
        { value: "Working", label: "Working" },
      ]
    case 'B5':
      return [
        { value: "Pre", label: "Pre" },
        { value: "Working", label: "Working" },
      ]
    default:
      return [
        { value: "Pre", label: "Pre" },
        { value: "Working", label: "Working" },
      ]
  }
}

// B3 전용 용도 타입 옵션
const getUsageTypeOptions = (usage: string) => {
  switch (usage) {
    case 'Approval':
      return [
        { value: "Full", label: "Full" },
        { value: "Partial", label: "Partial" },
      ]
    case 'Working':
      return [
        { value: "Full", label: "Full" },
        { value: "Partial", label: "Partial" },
      ]
    case 'Comments':
      return [
        { value: "Comments", label: "Comments" },
      ]
    default:
      return []
  }
}

// 리비전 형식 가이드 생성
const getRevisionGuide = (drawingKind: string) => {
  if (drawingKind === 'B3') {
    return {
      placeholder: "e.g., A, B, C or R01, R02",
      helpText: "Use single letter (A-Z) or R01-R99 format",
      examples: [
        "A, B, C, ... Z (alphabetic revisions)",
        "R01, R02, ... R99 (numeric revisions)"
      ]
    }
  }
  return {
    placeholder: "e.g., R01, R02, R03",
    helpText: "Enter in R01, R02, R03... format",
    examples: ["R01, R02, R03, ... R99"]
  }
}

// B3 리비전 자동 포맷팅 함수
const formatB3RevisionInput = (value: string): string => {
  // 입력값을 대문자로 변환
  const upperValue = value.toUpperCase()
  
  // 단일 알파벳인 경우
  if (/^[A-Z]$/.test(upperValue)) {
    return upperValue
  }
  
  // R로 시작하는 경우
  if (upperValue.startsWith('R')) {
    // R 뒤의 숫자 추출
    const numPart = upperValue.slice(1).replace(/\D/g, '')
    if (numPart) {
      const num = parseInt(numPart, 10)
      // 1-99 범위 체크
      if (num >= 1 && num <= 99) {
        // 01-09는 0을 붙이고, 10-99는 그대로
        return `R${num.toString().padStart(2, '0')}`
      }
    }
  }
  
  return upperValue
}

interface NewRevisionDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  documentId: number
  documentTitle?: string
  drawingKind: string
  onSuccess?: (result?: any) => void
}

/* -------------------------------------------------------------------------------------------------
 * File Upload Component
 * -----------------------------------------------------------------------------------------------*/
function FileUploadArea({ 
  files, 
  onFilesChange 
}: { 
  files: File[]
  onFilesChange: (files: File[]) => void 
}) {
  const fileInputRef = React.useRef<HTMLInputElement>(null)

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = Array.from(event.target.files || [])
    if (selectedFiles.length > 0) {
      onFilesChange([...files, ...selectedFiles])
    }
  }

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault()
    const droppedFiles = Array.from(event.dataTransfer.files)
    if (droppedFiles.length > 0) {
      onFilesChange([...files, ...droppedFiles])
    }
  }

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault()
  }

  const removeFile = (index: number) => {
    onFilesChange(files.filter((_, i) => i !== index))
  }

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  return (
    <div className="space-y-4">
      <div
        className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-border transition-colors"
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onClick={() => fileInputRef.current?.click()}
      >
        <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
        <p className="text-sm text-muted-foreground mb-2">
          Drag files here or click to select
        </p>
        <p className="text-xs text-muted-foreground">
          Supports PDF, Word, Excel, Image, Text, ZIP files (max 1GB)
        </p>
        <p className="text-xs text-orange-600 mt-1">
          Note: File names cannot contain these characters: &lt; &gt; : &quot; &apos; | ? *
        </p>
        <input
          ref={fileInputRef}
          type="file"
          multiple
          accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.txt,.zip"
          onChange={handleFileSelect}
          className="hidden"
        />
      </div>

      {files.length > 0 && (
        <div className="space-y-2 max-h-40 overflow-y-auto overscroll-contain pr-2">
          <p className="text-sm font-medium">Selected Files ({files.length})</p>
          <div className="max-h-40 overflow-y-auto space-y-2">
            {files.map((file, index) => (
              <div
                key={index}
                className="flex items-center justify-between p-2 bg-muted/50 rounded border"
              >
                <div className="flex items-center space-x-2 flex-1">
                  <FileText className="h-4 w-4 text-muted-foreground" />
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate" title={file.name}>
                      {file.name}
                    </p>
                    <p className="text-xs text-muted-foreground">
                      {formatFileSize(file.size)}
                    </p>
                  </div>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => removeFile(index)}
                  className="h-8 w-8 p-0"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

/* -------------------------------------------------------------------------------------------------
 * Revision Input Component for B3
 * -----------------------------------------------------------------------------------------------*/
function B3RevisionInput({ 
  value, 
  onChange, 
  error 
}: { 
  value: string
  onChange: (value: string) => void
  error?: string
}) {
  const [inputValue, setInputValue] = React.useState(value)

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const rawValue = e.target.value
    const formattedValue = formatB3RevisionInput(rawValue)
    
    // 길이 제한 (알파벳은 1자, R숫자는 3자)
    if (rawValue.length <= 3) {
      setInputValue(formattedValue)
      onChange(formattedValue)
    }
  }

  const revisionGuide = getRevisionGuide('B3')

  return (
    <div className="space-y-2">
      <Input
        value={inputValue}
        onChange={handleInputChange}
        placeholder={revisionGuide.placeholder}
        className={error ? "border-red-500" : ""}
      />
      <Alert className="bg-blue-50 border-blue-200">
        <Info className="h-4 w-4 text-blue-600" />
        <AlertDescription className="text-xs space-y-1">
          <div className="font-medium text-blue-900">{revisionGuide.helpText}</div>
          <div className="text-blue-700">
            {revisionGuide.examples.map((example, idx) => (
              <div key={idx}>• {example}</div>
            ))}
          </div>
        </AlertDescription>
      </Alert>
    </div>
  )
}

/* -------------------------------------------------------------------------------------------------
 * Main Dialog Component
 * -----------------------------------------------------------------------------------------------*/
export function NewRevisionDialog({
  open,
  onOpenChange,
  documentId,
  documentTitle,
  drawingKind,
  onSuccess
}: NewRevisionDialogProps) {
  const [isUploading, setIsUploading] = React.useState(false)
  const [uploadProgress, setUploadProgress] = React.useState(0)
  const { data: session } = useSession()
  const [nextSerialNo, setNextSerialNo] = React.useState<string>("1")
  const [isLoadingSerialNo, setIsLoadingSerialNo] = React.useState(false)

    // Serial No 조회
    const fetchNextSerialNo = React.useCallback(async () => {
      setIsLoadingSerialNo(true)
      try {
        const response = await fetch(`/api/revisions/max-serial-no?documentId=${documentId}`)
        if (response.ok) {
          const data = await response.json()
          setNextSerialNo(String(data.nextSerialNo))
        }
      } catch (error) {
        console.error('Failed to fetch serial no:', error)
        // 에러 시 기본값 1 사용
        setNextSerialNo("1")
      } finally {
        setIsLoadingSerialNo(false)
      }
    }, [documentId])

      // Dialog 열릴 때 Serial No 조회
  React.useEffect(() => {
    if (open && documentId) {
      fetchNextSerialNo()
    }
  }, [open, documentId, fetchNextSerialNo])


  const userName = React.useMemo(() => {
    return session?.user?.name ? session.user.name : null;
  }, [session]);

  // drawingKind에 따른 동적 스키마 및 옵션 생성
  const revisionUploadSchema = React.useMemo(() => createRevisionUploadSchema(drawingKind), [drawingKind])
  const usageOptions = React.useMemo(() => getUsageOptions(drawingKind), [drawingKind])
  const showUsageType = drawingKind === 'B3'

  type RevisionUploadSchema = z.infer<typeof revisionUploadSchema>

  const form = useForm<RevisionUploadSchema>({
    resolver: zodResolver(revisionUploadSchema),
    defaultValues: {
      usage: "",
      revision: "",
      comment: "",
      usageType: showUsageType ? "" : undefined,
      attachments: [],
    },
  })

  const watchedFiles = form.watch("attachments")
  const watchedUsage = form.watch("usage")

  // 용도 선택에 따른 용도 타입 옵션 업데이트
  const usageTypeOptions = React.useMemo(() => {
    if (drawingKind === 'B3' && watchedUsage) {
      return getUsageTypeOptions(watchedUsage)
    }
    return []
  }, [drawingKind, watchedUsage])

  // 용도 변경 시 용도 타입 초기화 또는 자동 설정
  React.useEffect(() => {
    if (showUsageType && watchedUsage) {
      if (watchedUsage === "Comments") {
        form.setValue("usageType", "Comments")
      } else {
        form.setValue("usageType", "")
      }
    }
  }, [watchedUsage, showUsageType, form])

  // 리비전 가이드 텍스트
  const revisionGuide = React.useMemo(() => {
    return getRevisionGuide(drawingKind)
  }, [drawingKind])

  const handleDialogClose = () => {
    if (!isUploading) {
      form.reset()
      setUploadProgress(0)
      onOpenChange(false)
    }
  }

  const onSubmit = async (data: RevisionUploadSchema) => {
    setIsUploading(true)
    setUploadProgress(0)

    try {
      const formData = new FormData()
      formData.append("documentId", String(documentId))
      formData.append("serialNo", nextSerialNo) // 추가
      formData.append("usage", data.usage)
      formData.append("revision", data.revision)
      formData.append("uploaderName", userName || "evcp")
      
      if (data.comment) {
        formData.append("comment", data.comment)
      }

      // B3인 경우에만 usageType 추가
      if (showUsageType && 'usageType' in data && data.usageType) {
        formData.append("usageType", data.usageType)
      }

      // 파일들 추가
      data.attachments.forEach((file) => {
        formData.append("attachments", file)
      })

      // 진행률 업데이트 시뮬레이션
      const totalSize = data.attachments.reduce((sum, file) => sum + file.size, 0)
      let uploadedSize = 0
      
      const progressInterval = setInterval(() => {
        uploadedSize += totalSize * 0.1
        const progress = Math.min((uploadedSize / totalSize) * 100, 90)
        setUploadProgress(progress)
      }, 300)

      const response = await fetch('/api/revision-upload-ship', {
        method: 'POST',
        body: formData,
      })

      clearInterval(progressInterval)

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || errorData.details || 'Upload failed.')
      }

      const result = await response.json()
      setUploadProgress(100)

      toast.success(
        result.message || 
        `Revision ${data.revision} uploaded successfully. (${result.data?.uploadedFiles?.length || 0} files)`
      )

      console.log('✅ Upload successful:', result)
      
      setTimeout(() => {
        handleDialogClose()
        onSuccess?.(result)
      }, 1000)

    } catch (error) {
      console.error('❌ Upload error:', error)
      
      let userMessage = "An error occurred during upload"
      
      if (error instanceof Error) {
        const message = error.message.toLowerCase()
        
        // 파일명 관련 에러
        if (message.includes("안전하지 않은 파일명") || message.includes("unsafe filename") || 
            message.includes("filename") && message.includes("invalid")) {
          userMessage = "File name contains invalid characters. Please avoid using < > : \" ' | ? * in file names. filename can't start with '..'."
        }
        // 파일명 길이 에러
        else if (message.includes("파일명이 너무 깁니다") || message.includes("filename too long") ||
                 message.includes("파일명") && message.includes("길이")) {
          userMessage = "File name is too long. Please use a shorter name (max 255 characters)."
        }
        // 파일 크기 에러
        else if (message.includes("파일 크기가 너무 큽니다") || message.includes("file size") || 
                 message.includes("1gb limit") || message.includes("exceeds") && message.includes("limit")) {
          userMessage = "File size is too large. Please use files smaller than 1GB."
        }
        // 클라이언트측 네트워크 에러
        else if (message.includes("network") || message.includes("fetch") || 
                 message.includes("connection") || message.includes("timeout")) {
          userMessage = "Network error occurred. Please check your connection and try again."
        }
        // 서버측 오류는 보안상 일반적인 메시지로 처리
        else if (message.includes("500") || message.includes("server") || 
                 message.includes("database") || message.includes("internal") ||
                 message.includes("security") || message.includes("validation")) {
          userMessage = "Please try again later. If the problem persists, please contact the administrator."
        }
        else {
          userMessage = "Please try again later. If the problem persists, please contact the administrator."
        }
      }
      
      toast.error(userMessage)
    } finally {
      setIsUploading(false)
      setTimeout(() => setUploadProgress(0), 2000)
    }
  }

  return (
    <Dialog open={open} onOpenChange={handleDialogClose}>
      <DialogContent className="max-w-2xl h-[90vh] flex flex-col overflow-hidden" style={{maxHeight:'90vh'}}>
        {/* 고정 헤더 */}
        <DialogHeader className="flex-shrink-0 pb-4 border-b">
          <DialogTitle className="flex items-center gap-2">
            <Upload className="h-5 w-5" />
            Upload New Revision
          </DialogTitle>
          {documentTitle && (
            <DialogDescription className="text-sm space-y-1">
              <div>Document: {documentTitle}</div>
              <div className="text-xs text-muted-foreground">
                Drawing Type: {drawingKind} | Serial No: {nextSerialNo}
                {isLoadingSerialNo && (
                  <Loader2 className="inline-block ml-2 h-3 w-3 animate-spin" />
                )}
              </div>
            </DialogDescription>
          )}
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col flex-1 overflow-hidden">
            {/* 스크롤 가능한 중간 영역 */}
            <div className="flex-1 overflow-y-auto px-1 py-4 space-y-6">
              {/* 용도 선택 */}
              <FormField
                control={form.control}
                name="usage"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="required">Usage</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Select usage" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {usageOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 용도 타입 선택 (B3만, Comments가 아닐 때만) */}
              {showUsageType && watchedUsage && watchedUsage !== "Comments" && (
                <FormField
                  control={form.control}
                  name="usageType"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="required">Usage Type</FormLabel>
                      <Select onValueChange={field.onChange} value={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select usage type" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {usageTypeOptions.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                              {option.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              )}

              {/* 리비전 입력 */}
              <FormField
                control={form.control}
                name="revision"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="required">Revision</FormLabel>
                    <FormControl>
                      {drawingKind === 'B3' ? (
                        <B3RevisionInput
                          value={field.value}
                          onChange={field.onChange}
                          error={form.formState.errors.revision?.message}
                        />
                      ) : (
                        <>
                          <Input
                            placeholder={revisionGuide.placeholder}
                            {...field}
                            onChange={(e) => {
                              const upperValue = e.target.value.toUpperCase()
                              if (upperValue.length <= 3) {
                                field.onChange(upperValue)
                              }
                            }}
                          />
                          <div className="text-xs text-muted-foreground mt-1">
                            {revisionGuide.helpText}
                          </div>
                        </>
                      )}
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 코멘트 */}
              <FormField
                control={form.control}
                name="comment"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Comment</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="Enter description or changes for this revision (optional)"
                        className="resize-none"
                        rows={3}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 파일 업로드 */}
              <FormField
                control={form.control}
                name="attachments"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="required">Attachments</FormLabel>
                    <FormControl>
                      <FileUploadArea
                        files={watchedFiles || []}
                        onFilesChange={field.onChange}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 업로드 진행률 */}
              {isUploading && (
                <div className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span>Upload Progress</span>
                    <span>{uploadProgress.toFixed(0)}%</span>
                  </div>
                  <Progress value={uploadProgress} className="w-full" />
                  {uploadProgress === 100 && (
                    <div className="flex items-center gap-2 text-sm text-green-600">
                      <CheckCircle className="h-4 w-4" />
                      <span>Upload Complete</span>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* 고정 버튼 영역 */}
            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={handleDialogClose}
                disabled={isUploading}
              >
                Cancel
              </Button>
              <Button
                type="submit"
                disabled={isUploading || !form.formState.isValid}
                className="min-w-[120px]"
              >
                {isUploading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Uploading...
                  </>
                ) : (
                  <>
                    <Upload className="mr-2 h-4 w-4" />
                    Upload
                  </>
                )}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}