'use client'

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

export function DatasetOverview({ stats }: { stats: DatasetStats }) {
  const maxBundesland = Math.max(...Object.values(stats.by_bundesland))

  return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
        Datensatz-Uebersicht
      </h3>

      <div className="grid grid-cols-3 gap-4 mb-6">
        <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
          <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
            {stats.total_documents.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Dokumente</p>
        </div>
        <div className="text-center p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-xl">
          <p className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
            {stats.total_chunks.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Chunks</p>
        </div>
        <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-xl">
          <p className="text-3xl font-bold text-purple-600 dark:text-purple-400">
            {stats.training_allowed.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Indexiert</p>
        </div>
      </div>

      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
        Verteilung nach Bundesland
      </h4>
      <div className="space-y-2">
        {Object.entries(stats.by_bundesland)
          .sort((a, b) => b[1] - a[1])
          .map(([code, count]) => (
            <div key={code} className="flex items-center gap-3">
              <span className="w-8 text-xs font-medium text-gray-600 dark:text-gray-400 uppercase">
                {code}
              </span>
              <div className="flex-1 h-4 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full"
                  style={{ width: `${(count / maxBundesland) * 100}%` }}
                />
              </div>
              <span className="w-10 text-sm text-right text-gray-600 dark:text-gray-400">
                {count}
              </span>
            </div>
          ))}
      </div>
    </div>
  )
}