import { Box, MenuItem, Select, Typography } from '@mui/material'
import { ReviewEntityType, ReviewPriority, ReviewTaskStatus } from '../../domain/review'
import type { ReviewFilters } from '../../provider/IReviewProvider'

interface ReviewFilterBarProps {
  filters: ReviewFilters
  onChange: (f: ReviewFilters) => void
  totalCount: number
  filteredCount: number
}

export function ReviewFilterBar({ filters, onChange, totalCount, filteredCount }: ReviewFilterBarProps) {
  const activeCount = Object.values(filters).filter(Boolean).length

  return (
    <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', px: 1.5, py: 1, borderBottom: '1px solid #e2e8f0', bgcolor: '#fafafa', flexShrink: 0, flexWrap: 'wrap' }}>
      <Select
        size="small"
        value={filters.status ?? ''}
        onChange={e => onChange({ ...filters, status: (e.target.value || undefined) as ReviewFilters['status'] })}
        displayEmpty
        sx={{ fontSize: '0.75rem', minWidth: 140 }}
      >
        <MenuItem value="">Alle Status</MenuItem>
        {Object.values(ReviewTaskStatus).map(s => (
          <MenuItem key={s} value={s} sx={{ fontSize: '0.75rem' }}>
            {{ PENDING: 'Ausstehend', IN_REVIEW: 'In Prüfung', APPROVED: 'Genehmigt', REJECTED: 'Abgelehnt', NEEDS_MORE_DATA: 'Mehr Daten', ESCALATED: 'Eskaliert' }[s] ?? s}
          </MenuItem>
        ))}
      </Select>

      <Select
        size="small"
        value={filters.priority ?? ''}
        onChange={e => onChange({ ...filters, priority: (e.target.value || undefined) as ReviewFilters['priority'] })}
        displayEmpty
        sx={{ fontSize: '0.75rem', minWidth: 120 }}
      >
        <MenuItem value="">Alle Prioritäten</MenuItem>
        {Object.values(ReviewPriority).map(p => (
          <MenuItem key={p} value={p} sx={{ fontSize: '0.75rem' }}>
            {{ LOW: 'Niedrig', MEDIUM: 'Mittel', HIGH: 'Hoch', CRITICAL: 'Kritisch' }[p] ?? p}
          </MenuItem>
        ))}
      </Select>

      <Select
        size="small"
        value={filters.entityType ?? ''}
        onChange={e => onChange({ ...filters, entityType: (e.target.value || undefined) as ReviewFilters['entityType'] })}
        displayEmpty
        sx={{ fontSize: '0.75rem', minWidth: 150 }}
      >
        <MenuItem value="">Alle Typen</MenuItem>
        {Object.values(ReviewEntityType).map(t => (
          <MenuItem key={t} value={t} sx={{ fontSize: '0.75rem' }}>
            {{ FUTURE_SIGNAL: 'Zukunftssignal', MATCH_EXPLANATION: 'Match-Begründung', LOW_CONFIDENCE_MATCH: 'Niedr. Konfidenz', CONTACT_RELEASE: 'Kontaktfreigabe', AI_OUTPUT: 'AI-Output', PROPERTY_DATA_ISSUE: 'Datenfehler' }[t] ?? t}
          </MenuItem>
        ))}
      </Select>

      <Typography variant="caption" color="text.secondary" sx={{ ml: 'auto', whiteSpace: 'nowrap' }}>
        {activeCount > 0 ? `${filteredCount} / ${totalCount}` : `${totalCount} Aufgaben`}
      </Typography>
    </Box>
  )
}
