'use client'

import type { MiddlewareStats } from '../types'
import { getMiddlewareDescription, getEventTypeColor } from './helpers'

interface StatsTabProps {
  stats: MiddlewareStats[]
}

export function StatsTab({ stats }: StatsTabProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {stats.map(stat => {
        const info = getMiddlewareDescription(stat.middleware_name)
        return (
          <div key={stat.middleware_name} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
            <h3 className="font-semibold text-slate-900 flex items-center gap-2 mb-4">
              <span>{info.icon}</span>
              <span className="capitalize">{stat.middleware_name.replace('_', ' ')}</span>
            </h3>
            <div className="grid grid-cols-3 gap-4 mb-4">
              <div>
                <div className="text-2xl font-bold text-slate-900">{stat.total_events}</div>
                <div className="text-xs text-slate-500">Gesamt</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-blue-600">{stat.events_last_hour}</div>
                <div className="text-xs text-slate-500">Letzte Stunde</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-orange-600">{stat.events_last_24h}</div>
                <div className="text-xs text-slate-500">24 Stunden</div>
              </div>
            </div>
            {stat.top_event_types.length > 0 && (
              <div className="mb-3">
                <div className="text-xs font-semibold text-slate-500 uppercase mb-2">
                  Top Event-Typen
                </div>
                <div className="flex flex-wrap gap-2">
                  {stat.top_event_types.slice(0, 3).map(et => (
                    <span
                      key={et.event_type}
                      className={`px-2 py-1 rounded text-xs ${getEventTypeColor(et.event_type)}`}
                    >
                      {et.event_type} ({et.count})
                    </span>
                  ))}
                </div>
              </div>
            )}
            {stat.top_ips.length > 0 && (
              <div>
                <div className="text-xs font-semibold text-slate-500 uppercase mb-2">Top IPs</div>
                <div className="text-xs text-slate-600">
                  {stat.top_ips
                    .slice(0, 3)
                    .map(ip => `${ip.ip_address} (${ip.count})`)
                    .join(', ')}
                </div>
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}