'use client'

/**
 * Developer Documentation Page
 *
 * SDK-style documentation with architecture overview, API reference,
 * and interactive system architecture diagram
 */

import { useState } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'

// Documentation paths for VS Code links
const docPaths: Record<string, string> = {
  'postgres': 'docs/architecture/data-model.md',
  'backend': 'docs/backend/README.md',
  'consent-service': 'docs/consent-service/README.md',
  'billing-service': 'docs/billing/billing-service-api.md',
  'edu-search-service': 'docs/api/edu-search-seeds-api.md',
  'dsms-gateway': 'docs/dsms/README.md',
  'pca-platform': 'docs/api/pca-platform-api.md',
  'matrix-synapse': 'docs/matrix/README.md',
  'jitsi': 'docs/jitsi/README.md',
  'mailpit': 'docs/guides/email-and-auth-testing.md',
  'llm-gateway': 'docs/llm-platform/README.md',
  'website': 'docs/website/README.md',
  'opensearch': 'docs/llm-platform/guides/ollama-setup.md',
  'klausur': 'klausur-service/docs/RAG-Admin-Spec.md',
  'qdrant': 'klausur-service/docs/RAG-Admin-Spec.md',
  'minio': 'klausur-service/docs/RAG-Admin-Spec.md',
}

// Base path for project (used for VS Code links)
const PROJECT_BASE_PATH = '/Users/benjaminadmin/Projekte/breakpilot-pwa'

// ================= ARCHITECTURE DIAGRAM DATA =================

interface ServiceNode {
  id: string
  name: string
  type: 'frontend' | 'backend' | 'database' | 'cache' | 'search' | 'storage' | 'security' | 'communication' | 'ai' | 'erp'
  port?: string
  technology: string
  description: string
  connections?: string[]
}

// All services in the architecture (30+ services)
const ARCHITECTURE_SERVICES: ServiceNode[] = [
  // Frontends
  { id: 'website', name: 'Admin Frontend', type: 'frontend', port: '3000', technology: 'Next.js 15', description: 'Admin Dashboard, Edu-Search, DSMS, Consent', connections: ['backend', 'consent-service'] },
  { id: 'studio', name: 'Lehrer Studio', type: 'frontend', port: '8000', technology: 'FastAPI + JS', description: 'Klausur, School, Stundenplan Module', connections: ['backend'] },
  { id: 'creator', name: 'Creator Studio', type: 'frontend', port: '-', technology: 'Vue 3', description: 'Content Creation Interface', connections: ['backend'] },
  { id: 'policy-ui', name: 'Policy Vault UI', type: 'frontend', port: '4200', technology: 'Angular 17', description: 'Richtlinien-Verwaltung', connections: ['policy-api'] },

  // Python Backend
  { id: 'backend', name: 'Main Backend', type: 'backend', port: '8000', technology: 'Python FastAPI', description: 'Haupt-API, DevSecOps, Studio UI', connections: ['postgres', 'vault', 'redis', 'qdrant', 'minio'] },
  { id: 'klausur', name: 'Klausur Service', type: 'backend', port: '8086', technology: 'Python FastAPI', description: 'BYOEH Abitur-Klausurkorrektur, RAG Admin, NiBiS Ingestion', connections: ['postgres', 'minio', 'qdrant'] },

  // Go Microservices
  { id: 'consent-service', name: 'Consent Service', type: 'backend', port: '8081', technology: 'Go Gin', description: 'DSGVO Consent Management', connections: ['postgres'] },
  { id: 'school-service', name: 'School Service', type: 'backend', port: '8084', technology: 'Go Gin', description: 'Klausuren, Noten, Zeugnisse', connections: ['postgres'] },
  { id: 'billing-service', name: 'Billing Service', type: 'backend', port: '8083', technology: 'Go Gin', description: 'Stripe Integration', connections: ['postgres'] },
  { id: 'dsms-gateway', name: 'DSMS Gateway', type: 'backend', port: '8082', technology: 'Go', description: 'IPFS REST API', connections: ['ipfs'] },

  // Node.js Services
  { id: 'h5p', name: 'H5P Service', type: 'backend', port: '8085', technology: 'Node.js', description: 'Interaktive Inhalte', connections: ['postgres', 'minio'] },
  { id: 'policy-api', name: 'Policy Vault API', type: 'backend', port: '3001', technology: 'NestJS', description: 'Richtlinien-Verwaltung API', connections: ['postgres'] },

  // Databases
  { id: 'postgres', name: 'PostgreSQL', type: 'database', port: '5432', technology: 'PostgreSQL 16', description: 'Hauptdatenbank', connections: [] },
  { id: 'synapse-db', name: 'Synapse DB', type: 'database', port: '-', technology: 'PostgreSQL 16', description: 'Matrix Datenbank', connections: [] },
  { id: 'mariadb', name: 'MariaDB', type: 'database', port: '-', technology: 'MariaDB 10.6', description: 'ERPNext Datenbank', connections: [] },
  { id: 'mongodb', name: 'MongoDB', type: 'database', port: '27017', technology: 'MongoDB 7', description: 'LibreChat Datenbank', connections: [] },

  // Cache & Queue
  { id: 'redis', name: 'Redis', type: 'cache', port: '6379', technology: 'Redis Alpine', description: 'Cache & Sessions', connections: [] },

  // Search Engines
  { id: 'qdrant', name: 'Qdrant', type: 'search', port: '6333', technology: 'Qdrant 1.7', description: 'Vector DB - NiBiS EWH (7352 Chunks), BYOEH', connections: [] },
  { id: 'opensearch', name: 'OpenSearch', type: 'search', port: '9200', technology: 'OpenSearch 2.x', description: 'Volltext-Suche', connections: [] },
  { id: 'meilisearch', name: 'Meilisearch', type: 'search', port: '7700', technology: 'Meilisearch', description: 'Instant Search', connections: [] },

  // Storage
  { id: 'minio', name: 'MinIO', type: 'storage', port: '9000/9001', technology: 'MinIO', description: 'S3-kompatibel - RAG Dokumente, Landes/Lehrer-Daten', connections: [] },
  { id: 'ipfs', name: 'IPFS (Kubo)', type: 'storage', port: '5001', technology: 'IPFS 0.24', description: 'Dezentral', connections: [] },

  // Security
  { id: 'vault', name: 'Vault', type: 'security', port: '8200', technology: 'HashiCorp Vault', description: 'Secrets Management', connections: [] },
  { id: 'keycloak', name: 'Keycloak', type: 'security', port: '8180', technology: 'Keycloak 23', description: 'SSO/OIDC', connections: ['postgres'] },

  // Communication
  { id: 'synapse', name: 'Matrix Synapse', type: 'communication', port: '8008', technology: 'Matrix', description: 'E2EE Messenger', connections: ['synapse-db'] },
  { id: 'jitsi', name: 'Jitsi Meet', type: 'communication', port: '8443', technology: 'Jitsi', description: 'Videokonferenz', connections: [] },

  // AI/LLM
  { id: 'librechat', name: 'LibreChat', type: 'ai', port: '3080', technology: 'LibreChat', description: 'Multi-LLM Chat', connections: ['mongodb', 'qdrant'] },
  { id: 'ragflow', name: 'RAGFlow', type: 'ai', port: '9380', technology: 'RAGFlow', description: 'RAG Pipeline', connections: ['qdrant', 'opensearch'] },

  // ERP
  { id: 'erpnext', name: 'ERPNext', type: 'erp', port: '8090', technology: 'ERPNext v15', description: 'Open Source ERP', connections: ['mariadb', 'redis'] },
]

