import React, { useState, useMemo } from 'react';

const METHOD_COLORS = {
    GET:    { bg: '#1d4ed8', light: '#1d4ed820', text: '#60a5fa' },
    POST:   { bg: '#15803d', light: '#15803d20', text: '#4ade80' },
    PUT:    { bg: '#92400e', light: '#92400e20', text: '#fbbf24' },
    PATCH:  { bg: '#7c3aed', light: '#7c3aed20', text: '#c084fc' },
    DELETE: { bg: '#991b1b', light: '#991b1b20', text: '#f87171' },
};

const API_ENDPOINTS = [
    {
        category: 'Authentifizierung',
        icon: '🔐',
        description: 'Login, Logout, Passwort, Benachrichtigungen und Microsoft OAuth',
        endpoints: [
            { method: 'POST', path: '/api/auth/login',                description: 'Benutzer-Login mit Benutzername und Passwort', auth: false },
            { method: 'POST', path: '/api/auth/logout',               description: 'Aktive Sitzung beenden', auth: false },
            { method: 'GET',  path: '/api/auth/me',                   description: 'Informationen zum aktuell eingeloggten Benutzer', auth: true },
            { method: 'POST', path: '/api/auth/change-password',      description: 'Eigenes Passwort ändern', auth: true },
            { method: 'PUT',  path: '/api/auth/notifications',        description: 'E-Mail-Benachrichtigungen für Endbenutzer aktivieren/deaktivieren', auth: true },
            { method: 'PUT',  path: '/api/auth/staff-notifications',  description: 'Granulare E-Mail-Benachrichtigungseinstellungen für Staff (Ticket erstellt, zugewiesen, neue Antwort, Wochenreport)', auth: true, role: 'Staff' },
            { method: 'GET',  path: '/api/auth/microsoft',            description: 'Microsoft Azure AD OAuth2 Login starten', auth: false, note: 'Redirect zu Microsoft' },
            { method: 'GET',  path: '/api/auth/microsoft/callback',   description: 'OAuth2 Callback-Handler nach Microsoft-Login', auth: false, note: 'Intern' },
        ],
    },
    {
        category: 'Assets',
        icon: '💼',
        description: 'IT-Geräteverwaltung – Notebooks, Monitore, FIDO-Keys etc.',
        endpoints: [
            { method: 'GET',    path: '/api/assets',                          description: 'Alle Assets auflisten', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/assets/stats',                    description: 'Gesamtstatistiken (Anzahl nach Status/Typ)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/assets/mine',                     description: 'Eigene zugewiesene Assets abrufen', auth: true, role: 'Alle' },
            { method: 'GET',    path: '/api/assets/serial/:serialNumber',     description: 'Asset anhand der Seriennummer suchen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/assets/status/:status',           description: 'Assets nach Status filtern (verfuegbar, zugewiesen, …)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/assets/type/:type',               description: 'Assets nach Typ filtern (Notebook, Monitor, …)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/assets/:id',                      description: 'Ein bestimmtes Asset nach ID abrufen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/assets/:id/history',              description: 'Zuordnungshistorie eines Assets', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/assets/:id/label',                description: 'Asset-Label als PDF generieren', auth: true, role: 'Admin+', note: 'PDF' },
            { method: 'GET',    path: '/api/assets/:id/handover-protocol',    description: 'Übergabeprotokoll als PDF generieren', auth: true, role: 'Admin+', note: 'PDF' },
            { method: 'POST',   path: '/api/assets',                          description: 'Neues Asset anlegen', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/assets/:id/assign',               description: 'Asset einem Benutzer zuweisen', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/assets/:id/unassign',             description: 'Zuweisung aufheben / Status setzen (verfuegbar, inaktiv)', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/assets/import/intune',            description: 'Geräte aus Microsoft Intune importieren', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/assets/:id',                      description: 'Asset-Daten aktualisieren (Felder, Wartung, etc.)', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/assets/:id',                      description: 'Asset dauerhaft löschen', auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'FIDO-Keys',
        icon: '🔑',
        description: 'Verwaltung von Hardware-Sicherheitsschlüsseln',
        endpoints: [
            { method: 'GET',    path: '/api/fido-keys',                       description: 'Alle FIDO-Keys auflisten', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/fido-keys/stats',                 description: 'Statistiken (Aktiv, Inaktiv, Zugewiesen)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/fido-keys/serial/:serialNumber',  description: 'Key anhand der Seriennummer suchen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/fido-keys/status/:status',        description: 'Keys nach Status filtern', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/fido-keys/:id',                   description: 'Einzelnen FIDO-Key nach ID abrufen', auth: true, role: 'Admin+' },
            { method: 'POST',   path: '/api/fido-keys',                       description: 'Neuen FIDO-Key registrieren', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/fido-keys/:id',                   description: 'Key-Daten aktualisieren', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/fido-keys/:id/status',            description: 'Status eines Keys ändern (aktiv/inaktiv)', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/fido-keys/:id',                   description: 'FIDO-Key dauerhaft löschen', auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'Tickets',
        icon: '🎫',
        description: 'Support-Ticket-System mit Kommentaren, Links, Mehrfach-Bearbeitung und Echtzeit-Updates',
        endpoints: [
            { method: 'GET',    path: '/api/tickets',                               description: 'Alle Tickets auflisten (mit Filter- und Sortieroptionen)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/tickets/stats',                         description: 'Ticket-Statistiken nach Status und Priorität', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/tickets/metrics',                       description: 'Erweiterte Ticket-Metriken (Lösungszeiten, SLA, Trends)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/tickets/routing',                       description: 'Ticket-Routing-Konfiguration abrufen', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/tickets/routing',                       description: 'Ticket-Routing-Konfiguration speichern', auth: true, role: 'Admin' },
            { method: 'GET',    path: '/api/tickets/:id',                           description: 'Ticket-Detail inkl. Kommentare abrufen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/tickets/:id/events',                    description: 'Server-Sent Events (SSE) für Echtzeit-Updates', auth: false, note: 'Token als Query-Param (?token=…)' },
            { method: 'GET',    path: '/api/tickets/:id/history',                   description: 'Änderungshistorie eines Tickets abrufen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/tickets/:id/pdf',                       description: 'Ticket als PDF exportieren', auth: true, role: 'Admin+', note: 'PDF' },
            { method: 'GET',    path: '/api/tickets/:id/links',                     description: 'Verknüpfte Tickets eines Tickets abrufen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/tickets/:id/feedback',                  description: 'Zufriedenheits-Feedback für abgeschlossenes Ticket abrufen', auth: false, note: 'Öffentlich (Token-Link)' },
            { method: 'POST',   path: '/api/tickets',                               description: 'Neues Ticket erstellen (authentifiziert)', auth: true, role: 'Alle' },
            { method: 'POST',   path: '/api/tickets/public',                        description: 'Ticket ohne Login erstellen (öffentliches Formular)', auth: false },
            { method: 'PUT',    path: '/api/tickets/bulk',                          description: 'Mehrere Tickets gleichzeitig aktualisieren (Bulk-Update)', auth: true, role: 'Staff' },
            { method: 'PUT',    path: '/api/tickets/:id',                           description: 'Ticket aktualisieren (Status, Priorität, Zuweisung)', auth: true, role: 'Staff' },
            { method: 'PUT',    path: '/api/tickets/:id/snooze',                    description: 'Ticket vorübergehend zurückstellen (Snooze bis Datum)', auth: true, role: 'Staff' },
            { method: 'DELETE', path: '/api/tickets/:id',                           description: 'Ticket dauerhaft löschen', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/tickets/:id/comments',                  description: 'Kommentar zu einem Ticket hinzufügen', auth: true, role: 'Alle' },
            { method: 'POST',   path: '/api/tickets/:id/ai-reply',                  description: 'KI-gestützten Antwortvorschlag für ein Ticket generieren', auth: true, role: 'Staff' },
            { method: 'DELETE', path: '/api/tickets/:id/comments/:commentId',       description: 'Kommentar löschen', auth: true, role: 'Staff' },
            { method: 'POST',   path: '/api/tickets/:id/links',                     description: 'Ticket mit einem anderen Ticket verknüpfen', auth: true, role: 'Staff' },
            { method: 'DELETE', path: '/api/tickets/:id/links/:linkId',             description: 'Ticket-Verknüpfung entfernen', auth: true, role: 'Staff' },
            { method: 'POST',   path: '/api/tickets/:id/assignees',                 description: 'Weiteren Bearbeiter zu einem Ticket hinzufügen', auth: true, role: 'Staff' },
            { method: 'DELETE', path: '/api/tickets/:id/assignees/:userId',         description: 'Bearbeiter von einem Ticket entfernen', auth: true, role: 'Staff' },
        ],
    },
    {
        category: 'Benutzer',
        icon: '👥',
        description: 'Benutzerverwaltung, Rollen und Azure AD Import',
        endpoints: [
            { method: 'GET',    path: '/api/users',                             description: 'Alle Benutzer auflisten', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/users/roles',                       description: 'Alle verfügbaren Rollen abrufen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/users/audit-logs',                  description: 'Audit-Log aller Systemaktivitäten', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/users/audit-logs/user/:userId',     description: 'Audit-Log für einen bestimmten Benutzer', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/users/audit-logs/entity/:type/:id', description: 'Audit-Log für eine bestimmte Entität', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/users/:id',                         description: 'Einzelnen Benutzer nach ID abrufen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/users/import/azure/groups',         description: 'Azure AD Gruppen auflisten (für Import)', auth: true, role: 'Super Admin' },
            { method: 'POST',   path: '/api/users',                             description: 'Neuen Benutzer manuell anlegen', auth: true, role: 'Super Admin' },
            { method: 'POST',   path: '/api/users/import/azure',                description: 'Benutzer aus Azure AD / Entra ID importieren', auth: true, role: 'Super Admin' },
            { method: 'PUT',    path: '/api/users/:id',                         description: 'Benutzerdaten aktualisieren', auth: true, role: 'Super Admin' },
            { method: 'PUT',    path: '/api/users/:id/role',                    description: 'Rolle eines Benutzers ändern', auth: true, role: 'Super Admin' },
            { method: 'PUT',    path: '/api/users/:id/activate',                description: 'Benutzer aktivieren oder deaktivieren', auth: true, role: 'Super Admin' },
            { method: 'DELETE', path: '/api/users/:id',                         description: 'Benutzer dauerhaft löschen', auth: true, role: 'Super Admin' },
        ],
    },
    {
        category: 'Lizenzen',
        icon: '📜',
        description: 'Softwarelizenz-Verwaltung und Entra ID Import',
        endpoints: [
            { method: 'GET',    path: '/api/licenses',                  description: 'Alle Lizenzen auflisten', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/licenses/statistics',       description: 'Lizenz-Statistiken (Gesamt, Ablaufend, Abgelaufen)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/licenses/:id',              description: 'Lizenz nach ID abrufen', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/licenses/:id/users',        description: 'Benutzer einer bestimmten Lizenz abrufen', auth: true, role: 'Admin+' },
            { method: 'POST',   path: '/api/licenses',                  description: 'Neue Lizenz anlegen', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/licenses/import/entra',     description: 'Lizenzen aus Microsoft Entra ID importieren', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/licenses/:id',              description: 'Lizenz aktualisieren', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/licenses/:id',              description: 'Lizenz dauerhaft löschen', auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'Onboarding',
        icon: '📥',
        description: 'Mitarbeiter-Einstellungsprozess mit Checklisten, Bestätigungs-E-Mails und PDF-Protokollen',
        endpoints: [
            { method: 'GET',    path: '/api/onboarding/confirm/:token',         description: 'Mitarbeiter bestätigt Übergabe über Token-Link (E-Mail)', auth: false, note: 'Öffentlich' },
            { method: 'GET',    path: '/api/onboarding',                        description: 'Alle Onboarding-Protokolle auflisten', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'GET',    path: '/api/onboarding/stats',                  description: 'Onboarding-Statistiken', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'GET',    path: '/api/onboarding/entra-manager',          description: 'Abteilungsleiter aus Entra ID ermitteln (?department=…)', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'GET',    path: '/api/onboarding/entra-search',           description: 'Benutzer nach Name in Entra ID suchen (?name=…)', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'GET',    path: '/api/onboarding/:id',                    description: 'Onboarding-Protokoll nach ID abrufen', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/onboarding',                        description: 'Neues Onboarding-Protokoll erstellen', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'PUT',    path: '/api/onboarding/:id',                    description: 'Protokoll aktualisieren (Checkliste, Status)', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/onboarding/:id/send-confirmation',  description: 'Bestätigungs-E-Mail an Mitarbeiter (erneut) senden', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/onboarding/:id/regenerate-pdf',     description: 'Onboarding-PDF neu generieren', auth: true, role: 'Admin', note: 'PDF' },
            { method: 'DELETE', path: '/api/onboarding/:id',                    description: 'Onboarding-Protokoll löschen', auth: true, role: 'Lifecycle-Rollen' },
        ],
    },
    {
        category: 'Offboarding',
        icon: '📤',
        description: 'Mitarbeiter-Austritts­prozess mit Asset-Rückgabe und PDF-Protokollen',
        endpoints: [
            { method: 'GET',    path: '/api/offboarding',                       description: 'Alle Offboarding-Protokolle auflisten', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'GET',    path: '/api/offboarding/stats',                 description: 'Offboarding-Statistiken', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'GET',    path: '/api/offboarding/:id',                   description: 'Offboarding-Protokoll nach ID abrufen', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/offboarding',                       description: 'Neues Offboarding-Protokoll erstellen', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'PUT',    path: '/api/offboarding/:id',                   description: 'Protokoll aktualisieren', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/offboarding/:id/return-assets',     description: 'Alle Assets als zurückgegeben markieren', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/offboarding/:id/regenerate-pdf',    description: 'Offboarding-PDF neu generieren', auth: true, role: 'Admin', note: 'PDF' },
            { method: 'DELETE', path: '/api/offboarding/:id',                   description: 'Offboarding-Protokoll löschen', auth: true, role: 'Lifecycle-Rollen' },
        ],
    },
    {
        category: 'Onboarding-Prozesse',
        icon: '📋',
        description: 'Konfiguration von Abteilungen und Prozess-Checklisten für den Lifecycle',
        endpoints: [
            { method: 'GET',    path: '/api/onboarding-processes/departments',          description: 'Alle Abteilungen auflisten', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/onboarding-processes/departments',          description: 'Neue Abteilung anlegen', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/onboarding-processes/departments/reorder',  description: 'Sortierreihenfolge der Abteilungen ändern', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/onboarding-processes/departments/:id',      description: 'Abteilung aktualisieren', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/onboarding-processes/departments/:id',      description: 'Abteilung löschen', auth: true, role: 'Admin' },
            { method: 'GET',    path: '/api/onboarding-processes/processes',            description: 'Alle Prozess-Checklisten auflisten', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'POST',   path: '/api/onboarding-processes/processes',            description: 'Neuen Prozess erstellen', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'PUT',    path: '/api/onboarding-processes/processes/reorder',    description: 'Sortierreihenfolge der Prozesse ändern', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'PUT',    path: '/api/onboarding-processes/processes/:id',        description: 'Prozess aktualisieren', auth: true, role: 'Lifecycle-Rollen' },
            { method: 'DELETE', path: '/api/onboarding-processes/processes/:id',        description: 'Prozess löschen', auth: true, role: 'Lifecycle-Rollen' },
        ],
    },
    {
        category: 'KI & Wissensdatenbank',
        icon: '🤖',
        description: 'KI-Chat, Ticket-Analyse und Wissensdatenbank-Verwaltung (Claude AI)',
        endpoints: [
            { method: 'GET',    path: '/api/ai/status',                             description: 'KI-Status abrufen (verfügbar, Modell-Info)', auth: true, role: 'Staff' },
            { method: 'POST',   path: '/api/ai/chat',                               description: 'Nachricht an KI-Assistenten senden (Chat)', auth: true, role: 'Staff' },
            { method: 'GET',    path: '/api/ai/knowledge-base',                     description: 'Alle Einträge der Wissensdatenbank abrufen', auth: true, role: 'Staff' },
            { method: 'POST',   path: '/api/ai/knowledge-base',                     description: 'Neuen Eintrag zur Wissensdatenbank hinzufügen', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/ai/knowledge-base/import-text',         description: 'Text direkt in die Wissensdatenbank importieren', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/ai/knowledge-base/import-url',          description: 'URL-Inhalt in die Wissensdatenbank importieren', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/ai/knowledge-base/import-crawl',        description: 'Website crawlen und Inhalt importieren', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/ai/knowledge-base/:id',                 description: 'Wissensdatenbank-Eintrag aktualisieren', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/ai/knowledge-base/:id/images',          description: 'Bild zu einem Wissensdatenbank-Eintrag hochladen', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/ai/knowledge-base/:id/images/:filename',description: 'Bild aus einem Wissensdatenbank-Eintrag löschen', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/ai/knowledge-base/:id',                 description: 'Wissensdatenbank-Eintrag löschen', auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'IT Themen',
        icon: '🖥️',
        description: 'IT-Themen für die IT-Übersicht (Kategorien für Hardware, Software, Netzwerk etc.)',
        endpoints: [
            { method: 'GET',    path: '/api/it-topics',      description: 'Alle IT-Themen auflisten', auth: true, role: 'Staff' },
            { method: 'GET',    path: '/api/it-topics/:id',  description: 'Einzelnes IT-Thema nach ID abrufen', auth: true, role: 'Staff' },
            { method: 'POST',   path: '/api/it-topics',      description: 'Neues IT-Thema erstellen', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/it-topics/:id',  description: 'IT-Thema aktualisieren', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/it-topics/:id',  description: 'IT-Thema löschen', auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'Einstellungen',
        icon: '⚙️',
        description: 'Ticketkategorien, Vorlagen, E-Mail-Templates und E-Mail-Design',
        endpoints: [
            { method: 'GET',    path: '/api/settings/categories',               description: 'Alle Ticket-Kategorien auflisten', auth: true, role: 'Alle' },
            { method: 'POST',   path: '/api/settings/categories',               description: 'Neue Ticket-Kategorie erstellen', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/settings/categories/reorder',       description: 'Sortierreihenfolge der Kategorien ändern', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/settings/categories/:id',           description: 'Ticket-Kategorie aktualisieren', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/settings/categories/:id',           description: 'Ticket-Kategorie löschen', auth: true, role: 'Admin' },
            { method: 'GET',    path: '/api/settings/templates',                description: 'Alle Ticket-Vorlagen auflisten', auth: true, role: 'Alle' },
            { method: 'POST',   path: '/api/settings/templates',                description: 'Neue Ticket-Vorlage erstellen', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/settings/templates/:id',            description: 'Ticket-Vorlage aktualisieren', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/settings/templates/:id',            description: 'Ticket-Vorlage löschen', auth: true, role: 'Admin' },
            { method: 'GET',    path: '/api/settings/email-templates',          description: 'Alle E-Mail-Templates abrufen', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/settings/email-templates/:type',    description: 'E-Mail-Template eines bestimmten Typs bearbeiten', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/settings/email-templates/:type/reset', description: 'E-Mail-Template auf Standard zurücksetzen', auth: true, role: 'Admin' },
            { method: 'GET',    path: '/api/settings/email-design',             description: 'Globales E-Mail-Design abrufen (Farben, Logo, Footer)', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/settings/email-design',             description: 'Globales E-Mail-Design aktualisieren', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/settings/email-design/reset',       description: 'E-Mail-Design auf Standard zurücksetzen', auth: true, role: 'Admin' },
            { method: 'POST',   path: '/api/settings/email-preview/:type',      description: 'Vorschau-E-Mail eines bestimmten Templates senden', auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'ISO-Zertifizierung',
        icon: '🛡️',
        description: 'ISO 27001 Zertifizierungsaufgaben – Kategorien, Status, Fortschritt',
        endpoints: [
            { method: 'GET',    path: '/api/iso-tasks',           description: 'Alle ISO-Aufgaben auflisten (optional: ?category=…&status=…)', auth: true, role: 'Admin+' },
            { method: 'POST',   path: '/api/iso-tasks',           description: 'Neue ISO-Aufgabe erstellen',                                    auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/iso-tasks/:id',       description: 'ISO-Aufgabe aktualisieren (Status, Notizen, Verantwortlicher)', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/iso-tasks/:id',       description: 'ISO-Aufgabe löschen',                                          auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'Risikoanalyse',
        icon: '⚠️',
        description: 'IT-Risikoerfassung mit manuellen Einträgen und automatischem M365-Sync',
        endpoints: [
            { method: 'GET',    path: '/api/risks',         description: 'Alle Risiken auflisten (optional: ?category=…&status=…&source=…)', auth: true, role: 'Admin+' },
            { method: 'GET',    path: '/api/risks/stats',   description: 'Risikostatistiken (Gesamt, Kritisch, Hoch, Mittel, Niedrig, Behoben)', auth: true, role: 'Admin+' },
            { method: 'POST',   path: '/api/risks/sync',    description: 'M365-Sync ausführen (Secure Score, Defender, Intune, MFA, Risky Users)', auth: true, role: 'Admin', note: 'Benötigt Azure-Permissions' },
            { method: 'POST',   path: '/api/risks',         description: 'Manuelles Risiko erstellen', auth: true, role: 'Admin' },
            { method: 'PUT',    path: '/api/risks/:id',     description: 'Risiko aktualisieren (Status, Mitigation, Verantwortlicher)', auth: true, role: 'Admin' },
            { method: 'DELETE', path: '/api/risks/:id',     description: 'Risiko löschen', auth: true, role: 'Admin' },
        ],
    },
    {
        category: 'Entra ID Rechte',
        icon: '🔐',
        description: 'Benutzer, Gruppen und Admin-Rollen aus Microsoft Entra ID (Azure AD)',
        endpoints: [
            { method: 'GET',    path: '/api/entra/users',                          description: 'Alle Entra-Benutzer mit MFA-Status laden',                     auth: true, role: 'Admin', note: 'User.Read.All + AuditLog.Read.All' },
            { method: 'GET',    path: '/api/entra/users/:id/groups',               description: 'Gruppen-Mitgliedschaften eines bestimmten Benutzers',            auth: true, role: 'Admin', note: 'GroupMember.Read.All' },
            { method: 'GET',    path: '/api/entra/groups',                         description: 'Alle Entra-Gruppen auflisten',                                   auth: true, role: 'Admin', note: 'Group.Read.All' },
            { method: 'GET',    path: '/api/entra/groups/:id/members',             description: 'Mitglieder einer bestimmten Gruppe laden',                       auth: true, role: 'Admin', note: 'GroupMember.Read.All' },
            { method: 'POST',   path: '/api/entra/groups/:id/members',             description: 'Benutzer zu Gruppe hinzufügen (Body: { userId })',               auth: true, role: 'Admin', note: 'GroupMember.ReadWrite.All' },
            { method: 'DELETE', path: '/api/entra/groups/:id/members/:userId',     description: 'Benutzer aus Gruppe entfernen',                                  auth: true, role: 'Admin', note: 'GroupMember.ReadWrite.All' },
            { method: 'GET',    path: '/api/entra/roles',                          description: 'Alle aktivierten Directory-Rollen mit Mitgliedern',              auth: true, role: 'Admin', note: 'RoleManagement.Read.Directory' },
        ],
    },
    {
        category: 'System',
        icon: '🩺',
        description: 'Server-Health und Systeminformationen',
        endpoints: [
            { method: 'GET', path: '/health', description: 'Server-Status, Timestamp und Liveness-Check', auth: false },
        ],
    },
];

const MethodBadge = ({ method }) => {
    const c = METHOD_COLORS[method] || METHOD_COLORS.GET;
    return (
        <span style={{
            display: 'inline-block',
            padding: '2px 8px',
            borderRadius: '4px',
            background: c.light,
            color: c.text,
            fontSize: '11px',
            fontWeight: '700',
            fontFamily: 'monospace',
            letterSpacing: '0.05em',
            border: `1px solid ${c.text}40`,
            minWidth: '54px',
            textAlign: 'center',
            flexShrink: 0,
        }}>
            {method}
        </span>
    );
};

const ApiDocsPage = () => {
    const [search, setSearch] = useState('');
    const [expandedCategory, setExpandedCategory] = useState(null);
    const [expandedEndpoints, setExpandedEndpoints] = useState({});

    const toggleCategory = (cat) => {
        setExpandedCategory(prev => prev === cat ? null : cat);
    };

    const toggleEndpoint = (key) => {
        setExpandedEndpoints(prev => ({ ...prev, [key]: !prev[key] }));
    };

    const filtered = useMemo(() => {
        if (!search.trim()) return API_ENDPOINTS;
        const q = search.toLowerCase();
        return API_ENDPOINTS.map(cat => ({
            ...cat,
            endpoints: cat.endpoints.filter(ep =>
                ep.path.toLowerCase().includes(q) ||
                ep.method.toLowerCase().includes(q) ||
                ep.description.toLowerCase().includes(q) ||
                (ep.role || '').toLowerCase().includes(q)
            ),
        })).filter(cat => cat.endpoints.length > 0);
    }, [search]);

    const totalEndpoints = API_ENDPOINTS.reduce((sum, c) => sum + c.endpoints.length, 0);

    return (
        <div style={{ padding: '32px 24px', maxWidth: '960px', margin: '0 auto' }}>
            {/* Header */}
            <div style={{ marginBottom: '28px' }}>
                <h1 style={{ fontSize: '24px', fontWeight: '700', color: 'var(--text-primary)', margin: 0 }}>
                    📖 API Dokumentation
                </h1>
                <p style={{ color: 'var(--text-muted)', fontSize: '14px', marginTop: '4px' }}>
                    IT-Nexus REST API — {totalEndpoints} Endpunkte in {API_ENDPOINTS.length} Kategorien
                </p>
            </div>

            {/* Base URL + Auth Info */}
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
                gap: '12px',
                marginBottom: '24px',
            }}>
                <InfoCard icon="🌐" title="Base URL">
                    <code style={{ fontFamily: 'monospace', fontSize: '13px', color: 'var(--cereda-primary)' }}>
                        https://it-nexus.cereda-systems.de
                    </code>
                </InfoCard>
                <InfoCard icon="🔒" title="Authentifizierung">
                    <span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
                        Bearer Token — <code style={{ fontFamily: 'monospace', fontSize: '12px' }}>Authorization: Bearer &lt;JWT&gt;</code>
                    </span>
                </InfoCard>
                <InfoCard icon="📦" title="Content-Type">
                    <code style={{ fontFamily: 'monospace', fontSize: '13px', color: 'var(--text-secondary)' }}>
                        application/json
                    </code>
                </InfoCard>
            </div>

            {/* Method Legend */}
            <div style={{
                background: 'var(--bg-card)',
                border: '1px solid var(--border-color)',
                borderRadius: 'var(--radius-lg)',
                padding: '14px 18px',
                marginBottom: '20px',
                display: 'flex',
                alignItems: 'center',
                gap: '16px',
                flexWrap: 'wrap',
            }}>
                <span style={{ fontSize: '12px', color: 'var(--text-muted)', fontWeight: '600' }}>METHODEN:</span>
                {Object.entries(METHOD_COLORS).map(([m]) => (
                    <MethodBadge key={m} method={m} />
                ))}
            </div>

            {/* Search */}
            <div style={{ position: 'relative', marginBottom: '20px' }}>
                <span style={{
                    position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)',
                    color: 'var(--text-muted)', fontSize: '16px', pointerEvents: 'none',
                }}>🔍</span>
                <input
                    type="text"
                    placeholder="Suche nach Pfad, Methode oder Beschreibung…"
                    value={search}
                    onChange={e => setSearch(e.target.value)}
                    style={{
                        width: '100%',
                        padding: '11px 14px 11px 40px',
                        background: 'var(--bg-card)',
                        border: '1px solid var(--border-color)',
                        borderRadius: 'var(--radius-md)',
                        color: 'var(--text-primary)',
                        fontSize: '14px',
                        outline: 'none',
                        transition: 'var(--transition)',
                        boxSizing: 'border-box',
                    }}
                    onFocus={e => e.target.style.borderColor = 'var(--cereda-primary)'}
                    onBlur={e => e.target.style.borderColor = 'var(--border-color)'}
                />
                {search && (
                    <button
                        onClick={() => setSearch('')}
                        style={{
                            position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)',
                            background: 'none', border: 'none', color: 'var(--text-muted)',
                            cursor: 'pointer', fontSize: '16px', padding: '4px',
                        }}
                    >✕</button>
                )}
            </div>

            {/* Endpoint Categories */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                {filtered.map((cat) => {
                    const isOpen = search.trim() ? true : expandedCategory === cat.category;
                    return (
                        <div
                            key={cat.category}
                            style={{
                                background: 'var(--bg-card)',
                                border: '1px solid var(--border-color)',
                                borderRadius: 'var(--radius-lg)',
                                overflow: 'hidden',
                            }}
                        >
                            {/* Category Header */}
                            <button
                                onClick={() => toggleCategory(cat.category)}
                                style={{
                                    width: '100%',
                                    background: 'none',
                                    border: 'none',
                                    padding: '16px 20px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '12px',
                                    cursor: 'pointer',
                                    textAlign: 'left',
                                    borderBottom: isOpen ? '1px solid var(--border-color)' : 'none',
                                    transition: 'var(--transition)',
                                }}
                            >
                                <span style={{ fontSize: '20px' }}>{cat.icon}</span>
                                <div style={{ flex: 1 }}>
                                    <div style={{ fontWeight: '700', fontSize: '15px', color: 'var(--text-primary)' }}>
                                        {cat.category}
                                    </div>
                                    <div style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '2px' }}>
                                        {cat.description}
                                    </div>
                                </div>
                                <span style={{
                                    background: 'var(--bg-tertiary)',
                                    color: 'var(--text-secondary)',
                                    borderRadius: '12px',
                                    padding: '2px 10px',
                                    fontSize: '12px',
                                    fontWeight: '600',
                                    flexShrink: 0,
                                }}>
                                    {cat.endpoints.length}
                                </span>
                                <span style={{
                                    color: 'var(--text-muted)',
                                    fontSize: '16px',
                                    transition: 'transform 0.2s',
                                    transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)',
                                }}>›</span>
                            </button>

                            {/* Endpoints */}
                            {isOpen && (
                                <div>
                                    {cat.endpoints.map((ep, i) => {
                                        const key = `${cat.category}-${i}`;
                                        const isEpOpen = expandedEndpoints[key];
                                        return (
                                            <div
                                                key={key}
                                                style={{
                                                    borderBottom: i < cat.endpoints.length - 1 ? '1px solid var(--border-color)' : 'none',
                                                }}
                                            >
                                                <button
                                                    onClick={() => toggleEndpoint(key)}
                                                    style={{
                                                        width: '100%',
                                                        background: isEpOpen ? 'var(--bg-primary)' : 'none',
                                                        border: 'none',
                                                        padding: '12px 20px',
                                                        display: 'flex',
                                                        alignItems: 'center',
                                                        gap: '12px',
                                                        cursor: 'pointer',
                                                        textAlign: 'left',
                                                        transition: 'background 0.15s',
                                                    }}
                                                >
                                                    <MethodBadge method={ep.method} />
                                                    <code style={{
                                                        fontFamily: 'monospace',
                                                        fontSize: '13px',
                                                        color: 'var(--text-primary)',
                                                        flex: 1,
                                                        minWidth: 0,
                                                        overflow: 'hidden',
                                                        textOverflow: 'ellipsis',
                                                        whiteSpace: 'nowrap',
                                                    }}>
                                                        {ep.path}
                                                    </code>
                                                    <span style={{
                                                        fontSize: '12px',
                                                        color: 'var(--text-muted)',
                                                        flex: '0 0 auto',
                                                        display: 'none',
                                                    }} className="ep-desc">
                                                        {ep.description}
                                                    </span>
                                                    {ep.auth ? (
                                                        <span style={badgeStyle('var(--warning)')}>🔒 Auth</span>
                                                    ) : (
                                                        <span style={badgeStyle('var(--success)')}>🌐 Öffentlich</span>
                                                    )}
                                                    {ep.role && (
                                                        <span style={badgeStyle('var(--info)')}>{ep.role}</span>
                                                    )}
                                                    {ep.note && (
                                                        <span style={badgeStyle('var(--text-muted)')}>{ep.note}</span>
                                                    )}
                                                </button>

                                                {/* Expanded detail */}
                                                {isEpOpen && (
                                                    <div style={{
                                                        background: 'var(--bg-primary)',
                                                        padding: '0 20px 16px 20px',
                                                        borderTop: '1px solid var(--border-color)',
                                                    }}>
                                                        <div style={{ paddingTop: '14px' }}>
                                                            <div style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: '1.6', marginBottom: '12px' }}>
                                                                {ep.description}
                                                            </div>
                                                            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                                                                <DetailField label="Methode" value={ep.method} mono />
                                                                <DetailField label="Pfad" value={ep.path} mono />
                                                                <DetailField label="Auth erforderlich" value={ep.auth ? 'Ja' : 'Nein'} />
                                                                {ep.role && <DetailField label="Mindest-Rolle" value={ep.role} />}
                                                                {ep.note && <DetailField label="Hinweis" value={ep.note} />}
                                                            </div>
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                        </div>
                    );
                })}

                {filtered.length === 0 && (
                    <div style={{ textAlign: 'center', padding: '48px', color: 'var(--text-muted)' }}>
                        <div style={{ fontSize: '32px', marginBottom: '12px' }}>🔍</div>
                        <div>Keine Endpunkte für „{search}" gefunden</div>
                    </div>
                )}
            </div>
        </div>
    );
};

const badgeStyle = (color) => ({
    display: 'inline-flex',
    alignItems: 'center',
    padding: '2px 8px',
    borderRadius: '12px',
    background: `${color}20`,
    color: color,
    fontSize: '11px',
    fontWeight: '600',
    flexShrink: 0,
    whiteSpace: 'nowrap',
});

const InfoCard = ({ icon, title, children }) => (
    <div style={{
        background: 'var(--bg-card)',
        border: '1px solid var(--border-color)',
        borderRadius: 'var(--radius-lg)',
        padding: '14px 16px',
    }}>
        <div style={{ fontSize: '12px', color: 'var(--text-muted)', fontWeight: '600', marginBottom: '6px', display: 'flex', alignItems: 'center', gap: '6px' }}>
            <span>{icon}</span> {title}
        </div>
        {children}
    </div>
);

const DetailField = ({ label, value, mono }) => (
    <div style={{
        background: 'var(--bg-secondary)',
        border: '1px solid var(--border-color)',
        borderRadius: 'var(--radius-sm)',
        padding: '6px 12px',
    }}>
        <div style={{ fontSize: '10px', color: 'var(--text-muted)', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>
            {label}
        </div>
        <div style={{ fontSize: '12px', color: 'var(--text-primary)', fontFamily: mono ? 'monospace' : 'inherit' }}>
            {value}
        </div>
    </div>
);

export default ApiDocsPage;
