'use client'

/**
 * Upload tab: session selection, drag-and-drop upload, and upload results.
 */

import { useState, useRef } from 'react'
import { API_BASE } from '../constants'
import type { OCRSession, UploadResult } from '../types'

interface UploadTabProps {
  sessions: OCRSession[]
  selectedSession: string | null
  setSelectedSession: (id: string | null) => void
  fetchQueue: () => Promise<void>
  fetchStats: () => Promise<void>
  setError: (error: string | null) => void
}

export function UploadTab({
  sessions,
  selectedSession,
  setSelectedSession,
  fetchQueue,
  fetchStats,
  setError,
}: UploadTabProps) {
  const [uploading, setUploading] = useState(false)
  const [uploadResults, setUploadResults] = useState<UploadResult[]>([])
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleUpload = async (files: FileList) => {
    if (!selectedSession) {
      setError('Bitte zuerst eine Session auswaehlen')
      return
    }

    setUploading(true)
    const formData = new FormData()
    Array.from(files).forEach(file => formData.append('files', file))
    formData.append('run_ocr', 'true')

    try {
      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions/${selectedSession}/upload`, {
        method: 'POST',
        body: formData,
      })

      if (res.ok) {
        const data = await res.json()
        setUploadResults(data.items || [])
        fetchQueue()
        fetchStats()
      } else {
        setError('Upload fehlgeschlagen')
      }
    } catch {
      setError('Netzwerkfehler beim Upload')
    } finally {
      setUploading(false)
    }
  }

  return (
    <div className="space-y-6">
      {/* Session Selection */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-semibold mb-4">Session auswaehlen</h3>
        <select
          value={selectedSession || ''}
          onChange={(e) => setSelectedSession(e.target.value || null)}
          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
        >
          <option value="">-- Session waehlen --</option>
          {sessions.map((session) => (
            <option key={session.id} value={session.id}>
              {session.name} ({session.total_items} Items)
            </option>
          ))}
        </select>
      </div>

      {/* Upload Area */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-semibold mb-4">Bilder hochladen</h3>
        <div
          className={`border-2 border-dashed rounded-lg p-8 text-center ${
            selectedSession ? 'border-slate-300 hover:border-primary-500' : 'border-slate-200 opacity-50'
          }`}
          onDragOver={(e) => {
            e.preventDefault()
            e.currentTarget.classList.add('border-primary-500', 'bg-primary-50')
          }}
          onDragLeave={(e) => {
            e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
          }}
          onDrop={(e) => {
            e.preventDefault()
            e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
            if (e.dataTransfer.files.length > 0) {
              handleUpload(e.dataTransfer.files)
            }
          }}
        >
          <input
            ref={fileInputRef}
            type="file"
            multiple
            accept="image/png,image/jpeg,image/jpg"
            onChange={(e) => e.target.files && handleUpload(e.target.files)}
            className="hidden"
            disabled={!selectedSession}
          />
          {uploading ? (
            <div className="flex flex-col items-center gap-2">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
              <p>Hochladen & OCR ausfuehren...</p>
            </div>
          ) : (
            <>
              <svg className="w-12 h-12 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <p className="text-slate-600 mb-2">
                Bilder hierher ziehen oder{' '}
                <button
                  onClick={() => fileInputRef.current?.click()}
                  disabled={!selectedSession}
                  className="text-primary-600 hover:underline"
                >
                  auswaehlen
                </button>
              </p>
              <p className="text-sm text-slate-500">PNG, JPG (max. 10MB pro Bild)</p>
            </>
          )}
        </div>
      </div>

      {/* Upload Results */}
      {uploadResults.length > 0 && (
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold mb-4">Upload-Ergebnisse ({uploadResults.length})</h3>
          <div className="space-y-2">
            {uploadResults.map((result) => (
              <div key={result.id} className="flex items-center justify-between p-2 bg-slate-50 rounded">
                <span className="text-sm">{result.filename}</span>
                <span className={`text-xs px-2 py-1 rounded ${
                  result.ocr_text ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
                }`}>
                  {result.ocr_text ? `OCR OK (${Math.round((result.ocr_confidence || 0) * 100)}%)` : 'Kein OCR'}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}