"use client"

import * as React from "react"
import { type Table } from "@tanstack/react-table"
import { Download, RefreshCcw, Upload, FileText, Loader2 } from "lucide-react"

import { exportTableToExcel } from "@/lib/export"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { toast } from "sonner"
import { OcrRow } from "@/db/schema"

interface OcrTableToolbarActionsProps {
  table: Table<OcrRow>
}

interface UploadProgress {
  stage: string
  progress: number
  message: string
}

export function OcrTableToolbarActions({ table }: OcrTableToolbarActionsProps) {
  const [isLoading, setIsLoading] = React.useState(false)
  const [isUploading, setIsUploading] = React.useState(false)
  const [uploadProgress, setUploadProgress] = React.useState<UploadProgress | null>(null)
  const [isUploadDialogOpen, setIsUploadDialogOpen] = React.useState(false)
  const [selectedFile, setSelectedFile] = React.useState<File | null>(null)
  const fileInputRef = React.useRef<HTMLInputElement>(null)

  // 다이얼로그 닫기 핸들러 - 업로드 중에는 닫기 방지
  const handleDialogOpenChange = (open: boolean) => {
    // 다이얼로그를 닫으려고 할 때
    if (!open) {
      // 업로드가 진행 중이면 닫기를 방지
      if (isUploading && uploadProgress?.stage !== "complete") {
        toast.warning("Cannot close while processing. Please wait for completion.", {
          description: "OCR processing is in progress..."
        })
        return // 다이얼로그를 닫지 않음
      }
      
      // 업로드가 진행 중이 아니거나 완료되었으면 초기화 후 닫기
      resetUpload()
    }
    
    setIsUploadDialogOpen(open)
  }

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      setSelectedFile(file)
    }
  }

  const validateFile = (file: File): string | null => {
    // 파일 크기 체크 (10MB)
    if (file.size > 10 * 1024 * 1024) {
      return "File size must be less than 10MB"
    }

    // 파일 타입 체크
    const allowedTypes = [
      'application/pdf',
      'image/jpeg',
      'image/jpg', 
      'image/png',
      'image/tiff',
      'image/bmp'
    ]
    
    if (!allowedTypes.includes(file.type)) {
      return "Only PDF and image files (JPG, PNG, TIFF, BMP) are supported"
    }

    return null
  }

  const uploadFile = async () => {
    if (!selectedFile) {
      toast.error("Please select a file first")
      return
    }

    const validationError = validateFile(selectedFile)
    if (validationError) {
      toast.error(validationError)
      return
    }

    try {
      setIsUploading(true)
      setUploadProgress({
        stage: "preparing",
        progress: 10,
        message: "Preparing file upload..."
      })

      const formData = new FormData()
      formData.append('file', selectedFile)

      setUploadProgress({
        stage: "uploading",
        progress: 30,
        message: "Uploading file and processing..."
      })

      const response = await fetch('/api/ocr/enhanced', {
        method: 'POST',
        body: formData,
      })

      setUploadProgress({
        stage: "processing",
        progress: 70,
        message: "Analyzing document with OCR..."
      })

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

      const result = await response.json()

      setUploadProgress({
        stage: "saving",
        progress: 90,
        message: "Saving results to database..."
      })

      if (result.success) {
        setUploadProgress({
          stage: "complete",
          progress: 100,
          message: "OCR processing completed successfully!"
        })

        toast.success(
          `OCR completed! Extracted ${result.metadata.totalRows} rows from ${result.metadata.totalTables} tables`,
          {
            description: result.warnings?.length 
              ? `Warnings: ${result.warnings.join(', ')}` 
              : undefined
          }
        )

        // 성공 후 다이얼로그 닫기 및 상태 초기화
        setTimeout(() => {
          setIsUploadDialogOpen(false)
          resetUpload()
          
          // 테이블 새로고침
          window.location.reload()
        }, 2000)

      } else {
        throw new Error(result.error || 'Unknown error occurred')
      }

    } catch (error) {
      console.error('Error uploading file:', error)
      toast.error(
        error instanceof Error
          ? error.message
          : 'An error occurred while processing the file'
      )
      setUploadProgress(null)
    } finally {
      setIsUploading(false)
    }
  }

  const resetUpload = () => {
    setSelectedFile(null)
    setUploadProgress(null)
    if (fileInputRef.current) {
      fileInputRef.current.value = ''
    }
  }

  // Cancel 버튼 핸들러
  const handleCancelClick = () => {
    if (isUploading && uploadProgress?.stage !== "complete") {
      // 업로드 진행 중이면 취소 불가능 메시지
      toast.warning("Cannot cancel while processing. Please wait for completion.", {
        description: "OCR processing cannot be interrupted safely."
      })
    } else {
      // 업로드 중이 아니거나 완료되었으면 다이얼로그 닫기
      setIsUploadDialogOpen(false)
      resetUpload()
    }
  }

  return (
    <div className="flex items-center gap-2">
      {/* OCR 업로드 다이얼로그 */}
      <Dialog open={isUploadDialogOpen} onOpenChange={handleDialogOpenChange}>
        <DialogTrigger asChild>
          <Button variant="samsung" size="sm" className="gap-2">
            <Upload className="size-4" aria-hidden="true" />
            <span className="hidden sm:inline">Upload OCR</span>
          </Button>
        </DialogTrigger>
        <DialogContent 
          className="sm:max-w-md"
          // 업로드 중에는 ESC 키로도 닫기 방지
          onEscapeKeyDown={(e) => {
            if (isUploading && uploadProgress?.stage !== "complete") {
              e.preventDefault()
              toast.warning("Cannot close while processing. Please wait for completion.")
            }
          }}
          // 업로드 중에는 외부 클릭으로도 닫기 방지  
          onInteractOutside={(e) => {
            if (isUploading && uploadProgress?.stage !== "complete") {
              e.preventDefault()
              toast.warning("Cannot close while processing. Please wait for completion.")
            }
          }}
        >
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              Upload Document for OCR
              {/* 업로드 중일 때 로딩 인디케이터 표시 */}
              {isUploading && uploadProgress?.stage !== "complete" && (
                <Loader2 className="size-4 animate-spin text-muted-foreground" />
              )}
            </DialogTitle>
            <DialogDescription>
              {isUploading && uploadProgress?.stage !== "complete" 
                ? "Processing in progress. Please do not close this dialog."
                : "Upload a PDF or image file to extract table data using OCR technology."
              }
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4">
            {/* 파일 선택 */}
            <div className="space-y-2">
              <Label htmlFor="file-upload">Select File</Label>
              <Input
                ref={fileInputRef}
                id="file-upload"
                type="file"
                accept=".pdf,.jpg,.jpeg,.png,.tiff,.bmp"
                onChange={handleFileSelect}
                disabled={isUploading}
              />
              <p className="text-xs text-muted-foreground">
                Supported formats: PDF, JPG, PNG, TIFF, BMP (Max 10MB)
              </p>
            </div>

            {/* 선택된 파일 정보 */}
            {selectedFile && (
              <div className="rounded-lg border p-3 space-y-2">
                <div className="flex items-center gap-2">
                  <FileText className="size-4 text-muted-foreground" />
                  <span className="text-sm font-medium">{selectedFile.name}</span>
                </div>
                <div className="flex items-center gap-4 text-xs text-muted-foreground">
                  <span>Size: {(selectedFile.size / 1024 / 1024).toFixed(2)} MB</span>
                  <span>Type: {selectedFile.type}</span>
                </div>
              </div>
            )}

            {/* 업로드 진행상황 */}
            {uploadProgress && (
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">Processing...</span>
                  <Badge variant={uploadProgress.stage === "complete" ? "default" : "secondary"}>
                    {uploadProgress.stage}
                  </Badge>
                </div>
                <Progress value={uploadProgress.progress} className="h-2" />
                <p className="text-xs text-muted-foreground">
                  {uploadProgress.message}
                </p>
                
                {/* 진행 중일 때 안내 메시지 */}
                {isUploading && uploadProgress.stage !== "complete" && (
                  <div className="flex items-center gap-2 p-2 bg-blue-50 dark:bg-blue-950/20 rounded-md">
                    <Loader2 className="size-3 animate-spin text-blue-600" />
                    <p className="text-xs text-blue-700 dark:text-blue-300">
                      Please wait... This dialog will close automatically when complete.
                    </p>
                  </div>
                )}
              </div>
            )}

            {/* 액션 버튼들 */}
            <div className="flex justify-end gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={handleCancelClick}
                disabled={false} // 항상 클릭 가능하지만 핸들러에서 처리
              >
                {isUploading && uploadProgress?.stage !== "complete" ? "Close" : "Cancel"}
              </Button>
              <Button
                size="sm"
                onClick={uploadFile}
                disabled={!selectedFile || isUploading}
                className="gap-2"
              >
                {isUploading ? (
                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />
                ) : (
                  <Upload className="size-4" aria-hidden="true" />
                )}
                {isUploading ? "Processing..." : "Start OCR"}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
      
      {/* Export 버튼 */}
      <Button
        variant="outline"
        size="sm"
        onClick={() =>
          exportTableToExcel(table, {
            filename: "OCR Result",
            excludeColumns: ["select", "actions"],
          })
        }
        className="gap-2"
      >
        <Download className="size-4" aria-hidden="true" />
        <span className="hidden sm:inline">Export</span>
      </Button>
    </div>
  )
}