// Architecture layers
const LAYERS = [
  { id: 'presentation', name: 'Presentation Layer', description: 'User Interfaces & Frontends', types: ['frontend'] },
  { id: 'application', name: 'Application Layer', description: 'Business Logic & APIs', types: ['backend'] },
  { id: 'data', name: 'Data Layer', description: 'Databases, Cache & Search', types: ['database', 'cache', 'search'] },
  { id: 'infrastructure', name: 'Infrastructure Layer', description: 'Storage, Security & Communication', types: ['storage', 'security', 'communication', 'ai', 'erp'] },
]

const getArchTypeColor = (type: ServiceNode['type']) => {
  switch (type) {
    case 'frontend': return { bg: 'bg-blue-500', border: 'border-blue-600', text: 'text-blue-800', light: 'bg-blue-50' }
    case 'backend': return { bg: 'bg-green-500', border: 'border-green-600', text: 'text-green-800', light: 'bg-green-50' }
    case 'database': return { bg: 'bg-purple-500', border: 'border-purple-600', text: 'text-purple-800', light: 'bg-purple-50' }
    case 'cache': return { bg: 'bg-cyan-500', border: 'border-cyan-600', text: 'text-cyan-800', light: 'bg-cyan-50' }
    case 'search': return { bg: 'bg-pink-500', border: 'border-pink-600', text: 'text-pink-800', light: 'bg-pink-50' }
    case 'storage': return { bg: 'bg-orange-500', border: 'border-orange-600', text: 'text-orange-800', light: 'bg-orange-50' }
    case 'security': return { bg: 'bg-red-500', border: 'border-red-600', text: 'text-red-800', light: 'bg-red-50' }
    case 'communication': return { bg: 'bg-yellow-500', border: 'border-yellow-600', text: 'text-yellow-800', light: 'bg-yellow-50' }
    case 'ai': return { bg: 'bg-violet-500', border: 'border-violet-600', text: 'text-violet-800', light: 'bg-violet-50' }
    case 'erp': return { bg: 'bg-indigo-500', border: 'border-indigo-600', text: 'text-indigo-800', light: 'bg-indigo-50' }
    default: return { bg: 'bg-gray-500', border: 'border-gray-600', text: 'text-gray-800', light: 'bg-gray-50' }
  }
}

const getArchTypeLabel = (type: ServiceNode['type']) => {
  switch (type) {
    case 'frontend': return 'Frontend'
    case 'backend': return 'Backend'
    case 'database': return 'Datenbank'
    case 'cache': return 'Cache'
    case 'search': return 'Suche'
    case 'storage': return 'Speicher'
    case 'security': return 'Sicherheit'
    case 'communication': return 'Kommunikation'
    case 'ai': return 'KI/LLM'
    case 'erp': return 'ERP'
    default: return type
  }
}

// ================= API SERVICES DATA =================

