'use client'

import type { MiddlewareConfig } from '../types'
import { getMiddlewareDescription } from './helpers'

interface OverviewTabProps {
  configs: MiddlewareConfig[]
  actionLoading: string | null
  toggleMiddleware: (name: string, enabled: boolean) => void
}

export function OverviewTab({ configs, actionLoading, toggleMiddleware }: OverviewTabProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {configs.map(config => {
        const info = getMiddlewareDescription(config.middleware_name)
        return (
          <div
            key={config.id}
            className={`rounded-lg p-4 border ${
              config.enabled
                ? 'bg-green-50 border-green-200'
                : 'bg-slate-50 border-slate-200'
            }`}
          >
            <div className="flex justify-between items-start mb-2">
              <div className="flex items-center gap-2">
                <span className="text-xl">{info.icon}</span>
                <span className="font-semibold text-slate-900 capitalize">
                  {config.middleware_name.replace('_', ' ')}
                </span>
              </div>
              <button
                onClick={() => toggleMiddleware(config.middleware_name, !config.enabled)}
                disabled={actionLoading === config.middleware_name}
                className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
                  config.enabled
                    ? 'bg-green-200 text-green-800 hover:bg-green-300'
                    : 'bg-slate-200 text-slate-600 hover:bg-slate-300'
                }`}
              >
                {actionLoading === config.middleware_name
                  ? '...'
                  : config.enabled
                  ? 'Aktiv'
                  : 'Inaktiv'}
              </button>
            </div>
            <p className="text-sm text-slate-600">{info.desc}</p>
            {config.updated_at && (
              <div className="mt-2 text-xs text-slate-400">
                Aktualisiert: {new Date(config.updated_at).toLocaleString('de-DE')}
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}