'use client'

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

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

export function ConfigTab({ configs, actionLoading, toggleMiddleware }: ConfigTabProps) {
  return (
    <div className="space-y-4">
      {configs.map(config => {
        const info = getMiddlewareDescription(config.middleware_name)
        return (
          <div key={config.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
            <div className="flex justify-between items-start mb-4">
              <div>
                <h3 className="font-semibold text-slate-900 flex items-center gap-2">
                  <span>{info.icon}</span>
                  <span className="capitalize">{config.middleware_name.replace('_', ' ')}</span>
                </h3>
                <p className="text-sm text-slate-600">{info.desc}</p>
              </div>
              <div className="flex items-center gap-3">
                <span
                  className={`px-3 py-1 rounded-full text-xs font-semibold ${
                    config.enabled ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                  }`}
                >
                  {config.enabled ? 'Aktiviert' : 'Deaktiviert'}
                </span>
                <button
                  onClick={() => toggleMiddleware(config.middleware_name, !config.enabled)}
                  disabled={actionLoading === config.middleware_name}
                  className="px-4 py-1.5 text-sm border border-slate-300 rounded-lg hover:bg-slate-100 disabled:opacity-50 transition-colors"
                >
                  {actionLoading === config.middleware_name
                    ? '...'
                    : config.enabled
                    ? 'Deaktivieren'
                    : 'Aktivieren'}
                </button>
              </div>
            </div>
            {Object.keys(config.config).length > 0 && (
              <div className="mt-3 pt-3 border-t border-slate-200">
                <div className="text-xs font-semibold text-slate-500 uppercase mb-2">
                  Konfiguration
                </div>
                <pre className="text-xs bg-white p-3 rounded border border-slate-200 overflow-x-auto">
                  {JSON.stringify(config.config, null, 2)}
                </pre>
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}