'use client'

import React from 'react'
import {
  ReportCategory,
  ReportStatus,
  ReportPriority,
  REPORT_CATEGORY_INFO,
  REPORT_STATUS_INFO
} from '@/lib/sdk/whistleblower/types'

export function FilterBar({
  selectedCategory,
  selectedStatus,
  selectedPriority,
  onCategoryChange,
  onStatusChange,
  onPriorityChange,
  onClear
}: {
  selectedCategory: ReportCategory | 'all'
  selectedStatus: ReportStatus | 'all'
  selectedPriority: ReportPriority | 'all'
  onCategoryChange: (category: ReportCategory | 'all') => void
  onStatusChange: (status: ReportStatus | 'all') => void
  onPriorityChange: (priority: ReportPriority | 'all') => void
  onClear: () => void
}) {
  const hasFilters = selectedCategory !== 'all' || selectedStatus !== 'all' || selectedPriority !== 'all'

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

      {/* Category Filter */}
      <select
        value={selectedCategory}
        onChange={(e) => onCategoryChange(e.target.value as ReportCategory | '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 Kategorien</option>
        {Object.entries(REPORT_CATEGORY_INFO).map(([key, info]) => (
          <option key={key} value={key}>{info.label}</option>
        ))}
      </select>

      {/* Status Filter */}
      <select
        value={selectedStatus}
        onChange={(e) => onStatusChange(e.target.value as ReportStatus | '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(REPORT_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 as ReportPriority | '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 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>
  )
}
