'use client'

import type { CrawlStats, Category } from '../types'

export default function StatsTab({
  stats,
  categories,
}: {
  stats: CrawlStats
  categories: Category[]
}) {
  return (
    <div className="space-y-6">
      {/* Overview Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-5 text-white">
          <div className="text-3xl font-bold">{stats.totalDocuments.toLocaleString()}</div>
          <div className="text-blue-100">Dokumente indexiert</div>
        </div>
        <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-5 text-white">
          <div className="text-3xl font-bold">{stats.totalSeeds}</div>
          <div className="text-green-100">Seed-URLs aktiv</div>
        </div>
        <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-5 text-white">
          <div className="text-3xl font-bold">{(stats.avgTrustScore * 100).toFixed(0)}%</div>
          <div className="text-purple-100">Ø Trust-Score</div>
        </div>
        <div className="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-5 text-white">
          <div className="text-3xl font-bold">{Object.keys(stats.documentsPerDocType).length}</div>
          <div className="text-orange-100">Dokumenttypen</div>
        </div>
      </div>

      {/* Charts */}
      <div className="grid md:grid-cols-2 gap-6">
        <div className="bg-white border border-slate-200 rounded-lg p-6">
          <h4 className="font-semibold text-slate-900 mb-4">Dokumente nach Kategorie</h4>
          <div className="space-y-3">
            {Object.entries(stats.documentsPerCategory).map(([cat, count]) => {
              const category = categories.find(c => c.name === cat)
              const percentage = stats.totalDocuments > 0 ? (count / stats.totalDocuments) * 100 : 0
              return (
                <div key={cat}>
                  <div className="flex justify-between text-sm mb-1">
                    <span>{category?.icon || '📁'} {category?.display_name || cat}</span>
                    <span className="text-slate-500">{count.toLocaleString()} ({percentage.toFixed(1)}%)</span>
                  </div>
                  <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary-500 rounded-full"
                      style={{ width: `${percentage}%` }}
                    />
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        <div className="bg-white border border-slate-200 rounded-lg p-6">
          <h4 className="font-semibold text-slate-900 mb-4">Dokumente nach Typ</h4>
          <div className="space-y-3">
            {Object.entries(stats.documentsPerDocType)
              .sort(([,a], [,b]) => b - a)
              .slice(0, 6)
              .map(([docType, count]) => {
                const percentage = (count / stats.totalDocuments) * 100
                return (
                  <div key={docType}>
                    <div className="flex justify-between text-sm mb-1">
                      <span>{docType.replace(/_/g, ' ')}</span>
                      <span className="text-slate-500">{count.toLocaleString()} ({percentage.toFixed(1)}%)</span>
                    </div>
                    <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-green-500 rounded-full"
                        style={{ width: `${percentage}%` }}
                      />
                    </div>
                  </div>
                )
              })}
          </div>
        </div>
      </div>
    </div>
  )
}