'use client'

import { useState, useEffect, useCallback } from 'react'

export interface UploadedFile {
  id: string
  sessionId: string
  name: string
  type: string
  size: number
  uploadedAt: string
  dataUrl: string
}

interface QRCodeUploadProps {
  sessionId?: string
  onClose?: () => void
  onFileUploaded?: (file: UploadedFile) => void
  onFilesChanged?: (files: UploadedFile[]) => void
  className?: string
}

export function QRCodeUpload({
  sessionId,
  onClose,
  onFileUploaded,
  onFilesChanged,
  className = ''
}: QRCodeUploadProps) {
  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null)
  const [uploadUrl, setUploadUrl] = useState<string>('')
  const [isLoading, setIsLoading] = useState(true)
  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])
  const [isPolling, setIsPolling] = useState(false)

  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]
  }

  const fetchUploads = useCallback(async () => {
    if (!sessionId) return
    try {
      const response = await fetch(`/api/uploads?sessionId=${sessionId}`)
      if (response.ok) {
        const data = await response.json()
        const newFiles = data.uploads || []
        if (newFiles.length > uploadedFiles.length) {
          const newlyAdded = newFiles.slice(uploadedFiles.length)
          newlyAdded.forEach((file: UploadedFile) => {
            if (onFileUploaded) onFileUploaded(file)
          })
        }
        setUploadedFiles(newFiles)
        if (onFilesChanged) onFilesChanged(newFiles)
      }
    } catch (error) {
      console.error('Failed to fetch uploads:', error)
    }
  }, [sessionId, uploadedFiles.length, onFileUploaded, onFilesChanged])

  useEffect(() => {
    let baseUrl = typeof window !== 'undefined' ? window.location.origin : ''
    const hostnameToIP: Record<string, string> = {
      'macmini': '192.168.178.100',
      'macmini.local': '192.168.178.100',
    }
    Object.entries(hostnameToIP).forEach(([hostname, ip]) => {
      if (baseUrl.includes(hostname)) baseUrl = baseUrl.replace(hostname, ip)
    })
    const uploadPath = `/upload/${sessionId || 'new'}`
    const fullUrl = `${baseUrl}${uploadPath}`
    setUploadUrl(fullUrl)
    const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(fullUrl)}`
    setQrCodeUrl(qrApiUrl)
    setIsLoading(false)
    fetchUploads()
    setIsPolling(true)
    const pollInterval = setInterval(() => fetchUploads(), 3000)
    return () => { clearInterval(pollInterval); setIsPolling(false) }
  }, [sessionId])

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(uploadUrl)
      alert('Link kopiert!')
    } catch (err) {
      console.error('Kopieren fehlgeschlagen:', err)
    }
  }

  const deleteUpload = async (id: string) => {
    try {
      const response = await fetch(`/api/uploads?id=${id}`, { method: 'DELETE' })
      if (response.ok) {
        const newFiles = uploadedFiles.filter(f => f.id !== id)
        setUploadedFiles(newFiles)
        if (onFilesChanged) onFilesChanged(newFiles)
      }
    } catch (error) {
      console.error('Failed to delete upload:', error)
    }
  }

  return (
    <div className={className}>
      <div className="rounded-3xl border bg-white border-slate-200 shadow-lg p-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-purple-100">
              <span className="text-xl">📱</span>
            </div>
            <div>
              <h3 className="font-semibold text-slate-900">Mit Mobiltelefon hochladen</h3>
              <p className="text-sm text-slate-500">QR-Code scannen oder Link teilen</p>
            </div>
          </div>
          {onClose && (
            <button onClick={onClose} className="p-2 rounded-lg transition-colors hover:bg-slate-100 text-slate-400">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          )}
        </div>

        <div className="flex flex-col items-center">
          <div className="p-4 rounded-2xl bg-slate-50">
            {isLoading ? (
              <div className="w-[200px] h-[200px] flex items-center justify-center">
                <div className="w-8 h-8 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
              </div>
            ) : qrCodeUrl ? (
              <img src={qrCodeUrl} alt="QR Code zum Hochladen" className="w-[200px] h-[200px]" />
            ) : (
              <div className="w-[200px] h-[200px] flex items-center justify-center text-slate-400">
                QR-Code nicht verfuegbar
              </div>
            )}
          </div>
          <p className="mt-4 text-center text-sm text-slate-600">
            Scannen Sie diesen Code mit Ihrem Handy,<br />um Dokumente direkt hochzuladen.
          </p>
          {isPolling && (
            <div className="mt-2 flex items-center gap-2 text-xs text-slate-400">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
              Warte auf Uploads...
            </div>
          )}
        </div>

        {uploadedFiles.length > 0 && (
          <div className="mt-6 p-4 rounded-xl bg-green-50 border border-green-200">
            <p className="text-sm font-medium text-green-700 mb-3">
              {uploadedFiles.length} Datei{uploadedFiles.length !== 1 ? 'en' : ''} empfangen
            </p>
            <div className="space-y-2 max-h-40 overflow-y-auto">
              {uploadedFiles.map((file) => (
                <div key={file.id} className="flex items-center gap-3 p-2 rounded-lg bg-white">
                  <span className="text-lg">{file.type.startsWith('image/') ? '🖼️' : '📄'}</span>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate text-slate-900">{file.name}</p>
                    <p className="text-xs text-slate-500">{formatFileSize(file.size)}</p>
                  </div>
                  <button onClick={() => deleteUpload(file.id)} className="p-1 rounded transition-colors hover:bg-red-100 text-red-500">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="mt-6">
          <p className="text-xs mb-2 text-slate-400">Oder Link teilen:</p>
          <div className="flex items-center gap-2">
            <input type="text" value={uploadUrl} readOnly className="flex-1 px-3 py-2 rounded-xl text-sm border bg-slate-50 border-slate-200 text-slate-700" />
            <button onClick={copyToClipboard} className="px-4 py-2 rounded-xl text-sm font-medium transition-colors bg-slate-200 text-slate-700 hover:bg-slate-300">
              Kopieren
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}