'use client'

import type { ServiceNode } from '../types'
import { ARCHITECTURE_SERVICES } from '../data'
import { getArchTypeColor, getArchTypeLabel } from '../helpers'

interface ServiceDetailPanelProps {
  service: ServiceNode
  onClose: () => void
  onSelectService: (service: ServiceNode) => void
}

export default function ServiceDetailPanel({ service, onClose, onSelectService }: ServiceDetailPanelProps) {
  return (
    <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">{service.name}</h2>
          <p className="text-slate-600">{service.description}</p>
        </div>
        <button
          onClick={onClose}
          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(service.type).text}`}>
            {getArchTypeLabel(service.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">{service.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">
            {service.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">
            {service.connections?.length || 0} Services
          </div>
        </div>
      </div>

      {service.connections && service.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">
            {service.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={() => onSelectService(connService)}
                  className={`px-3 py-1 rounded-full text-sm ${colors.light} ${colors.text} hover:opacity-80`}
                >
                  {connService.name}
                </button>
              )
            })}
          </div>
        </div>
      )}
    </div>
  )
}