'use client'

import type { MiddlewareEvent } from '../types'
import { getEventTypeColor } from './helpers'

interface EventsTabProps {
  events: MiddlewareEvent[]
}

export function EventsTab({ events }: EventsTabProps) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="border-b border-slate-200">
            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
              Zeit
            </th>
            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
              Middleware
            </th>
            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
              Event
            </th>
            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
              IP
            </th>
            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
              Pfad
            </th>
          </tr>
        </thead>
        <tbody>
          {events.length === 0 ? (
            <tr>
              <td colSpan={5} className="text-center py-8 text-slate-500">
                Keine Events vorhanden.
              </td>
            </tr>
          ) : (
            events.map(event => (
              <tr key={event.id} className="border-b border-slate-100 hover:bg-slate-50">
                <td className="py-3 px-4 text-sm text-slate-500">
                  {new Date(event.created_at).toLocaleString('de-DE')}
                </td>
                <td className="py-3 px-4 text-sm capitalize">
                  {event.middleware_name.replace('_', ' ')}
                </td>
                <td className="py-3 px-4">
                  <span
                    className={`px-2 py-1 rounded text-xs font-semibold ${getEventTypeColor(event.event_type)}`}
                  >
                    {event.event_type}
                  </span>
                </td>
                <td className="py-3 px-4 text-sm font-mono text-slate-600">
                  {event.ip_address || '-'}
                </td>
                <td className="py-3 px-4 text-sm text-slate-600 max-w-xs truncate">
                  {event.request_method && event.request_path
                    ? `${event.request_method} ${event.request_path}`
                    : '-'}
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  )
}