'use client'

import React from 'react'
import type { UseRAGPageReturn } from '../_hooks/useRAGPage'

interface IngestionTabProps {
  hook: UseRAGPageReturn
}

export function IngestionTab({ hook }: IngestionTabProps) {
  const { ingestionRunning, ingestionLog, triggerIngestion } = hook

  return (
    <div className="space-y-6">
      {/* Ingestion Control */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-900 mb-4">Legal Corpus Re-Ingestion</h3>
        <p className="text-slate-600 mb-4">
          Startet die Neuindexierung aller 19 Regulierungen. Die Dokumente werden von EUR-Lex,
          gesetze-im-internet.de und BSI heruntergeladen, in semantische Chunks aufgeteilt und
          mit BGE-M3 Embeddings in Qdrant indexiert.
        </p>
        <div className="flex items-center gap-4">
          <button
            onClick={triggerIngestion}
            disabled={ingestionRunning}
            className="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50"
          >
            {ingestionRunning ? 'Laeuft...' : 'Re-Ingestion starten'}
          </button>
          {ingestionRunning && (
            <span className="flex items-center gap-2 text-teal-600">
              <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.7.689 3 7.938l3-2.647z" />
              </svg>
              Ingestion laeuft...
            </span>
          )}
        </div>
      </div>

      {/* Ingestion Log */}
      {ingestionLog.length > 0 && (
        <div className="bg-slate-900 rounded-xl p-4">
          <h4 className="text-slate-400 text-sm mb-2">Log</h4>
          <div className="font-mono text-sm text-green-400 space-y-1 max-h-64 overflow-y-auto">
            {ingestionLog.map((line, i) => (
              <div key={i}>{line}</div>
            ))}
          </div>
        </div>
      )}

      {/* Info Box */}
      <div className="bg-teal-50 border border-teal-200 rounded-xl p-6">
        <h4 className="font-semibold text-teal-800 flex items-center gap-2">
          <span>💡</span>
          Hinweis zur Datenquelle
        </h4>
        <p className="text-sm text-teal-700 mt-2">
          Alle indexierten Dokumente sind amtliche Werke (§5 UrhG) und damit urheberrechtsfrei.
          Sie werden nur fuer RAG/Retrieval verwendet, nicht fuer Modell-Training.
          Die Daten werden lokal auf dem Mac Mini verarbeitet und nicht an externe Dienste gesendet.
        </p>
      </div>
    </div>
  )
}