'use client'

/**
 * DataFlowDiagram - Visual representation of module dependencies
 *
 * Shows how backend services, modules, and frontend pages are connected.
 * Uses SVG for rendering connections.
 */

import { useState, useRef, useEffect } from 'react'
import {
  MODULE_REGISTRY,
  type BackendModule
} from '@/lib/module-registry'

interface NodePosition {
  x: number
  y: number
  width: number
  height: number
}

interface ServiceGroup {
  name: string
  port: number
  modules: BackendModule[]
}

const SERVICE_COLORS: Record<string, string> = {
  'consent-service': '#8b5cf6',  // purple
  'python-backend': '#f59e0b',   // amber
  'klausur-service': '#10b981',  // emerald
  'voice-service': '#3b82f6',    // blue
}

const STATUS_COLORS = {
  connected: '#22c55e',
  partial: '#eab308',
  'not-connected': '#ef4444',
  deprecated: '#6b7280'
}

export function DataFlowDiagram() {
  const [selectedModule, setSelectedModule] = useState<string | null>(null)
  const [hoveredModule, setHoveredModule] = useState<string | null>(null)
  const [showLegend, setShowLegend] = useState(true)
  const containerRef = useRef<HTMLDivElement>(null)

  // Group modules by backend service
  const serviceGroups: ServiceGroup[] = []
  const seenServices = new Set<string>()

  MODULE_REGISTRY.forEach(module => {
    if (!seenServices.has(module.backend.service)) {
      seenServices.add(module.backend.service)
      serviceGroups.push({
        name: module.backend.service,
        port: module.backend.port,
        modules: MODULE_REGISTRY.filter(m => m.backend.service === module.backend.service)
      })
    }
  })

  // Calculate positions
  const serviceWidth = 280
  const serviceSpacing = 40
  const moduleHeight = 60
  const moduleSpacing = 10
  const headerHeight = 50
  const padding = 20

  const totalWidth = serviceGroups.length * serviceWidth + (serviceGroups.length - 1) * serviceSpacing + padding * 2
  const maxModulesInService = Math.max(...serviceGroups.map(s => s.modules.length))
  const totalHeight = headerHeight + maxModulesInService * (moduleHeight + moduleSpacing) + padding * 2 + 100

  // Get connections between modules (dependencies)
  const connections: { from: string; to: string }[] = []
  MODULE_REGISTRY.forEach(module => {
    if (module.dependencies) {
      module.dependencies.forEach(dep => {
        connections.push({ from: module.id, to: dep })
      })
    }
  })

  // Get module position
  const getModulePosition = (moduleId: string): NodePosition | null => {
    let serviceIndex = 0
    for (const service of serviceGroups) {
      const moduleIndex = service.modules.findIndex(m => m.id === moduleId)
      if (moduleIndex !== -1) {
        return {
          x: padding + serviceIndex * (serviceWidth + serviceSpacing) + serviceWidth / 2,
          y: headerHeight + moduleIndex * (moduleHeight + moduleSpacing) + moduleHeight / 2 + 40,
          width: serviceWidth - 40,
          height: moduleHeight
        }
      }
      serviceIndex++
    }
    return null
  }

  // Check if module is related to selected/hovered module
  const isRelated = (moduleId: string): boolean => {
    const target = selectedModule || hoveredModule
    if (!target) return false

    // Direct match
    if (moduleId === target) return true

    // Check dependencies
    const targetModule = MODULE_REGISTRY.find(m => m.id === target)
    if (targetModule?.dependencies?.includes(moduleId)) return true

    // Check reverse dependencies
    const module = MODULE_REGISTRY.find(m => m.id === moduleId)
    if (module?.dependencies?.includes(target)) return true

    return false
  }

  return (
    <div className="space-y-4">
      {/* Controls */}
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-slate-900">Datenfluss-Diagramm</h3>
        <div className="flex items-center gap-4">
          <button
            onClick={() => setShowLegend(!showLegend)}
            className="text-sm text-slate-600 hover:text-slate-900"
          >
            {showLegend ? 'Legende ausblenden' : 'Legende anzeigen'}
          </button>
          {selectedModule && (
            <button
              onClick={() => setSelectedModule(null)}
              className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm"
            >
              Auswahl aufheben
            </button>
          )}
        </div>
      </div>

      {/* Legend */}
      {showLegend && (
        <div className="bg-white rounded-xl shadow-sm border p-4 flex flex-wrap items-center gap-6">
          <span className="text-sm font-medium text-slate-700">Services:</span>
          {Object.entries(SERVICE_COLORS).map(([service, color]) => (
            <div key={service} className="flex items-center gap-2">
              <div className="w-3 h-3 rounded" style={{ backgroundColor: color }} />
              <span className="text-sm text-slate-600">{service}</span>
            </div>
          ))}
          <span className="text-sm font-medium text-slate-700 ml-4">Status:</span>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-green-500" />
            <span className="text-sm text-slate-600">Verbunden</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-yellow-500" />
            <span className="text-sm text-slate-600">Teilweise</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-red-500" />
            <span className="text-sm text-slate-600">Nicht verbunden</span>
          </div>
        </div>
      )}

      {/* Diagram */}
      <div
        ref={containerRef}
        className="bg-white rounded-xl shadow-sm border overflow-x-auto"
      >
        <svg
          width={totalWidth}
          height={totalHeight}
          className="min-w-full"
        >
          <defs>
            {/* Arrow marker */}
            <marker
              id="arrowhead"
              markerWidth="10"
              markerHeight="7"
              refX="9"
              refY="3.5"
              orient="auto"
            >
              <polygon points="0 0, 10 3.5, 0 7" fill="#a78bfa" />
            </marker>
            <marker
              id="arrowhead-highlight"
              markerWidth="10"
              markerHeight="7"
              refX="9"
              refY="3.5"
              orient="auto"
            >
              <polygon points="0 0, 10 3.5, 0 7" fill="#8b5cf6" />
            </marker>
          </defs>

          {/* Background Grid */}
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" strokeWidth="1"/>
          </pattern>
          <rect width="100%" height="100%" fill="url(#grid)" />

          {/* Service Groups */}
          {serviceGroups.map((service, serviceIdx) => {
            const x = padding + serviceIdx * (serviceWidth + serviceSpacing)
            const serviceColor = SERVICE_COLORS[service.name] || '#6b7280'

            return (
              <g key={service.name}>
                {/* Service Container */}
                <rect
                  x={x}
                  y={padding}
                  width={serviceWidth}
                  height={totalHeight - padding * 2}
                  fill={`${serviceColor}10`}
                  stroke={serviceColor}
                  strokeWidth="2"
                  rx="12"
                />

                {/* Service Header */}
                <rect
                  x={x}
                  y={padding}
                  width={serviceWidth}
                  height={headerHeight}
                  fill={serviceColor}
                  rx="12"
                />
                <rect
                  x={x}
                  y={padding + headerHeight - 12}
                  width={serviceWidth}
                  height={12}
                  fill={serviceColor}
                />
                <text
                  x={x + serviceWidth / 2}
                  y={padding + headerHeight / 2 + 5}
                  textAnchor="middle"
                  fill="white"
                  fontSize="14"
                  fontWeight="600"
                >
                  {service.name}
                </text>
                <text
                  x={x + serviceWidth / 2}
                  y={padding + headerHeight - 8}
                  textAnchor="middle"
                  fill="rgba(255,255,255,0.7)"
                  fontSize="11"
                >
                  Port {service.port}
                </text>

                {/* Modules */}
                {service.modules.map((module, moduleIdx) => {
                  const moduleX = x + 20
                  const moduleY = padding + headerHeight + 20 + moduleIdx * (moduleHeight + moduleSpacing)
                  const isSelected = selectedModule === module.id
                  const isHovered = hoveredModule === module.id
                  const related = isRelated(module.id)
                  const statusColor = STATUS_COLORS[module.frontend.status]

                  const opacity = (selectedModule || hoveredModule)
                    ? (related ? 1 : 0.3)
                    : 1

                  return (
                    <g
                      key={module.id}
                      onClick={() => setSelectedModule(isSelected ? null : module.id)}
                      onMouseEnter={() => setHoveredModule(module.id)}
                      onMouseLeave={() => setHoveredModule(null)}
                      style={{ cursor: 'pointer', opacity }}
                      className="transition-opacity duration-200"
                    >
                      {/* Module Box */}
                      <rect
                        x={moduleX}
                        y={moduleY}
                        width={serviceWidth - 40}
                        height={moduleHeight}
                        fill="white"
                        stroke={isSelected || isHovered ? serviceColor : '#e2e8f0'}
                        strokeWidth={isSelected || isHovered ? 2 : 1}
                        rx="8"
                        filter={isSelected ? 'drop-shadow(0 4px 6px rgba(0,0,0,0.1))' : undefined}
                      />

                      {/* Status Indicator */}
                      <circle
                        cx={moduleX + 16}
                        cy={moduleY + moduleHeight / 2}
                        r="5"
                        fill={statusColor}
                      />

                      {/* Module Name */}
                      <text
                        x={moduleX + 30}
                        y={moduleY + 24}
                        fill="#1e293b"
                        fontSize="12"
                        fontWeight="500"
                      >
                        {module.name.length > 25 ? module.name.slice(0, 25) + '...' : module.name}
                      </text>

                      {/* Module ID */}
                      <text
                        x={moduleX + 30}
                        y={moduleY + 42}
                        fill="#94a3b8"
                        fontSize="10"
                      >
                        {module.id}
                      </text>

                      {/* Priority Badge */}
                      <rect
                        x={moduleX + serviceWidth - 90}
                        y={moduleY + 20}
                        width={40}
                        height={18}
                        fill={
                          module.priority === 'critical' ? '#fef2f2' :
                          module.priority === 'high' ? '#fff7ed' :
                          module.priority === 'medium' ? '#fefce8' :
                          '#f1f5f9'
                        }
                        rx="4"
                      />
                      <text
                        x={moduleX + serviceWidth - 70}
                        y={moduleY + 33}
                        textAnchor="middle"
                        fill={
                          module.priority === 'critical' ? '#dc2626' :
                          module.priority === 'high' ? '#ea580c' :
                          module.priority === 'medium' ? '#ca8a04' :
                          '#64748b'
                        }
                        fontSize="9"
                        fontWeight="500"
                      >
                        {module.priority.toUpperCase()}
                      </text>

                      {/* Dependency indicator */}
                      {module.dependencies && module.dependencies.length > 0 && (
                        <g>
                          <circle
                            cx={moduleX + serviceWidth - 55}
                            cy={moduleY + moduleHeight - 12}
                            r="8"
                            fill="#f3e8ff"
                          />
                          <text
                            x={moduleX + serviceWidth - 55}
                            y={moduleY + moduleHeight - 8}
                            textAnchor="middle"
                            fill="#8b5cf6"
                            fontSize="9"
                            fontWeight="600"
                          >
                            {module.dependencies.length}
                          </text>
                        </g>
                      )}
                    </g>
                  )
                })}
              </g>
            )
          })}

          {/* Connections (Dependencies) */}
          {connections.map((conn, idx) => {
            const fromPos = getModulePosition(conn.from)
            const toPos = getModulePosition(conn.to)

            if (!fromPos || !toPos) return null

            const isHighlighted = (selectedModule || hoveredModule) &&
              (conn.from === (selectedModule || hoveredModule) || conn.to === (selectedModule || hoveredModule))

            const opacity = (selectedModule || hoveredModule)
              ? (isHighlighted ? 1 : 0.1)
              : 0.4

            // Calculate curved path
            const startX = fromPos.x
            const startY = fromPos.y
            const endX = toPos.x
            const endY = toPos.y

            const midX = (startX + endX) / 2
            const controlOffset = Math.abs(startX - endX) * 0.3

            const path = startX < endX
              ? `M ${startX + fromPos.width / 2} ${startY}
                 C ${startX + fromPos.width / 2 + controlOffset} ${startY},
                   ${endX - toPos.width / 2 - controlOffset} ${endY},
                   ${endX - toPos.width / 2} ${endY}`
              : `M ${startX - fromPos.width / 2} ${startY}
                 C ${startX - fromPos.width / 2 - controlOffset} ${startY},
                   ${endX + toPos.width / 2 + controlOffset} ${endY},
                   ${endX + toPos.width / 2} ${endY}`

            return (
              <path
                key={idx}
                d={path}
                fill="none"
                stroke={isHighlighted ? '#8b5cf6' : '#a78bfa'}
                strokeWidth={isHighlighted ? 2 : 1.5}
                strokeDasharray={isHighlighted ? undefined : '4 2'}
                markerEnd={isHighlighted ? 'url(#arrowhead-highlight)' : 'url(#arrowhead)'}
                opacity={opacity}
                className="transition-opacity duration-200"
              />
            )
          })}

          {/* Frontend Layer (Bottom) */}
          <g>
            <rect
              x={padding}
              y={totalHeight - 80}
              width={totalWidth - padding * 2}
              height={60}
              fill="#f8fafc"
              stroke="#e2e8f0"
              strokeWidth="1"
              rx="8"
            />
            <text
              x={totalWidth / 2}
              y={totalHeight - 55}
              textAnchor="middle"
              fill="#64748b"
              fontSize="12"
              fontWeight="500"
            >
              Admin v2 Frontend (Next.js - Port 3002)
            </text>
            <text
              x={totalWidth / 2}
              y={totalHeight - 35}
              textAnchor="middle"
              fill="#94a3b8"
              fontSize="11"
            >
              /compliance | /ai | /infrastructure | /education | /communication | /development
            </text>
          </g>
        </svg>
      </div>

      {/* Selected Module Details */}
      {selectedModule && (
        <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
          <h4 className="font-medium text-purple-900 mb-2">
            {MODULE_REGISTRY.find(m => m.id === selectedModule)?.name}
          </h4>
          <div className="text-sm text-purple-700 space-y-1">
            <p>ID: <code className="bg-purple-100 px-1 rounded">{selectedModule}</code></p>
            {MODULE_REGISTRY.find(m => m.id === selectedModule)?.dependencies && (
              <p>
                Abhaengigkeiten:
                {MODULE_REGISTRY.find(m => m.id === selectedModule)?.dependencies?.map(dep => (
                  <button
                    key={dep}
                    onClick={() => setSelectedModule(dep)}
                    className="ml-2 px-2 py-0.5 bg-purple-200 text-purple-800 rounded hover:bg-purple-300"
                  >
                    {dep}
                  </button>
                ))}
              </p>
            )}
            {MODULE_REGISTRY.find(m => m.id === selectedModule)?.frontend.adminV2Page && (
              <p>
                Frontend:
                <a
                  href={MODULE_REGISTRY.find(m => m.id === selectedModule)?.frontend.adminV2Page}
                  className="ml-2 text-purple-600 hover:underline"
                >
                  {MODULE_REGISTRY.find(m => m.id === selectedModule)?.frontend.adminV2Page}
                </a>
              </p>
            )}
          </div>
        </div>
      )}
    </div>
  )
}