'use client'

import type { ArchitectureContext as ArchitectureContextType } from './types'

interface ArchitectureContextProps {
  context: ArchitectureContextType
  currentStep?: string
  highlightedComponents?: string[]
}

const LAYER_CONFIG = {
  frontend: { label: 'Frontend', color: 'blue', icon: '🖥️' },
  api: { label: 'API', color: 'purple', icon: '🔌' },
  service: { label: 'Service', color: 'green', icon: '⚙️' },
  database: { label: 'Datenbank', color: 'orange', icon: '🗄️' },
}

export function ArchitectureContext({ context, currentStep, highlightedComponents = [] }: ArchitectureContextProps) {
  const layerConfig = LAYER_CONFIG[context.layer]

  return (
    <div className="bg-slate-900 rounded-lg p-6 mb-6">
      <h4 className="text-white font-medium mb-4 flex items-center">
        <span className="mr-2">🏗️</span>
        Architektur-Kontext{currentStep && `: ${currentStep}`}
      </h4>

      {/* Data Flow Visualization */}
      <div className="mb-6">
        <div className="flex items-center justify-center flex-wrap gap-2">
          {context.dataFlow.map((component, index) => {
            const isHighlighted = highlightedComponents.includes(component.toLowerCase())
            const isCurrentLayer = component.toLowerCase().includes(context.layer)

            return (
              <div key={index} className="flex items-center">
                <div className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                  isHighlighted || isCurrentLayer
                    ? 'bg-blue-500 text-white ring-2 ring-blue-300'
                    : 'bg-slate-700 text-slate-300'
                }`}>
                  {component}
                  {isCurrentLayer && (
                    <span className="ml-2 text-xs">← Sie sind hier</span>
                  )}
                </div>
                {index < context.dataFlow.length - 1 && (
                  <span className="mx-2 text-slate-500">→</span>
                )}
              </div>
            )
          })}
        </div>
      </div>

      {/* Layer Info */}
      <div className="grid grid-cols-2 gap-4 mb-4">
        <div className="bg-slate-800 rounded-lg p-4">
          <h5 className="text-slate-400 text-xs uppercase tracking-wide mb-2">Aktuelle Schicht</h5>
          <div className="flex items-center">
            <span className="text-xl mr-2">{layerConfig.icon}</span>
            <span className={`text-${layerConfig.color}-400 font-medium`}>
              {layerConfig.label}
            </span>
          </div>
        </div>
        <div className="bg-slate-800 rounded-lg p-4">
          <h5 className="text-slate-400 text-xs uppercase tracking-wide mb-2">Beteiligte Services</h5>
          <div className="flex flex-wrap gap-1">
            {context.services.map((service) => (
              <span
                key={service}
                className="px-2 py-1 bg-slate-700 text-slate-300 text-xs rounded"
              >
                {service}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Dependencies */}
      {context.dependencies.length > 0 && (
        <div className="pt-4 border-t border-slate-700">
          <h5 className="text-slate-400 text-xs uppercase tracking-wide mb-2">Abhaengigkeiten</h5>
          <div className="flex flex-wrap gap-2">
            {context.dependencies.map((dep) => (
              <span
                key={dep}
                className="px-2 py-1 bg-amber-900/50 text-amber-300 text-xs rounded border border-amber-700"
              >
                {dep}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}