'use client'

import { BatchUploader } from '@/components/ai/BatchUploader'
import { API_BASE } from '../types'

export function TabBatch() {
  return (
    <div className="space-y-6">
      {/* Batch OCR Processing */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h2 className="text-lg font-semibold text-slate-900 mb-2">Batch-Verarbeitung</h2>
        <p className="text-sm text-slate-500 mb-6">
          Verarbeite mehrere Bilder gleichzeitig mit Echtzeit-Fortschrittsanzeige.
          Die Ergebnisse werden per Server-Sent Events gestreamt.
        </p>

        <BatchUploader
          apiBase={API_BASE}
          maxFiles={20}
          autoProcess={false}
          onComplete={(results) => {
            console.log('Batch complete:', results)
          }}
        />
      </div>

      {/* Batch Processing Info */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-6">
          <div className="text-3xl mb-2">🚀</div>
          <h3 className="text-lg font-semibold text-slate-900 mb-2">Parallele Verarbeitung</h3>
          <p className="text-sm text-slate-600">
            Mehrere Bilder werden parallel verarbeitet fuer maximale Geschwindigkeit.
          </p>
        </div>
        <div className="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-6">
          <div className="text-3xl mb-2">💾</div>
          <h3 className="text-lg font-semibold text-slate-900 mb-2">Smart Caching</h3>
          <p className="text-sm text-slate-600">
            Identische Bilder werden automatisch aus dem Cache geladen (unter 50ms).
          </p>
        </div>
        <div className="bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-xl p-6">
          <div className="text-3xl mb-2">📊</div>
          <h3 className="text-lg font-semibold text-slate-900 mb-2">Live-Fortschritt</h3>
          <p className="text-sm text-slate-600">
            Echtzeit-Updates via Server-Sent Events zeigen den Verarbeitungsfortschritt.
          </p>
        </div>
      </div>
    </div>
  )
}