'use client'

import { SDK_FLOW_STEPS, FLOW_PACKAGES } from '../flow-data'
import { PACKAGE_ORDER, type PackageFilter } from './helpers'

export function FlowToolbar({
  packageFilter,
  setPackageFilter,
  setSelectedStep,
  showDb,
  setShowDb,
  showRag,
  setShowRag,
}: {
  packageFilter: PackageFilter
  setPackageFilter: (f: PackageFilter) => void
  setSelectedStep: (s: null) => void
  showDb: boolean
  setShowDb: (v: boolean) => void
  showRag: boolean
  setShowRag: (v: boolean) => 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">
        {/* Package Filter */}
        <button
          onClick={() => {
            setPackageFilter('alle')
            setSelectedStep(null)
          }}
          className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
            packageFilter === 'alle'
              ? 'bg-slate-800 text-white'
              : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
          }`}
        >
          Alle ({SDK_FLOW_STEPS.length})
        </button>
        {PACKAGE_ORDER.map(pkgId => {
          const pkg = FLOW_PACKAGES[pkgId]
          const count = SDK_FLOW_STEPS.filter(s => s.package === pkgId).length
          return (
            <button
              key={pkgId}
              onClick={() => {
                setPackageFilter(packageFilter === pkgId ? 'alle' : pkgId)
                setSelectedStep(null)
              }}
              className="px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-1.5"
              style={{
                background:
                  packageFilter === pkgId ? pkg.color.border : pkg.color.bg,
                color: packageFilter === pkgId ? 'white' : pkg.color.text,
              }}
            >
              <span
                className="w-2.5 h-2.5 rounded-full"
                style={{ background: pkg.color.border }}
              />
              {pkg.nameShort} ({count})
            </button>
          )
        })}

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

        {/* Toggles */}
        <button
          onClick={() => setShowDb(!showDb)}
          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={() => setShowRag(!showRag)}
          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>
      </div>
    </div>
  )
}