'use client'

import { MIDDLEWARE_INFO } from './types'
import type { MiddlewareHookReturn } from './types'

interface EventsTabProps {
  hook: MiddlewareHookReturn
}

export default function EventsTab({ hook }: EventsTabProps) {
  const { events } = hook

  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow overflow-hidden">
        <div className="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
          <h3 className="text-lg font-medium">Recent Middleware Events</h3>
          <button
            onClick={hook.loadData}
            className="text-sm text-blue-600 hover:text-blue-800"
          >
            Refresh
          </button>
        </div>
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Time</th>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Middleware</th>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Event</th>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
              <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Path</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {events.length === 0 ? (
              <tr>
                <td colSpan={5} className="px-4 py-4 text-center text-gray-500">
                  No events recorded yet
                </td>
              </tr>
            ) : (
              events.map((event) => (
                <tr key={event.id}>
                  <td className="px-4 py-2 text-sm text-gray-500">
                    {new Date(event.created_at).toLocaleString()}
                  </td>
                  <td className="px-4 py-2">
                    <span className="text-sm font-medium">
                      {MIDDLEWARE_INFO[event.middleware_name]?.name || event.middleware_name}
                    </span>
                  </td>
                  <td className="px-4 py-2">
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      event.event_type.includes('blocked') || event.event_type.includes('exceeded')
                        ? 'bg-red-100 text-red-800'
                        : event.event_type.includes('add') || event.event_type.includes('changed')
                        ? 'bg-blue-100 text-blue-800'
                        : 'bg-gray-100 text-gray-800'
                    }`}>
                      {event.event_type}
                    </span>
                  </td>
                  <td className="px-4 py-2 font-mono text-sm text-gray-500">
                    {event.ip_address || '-'}
                  </td>
                  <td className="px-4 py-2 text-sm text-gray-500 truncate max-w-xs">
                    {event.request_path || '-'}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}