'use client'

import type { AlertItem, Topic, Stats } from './types'
import { getScoreBadge } from './useAlertsData'

interface DashboardTabProps {
  stats: Stats | null
  topics: Topic[]
  alerts: AlertItem[]
  error: string | null
}

export default function DashboardTab({ stats, topics, alerts, error }: DashboardTabProps) {
  return (
    <div className="space-y-6">
      {/* Stats Grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-slate-900">{stats?.total_alerts || 0}</div>
          <div className="text-sm text-slate-500">Alerts gesamt</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-blue-600">{stats?.new_alerts || 0}</div>
          <div className="text-sm text-slate-500">Neue Alerts</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-green-600">{stats?.kept_alerts || 0}</div>
          <div className="text-sm text-slate-500">Relevant</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-amber-600">{stats?.review_alerts || 0}</div>
          <div className="text-sm text-slate-500">Zur Pruefung</div>
        </div>
      </div>

      {/* Quick Actions */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <h3 className="font-semibold text-slate-900 mb-4">Aktive Topics</h3>
          <div className="space-y-3">
            {topics.slice(0, 5).map((topic) => (
              <div key={topic.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                <div>
                  <div className="font-medium text-slate-900">{topic.name}</div>
                  <div className="text-xs text-slate-500">{topic.alert_count} Alerts</div>
                </div>
                <span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
                  {topic.is_active ? 'Aktiv' : 'Pausiert'}
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <h3 className="font-semibold text-slate-900 mb-4">Letzte Alerts</h3>
          <div className="space-y-3">
            {alerts.slice(0, 5).map((alert) => (
              <div key={alert.id} className="p-3 bg-slate-50 rounded-lg">
                <div className="font-medium text-slate-900 text-sm truncate">{alert.title}</div>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-xs text-slate-500">{alert.topic_name}</span>
                  {getScoreBadge(alert.relevance_score)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {error && (
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
          <p className="text-sm text-amber-800">
            <strong>Hinweis:</strong> API nicht erreichbar. Demo-Daten werden angezeigt.
          </p>
        </div>
      )}
    </div>
  )
}