'use client'

/**
 * Stats tab: global statistics, detailed breakdown, and progress bar.
 */

import type { OCRStats } from '../types'

interface StatsTabProps {
  stats: OCRStats | null
}

export function StatsTab({ stats }: StatsTabProps) {
  return (
    <div className="space-y-6">
      {/* Global Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-lg shadow p-6">
          <h4 className="text-sm font-medium text-slate-500">Gesamt Items</h4>
          <p className="text-3xl font-bold mt-2">{stats?.total_items || 0}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6">
          <h4 className="text-sm font-medium text-slate-500">Gelabelt</h4>
          <p className="text-3xl font-bold mt-2 text-green-600">{stats?.labeled_items || 0}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6">
          <h4 className="text-sm font-medium text-slate-500">Ausstehend</h4>
          <p className="text-3xl font-bold mt-2 text-yellow-600">{stats?.pending_items || 0}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6">
          <h4 className="text-sm font-medium text-slate-500">OCR-Genauigkeit</h4>
          <p className="text-3xl font-bold mt-2">{stats?.accuracy_rate || 0}%</p>
        </div>
      </div>

      {/* Detailed Stats */}
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-semibold mb-4">Details</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div>
            <p className="text-sm text-slate-500">Bestaetigt</p>
            <p className="text-xl font-semibold text-green-600">{stats?.confirmed_items || 0}</p>
          </div>
          <div>
            <p className="text-sm text-slate-500">Korrigiert</p>
            <p className="text-xl font-semibold text-primary-600">{stats?.corrected_items || 0}</p>
          </div>
          <div>
            <p className="text-sm text-slate-500">Exportierbar</p>
            <p className="text-xl font-semibold">{stats?.exportable_items || 0}</p>
          </div>
          <div>
            <p className="text-sm text-slate-500">Durchschn. Label-Zeit</p>
            <p className="text-xl font-semibold">{stats?.avg_label_time_seconds || 0}s</p>
          </div>
        </div>
      </div>

      {/* Progress Bar */}
      {stats?.total_items ? (
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold mb-4">Fortschritt</h3>
          <div className="w-full bg-slate-200 rounded-full h-4">
            <div
              className="bg-primary-600 rounded-full h-4 transition-all"
              style={{ width: `${(stats.labeled_items / stats.total_items) * 100}%` }}
            />
          </div>
          <p className="text-sm text-slate-500 mt-2">
            {Math.round((stats.labeled_items / stats.total_items) * 100)}% abgeschlossen
          </p>
        </div>
      ) : null}
    </div>
  )
}