// Service definitions with ports, technologies, and API info
const services = [
  {
    id: 'postgres',
    name: 'PostgreSQL',
    type: 'database',
    port: 5432,
    container: 'breakpilot-pwa-postgres',
    description: 'Zentrale Datenbank für alle Services',
    purpose: 'Persistente Datenspeicherung für Benutzer, Dokumente, Consents und alle Anwendungsdaten mit pgvector für Embedding-Suche.',
    tech: ['PostgreSQL 15', 'pgvector'],
    healthEndpoint: null,
    endpoints: [],
    envVars: ['POSTGRES_USER', 'POSTGRES_PASSWORD', 'POSTGRES_DB'],
  },
  {
    id: 'backend',
    name: 'Python Backend',
    type: 'backend',
    port: 8000,
    container: 'breakpilot-pwa-backend',
    description: 'FastAPI Backend mit AI-Integration und GDPR-Export',
    purpose: 'Zentrale API-Schicht für das Studio-Frontend mit AI-gestützter Arbeitsblatt-Generierung, Multi-LLM-Integration und DSGVO-konformem Datenexport.',
    tech: ['Python 3.11', 'FastAPI', 'SQLAlchemy', 'Pydantic'],
    healthEndpoint: '/health',
    endpoints: [
      { method: 'GET', path: '/api/v1/health', description: 'Health Check' },
      { method: 'POST', path: '/api/v1/chat', description: 'AI Chat Endpoint' },
      { method: 'GET', path: '/api/v1/gdpr/export', description: 'DSGVO Datenexport' },
      { method: 'POST', path: '/api/v1/seeds', description: 'Edu Search Seeds' },
    ],
    envVars: ['DATABASE_URL', 'JWT_SECRET', 'OPENAI_API_KEY', 'ANTHROPIC_API_KEY'],
  },
  {
    id: 'consent-service',
    name: 'Consent Service',
    type: 'backend',
    port: 8081,
    container: 'breakpilot-pwa-consent-service',
    description: 'Go-basierter Consent-Management-Service',
    purpose: 'DSGVO-konforme Einwilligungsverwaltung mit Versionierung, Audit-Trail und rechtssicherer Dokumentenspeicherung für Schulen.',
    tech: ['Go 1.21', 'Gin', 'GORM', 'JWT'],
    healthEndpoint: '/health',
    endpoints: [
      { method: 'GET', path: '/api/v1/health', description: 'Health Check' },
      { method: 'GET', path: '/api/v1/consent/check', description: 'Consent Status pruefen' },
      { method: 'POST', path: '/api/v1/consent/grant', description: 'Consent erteilen' },
      { method: 'GET', path: '/api/v1/documents', description: 'Rechtsdokumente abrufen' },
      { method: 'GET', path: '/api/v1/communication/status', description: 'Matrix/Jitsi Status' },
      { method: 'POST', path: '/api/v1/communication/rooms', description: 'Matrix Raum erstellen' },
      { method: 'POST', path: '/api/v1/communication/meetings', description: 'Jitsi Meeting erstellen' },
    ],
    envVars: ['DATABASE_URL', 'JWT_SECRET', 'PORT', 'MATRIX_HOMESERVER_URL', 'JITSI_BASE_URL'],
  },
  {
    id: 'billing-service',
    name: 'Billing Service',
    type: 'backend',
    port: 8083,
    container: 'breakpilot-pwa-billing-service',
    description: 'Stripe-basiertes Billing mit Trial & Subscription',
    purpose: 'Monetarisierung der Plattform mit 7-Tage-Trial, gestuften Abo-Modellen (Basic/Standard/Premium) und automatischer Nutzungslimitierung.',
    tech: ['Go 1.21', 'Gin', 'Stripe API', 'pgx'],
    healthEndpoint: '/health',
    endpoints: [
      { method: 'GET', path: '/api/v1/billing/status', description: 'Subscription Status' },
      { method: 'POST', path: '/api/v1/billing/trial/start', description: 'Trial starten' },
      { method: 'POST', path: '/api/v1/billing/webhook', description: 'Stripe Webhooks' },
    ],
    envVars: ['DATABASE_URL', 'STRIPE_SECRET_KEY', 'STRIPE_WEBHOOK_SECRET'],
  },
  {
    id: 'edu-search-service',
    name: 'Edu Search Service',
    type: 'backend',
    port: 8086,
    container: 'breakpilot-edu-search',
    description: 'Bildungsquellen-Crawler mit OpenSearch-Integration',
    purpose: 'Automatisches Crawlen und Indexieren von Bildungsressourcen (OER, Lehrpläne, Schulbücher) für RAG-gestützte Arbeitsblatterstellung.',
    tech: ['Go 1.23', 'Gin', 'OpenSearch', 'Colly'],
    healthEndpoint: '/v1/health',
    endpoints: [
      { method: 'GET', path: '/v1/health', description: 'Health Check' },
      { method: 'GET', path: '/v1/search', description: 'Dokumentensuche' },
      { method: 'POST', path: '/v1/crawl/start', description: 'Crawler starten' },
      { method: 'GET', path: '/api/v1/staff/stats', description: 'Staff Statistiken' },
      { method: 'POST', path: '/api/v1/admin/crawl/staff', description: 'Staff Crawl starten' },
    ],
    envVars: ['OPENSEARCH_URL', 'DB_HOST', 'DB_USER', 'DB_PASSWORD'],
  },
  {
    id: 'dsms-gateway',
    name: 'DSMS Gateway',
    type: 'backend',
    port: 8082,
    container: 'breakpilot-pwa-dsms-gateway',
    description: 'Datenschutz-Management Gateway',
    purpose: 'Dezentrale Dokumentenspeicherung mit IPFS-Integration für manipulationssichere Audit-Logs und Rechtsdokumente.',
    tech: ['Go 1.21', 'Gin', 'IPFS'],
    healthEndpoint: '/health',
    endpoints: [
      { method: 'GET', path: '/health', description: 'Health Check' },
      { method: 'POST', path: '/api/v1/documents', description: 'Dokument speichern' },
    ],
    envVars: ['IPFS_URL', 'DATABASE_URL'],
  },
  {
    id: 'pca-platform',
    name: 'PCA Platform',
    type: 'backend',
    port: 8084,
    container: 'breakpilot-pca-platform',
    description: 'Payment Card Adapter für Taschengeld-Management',
    purpose: 'Fintech-Integration für Schüler-Taschengeld mit virtuellen Karten, Spending-Limits und Echtzeit-Transaktionsverfolgung für Eltern.',
    tech: ['Go 1.21', 'Gin', 'Stripe Issuing', 'pgx'],
    healthEndpoint: '/health',
    endpoints: [
      { method: 'GET', path: '/api/v1/health', description: 'Health Check' },
      { method: 'POST', path: '/api/v1/cards/create', description: 'Virtuelle Karte erstellen' },
      { method: 'GET', path: '/api/v1/transactions', description: 'Transaktionen abrufen' },
      { method: 'POST', path: '/api/v1/wallet/topup', description: 'Wallet aufladen' },
    ],
    envVars: ['DATABASE_URL', 'STRIPE_SECRET_KEY', 'STRIPE_WEBHOOK_SECRET'],
  },
  {
    id: 'matrix-synapse',
    name: 'Matrix Synapse',
    type: 'communication',
    port: 8448,
    container: 'breakpilot-synapse',
    description: 'Ende-zu-Ende verschlüsselter Messenger',
    purpose: 'Sichere Kommunikation zwischen Lehrern und Eltern mit E2EE, Raum-Management und DSGVO-konformer Nachrichtenspeicherung.',
    tech: ['Matrix Protocol', 'Synapse', 'PostgreSQL'],
    healthEndpoint: '/_matrix/client/versions',
    endpoints: [
      { method: 'GET', path: '/_matrix/client/versions', description: 'Client Versions' },
      { method: 'POST', path: '/_matrix/client/v3/login', description: 'Matrix Login' },
      { method: 'POST', path: '/_matrix/client/v3/createRoom', description: 'Raum erstellen' },
    ],
    envVars: ['SYNAPSE_SERVER_NAME', 'POSTGRES_HOST', 'SYNAPSE_REGISTRATION_SHARED_SECRET'],
  },
  {
    id: 'jitsi',
    name: 'Jitsi Meet',
    type: 'communication',
    port: 8443,
    container: 'breakpilot-jitsi',
    description: 'Videokonferenz-Plattform',
    purpose: 'Virtuelle Elterngespräche und Klassenkonferenzen mit optionaler JWT-Authentifizierung und Embedded-Integration ins Studio.',
    tech: ['Jitsi Meet', 'Prosody', 'JWT Auth'],
    healthEndpoint: '/http-bind',
    endpoints: [
      { method: 'GET', path: '/http-bind', description: 'BOSH Endpoint' },
      { method: 'GET', path: '/config.js', description: 'Jitsi Konfiguration' },
    ],
    envVars: ['JITSI_APP_ID', 'JITSI_APP_SECRET', 'PUBLIC_URL'],
  },
  {
    id: 'mailpit',
    name: 'Mailpit (SMTP)',
    type: 'infrastructure',
    port: 1025,
    container: 'breakpilot-pwa-mailpit',
    description: 'E-Mail-Testing und Vorschau',
    purpose: 'Lokaler SMTP-Server für E-Mail-Vorschau im Development mit Web-UI auf Port 8025 zur Überprüfung von Lifecycle-Emails.',
    tech: ['Mailpit', 'SMTP', 'Web UI'],
    healthEndpoint: null,
    endpoints: [
      { method: 'GET', path: '/', description: 'Web UI (Port 8025)' },
    ],
    envVars: ['MP_SMTP_AUTH', 'MP_SMTP_AUTH_ALLOW_INSECURE'],
  },
  {
    id: 'llm-gateway',
    name: 'LLM Gateway',
    type: 'backend',
    port: 8085,
    container: 'breakpilot-llm-gateway',
    description: 'Multi-Provider LLM Router',
    purpose: 'Einheitliche API für verschiedene LLM-Anbieter (OpenAI, Anthropic, Ollama) mit Provider-Switching, Token-Tracking und Fallback-Logik.',
    tech: ['Python 3.11', 'FastAPI', 'LiteLLM'],
    healthEndpoint: '/health',
    endpoints: [
      { method: 'GET', path: '/health', description: 'Health Check' },
      { method: 'POST', path: '/v1/chat/completions', description: 'Chat Completion (OpenAI-kompatibel)' },
      { method: 'GET', path: '/v1/models', description: 'Verfügbare Modelle' },
    ],
    envVars: ['OPENAI_API_KEY', 'ANTHROPIC_API_KEY', 'OLLAMA_BASE_URL'],
  },
  {
    id: 'website',
    name: 'Website (Next.js)',
    type: 'frontend',
    port: 3000,
    container: 'breakpilot-pwa-website',
    description: 'Next.js 14 Frontend mit App Router',
    purpose: 'Admin-Dashboard, Landing-Page und API-Routing für das Next.js Frontend mit Server Components und Edge Functions.',
    tech: ['Next.js 14', 'React 18', 'TypeScript', 'Tailwind CSS'],
    healthEndpoint: null,
    endpoints: [
      { method: 'GET', path: '/', description: 'Landing Page' },
      { method: 'GET', path: '/admin', description: 'Admin Dashboard' },
      { method: 'GET', path: '/app', description: 'Benutzer-App (redirect to :8000)' },
    ],
    envVars: ['NEXT_PUBLIC_API_URL', 'NEXTAUTH_SECRET'],
  },
  {
    id: 'opensearch',
    name: 'OpenSearch',
    type: 'database',
    port: 9200,
    container: 'breakpilot-opensearch',
    description: 'Volltextsuche und Vektorsuche',
    purpose: 'Hochperformante Suche in Bildungsressourcen mit k-NN für semantische Ähnlichkeitssuche und BM25 für Keyword-Matching.',
    tech: ['OpenSearch 2.11', 'k-NN Plugin'],
    healthEndpoint: '/',
    endpoints: [
      { method: 'GET', path: '/_cluster/health', description: 'Cluster Health' },
      { method: 'POST', path: '/bp_documents_v1/_search', description: 'Dokumentensuche' },
    ],
    envVars: ['OPENSEARCH_JAVA_OPTS'],
  },
]

