'use client'

import {
  DSRType,
  DSRStatus,
  DSR_TYPE_INFO,
  DSR_STATUS_INFO,
} from '@/lib/sdk/dsr/types'

export function FilterBar({
  selectedType,
  selectedStatus,
  selectedPriority,
  onTypeChange,
  onStatusChange,
  onPriorityChange,
  onClear
}: {
  selectedType: DSRType | 'all'
  selectedStatus: DSRStatus | 'all'
  selectedPriority: string
  onTypeChange: (type: DSRType | 'all') => void
  onStatusChange: (status: DSRStatus | 'all') => void
  onPriorityChange: (priority: string) => void
  onClear: () => void
}) {
  const hasFilters = selectedType !== 'all' || selectedStatus !== 'all' || selectedPriority !== 'all'

  return (
    <div className="flex items-center gap-4 flex-wrap">
      <span className="text-sm text-gray-500">Filter:</span>

      {/* Type Filter */}
      <select
        value={selectedType}
        onChange={(e) => onTypeChange(e.target.value as DSRType | 'all')}
        className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
      >
        <option value="all">Alle Typen</option>
        {Object.entries(DSR_TYPE_INFO).map(([type, info]) => (
          <option key={type} value={type}>{info.article} - {info.labelShort}</option>
        ))}
      </select>

      {/* Status Filter */}
      <select
        value={selectedStatus}
        onChange={(e) => onStatusChange(e.target.value as DSRStatus | 'all')}
        className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
      >
        <option value="all">Alle Status</option>
        {Object.entries(DSR_STATUS_INFO).map(([status, info]) => (
          <option key={status} value={status}>{info.label}</option>
        ))}
      </select>

      {/* Priority Filter */}
      <select
        value={selectedPriority}
        onChange={(e) => onPriorityChange(e.target.value)}
        className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
      >
        <option value="all">Alle Prioritaeten</option>
        <option value="critical">Kritisch</option>
        <option value="high">Hoch</option>
        <option value="normal">Normal</option>
        <option value="low">Niedrig</option>
      </select>

      {/* Clear Filters */}
      {hasFilters && (
        <button
          onClick={onClear}
          className="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
        >
          Filter zuruecksetzen
        </button>
      )}
    </div>
  )
}
