'use client'

import { ARCH_SERVICES, LAYERS } from '../architecture-data'
import { LAYER_ORDER, type LayerFilter } from '../_layout'

export default function Toolbar({
  layerFilter,
  showDb,
  showRag,
  showApis,
  onLayerFilter,
  onToggleDb,
  onToggleRag,
  onToggleApis,
}: {
  layerFilter: LayerFilter
  showDb: boolean
  showRag: boolean
  showApis: boolean
  onLayerFilter: (f: LayerFilter) => void
  onToggleDb: () => void
  onToggleRag: () => void
  onToggleApis: () => void
}) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
      <div className="flex flex-wrap items-center gap-2">
        {/* Layer Filter */}
        <button
          onClick={() => onLayerFilter('alle')}
          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
            layerFilter === 'alle'
              ? 'bg-slate-800 text-white'
              : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
          }`}
        >
          Alle ({ARCH_SERVICES.length})
        </button>
        {LAYER_ORDER.map(layerId => {
          const layer = LAYERS[layerId]
          const count = ARCH_SERVICES.filter(s => s.layer === layerId).length
          return (
            <button
              key={layerId}
              onClick={() => onLayerFilter(layerFilter === layerId ? 'alle' : layerId)}
              className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-1.5"
              style={{
                background: layerFilter === layerId ? layer.colorBorder : layer.colorBg,
                color: layerFilter === layerId ? 'white' : layer.colorText,
              }}
            >
              <span
                className="w-2.5 h-2.5 rounded-full"
                style={{ background: layer.colorBorder }}
              />
              {layer.name} ({count})
            </button>
          )
        })}

        {/* Separator */}
        <div className="w-px h-6 bg-slate-200 mx-1" />

        {/* Toggles */}
        <button
          onClick={onToggleDb}
          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
            showDb
              ? 'bg-slate-700 text-white'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          DB-Tabellen
        </button>
        <button
          onClick={onToggleRag}
          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
            showRag
              ? 'bg-green-600 text-white'
              : 'bg-green-50 text-green-700 hover:bg-green-100'
          }`}
        >
          RAG-Collections
        </button>
        <button
          onClick={onToggleApis}
          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
            showApis
              ? 'bg-violet-600 text-white'
              : 'bg-violet-50 text-violet-700 hover:bg-violet-100'
          }`}
        >
          API-Endpunkte
        </button>
      </div>
    </div>
  )
}