import { Box, Button, Chip, Typography } from '@mui/material'
import { X } from 'lucide-react'
import {
  MarketSignalSourceCategory,
  MARKET_SIGNAL_SOURCE_LABELS,
  SignalProcessingStatus,
  SIGNAL_PROCESSING_STATUS_LABELS,
  SIGNAL_PROCESSING_STATUS_COLORS,
} from '../../domain/marketSignal'
import type { MarketSignalFilters } from '../../domain/marketSignal'

interface MarketSignalFilterBarProps {
  filters: MarketSignalFilters
  onChange: (f: MarketSignalFilters) => void
}

const SOURCE_OPTIONS = Object.values(MarketSignalSourceCategory)
const STATUS_OPTIONS: SignalProcessingStatus[] = [
  SignalProcessingStatus.NEEDS_REVIEW,
  SignalProcessingStatus.ENRICHED,
  SignalProcessingStatus.APPROVED_AS_SIGNAL,
  SignalProcessingStatus.DETECTED,
  SignalProcessingStatus.CONVERTED_TO_FUTURE_AVAILABILITY,
  SignalProcessingStatus.REJECTED,
]

export function MarketSignalFilterBar({ filters, onChange }: MarketSignalFilterBarProps) {
  const hasFilters = !!(filters.sourceCategory || filters.processingStatus)

  return (
    <Box sx={{ px: 1.5, py: 1, borderBottom: '1px solid #f1f5f9' }}>
      {/* Source category */}
      <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5, fontWeight: 600 }}>
        Quelle
      </Typography>
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mb: 1 }}>
        {SOURCE_OPTIONS.map((cat) => {
          const active = filters.sourceCategory === cat
          return (
            <Chip
              key={cat}
              label={MARKET_SIGNAL_SOURCE_LABELS[cat]}
              size="small"
              clickable
              onClick={() =>
                onChange({ ...filters, sourceCategory: active ? undefined : cat })
              }
              sx={{
                fontSize: '0.65rem',
                height: 20,
                bgcolor: active ? '#152642' : 'transparent',
                color: active ? '#fff' : 'text.secondary',
                border: '1px solid',
                borderColor: active ? '#152642' : 'divider',
                '&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
              }}
            />
          )
        })}
      </Box>

      {/* Processing status */}
      <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5, fontWeight: 600 }}>
        Status
      </Typography>
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mb: hasFilters ? 1 : 0 }}>
        {STATUS_OPTIONS.map((status) => {
          const active = filters.processingStatus === status
          const { bg, fg } = SIGNAL_PROCESSING_STATUS_COLORS[status]
          return (
            <Chip
              key={status}
              label={SIGNAL_PROCESSING_STATUS_LABELS[status]}
              size="small"
              clickable
              onClick={() =>
                onChange({ ...filters, processingStatus: active ? undefined : status })
              }
              sx={{
                fontSize: '0.65rem',
                height: 20,
                bgcolor: active ? bg : 'transparent',
                color: active ? fg : 'text.secondary',
                border: '1px solid',
                borderColor: active ? fg : 'divider',
                fontWeight: active ? 600 : 400,
                '&:hover': { bgcolor: bg },
              }}
            />
          )
        })}
      </Box>

      {hasFilters && (
        <Button
          size="small"
          startIcon={<X size={12} />}
          onClick={() => onChange({})}
          sx={{ color: 'text.secondary', textTransform: 'none', fontSize: '0.75rem', p: 0 }}
        >
          Filter zurücksetzen
        </Button>
      )}
    </Box>
  )
}
