import { Box, Chip, FormControl, InputLabel, MenuItem, Select, Typography } from '@mui/material'
import { SignalType } from '../../domain/enums'
import { SIGNAL_TYPE_LABELS } from '../../lib/constants'

export interface SignalFilterState {
  signalType: string
  minConfidence: number
  sensitivityLevel: string
  reviewStatus: string
  timeHorizon: string
}

export const DEFAULT_SIGNAL_FILTERS: SignalFilterState = {
  signalType: '',
  minConfidence: 0,
  sensitivityLevel: '',
  reviewStatus: '',
  timeHorizon: '',
}

interface Props {
  filters: SignalFilterState
  onChange: (f: SignalFilterState) => void
  totalCount: number
  filteredCount: number
}

const SIGNAL_TYPES = Object.values(SignalType)

export function FutureSignalFilterBar({ filters, onChange, totalCount, filteredCount }: Props) {
  const set = (partial: Partial<SignalFilterState>) => onChange({ ...filters, ...partial })

  const activeCount = [
    filters.signalType !== '',
    filters.minConfidence > 0,
    filters.sensitivityLevel !== '',
    filters.reviewStatus !== '',
    filters.timeHorizon !== '',
  ].filter(Boolean).length

  return (
    <Box sx={{ px: 3, py: 1.5, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', display: 'flex', flexWrap: 'wrap', gap: 2, alignItems: 'center' }}>
      {/* Signal type chips */}
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, alignItems: 'center' }}>
        <Chip
          label="Alle"
          size="small"
          onClick={() => set({ signalType: '' })}
          color={filters.signalType === '' ? 'primary' : 'default'}
          sx={{ fontWeight: filters.signalType === '' ? 700 : 400 }}
        />
        {SIGNAL_TYPES.map(t => (
          <Chip
            key={t}
            label={SIGNAL_TYPE_LABELS[t] ?? t}
            size="small"
            onClick={() => set({ signalType: filters.signalType === t ? '' : t })}
            sx={{
              fontWeight: filters.signalType === t ? 700 : 400,
              bgcolor: filters.signalType === t ? '#1e3a5f' : undefined,
              color: filters.signalType === t ? 'white' : undefined,
            }}
          />
        ))}
      </Box>

      {/* Selects */}
      <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
        <FormControl size="small" sx={{ minWidth: 140 }}>
          <InputLabel>Konfidenz</InputLabel>
          <Select
            label="Konfidenz"
            value={filters.minConfidence}
            onChange={e => set({ minConfidence: Number(e.target.value) })}
          >
            <MenuItem value={0}>Alle</MenuItem>
            <MenuItem value={0.75}>Hoch ≥75%</MenuItem>
            <MenuItem value={0.55}>Mittel ≥55%</MenuItem>
          </Select>
        </FormControl>

        <FormControl size="small" sx={{ minWidth: 140 }}>
          <InputLabel>Prüfstatus</InputLabel>
          <Select
            label="Prüfstatus"
            value={filters.reviewStatus}
            onChange={e => set({ reviewStatus: e.target.value })}
          >
            <MenuItem value="">Alle</MenuItem>
            <MenuItem value="UNREVIEWED">Ungeprüft</MenuItem>
            <MenuItem value="IN_REVIEW">In Prüfung</MenuItem>
            <MenuItem value="APPROVED">Genehmigt</MenuItem>
            <MenuItem value="REJECTED">Abgelehnt</MenuItem>
            <MenuItem value="FLAGGED">Markiert</MenuItem>
          </Select>
        </FormControl>

        <FormControl size="small" sx={{ minWidth: 140 }}>
          <InputLabel>Zeithorizont</InputLabel>
          <Select
            label="Zeithorizont"
            value={filters.timeHorizon}
            onChange={e => set({ timeHorizon: e.target.value })}
          >
            <MenuItem value="">Alle</MenuItem>
            <MenuItem value="short">Kurz ≤6M</MenuItem>
            <MenuItem value="medium">Mittel 7–12M</MenuItem>
            <MenuItem value="long">Lang &gt;12M</MenuItem>
          </Select>
        </FormControl>

        <FormControl size="small" sx={{ minWidth: 140 }}>
          <InputLabel>Vertraulichkeit</InputLabel>
          <Select
            label="Vertraulichkeit"
            value={filters.sensitivityLevel}
            onChange={e => set({ sensitivityLevel: e.target.value })}
          >
            <MenuItem value="">Alle</MenuItem>
            <MenuItem value="PUBLIC">Öffentlich</MenuItem>
            <MenuItem value="INTERNAL">Intern</MenuItem>
            <MenuItem value="CONFIDENTIAL">Vertraulich</MenuItem>
          </Select>
        </FormControl>
      </Box>

      {/* Result count */}
      <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }}>
        {activeCount > 0 && (
          <Chip
            label={`${activeCount} Filter aktiv`}
            size="small"
            onDelete={() => onChange(DEFAULT_SIGNAL_FILTERS)}
            sx={{ bgcolor: '#eff6ff', color: '#1e3a5f' }}
          />
        )}
        <Typography variant="caption" color="text.secondary">
          {filteredCount} / {totalCount}
        </Typography>
      </Box>
    </Box>
  )
}
