"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 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)
          setSelectedFile(null)
          setUploadProgress(null)
          if (fileInputRef.current) {
            fileInputRef.current.value = ''
          }
          
          // 테이블 새로고침
          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 = ''
    }
  }

  return (
    <div className="flex items-center gap-2">
      {/* OCR 업로드 다이얼로그 */}
      <Dialog open={isUploadDialogOpen} onOpenChange={setIsUploadDialogOpen}>
        <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">
          <DialogHeader>
            <DialogTitle>Upload Document for OCR</DialogTitle>
            <DialogDescription>
              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>
              </div>
            )}

            {/* 액션 버튼들 */}
            <div className="flex justify-end gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  if (isUploading) {
                    // 업로드 중이면 취소 불가능하다는 메시지
                    toast.warning("Cannot cancel while processing. Please wait...")
                  } else {
                    setIsUploadDialogOpen(false)
                    resetUpload()
                  }
                }}
                disabled={isUploading && uploadProgress?.stage !== "complete"}
              >
                {isUploading ? "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>
  )
}