"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 { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { 
  Upload, 
  FileText, 
  X, 
  Loader2, 
  CheckCircle,
  Paperclip
} from "lucide-react"
import { toast } from "sonner"
import { useSession } from "next-auth/react"

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

// 파일 검증 스키마
const MAX_FILE_SIZE = 1024 * 1024 * 1024 // 1GB
const ACCEPTED_FILE_TYPES = [
  'application/pdf',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  'application/vnd.ms-excel',
  'image/jpeg',
  'image/png',
  'image/gif',
  'text/plain',
  'application/zip',
  'application/x-zip-compressed',
  // Presentations
  'application/vnd.ms-powerpoint',                                           // .ppt
  'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
  // CAD and Drawing files
  'application/acad',                                                        // .dwg
  'image/vnd.dwg',                                                          // .dwg (alternative MIME)
  'application/x-autocad',                                                  // .dwg (alternative MIME)
  'application/dxf',                                                        // .dxf
  'image/vnd.dxf',                                                          // .dxf (alternative MIME)
  'application/x-dxf',                                                      // .dxf (alternative MIME)
  'application/step',                                                       // .step/.stp
  'application/sla',                                                        // .stl
  'model/stl',                                                              // .stl (alternative MIME)
  'application/iges',                                                       // .iges/.igs
]

const attachmentUploadSchema = z.object({
  attachments: z
    .array(z.instanceof(File))
    .min(1, "Please upload at least 1 file")
    // .max(10, "Maximum 10 files can be uploaded")
    .refine(
      (files) => files.every((file) => file.size <= MAX_FILE_SIZE),
      "File size must be 1GB or less"
    )
    // .refine(
    //   (files) => files.every((file) => ACCEPTED_FILE_TYPES.includes(file.type)),
    //   "Unsupported file format"
    // ),
})

interface AddAttachmentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  revisionId: number
  revisionName: 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 validateFiles = (filesToValidate: File[]): { valid: File[], invalid: string[] } => {
    const MAX_FILE_SIZE = 1024 * 1024 * 1024 // 1GB
    const FORBIDDEN_EXTENSIONS = ['exe', 'com', 'dll', 'vbs', 'js', 'asp', 'aspx', 'bat', 'cmd']
    
    const valid: File[] = []
    const invalid: string[] = []
    
    filesToValidate.forEach(file => {
      // 파일 크기 검증
      if (file.size > MAX_FILE_SIZE) {
        invalid.push(`${file.name}: 파일 크기가 1GB를 초과합니다 (${formatFileSize(file.size)})`)
        return
      }
      
      // 파일 확장자 검증
      const extension = file.name.split('.').pop()?.toLowerCase()
      if (extension && FORBIDDEN_EXTENSIONS.includes(extension)) {
        invalid.push(`${file.name}: 금지된 파일 형식입니다 (.${extension})`)
        return
      }
      
      valid.push(file)
    })
    
    return { valid, invalid }
  }

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

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

  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()}
      >
        <Paperclip className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
        <p className="text-sm text-muted-foreground mb-2">
          Drag files to add here or click to select
        </p>
        <p className="text-xs text-muted-foreground">
          Supports PDF, Word, Excel, Image, Text, ZIP, CAD files (DWG, DXF, STEP, STL, IGES) (max 1GB)
        </p>
        <p className="text-xs text-red-600 mt-1 font-medium">
          Forbidden file types: .exe, .com, .dll, .vbs, .js, .asp, .aspx, .bat, .cmd
        </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,.dwg,.dxf,.step,.stp,.stl,.iges,.igs"
          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>
  )
}

/* -------------------------------------------------------------------------------------------------
 * Main Dialog Component
 * -----------------------------------------------------------------------------------------------*/
export function AddAttachmentDialog({
    open,
    onOpenChange,
    revisionId,
    revisionName,
    onSuccess
  }: AddAttachmentDialogProps) {
    const [isUploading, setIsUploading] = React.useState(false)
    const [uploadProgress, setUploadProgress] = React.useState(0)
    const { data: session } = useSession()
  
    const userName = React.useMemo(() => {
      return session?.user?.name ? session.user.name : null;
    }, [session]);
  
    type AttachmentUploadSchema = z.infer<typeof attachmentUploadSchema>
  
    const form = useForm<AttachmentUploadSchema>({
      resolver: zodResolver(attachmentUploadSchema),
      defaultValues: {
        attachments: [],
      },
    })
  
    const watchedFiles = form.watch("attachments")
  
    const handleDialogClose = () => {
      if (!isUploading) {
        form.reset()
        setUploadProgress(0)
        onOpenChange(false)
      }
    }
  
    const onSubmit = async (data: AttachmentUploadSchema) => {
      setIsUploading(true)
      setUploadProgress(0)
  
      try {
        const formData = new FormData()
        formData.append("revisionId", String(revisionId))
        formData.append("uploaderName", userName || "evcp")
  
        // 파일들 추가
        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-attachment', {
          method: 'POST',
          body: formData,
        })
  
        clearInterval(progressInterval)
  
        if (!response.ok) {
          const errorData = await response.json()
          throw new Error(errorData.error || errorData.details || 'Failed to upload attachments.')
        }
  
        const result = await response.json()
        setUploadProgress(100)
  
        toast.success(
          result.message || 
          `${result.data?.uploadedFiles?.length || 0} attachments added.`
        )
  
        console.log('✅ Attachment upload successful:', result)
        
        setTimeout(() => {
          handleDialogClose()
          onSuccess?.(result)
        }, 1000)
  
      } catch (error) {
        console.error('❌ Attachment upload error:', error)
        
        let userMessage = "An error occurred while uploading attachments"
        
        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 if (!/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(error.message) && error.message.length < 200) {
            userMessage = error.message
          }
          // 그 외는 일반적인 메시지
          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 max-h-[80vh] flex flex-col overflow-hidden">
          {/* 고정 헤더 */}
          <DialogHeader className="flex-shrink-0 pb-4 border-b">
            <DialogTitle className="flex items-center gap-2">
              <Paperclip className="h-5 w-5" />
              Add Attachments
            </DialogTitle>
            <DialogDescription className="text-sm">
              Upload additional attachments to revision {revisionName}
            </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="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" />
                      Add
                    </>
                  )}
                </Button>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    )
  }