breakpilot-compliance/admin-compliance/app/sdk/architecture/_components/DetailPanel.tsx

'use client'

import { ARCH_SERVICES, LAYERS, type ArchService } from '../architecture-data'

export default function DetailPanel({
  service,
  onClose,
}: {
  service: ArchService
  onClose: () => void
}) {
  const layer = LAYERS[service.layer]

  return (
    <div className="w-80 bg-white border-l border-slate-200 overflow-y-auto">
      <div className="sticky top-0 bg-white z-10 border-b border-slate-200">
        <div className="flex items-center justify-between p-4">
          <h3 className="font-bold text-slate-900">{service.name}</h3>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 text-lg leading-none"
          >
            x
          </button>
        </div>
        <div className="px-4 pb-3 flex items-center gap-2">
          <span
            className="px-2 py-0.5 rounded text-xs font-medium"
            style={{ background: layer.colorBg, color: layer.colorText }}
          >
            {layer.name}
          </span>
          <span className="text-xs text-slate-400">{service.tech}</span>
        </div>
      </div>

      <div className="p-4 space-y-4">
        {/* Beschreibung */}
        <p className="text-sm text-slate-700 leading-relaxed">{service.description}</p>
        <p className="text-xs text-slate-500 leading-relaxed mt-1">{service.descriptionLong}</p>

        {/* Tech + Port + Container */}
        <div className="bg-slate-50 rounded-lg p-3 space-y-2">
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-500">Tech</span>
            <span className="font-medium text-slate-800">{service.tech}</span>
          </div>
          {service.port && (
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-500">Port</span>
              <code className="text-xs bg-slate-200 px-1.5 py-0.5 rounded">{service.port}</code>
            </div>
          )}
          {service.url && (
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-500">URL</span>
              <a
                href={service.url}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs text-blue-600 hover:underline truncate max-w-[180px]"
              >
                {service.url}
              </a>
            </div>
          )}
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-500">Container</span>
            <code className="text-xs bg-slate-200 px-1.5 py-0.5 rounded truncate max-w-[180px]">{service.container}</code>
          </div>
        </div>

        {/* DB Tables */}
        {service.dbTables.length > 0 && (
          <div>
            <h4 className="text-xs font-semibold text-slate-500 uppercase mb-1.5">
              DB-Tabellen ({service.dbTables.length})
            </h4>
            <div className="space-y-1">
              {service.dbTables.map(table => (
                <div
                  key={table}
                  className="text-sm bg-slate-100 rounded px-2 py-1"
                >
                  <code className="text-slate-700 text-xs">{table}</code>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* RAG Collections */}
        {service.ragCollections.length > 0 && (
          <div>
            <h4 className="text-xs font-semibold text-slate-500 uppercase mb-1.5">
              RAG-Collections ({service.ragCollections.length})
            </h4>
            <div className="space-y-1">
              {service.ragCollections.map(rag => (
                <div
                  key={rag}
                  className="text-sm bg-green-50 rounded px-2 py-1"
                >
                  <code className="text-green-700 text-xs">{rag}</code>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* API Endpoints */}
        {service.apiEndpoints.length > 0 && (
          <div>
            <h4 className="text-xs font-semibold text-slate-500 uppercase mb-1.5">
              API-Endpunkte ({service.apiEndpoints.length})
            </h4>
            <div className="space-y-1">
              {service.apiEndpoints.map(ep => (
                <div
                  key={ep}
                  className="text-sm bg-violet-50 rounded px-2 py-1"
                >
                  <code className="text-violet-700 text-xs">{ep}</code>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Dependencies */}
        {service.dependsOn.length > 0 && (
          <div>
            <h4 className="text-xs font-semibold text-slate-500 uppercase mb-1.5">
              Abhaengigkeiten
            </h4>
            <div className="space-y-1">
              {service.dependsOn.map(depId => {
                const dep = ARCH_SERVICES.find(s => s.id === depId)
                return (
                  <div
                    key={depId}
                    className="text-sm text-slate-600 bg-slate-50 rounded px-2 py-1"
                  >
                    {dep?.name || depId}
                  </div>
                )
              })}
            </div>
          </div>
        )}

        {/* Open URL */}
        {service.url && (
          <button
            onClick={() => window.open(service.url!, '_blank')}
            className="w-full mt-2 px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors"
          >
            Service oeffnen
          </button>
        )}
      </div>
    </div>
  )
}