'use client'

import { Database } from 'lucide-react'
import { DSFACorpusStats } from '@/lib/sdk/types'
import { StatusIndicator } from './DSFABadges'

interface StatsOverviewProps {
  stats: DSFACorpusStats
}

export function StatsOverview({ stats }: StatsOverviewProps) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
          <Database className="w-5 h-5" />
          Corpus-Statistik
        </h2>
        <StatusIndicator status={stats.qdrantStatus} />
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
          <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
            {stats.totalSources}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Quellen</p>
        </div>
        <div className="text-center p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
          <p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
            {stats.totalDocuments}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Dokumente</p>
        </div>
        <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
          <p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
            {stats.totalChunks.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Chunks</p>
        </div>
        <div className="text-center p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
          <p className="text-2xl font-bold text-orange-600 dark:text-orange-400">
            {stats.qdrantPointsCount.toLocaleString()}
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">Vektoren</p>
        </div>
      </div>

      <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
        <p className="text-sm text-gray-600 dark:text-gray-400">
          <strong>Collection:</strong>{' '}
          <code className="font-mono bg-gray-200 dark:bg-gray-700 px-1 rounded">
            {stats.qdrantCollection}
          </code>
        </p>
      </div>
    </div>
  )
}
