'use client'

import type { AlertItem, Topic } from '../types'
import { formatTimeAgo, getScoreBadgeClass } from '../useAlertsData'

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

export function DashboardTab({ topics, alerts, error }: DashboardTabProps) {
  return (
    <div className="space-y-6">
      {/* Quick Actions */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-slate-50 rounded-xl 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-white rounded-lg border border-slate-200">
                <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>
            ))}
            {topics.length === 0 && (
              <div className="text-sm text-slate-500 text-center py-4">Keine Topics konfiguriert</div>
            )}
          </div>
        </div>

        <div className="bg-slate-50 rounded-xl 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) => {
              const badge = getScoreBadgeClass(alert.relevance_score)
              return (
                <div key={alert.id} className="p-3 bg-white rounded-lg border border-slate-200">
                  <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>
                    {badge && <span className={`px-2 py-0.5 rounded text-xs font-semibold ${badge.cls}`}>{badge.pct}%</span>}
                  </div>
                </div>
              )
            })}
            {alerts.length === 0 && (
              <div className="text-sm text-slate-500 text-center py-4">Keine Alerts vorhanden</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>
  )
}