'use client'

import { useState, useRef, useCallback } from 'react'
import { useParams } from 'next/navigation'
import { BPIcon } from '@/components/Logo'

interface UploadedFile {
  id: string
  name: string
  size: number
  status: 'uploading' | 'complete' | 'error'
  progress: number
}

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

export default function MobileUploadPage() {
  const params = useParams()
  const sessionId = params.sessionId as string
  const [files, setFiles] = useState<UploadedFile[]>([])
  const [isDragging, setIsDragging] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

  // Echten Upload durchfuehren
  const uploadFile = useCallback(async (file: File) => {
    const localId = `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
    const uploadFileState: UploadedFile = {
      id: localId,
      name: file.name,
      size: file.size,
      status: 'uploading',
      progress: 0
    }

    setFiles(prev => [...prev, uploadFileState])

    try {
      // Fortschritt auf 30% setzen (Datei wird gelesen)
      setFiles(prev => prev.map(f =>
        f.id === localId ? { ...f, progress: 30 } : f
      ))

      // Datei als Base64 Data URL konvertieren
      const dataUrl = await new Promise<string>((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = () => resolve(reader.result as string)
        reader.onerror = reject
        reader.readAsDataURL(file)
      })

      // Fortschritt auf 60% setzen (Upload wird gesendet)
      setFiles(prev => prev.map(f =>
        f.id === localId ? { ...f, progress: 60 } : f
      ))

      // An API senden
      const response = await fetch('/api/uploads', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionId,
          name: file.name,
          type: file.type,
          size: file.size,
          dataUrl
        })
      })

      if (!response.ok) {
        throw new Error('Upload fehlgeschlagen')
      }

      // Upload erfolgreich
      setFiles(prev => prev.map(f =>
        f.id === localId ? { ...f, status: 'complete', progress: 100 } : f
      ))
    } catch (error) {
      console.error('Upload error:', error)
      setFiles(prev => prev.map(f =>
        f.id === localId ? { ...f, status: 'error', progress: 0 } : f
      ))
    }
  }, [sessionId])

  const handleFiles = useCallback((fileList: FileList | null) => {
    if (!fileList) return
    Array.from(fileList).forEach(file => {
      if (file.type === 'application/pdf' || file.type.startsWith('image/')) {
        uploadFile(file)
      }
    })
  }, [uploadFile])

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
    handleFiles(e.dataTransfer.files)
  }

  const completedCount = files.filter(f => f.status === 'complete').length

  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 relative overflow-hidden">
      {/* Animated Background Blobs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 opacity-70 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500 opacity-70 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-500 opacity-70 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" style={{ animationDelay: '4s' }} />
      </div>

      <div className="relative z-10 min-h-screen flex flex-col p-4 safe-area-inset">
        {/* Header */}
        <div className="flex items-center justify-center gap-3 py-6">
          <BPIcon variant="cupertino" size={40} />
          <div>
            <h1 className="text-xl font-bold text-white">BreakPilot</h1>
            <p className="text-xs text-white/60">Mobiler Upload</p>
          </div>
        </div>

        {/* Upload Area */}
        <div className="flex-1 flex flex-col gap-4">
          {/* Upload-Button */}
          <button
            onClick={() => fileInputRef.current?.click()}
            className="w-full backdrop-blur-xl bg-gradient-to-r from-purple-500 to-pink-500 border border-white/20 rounded-3xl p-8 flex flex-col items-center justify-center text-center transition-all hover:shadow-xl hover:shadow-purple-500/30 active:scale-95"
          >
            <input
              ref={fileInputRef}
              type="file"
              multiple
              accept=".pdf,.jpg,.jpeg,.png,image/*,application/pdf"
              onChange={(e) => handleFiles(e.target.files)}
              className="hidden"
            />
            <div className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mb-4">
              <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
              </svg>
            </div>
            <p className="text-xl font-semibold text-white">Dokument hochladen</p>
            <p className="text-sm text-white/70 mt-2">Tippen um Foto oder Datei auszuwaehlen</p>
            <p className="text-xs text-white/50 mt-1">PDF, JPG, PNG</p>
          </button>

          {/* Uploaded Files */}
          {files.length > 0 && (
            <div className="backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl overflow-hidden">
              <div className="px-4 py-3 border-b border-white/10">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium text-white">
                    Hochgeladene Dateien
                  </span>
                  <span className="text-xs text-white/60">
                    {completedCount}/{files.length} fertig
                  </span>
                </div>
              </div>

              <div className="divide-y divide-white/10 max-h-[40vh] overflow-y-auto">
                {files.map((file) => (
                  <div key={file.id} className="p-4 flex items-center gap-3">
                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center text-xl ${
                      file.status === 'complete' ? 'bg-green-500/20' : 'bg-blue-500/20'
                    }`}>
                      {file.status === 'complete' ? '✅' : '📄'}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-white truncate">
                        {file.name}
                      </p>
                      <div className="flex items-center gap-2 mt-1">
                        <span className="text-xs text-white/50">
                          {formatFileSize(file.size)}
                        </span>
                        {file.status === 'uploading' && (
                          <span className="text-xs text-blue-300">
                            {Math.round(file.progress)}%
                          </span>
                        )}
                      </div>
                      {file.status === 'uploading' && (
                        <div className="mt-2 h-1 bg-white/10 rounded-full overflow-hidden">
                          <div
                            className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
                            style={{ width: `${file.progress}%` }}
                          />
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Success Message */}
          {completedCount > 0 && (
            <div className="backdrop-blur-xl bg-green-500/20 border border-green-500/30 rounded-2xl p-4 text-center">
              <p className="text-green-300 font-medium">
                {completedCount} Datei{completedCount !== 1 ? 'en' : ''} erfolgreich hochgeladen!
              </p>
              <p className="text-green-300/70 text-sm mt-1">
                Sie koennen diese Seite jetzt schliessen.
              </p>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="py-4 text-center">
          <p className="text-xs text-white/40">
            Session: {sessionId}
          </p>
        </div>
      </div>
    </div>
  )
}