import { Box, Card, Chip, Stack, Typography } from '@mui/material'
import type { ResultType } from '../../domain/enums'

type FilterSource = ResultType | 'ALL'
type SortBy = 'score' | 'rent' | 'area'

interface Props {
  filterSource: FilterSource
  onFilterChange: (v: FilterSource) => void
  sortBy: SortBy
  onSortChange: (v: SortBy) => void
}

const FILTER_OPTIONS: { value: FilterSource; label: string; color: string }[] = [
  { value: 'ALL',                 label: 'Alle',               color: '#1e3a5f' },
  { value: 'VERIFIED_PORTFOLIO',  label: 'Verified Portfolio',  color: '#1e3a5f' },
  { value: 'EXTERNAL_MARKET',     label: 'Marktinserate',      color: '#d97706' },
  { value: 'FUTURE_AVAILABILITY', label: 'Zukunftssignale',    color: '#7c3aed' },
]

const SORT_OPTIONS: { value: SortBy; label: string }[] = [
  { value: 'score', label: 'Relevanz' },
  { value: 'area',  label: 'Fläche' },
  { value: 'rent',  label: 'Mietpreis' },
]

export function ResultFilterBar({ filterSource, onFilterChange, sortBy, onSortChange }: Props) {
  return (
    <Card sx={{ p: 1.5, mb: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
        <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
          {FILTER_OPTIONS.map(({ value, label, color }) => {
            const active = filterSource === value
            return (
              <Chip
                key={value}
                label={label}
                size="small"
                clickable
                onClick={() => onFilterChange(value)}
                sx={{
                  bgcolor: active ? color : 'transparent',
                  color: active ? 'white' : 'text.secondary',
                  border: `1px solid ${active ? color : '#e2e8f0'}`,
                  fontWeight: active ? 600 : 400,
                }}
              />
            )
          })}
        </Stack>
        <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
          <Typography variant="caption" color="text.secondary">Sortierung:</Typography>
          {SORT_OPTIONS.map(({ value, label }) => (
            <Chip
              key={value}
              label={label}
              size="small"
              clickable
              onClick={() => onSortChange(value)}
              sx={{
                bgcolor: sortBy === value ? '#1e3a5f' : 'transparent',
                color: sortBy === value ? 'white' : 'text.secondary',
                border: `1px solid ${sortBy === value ? '#1e3a5f' : '#e2e8f0'}`,
              }}
            />
          ))}
        </Stack>
      </Box>
    </Card>
  )
}
