'use client'

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

interface OverviewTabProps {
  hook: MiddlewareHookReturn
}

export default function OverviewTab({ hook }: OverviewTabProps) {
  const { stats, saving } = hook

  return (
    <div className="space-y-6">
      <h3 className="text-lg font-medium">Middleware Status</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {Object.entries(MIDDLEWARE_INFO).map(([key, info]) => {
          const config = hook.getConfig(key)
          const mwStats = hook.getStats(key)
          return (
            <div key={key} className="bg-white rounded-lg shadow p-4">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center">
                  <span className="text-2xl mr-2">{info.icon}</span>
                  <h4 className="font-medium">{info.name}</h4>
                </div>
                <button
                  onClick={() => config && hook.toggleMiddleware(key, !config.enabled)}
                  disabled={saving || !config}
                  className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
                    config?.enabled ? 'bg-green-500' : 'bg-gray-200'
                  }`}
                >
                  <span
                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
                      config?.enabled ? 'translate-x-5' : 'translate-x-0'
                    }`}
                  />
                </button>
              </div>
              <p className="text-sm text-gray-500 mb-3">{info.description}</p>
              {mwStats && (
                <div className="text-xs text-gray-400">
                  <span className="mr-3">Last hour: {mwStats.events_last_hour} events</span>
                  <span>24h: {mwStats.events_last_24h} events</span>
                </div>
              )}
            </div>
          )
        })}
      </div>

      {/* Quick Stats */}
      <div className="mt-8">
        <h3 className="text-lg font-medium mb-4">Activity Summary (24h)</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {stats.map((s) => (
            <div key={s.middleware_name} className="bg-gray-50 rounded-lg p-4">
              <p className="text-sm text-gray-500">{MIDDLEWARE_INFO[s.middleware_name]?.name || s.middleware_name}</p>
              <p className="text-2xl font-bold">{s.events_last_24h}</p>
              <p className="text-xs text-gray-400">{s.events_last_hour} in last hour</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}