'use client'

import React from 'react'
import { RegGroupKey, GROUP_LABELS, GROUP_ORDER } from './ChunkBrowserConstants'

interface ChunkBrowserSidebarProps {
  filterSearch: string
  setFilterSearch: (v: string) => void
  countsLoading: boolean
  filteredRegulations: Record<RegGroupKey, { code: string; name: string; type: string }[]>
  regulationCounts: Record<string, number>
  selectedRegulation: string | null
  collapsedGroups: Set<string>
  onSelectRegulation: (code: string) => void
  onToggleGroup: (group: string) => void
}

export function ChunkBrowserSidebar({
  filterSearch,
  setFilterSearch,
  countsLoading,
  filteredRegulations,
  regulationCounts,
  selectedRegulation,
  collapsedGroups,
  onSelectRegulation,
  onToggleGroup,
}: ChunkBrowserSidebarProps) {
  return (
    <div className="w-56 flex-shrink-0 bg-white rounded-xl border border-slate-200 flex flex-col min-h-0">
      <div className="flex-shrink-0 p-3 border-b border-slate-100">
        <input
          type="text"
          value={filterSearch}
          onChange={(e) => setFilterSearch(e.target.value)}
          placeholder="Suche..."
          className="w-full px-2 py-1.5 border rounded-lg text-sm focus:ring-2 focus:ring-teal-500"
        />
        {countsLoading && (
          <div className="text-xs text-slate-400 mt-1 animate-pulse">Counts laden...</div>
        )}
      </div>
      <div className="flex-1 overflow-y-auto min-h-0">
        {GROUP_ORDER.map(group => {
          const items = filteredRegulations[group]
          if (items.length === 0) return null
          const isCollapsed = collapsedGroups.has(group)
          return (
            <div key={group}>
              <button
                onClick={() => onToggleGroup(group)}
                className="w-full px-3 py-1.5 text-left text-xs font-semibold text-slate-500 bg-slate-50 hover:bg-slate-100 flex items-center justify-between sticky top-0 z-10"
              >
                <span>{GROUP_LABELS[group]}</span>
                <span className="text-slate-400">{isCollapsed ? '+' : '-'}</span>
              </button>
              {!isCollapsed && items.map(reg => {
                const count = regulationCounts[reg.code] ?? 0
                const isSelected = selectedRegulation === reg.code
                return (
                  <button
                    key={reg.code}
                    onClick={() => onSelectRegulation(reg.code)}
                    className={`w-full px-3 py-1.5 text-left text-sm flex items-center justify-between hover:bg-teal-50 transition-colors ${
                      isSelected ? 'bg-teal-100 text-teal-900 font-medium' : 'text-slate-700'
                    }`}
                  >
                    <span className="truncate text-xs">{reg.name || reg.code}</span>
                    <span className={`text-xs tabular-nums flex-shrink-0 ml-1 ${count > 0 ? 'text-slate-500' : 'text-slate-300'}`}>
                      {count > 0 ? count.toLocaleString() : '\u2014'}
                    </span>
                  </button>
                )
              })}
            </div>
          )
        })}
      </div>
    </div>
  )
}