'use client'

import { useState } from 'react'
import type { IngestionHistoryEntry } from '../types'

interface IngestionHistoryProps {
  history: IngestionHistoryEntry[]
}

export function IngestionHistory({ history }: IngestionHistoryProps) {
  const [showHistory, setShowHistory] = useState(false)

  return (
    <div className="bg-white rounded-lg border border-slate-200 p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-slate-900">Indexierungs-Historie</h3>
        <button
          onClick={() => setShowHistory(!showHistory)}
          className="text-sm text-slate-600 hover:text-slate-900 font-medium"
        >
          {showHistory ? 'Ausblenden' : `Alle anzeigen (${history.length})`}
        </button>
      </div>

      {history.length === 0 ? (
        <p className="text-slate-500 text-sm">Noch keine Indexierungslaeufe durchgefuehrt.</p>
      ) : (
        <div className="space-y-3">
          {(showHistory ? history : history.slice(0, 3)).map((entry) => (
            <div
              key={entry.id}
              className={`rounded-lg p-4 ${
                entry.status === 'success'
                  ? 'bg-green-50 border border-green-200'
                  : 'bg-red-50 border border-red-200'
              }`}
            >
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  {entry.status === 'success' ? (
                    <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                  ) : (
                    <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  )}
                  <span className="font-medium text-slate-900">
                    {new Date(entry.started_at || entry.startedAt).toLocaleString('de-DE')}
                  </span>
                </div>
                <span className="text-xs text-slate-500 font-mono">{entry.collection}</span>
              </div>

              {entry.stats && (
                <div className="grid grid-cols-4 gap-4 text-sm">
                  <div>
                    <span className="text-slate-500">Gefunden:</span>{' '}
                    <span className="font-medium">{entry.stats.documents_found}</span>
                  </div>
                  <div>
                    <span className="text-slate-500">Indexiert:</span>{' '}
                    <span className="font-medium text-green-700">{entry.stats.documents_indexed}</span>
                  </div>
                  <div>
                    <span className="text-slate-500">Uebersprungen:</span>{' '}
                    <span className="font-medium">{entry.stats.documents_skipped}</span>
                  </div>
                  <div>
                    <span className="text-slate-500">Chunks:</span>{' '}
                    <span className="font-medium">{entry.stats.chunks_created}</span>
                  </div>
                </div>
              )}

              {entry.filters && (
                <div className="mt-2 flex flex-wrap gap-2">
                  {entry.filters.year && (
                    <span className="px-2 py-0.5 bg-slate-200 text-slate-700 text-xs rounded">
                      Jahr: {entry.filters.year}
                    </span>
                  )}
                  {entry.filters.subject && (
                    <span className="px-2 py-0.5 bg-slate-200 text-slate-700 text-xs rounded">
                      Fach: {entry.filters.subject}
                    </span>
                  )}
                  {entry.filters.incremental && (
                    <span className="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">
                      Inkrementell
                    </span>
                  )}
                </div>
              )}

              {entry.error && (
                <p className="mt-2 text-sm text-red-700">{entry.error}</p>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}