// Architecture diagram as ASCII art (will be styled)
const architectureAscii = `
                                    BreakPilot Platform Architecture

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                         FRONTEND LAYER                                       │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────┐                              ┌─────────────────────┐               │
│  │   Website (3000)    │                              │  Studio App (8000)  │               │
│  │   Next.js 14        │                              │  FastAPI + Jinja    │               │
│  │   Admin Dashboard   │◄────────────────────────────►│  Arbeitsblatt UI    │               │
│  └─────────────────────┘                              └─────────────────────┘               │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
                     │                                              │
                     ▼                                              ▼
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                         BACKEND LAYER                                        │
├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐               │
│ │ Consent (8081)│ │ │ Billing (8083)│ │ │ PCA (8084)    │ │ │ LLM GW (8085) │               │
│ │ Go/Gin        │ │ │ Go/Stripe     │ │ │ Go/Stripe     │ │ │ Python/LiteLLM│               │
│ │ DSGVO-Consent │ │ │ Subscriptions │ │ │ Taschengeld   │ │ │ Multi-Provider│               │
│ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │ └───────────────┘               │
│         │         │         │         │         │         │                                 │
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐               │
│ │ DSMS (8082)   │ │ │ EduSearch     │ │ │ StaffSearch   │ │ │ Alerts Agent  │               │
│ │ Go/IPFS       │ │ │ (8086) Go     │ │ │ Go/Colly      │ │ │ Python/Tavily │               │
│ │ Audit Storage │ │ │ Bildungs-RAG  │ │ │ Lehrersuche   │ │ │ News-Alerts   │               │
│ └───────────────┘ │ └───────┬───────┘ │ └───────────────┘ │ └───────────────┘               │
└───────────────────┴─────────┼─────────┴───────────────────┴─────────────────────────────────┘
                              │
┌─────────────────────────────┼───────────────────────────────────────────────────────────────┐
│                          DATA LAYER                                                          │
├───────────────────┬─────────┼─────────┬─────────────────────────────────────────────────────┤
│ ┌───────────────┐ │ ┌───────┴───────┐ │                                                     │
│ │ PostgreSQL    │ │ │ OpenSearch    │ │                                                     │
│ │ (5432)        │◄┼►│ (9200)        │ │                                                     │
│ │ + pgvector    │ │ │ + k-NN Plugin │ │                                                     │
│ └───────────────┘ │ └───────────────┘ │                                                     │
└───────────────────┴───────────────────┴─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                    COMMUNICATION LAYER                                       │
├───────────────────┬───────────────────┬─────────────────────────────────────────────────────┤
│ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐                                   │
│ │ Matrix (8448) │ │ │ Jitsi (8443)  │ │ │ Mailpit (1025)│                                   │
│ │ E2EE Messenger│ │ │ Video Calls   │ │ │ Email Testing │                                   │
│ │ Lehrer-Eltern │ │ │ Elterngespräch│ │ │ SMTP + Web UI │                                   │
│ └───────────────┘ │ └───────────────┘ │ └───────────────┘                                   │
└───────────────────┴───────────────────┴─────────────────────────────────────────────────────┘
`

type TabType = 'overview' | 'services' | 'api' | 'docker' | 'testing'

