'use client'

import React from 'react'
import {
  IncidentSeverity,
  IncidentStatus,
  IncidentCategory,
  INCIDENT_SEVERITY_INFO,
  INCIDENT_STATUS_INFO,
  INCIDENT_CATEGORY_INFO
} from '@/lib/sdk/incidents/types'

export function FilterBar({
  selectedSeverity,
  selectedStatus,
  selectedCategory,
  onSeverityChange,
  onStatusChange,
  onCategoryChange,
  onClear
}: {
  selectedSeverity: IncidentSeverity | 'all'
  selectedStatus: IncidentStatus | 'all'
  selectedCategory: IncidentCategory | 'all'
  onSeverityChange: (severity: IncidentSeverity | 'all') => void
  onStatusChange: (status: IncidentStatus | 'all') => void
  onCategoryChange: (category: IncidentCategory | 'all') => void
  onClear: () => void
}) {
  const hasFilters = selectedSeverity !== 'all' || selectedStatus !== 'all' || selectedCategory !== 'all'

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

      {/* Severity Filter */}
      <select
        value={selectedSeverity}
        onChange={(e) => onSeverityChange(e.target.value as IncidentSeverity | '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 Schweregrade</option>
        {Object.entries(INCIDENT_SEVERITY_INFO).map(([severity, info]) => (
          <option key={severity} value={severity}>{info.label}</option>
        ))}
      </select>

      {/* Status Filter */}
      <select
        value={selectedStatus}
        onChange={(e) => onStatusChange(e.target.value as IncidentStatus | '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(INCIDENT_STATUS_INFO).map(([status, info]) => (
          <option key={status} value={status}>{info.label}</option>
        ))}
      </select>

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