'use client'

const INTEGRATIONS = [
  {
    id: 'matrix',
    name: 'Matrix Kommunikation',
    description: 'Sichere, verschluesselte Kommunikation mit Betroffenen ueber Matrix-Protokoll. Wird in Production ueber den Core Communication Service bereitgestellt.',
    status: 'planned',
    icon: '💬',
  },
  {
    id: 'jitsi',
    name: 'Jitsi Video-Meetings',
    description: 'DSGVO-konforme Video-Konsultationen mit Betroffenen fuer komplexe Datenschutzanfragen. Wird ueber den Core Jitsi Service bereitgestellt.',
    status: 'planned',
    icon: '📹',
  },
  {
    id: 'oauth',
    name: 'OAuth 2.0 Client-Verwaltung',
    description: 'Verwaltung von OAuth-Clients fuer API-Zugriff auf Consent-Endpunkte. Authorization Code Flow mit PKCE-Support.',
    status: 'planned',
    icon: '🔑',
  },
  {
    id: '2fa',
    name: 'Zwei-Faktor-Authentifizierung',
    description: 'TOTP-basierte Zwei-Faktor-Authentifizierung fuer Admin-Zugang. Recovery-Codes fuer Notfallzugriff.',
    status: 'planned',
    icon: '🛡️',
  },
  {
    id: 'notifications',
    name: 'Benachrichtigungssystem',
    description: 'In-App und E-Mail Benachrichtigungen fuer Consent-Aenderungen, DSR-Fristen und Dokument-Updates. Praeferenz-Verwaltung pro Nutzer.',
    status: 'planned',
    icon: '🔔',
  },
]

export function IntegrationStubs() {
  return (
    <div className="p-6 space-y-4">
      <div className="flex items-center justify-between mb-2">
        <h2 className="text-lg font-semibold text-slate-900">Integrationen</h2>
        <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">Production-Anbindung</span>
      </div>

      <p className="text-sm text-slate-500">
        Diese Dienste werden in Production ueber die Core-Services bereitgestellt und sind
        im SDK vorbereitet.
      </p>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {INTEGRATIONS.map(integration => (
          <div key={integration.id} className="border border-slate-200 rounded-lg p-4 bg-slate-50">
            <div className="flex items-start gap-3">
              <span className="text-2xl">{integration.icon}</span>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h3 className="text-sm font-medium text-slate-800">{integration.name}</h3>
                  <span className="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded text-[10px]">Geplant</span>
                </div>
                <p className="text-xs text-slate-500 mt-1">{integration.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}