export default function DeveloperDocsPage() {
  const [activeTab, setActiveTab] = useState<TabType>('overview')
  const [selectedService, setSelectedService] = useState<string | null>(null)
  const [copiedEndpoint, setCopiedEndpoint] = useState<string | null>(null)
  // Architecture-specific state
  const [selectedArchService, setSelectedArchService] = useState<ServiceNode | null>(null)
  const [activeLayer, setActiveLayer] = useState<string>('all')

  // Architecture helper functions
  const getServicesForLayer = (layer: typeof LAYERS[0]) => {
    return ARCHITECTURE_SERVICES.filter(s => layer.types.includes(s.type))
  }

  const archStats = {
    total: ARCHITECTURE_SERVICES.length,
    frontends: ARCHITECTURE_SERVICES.filter(s => s.type === 'frontend').length,
    backends: ARCHITECTURE_SERVICES.filter(s => s.type === 'backend').length,
    databases: ARCHITECTURE_SERVICES.filter(s => s.type === 'database').length,
    infrastructure: ARCHITECTURE_SERVICES.filter(s => ['cache', 'search', 'storage', 'security', 'communication', 'ai', 'erp'].includes(s.type)).length,
  }

  const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text)
    setCopiedEndpoint(id)
    setTimeout(() => setCopiedEndpoint(null), 2000)
  }

  const getServiceTypeColor = (type: string) => {
    switch (type) {
      case 'frontend': return 'bg-blue-100 text-blue-800'
      case 'backend': return 'bg-green-100 text-green-800'
      case 'database': return 'bg-purple-100 text-purple-800'
      case 'communication': return 'bg-orange-100 text-orange-800'
      case 'infrastructure': return 'bg-slate-200 text-slate-700'
      default: return 'bg-gray-100 text-gray-800'
    }
  }

  const getMethodColor = (method: string) => {
    switch (method) {
      case 'GET': return 'bg-emerald-100 text-emerald-700'
      case 'POST': return 'bg-blue-100 text-blue-700'
      case 'PUT': return 'bg-amber-100 text-amber-700'
      case 'DELETE': return 'bg-red-100 text-red-700'
      default: return 'bg-gray-100 text-gray-700'
    }
  }

  return (
    <AdminLayout
      title="Developer Documentation"
      description="API Reference, Architektur und Service-Dokumentation"
    >
      {/* Tab Navigation */}
      <div className="border-b border-slate-200 mb-6">
        <nav className="flex gap-6">
          {[
            { id: 'overview', label: 'Architektur' },
            { id: 'services', label: 'Services' },
            { id: 'api', label: 'API Reference' },
            { id: 'docker', label: 'Docker' },
            { id: 'testing', label: 'Testing' },
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as TabType)}
              className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-primary-600 text-primary-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {/* Overview Tab - Interactive Architecture */}
      {activeTab === 'overview' && (
        <div className="space-y-6">
          {/* Stats */}
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div className="bg-white rounded-lg shadow p-4">
              <div className="text-3xl font-bold text-slate-800">{archStats.total}</div>
              <div className="text-sm text-slate-500">Services Total</div>
            </div>
            <div className="bg-white rounded-lg shadow p-4">
              <div className="text-3xl font-bold text-blue-600">{archStats.frontends}</div>
              <div className="text-sm text-slate-500">Frontends</div>
            </div>
            <div className="bg-white rounded-lg shadow p-4">
              <div className="text-3xl font-bold text-green-600">{archStats.backends}</div>
              <div className="text-sm text-slate-500">Backends</div>
            </div>
            <div className="bg-white rounded-lg shadow p-4">
              <div className="text-3xl font-bold text-purple-600">{archStats.databases}</div>
              <div className="text-sm text-slate-500">Datenbanken</div>
            </div>
            <div className="bg-white rounded-lg shadow p-4">
              <div className="text-3xl font-bold text-orange-600">{archStats.infrastructure}</div>
              <div className="text-sm text-slate-500">Infrastruktur</div>
            </div>
          </div>

          {/* ASCII Architecture Diagram with Arrows */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-slate-800 mb-4">Datenfluss-Diagramm</h2>
            <div className="bg-slate-900 rounded-lg p-6 overflow-x-auto">
              <pre className="text-green-400 font-mono text-xs whitespace-pre">{`
                                    BreakPilot Platform - Datenfluss

    ┌─────────────────────────────────────────────────────────────────────────────────────────────┐
    │                                       FRONTEND LAYER                                         │
    ├─────────────────────────────────────────────────────────────────────────────────────────────┤
    │  ┌─────────────────────┐    ┌─────────────────────┐    ┌─────────────────────┐              │
    │  │   Admin Frontend    │    │    Lehrer Studio    │    │   Policy Vault UI   │              │
    │  │   Next.js :3000     │    │    FastAPI :8000    │    │    Angular :4200    │              │
    │  └──────────┬──────────┘    └──────────┬──────────┘    └──────────┬──────────┘              │
    └─────────────┼───────────────────────────┼───────────────────────────┼────────────────────────┘
                  │                           │                           │
                  ▼                           ▼                           ▼
    ┌─────────────────────────────────────────────────────────────────────────────────────────────┐
    │                                      BACKEND LAYER                                           │
    ├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
    │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐               │
    │ │ Consent :8081 │ │ │ Billing :8083 │ │ │ School :8084  │ │ │ DSMS GW :8082 │               │
    │ │   Go/Gin      │ │ │   Go/Stripe   │ │ │   Go/Gin      │ │ │   Go/IPFS     │               │
    │ │ DSGVO Consent │ │ │ Subscriptions │ │ │ Noten/Zeugnis │ │ │ Audit Storage │               │
    │ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘               │
    │         │         │         │         │         │         │         │                       │
    │         ▼         │         ▼         │         ▼         │         ▼                       │
    │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐               │
    │ │ Klausur :8086 │ │ │ H5P :8085     │ │ │ Policy API    │ │ │ LLM Services  │               │
    │ │ Python/BYOEH  │ │ │ Node.js       │ │ │ NestJS :3001  │ │ │ LibreChat/RAG │               │
    │ │ Abiturkorrek. │ │ │ Interaktiv    │ │ │ Richtlinien   │ │ │ KI-Assistenz  │               │
    │ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘ │ └───────┬───────┘               │
    └─────────┼─────────┴─────────┼─────────┴─────────┼─────────┴─────────┼───────────────────────┘
              │                   │                   │                   │
              ▼                   ▼                   ▼                   ▼
    ┌─────────────────────────────────────────────────────────────────────────────────────────────┐
    │                                        DATA LAYER                                            │
    ├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
    │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐               │
    │ │ PostgreSQL    │◄┼►│ Redis         │ │ │ Qdrant        │ │ │ OpenSearch    │               │
    │ │ :5432         │ │ │ :6379 Cache   │ │ │ :6333 Vector  │ │ │ :9200 Search  │               │
    │ │ Hauptdaten    │ │ │ Sessions      │ │ │ RAG Embeddings│ │ │ Volltext      │               │
    │ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │ └───────────────┘               │
    └───────────────────┴───────────────────┴───────────────────┴─────────────────────────────────┘
                                                    │
                                                    ▼
    ┌─────────────────────────────────────────────────────────────────────────────────────────────┐
    │                                   INFRASTRUCTURE LAYER                                       │
    ├───────────────────┬───────────────────┬───────────────────┬─────────────────────────────────┤
    │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐               │
    │ │ Vault :8200   │ │ │ Keycloak :8180│ │ │ MinIO :9000   │ │ │ IPFS :5001    │               │
    │ │ Secrets Mgmt  │ │ │ SSO/OIDC Auth │ │ │ S3 Storage    │ │ │ Dezentral     │               │
    │ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │ └───────────────┘               │
    │ ┌───────────────┐ │ ┌───────────────┐ │ ┌───────────────┐ │                                 │
    │ │ Matrix :8008  │ │ │ Jitsi :8443   │ │ │ ERPNext :8090 │ │                                 │
    │ │ E2EE Chat     │ │ │ Video Calls   │ │ │ Open ERP      │ │                                 │
    │ └───────────────┘ │ └───────────────┘ │ └───────────────┘ │                                 │
    └───────────────────┴───────────────────┴───────────────────┴─────────────────────────────────┘

    ═══════════════════════════════════════════════════════════════════════════════════════════════
    Legende:  ──► Datenfluss   ◄──► Bidirektional   │ Layer-Grenze   ┌─┐ Service-Box
    ═══════════════════════════════════════════════════════════════════════════════════════════════
`}</pre>
            </div>
          </div>

          {/* Layer Filter */}
          <div className="bg-white rounded-lg shadow p-4">
            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => setActiveLayer('all')}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  activeLayer === 'all'
                    ? 'bg-primary-600 text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                Alle Layer
              </button>
              {LAYERS.map((layer) => (
                <button
                  key={layer.id}
                  onClick={() => setActiveLayer(layer.id)}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    activeLayer === layer.id
                      ? 'bg-primary-600 text-white'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  {layer.name}
                </button>
              ))}
            </div>
          </div>

          {/* Architecture Diagram - Layered View */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-slate-800 mb-6">System-Architektur Diagramm</h2>

            <div className="space-y-6">
              {LAYERS.map((layer) => {
                const layerServices = getServicesForLayer(layer)
                if (activeLayer !== 'all' && activeLayer !== layer.id) return null

                return (
                  <div key={layer.id} className="border-2 border-dashed border-slate-200 rounded-xl p-4">
                    <div className="flex items-center gap-3 mb-4">
                      <h3 className="text-lg font-semibold text-slate-700">{layer.name}</h3>
                      <span className="text-sm text-slate-500">- {layer.description}</span>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
                      {layerServices.map((service) => {
                        const colors = getArchTypeColor(service.type)
                        const isSelected = selectedArchService?.id === service.id

                        return (
                          <div
                            key={service.id}
                            onClick={() => setSelectedArchService(isSelected ? null : service)}
                            className={`cursor-pointer rounded-lg border-2 p-3 transition-all ${
                              isSelected
                                ? `${colors.border} ${colors.light} shadow-lg scale-105`
                                : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow'
                            }`}
                          >
                            <div className="flex items-start justify-between mb-2">
                              <div className={`w-3 h-3 rounded-full ${colors.bg}`}></div>
                              {service.port && service.port !== '-' && (
                                <span className="text-xs font-mono text-slate-500">:{service.port}</span>
                              )}
                            </div>
                            <h4 className="font-medium text-sm text-slate-800">{service.name}</h4>
                            <p className="text-xs text-slate-500">{service.technology}</p>
                            <p className="text-xs text-slate-600 mt-2 line-clamp-2">{service.description}</p>
                            {service.connections && service.connections.length > 0 && (
                              <div className="mt-2 flex items-center gap-1 text-xs text-slate-400">
                                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                                </svg>
                                {service.connections.length} Verbindung{service.connections.length > 1 ? 'en' : ''}
                              </div>
                            )}
                          </div>
                        )
                      })}
                    </div>
                  </div>
                )
              })}
            </div>
          </div>

          {/* Service Detail Panel */}
          {selectedArchService && (
            <div className="bg-white rounded-lg shadow p-6">
              <div className="flex items-start justify-between mb-4">
                <div>
                  <h2 className="text-xl font-bold text-slate-800">{selectedArchService.name}</h2>
                  <p className="text-slate-600">{selectedArchService.description}</p>
                </div>
                <button
                  onClick={() => setSelectedArchService(null)}
                  className="p-2 hover:bg-slate-100 rounded-lg"
                >
                  <svg className="w-5 h-5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-slate-50 rounded-lg p-3">
                  <div className="text-xs text-slate-500 uppercase">Typ</div>
                  <div className={`text-sm font-medium ${getArchTypeColor(selectedArchService.type).text}`}>
                    {getArchTypeLabel(selectedArchService.type)}
                  </div>
                </div>
                <div className="bg-slate-50 rounded-lg p-3">
                  <div className="text-xs text-slate-500 uppercase">Technologie</div>
                  <div className="text-sm font-medium text-slate-800">{selectedArchService.technology}</div>
                </div>
                <div className="bg-slate-50 rounded-lg p-3">
                  <div className="text-xs text-slate-500 uppercase">Port</div>
                  <div className="text-sm font-mono font-medium text-slate-800">
                    {selectedArchService.port || '-'}
                  </div>
                </div>
                <div className="bg-slate-50 rounded-lg p-3">
                  <div className="text-xs text-slate-500 uppercase">Verbindungen</div>
                  <div className="text-sm font-medium text-slate-800">
                    {selectedArchService.connections?.length || 0} Services
                  </div>
                </div>
              </div>

              {selectedArchService.connections && selectedArchService.connections.length > 0 && (
                <div className="mt-4">
                  <h4 className="text-sm font-medium text-slate-700 mb-2">Verbunden mit:</h4>
                  <div className="flex flex-wrap gap-2">
                    {selectedArchService.connections.map((connId) => {
                      const connService = ARCHITECTURE_SERVICES.find(s => s.id === connId)
                      if (!connService) return null
                      const colors = getArchTypeColor(connService.type)
                      return (
                        <button
                          key={connId}
                          onClick={() => setSelectedArchService(connService)}
                          className={`px-3 py-1 rounded-full text-sm ${colors.light} ${colors.text} hover:opacity-80`}
                        >
                          {connService.name}
                        </button>
                      )
                    })}
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Legend */}
          <div className="bg-white rounded-lg shadow p-4">
            <h3 className="text-sm font-medium text-slate-700 mb-3">Legende</h3>
            <div className="flex flex-wrap gap-4">
              {(['frontend', 'backend', 'database', 'cache', 'search', 'storage', 'security', 'communication', 'ai', 'erp'] as const).map((type) => {
                const colors = getArchTypeColor(type)
                return (
                  <div key={type} className="flex items-center gap-2">
                    <div className={`w-3 h-3 rounded-full ${colors.bg}`}></div>
                    <span className="text-sm text-slate-600">{getArchTypeLabel(type)}</span>
                  </div>
                )
              })}
            </div>
          </div>

          {/* Technical Details Section */}
          <div className="bg-white rounded-lg shadow p-6">
            <h2 className="text-xl font-bold text-slate-800 mb-4">Technische Details</h2>

            <div className="grid md:grid-cols-2 gap-6">
              {/* Data Flow */}
              <div>
                <h3 className="text-lg font-semibold text-slate-700 mb-3">Datenfluss</h3>
                <div className="space-y-2 text-sm text-slate-600">
                  <p><strong>1. Request:</strong> Browser &rarr; Next.js/FastAPI Frontend</p>
                  <p><strong>2. API:</strong> Frontend &rarr; Python Backend / Go Microservices</p>
                  <p><strong>3. Auth:</strong> Keycloak/Vault fuer SSO & Secrets</p>
                  <p><strong>4. Data:</strong> PostgreSQL (ACID) / Redis (Cache)</p>
                  <p><strong>5. Search:</strong> Qdrant (Vector) / Meilisearch (Fulltext)</p>
                  <p><strong>6. Storage:</strong> MinIO (Files) / IPFS (Dezentral)</p>
                </div>
              </div>

              {/* Security */}
              <div>
                <h3 className="text-lg font-semibold text-slate-700 mb-3">Sicherheit</h3>
                <div className="space-y-2 text-sm text-slate-600">
                  <p><strong>Auth:</strong> JWT + Keycloak OIDC</p>
                  <p><strong>Secrets:</strong> HashiCorp Vault (encrypted)</p>
                  <p><strong>Communication:</strong> Matrix E2EE, TLS everywhere</p>
                  <p><strong>DSGVO:</strong> Consent Service fuer Einwilligungen</p>
                  <p><strong>DevSecOps:</strong> Trivy, Gitleaks, Semgrep, Bandit</p>
                  <p><strong>SBOM:</strong> CycloneDX fuer alle Komponenten</p>
                </div>
              </div>

              {/* Languages */}
              <div>
                <h3 className="text-lg font-semibold text-slate-700 mb-3">Programmiersprachen</h3>
                <div className="flex flex-wrap gap-2">
                  <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Python 3.12</span>
                  <span className="px-3 py-1 bg-sky-100 text-sky-700 rounded-full text-sm">Go 1.21</span>
                  <span className="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm">TypeScript 5.x</span>
                  <span className="px-3 py-1 bg-lime-100 text-lime-700 rounded-full text-sm">JavaScript ES2022</span>
                </div>
              </div>

              {/* Frameworks */}
              <div>
                <h3 className="text-lg font-semibold text-slate-700 mb-3">Frameworks</h3>
                <div className="flex flex-wrap gap-2">
                  <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Next.js 15</span>
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">FastAPI</span>
                  <span className="px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm">Gin (Go)</span>
                  <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Vue 3</span>
                  <span className="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm">Angular 17</span>
                  <span className="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm">NestJS</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Services Tab */}
      {activeTab === 'services' && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {services.map((service) => (
            <div
              key={service.id}
              className={`bg-white rounded-xl border border-slate-200 p-5 cursor-pointer transition-all hover:shadow-md ${
                selectedService === service.id ? 'ring-2 ring-primary-600' : ''
              }`}
              onClick={() => setSelectedService(selectedService === service.id ? null : service.id)}
            >
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="font-semibold text-slate-900">{service.name}</h3>
                  <span className={`text-xs px-2 py-0.5 rounded-full ${getServiceTypeColor(service.type)}`}>
                    {service.type}
                  </span>
                </div>
                <div className="text-right">
                  <div className="text-sm font-mono text-slate-600">:{service.port}</div>
                </div>
              </div>

              <p className="text-sm text-slate-600 mb-3">{service.description}</p>

              <div className="flex flex-wrap gap-1 mb-3">
                {service.tech.map((t) => (
                  <span key={t} className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">
                    {t}
                  </span>
                ))}
              </div>

              {selectedService === service.id && (
                <div className="mt-4 pt-4 border-t border-slate-200 space-y-2">
                  {/* Purpose/Warum dieser Service */}
                  {'purpose' in service && (
                    <div className="bg-primary-50 border border-primary-200 rounded-lg p-3 mb-3">
                      <div className="text-xs font-medium text-primary-700 mb-1">Warum dieser Service?</div>
                      <div className="text-sm text-primary-900">{(service as typeof service & {purpose: string}).purpose}</div>
                    </div>
                  )}
                  <div className="text-xs text-slate-500">Container: {service.container}</div>
                  {service.healthEndpoint && (
                    <div className="text-xs text-slate-500">
                      Health: <code className="bg-slate-100 px-1 rounded">localhost:{service.port}{service.healthEndpoint}</code>
                    </div>
                  )}
                  <div className="text-xs text-slate-500">
                    Endpoints: {service.endpoints.length}
                  </div>

                  {/* VS Code Link */}
                  {docPaths[service.id] && (
                    <a
                      href={`vscode://file/${PROJECT_BASE_PATH}/${docPaths[service.id]}`}
                      onClick={(e) => e.stopPropagation()}
                      className="mt-3 flex items-center gap-2 text-xs bg-blue-50 text-blue-700 px-3 py-2 rounded-lg hover:bg-blue-100 transition-colors"
                    >
                      <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"/>
                      </svg>
                      In VS Code oeffnen
                    </a>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* API Reference Tab */}
      {activeTab === 'api' && (
        <div className="space-y-6">
          {services.filter(s => s.endpoints.length > 0).map((service) => (
            <div key={service.id} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="px-6 py-4 bg-slate-50 border-b border-slate-200">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-semibold text-slate-900">{service.name}</h3>
                    <div className="text-sm text-slate-500">Base URL: http://localhost:{service.port}</div>
                  </div>
                  <span className={`text-xs px-2 py-0.5 rounded-full ${getServiceTypeColor(service.type)}`}>
                    {service.type}
                  </span>
                </div>
              </div>

              <div className="divide-y divide-slate-100">
                {service.endpoints.map((endpoint, idx) => {
                  const endpointId = `${service.id}-${idx}`
                  const curlCommand = `curl -X ${endpoint.method} http://localhost:${service.port}${endpoint.path}`

                  return (
                    <div key={idx} className="px-6 py-3 hover:bg-slate-50 transition-colors">
                      <div className="flex items-center gap-3">
                        <span className={`text-xs font-mono font-semibold px-2 py-1 rounded ${getMethodColor(endpoint.method)}`}>
                          {endpoint.method}
                        </span>
                        <code className="text-sm font-mono text-slate-700 flex-1">{endpoint.path}</code>
                        <button
                          onClick={() => copyToClipboard(curlCommand, endpointId)}
                          className="text-xs text-slate-400 hover:text-slate-600 transition-colors"
                          title="Copy curl command"
                        >
                          {copiedEndpoint === endpointId ? (
                            <span className="text-green-600">Copied!</span>
                          ) : (
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          )}
                        </button>
                      </div>
                      <div className="text-sm text-slate-500 mt-1 ml-14">{endpoint.description}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Docker Tab */}
      {activeTab === 'docker' && (
        <div className="space-y-6">
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Docker Compose Services</h2>

            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-slate-200">
                    <th className="text-left py-3 px-4 font-medium text-slate-700">Container</th>
                    <th className="text-left py-3 px-4 font-medium text-slate-700">Port</th>
                    <th className="text-left py-3 px-4 font-medium text-slate-700">Type</th>
                    <th className="text-left py-3 px-4 font-medium text-slate-700">Health Check</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {services.map((service) => (
                    <tr key={service.id} className="hover:bg-slate-50">
                      <td className="py-3 px-4">
                        <code className="text-sm bg-slate-100 px-2 py-0.5 rounded">{service.container}</code>
                      </td>
                      <td className="py-3 px-4 font-mono">{service.port}</td>
                      <td className="py-3 px-4">
                        <span className={`text-xs px-2 py-0.5 rounded-full ${getServiceTypeColor(service.type)}`}>
                          {service.type}
                        </span>
                      </td>
                      <td className="py-3 px-4">
                        {service.healthEndpoint ? (
                          <code className="text-xs bg-green-50 text-green-700 px-2 py-0.5 rounded">
                            {service.healthEndpoint}
                          </code>
                        ) : (
                          <span className="text-slate-400">-</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Common Commands */}
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Haeufige Befehle</h2>

            <div className="space-y-4">
              {[
                { label: 'Alle Services starten', cmd: 'docker compose up -d' },
                { label: 'Logs anzeigen', cmd: 'docker compose logs -f [service]' },
                { label: 'Service neu bauen', cmd: 'docker compose build [service] --no-cache' },
                { label: 'Container Status', cmd: 'docker ps --format "table {{.Names}}\\t{{.Status}}\\t{{.Ports}}"' },
                { label: 'In Container einloggen', cmd: 'docker exec -it [container] /bin/sh' },
              ].map((item, idx) => (
                <div key={idx} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg">
                  <div className="text-sm text-slate-600 w-40">{item.label}</div>
                  <code className="flex-1 text-sm font-mono bg-slate-900 text-green-400 px-3 py-2 rounded">
                    {item.cmd}
                  </code>
                  <button
                    onClick={() => copyToClipboard(item.cmd, `cmd-${idx}`)}
                    className="text-slate-400 hover:text-slate-600"
                  >
                    {copiedEndpoint === `cmd-${idx}` ? (
                      <span className="text-xs text-green-600">Copied!</span>
                    ) : (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                      </svg>
                    )}
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Environment Variables */}
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Wichtige Umgebungsvariablen</h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {services.filter(s => s.envVars.length > 0).map((service) => (
                <div key={service.id} className="p-4 bg-slate-50 rounded-lg">
                  <h4 className="font-medium text-slate-900 mb-2">{service.name}</h4>
                  <div className="flex flex-wrap gap-2">
                    {service.envVars.map((env) => (
                      <code key={env} className="text-xs bg-slate-200 text-slate-700 px-2 py-1 rounded">
                        {env}
                      </code>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Testing Tab */}
      {activeTab === 'testing' && (
        <div className="space-y-6">
          {/* Quick Links to Docs */}
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-slate-900">Test-Dokumentation</h2>
              <a
                href={`vscode://file/${PROJECT_BASE_PATH}/docs/testing/README.md`}
                className="flex items-center gap-2 text-sm bg-blue-50 text-blue-700 px-3 py-2 rounded-lg hover:bg-blue-100 transition-colors"
              >
                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"/>
                </svg>
                Vollstaendige Docs in VS Code
              </a>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {[
                { file: 'docs/testing/README.md', label: 'Test-Uebersicht', desc: 'Teststrategie & Coverage-Ziele' },
                { file: 'docs/testing/QUICKSTART.md', label: 'Quickstart', desc: 'Schnellstart fuer Tests' },
                { file: 'docs/testing/INTEGRATION_TESTS.md', label: 'Integrationstests', desc: 'API & DB Tests' },
              ].map((doc) => (
                <a
                  key={doc.file}
                  href={`vscode://file/${PROJECT_BASE_PATH}/${doc.file}`}
                  className="p-4 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors"
                >
                  <div className="font-medium text-slate-900">{doc.label}</div>
                  <div className="text-sm text-slate-500">{doc.desc}</div>
                </a>
              ))}
            </div>
          </div>

          {/* Test Pyramid */}
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Test-Pyramide</h2>
            <div className="bg-slate-900 rounded-lg p-6 text-center">
              <pre className="text-green-400 font-mono text-sm whitespace-pre inline-block text-left">{`                /\\
               /  \\  E2E (10%)
              /----\\
             /      \\  Integration (20%)
            /--------\\
           /          \\  Unit Tests (70%)
          /--------------\\`}</pre>
            </div>
          </div>

          {/* Coverage Ziele */}
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Coverage-Ziele</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {[
                { component: 'Go Consent Service', target: '80%', current: '~75%', color: 'green' },
                { component: 'Python Backend', target: '70%', current: '~65%', color: 'yellow' },
                { component: 'Critical Paths (Auth, OAuth)', target: '95%', current: '~90%', color: 'green' },
              ].map((item) => (
                <div key={item.component} className="p-4 bg-slate-50 rounded-lg">
                  <div className="font-medium text-slate-900">{item.component}</div>
                  <div className="flex items-center gap-2 mt-2">
                    <div className="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
                      <div
                        className={`h-full ${item.color === 'green' ? 'bg-green-500' : 'bg-yellow-500'}`}
                        style={{ width: item.current.replace('~', '') }}
                      />
                    </div>
                    <span className="text-sm text-slate-600">{item.current}</span>
                  </div>
                  <div className="text-xs text-slate-500 mt-1">Ziel: {item.target}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Test Commands */}
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Test-Befehle</h2>
            <div className="space-y-4">
              {[
                { label: 'Go Tests (alle)', cmd: 'cd consent-service && go test -v ./...', lang: 'Go' },
                { label: 'Go Tests mit Coverage', cmd: 'cd consent-service && go test -cover ./...', lang: 'Go' },
                { label: 'Python Tests (alle)', cmd: 'cd backend && source venv/bin/activate && pytest -v', lang: 'Python' },
                { label: 'Python Tests mit Coverage', cmd: 'cd backend && pytest --cov=. --cov-report=html', lang: 'Python' },
              ].map((item, idx) => (
                <div key={idx} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg">
                  <span className={`text-xs px-2 py-0.5 rounded-full ${item.lang === 'Go' ? 'bg-cyan-100 text-cyan-700' : 'bg-yellow-100 text-yellow-700'}`}>
                    {item.lang}
                  </span>
                  <div className="text-sm text-slate-600 w-40">{item.label}</div>
                  <code className="flex-1 text-sm font-mono bg-slate-900 text-green-400 px-3 py-2 rounded">
                    {item.cmd}
                  </code>
                  <button
                    onClick={() => copyToClipboard(item.cmd, `test-${idx}`)}
                    className="text-slate-400 hover:text-slate-600"
                  >
                    {copiedEndpoint === `test-${idx}` ? (
                      <span className="text-xs text-green-600">Copied!</span>
                    ) : (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                      </svg>
                    )}
                  </button>
                </div>
              ))}
            </div>
          </div>

          {/* Test-Struktur */}
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Test-Struktur</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Go Tests */}
              <div>
                <h3 className="font-medium text-slate-900 mb-2 flex items-center gap-2">
                  <span className="text-xs px-2 py-0.5 rounded-full bg-cyan-100 text-cyan-700">Go</span>
                  Consent Service
                </h3>
                <div className="bg-slate-900 rounded-lg p-4 font-mono text-sm text-green-400">
                  <div>consent-service/</div>
                  <div className="ml-4">internal/</div>
                  <div className="ml-8">handlers/handlers_test.go</div>
                  <div className="ml-8">services/auth_service_test.go</div>
                  <div className="ml-8">services/oauth_service_test.go</div>
                  <div className="ml-8">services/totp_service_test.go</div>
                  <div className="ml-8">middleware/middleware_test.go</div>
                </div>
              </div>

              {/* Python Tests */}
              <div>
                <h3 className="font-medium text-slate-900 mb-2 flex items-center gap-2">
                  <span className="text-xs px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-700">Python</span>
                  Backend
                </h3>
                <div className="bg-slate-900 rounded-lg p-4 font-mono text-sm text-green-400">
                  <div>backend/</div>
                  <div className="ml-4">tests/</div>
                  <div className="ml-8">test_consent_client.py</div>
                  <div className="ml-8">test_gdpr_api.py</div>
                  <div className="ml-8">test_dsms_webui.py</div>
                  <div className="ml-4">conftest.py</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </AdminLayout>
  )
}
