'use client'

import { useState, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
import { Upload, Loader2, CheckCircle, XCircle } from 'lucide-react'
import { convertPDF } from '../actions/convert'

export function FileUploader() {
  const [file, setFile] = useState<File | null>(null)
  const [isConverting, setIsConverting] = useState(false)
  const [result, setResult] = useState<{ success: boolean; error?: string; fileUrl?: string } | null>(null)

  const onDrop = useCallback((acceptedFiles: File[]) => {
    if (acceptedFiles[0]) {
      setFile(acceptedFiles[0])
      setResult(null)
    }
  }, [])

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'application/pdf': ['.pdf']
    },
    maxSize: 50 * 1024 * 1024, // 50MB
    multiple: false
  })

  const handleConvert = async () => {
    if (!file) return

    setIsConverting(true)
    setResult(null)

    try {
      const formData = new FormData()
      formData.append('file', file)
      const result = await convertPDF(formData)
      setResult(result)

      if (result.success && result.fileUrl) {
        // Open the file in a new tab
        window.open(result.fileUrl, '_blank')
      }
    } catch (error) {
      console.error('Conversion error:', error)
      setResult({
        success: false,
        error: 'Conversion failed. Please try again.'
      })
    } finally {
      setIsConverting(false)
    }
  }

  return (
    <div className="space-y-6">
      <div
        {...getRootProps()}
        className={`border-2 border-dashed rounded-2xl p-12 text-center cursor-pointer transition-all duration-200 ${
          isDragActive
            ? 'border-indigo-500 bg-indigo-50'
            : 'border-gray-300 hover:border-indigo-400 hover:bg-indigo-50'
        }`}
      >
        <input {...getInputProps()} />
        <div className="flex flex-col items-center space-y-4">
          <Upload className="w-16 h-16 text-indigo-500" />
          <div>
            <p className="text-xl font-medium text-gray-700">
              {file ? file.name : 'Drop your PDF here or click to upload'}
            </p>
            <p className="text-sm text-gray-500 mt-2">
              Supports PDF files up to 50MB
            </p>
          </div>
        </div>
      </div>

      {file && (
        <div className="text-center">
          <button
            onClick={handleConvert}
            disabled={isConverting}
            className="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white px-8 py-4 rounded-full font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isConverting ? 'Converting...' : 'Convert Now'}
          </button>
        </div>
      )}

      {isConverting && (
        <div className="flex items-center justify-center gap-3 text-indigo-600 bg-indigo-50 p-4 rounded-lg">
          <Loader2 className="w-6 h-6 animate-spin" />
          <span className="text-lg font-medium">Converting your PDF...</span>
        </div>
      )}

      {result && !result.success && (
        <div className="flex items-center justify-center gap-3 text-red-600 bg-red-50 p-4 rounded-lg">
          <XCircle className="w-6 h-6" />
          <span className="text-lg font-medium">{result.error}</span>
        </div>
      )}

      {result && result.success && (
        <div className="flex items-center justify-center gap-3 text-green-600 bg-green-50 p-4 rounded-lg">
          <CheckCircle className="w-6 h-6" />
          <span className="text-lg font-medium">Conversion successful! Your download should begin in a new tab.</span>
        </div>
      )}
    </div>
  )
}