'use client'

/**
 * DataFlowDiagram Module Details Panel
 *
 * Extracted from DataFlowDiagram.tsx for the selected module details panel.
 */

import { MODULE_REGISTRY, type BackendModule } from '@/lib/module-registry'

interface DataFlowDiagramDetailsProps {
  selectedModule: string
  onSelectModule: (id: string | null) => void
}

export function DataFlowDiagramDetails({ selectedModule, onSelectModule }: DataFlowDiagramDetailsProps) {
  const module = MODULE_REGISTRY.find(m => m.id === selectedModule)
  if (!module) return null

  return (
    <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
      <h4 className="font-medium text-purple-900 mb-2">{module.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.dependencies && (
          <p>
            Abhaengigkeiten:
            {module.dependencies.map(dep => (
              <button
                key={dep}
                onClick={() => onSelectModule(dep)}
                className="ml-2 px-2 py-0.5 bg-purple-200 text-purple-800 rounded hover:bg-purple-300"
              >
                {dep}
              </button>
            ))}
          </p>
        )}
        {module.frontend.adminV2Page && (
          <p>
            Frontend:
            <a href={module.frontend.adminV2Page} className="ml-2 text-purple-600 hover:underline">
              {module.frontend.adminV2Page}
            </a>
          </p>
        )}
      </div>
    </div>
  )
}

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

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