import { Box, Card, Chip, Divider, Stack, Typography } from '@mui/material'
import { Building2, Zap } from 'lucide-react'

type FilterSource = 'ALL' | 'PLATFORM' | 'MAISON_WORK'
type SortBy = 'score' | 'rent' | 'area'

interface Props {
  filterSource: FilterSource
  onFilterChange: (v: FilterSource) => void
  sortBy: SortBy
  onSortChange: (v: SortBy) => void
  showFutureAvailability: boolean
  onShowFutureAvailabilityChange: (v: boolean) => void
  showOwnProperties?: boolean
  onShowOwnPropertiesChange?: (v: boolean) => void
  isPropertyManager?: boolean
}

const FILTER_OPTIONS: { value: FilterSource; label: string }[] = [
  { value: 'ALL',         label: 'Alle' },
  { value: 'PLATFORM',    label: 'Plattform' },
  { value: 'MAISON_WORK', label: 'Maison Work' },
]

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

const ACTIVE_CHIP = { bgcolor: '#152642', color: 'white', border: '1px solid #152642', fontWeight: 600 }
const INACTIVE_CHIP = { bgcolor: 'transparent', color: 'text.secondary', border: '1px solid #e8e7e4', fontWeight: 400 }

export function ResultFilterBar({
  filterSource,
  onFilterChange,
  sortBy,
  onSortChange,
  showFutureAvailability,
  onShowFutureAvailabilityChange,
  showOwnProperties,
  onShowOwnPropertiesChange,
  isPropertyManager,
}: Props) {
  return (
    <Card sx={{ p: 1.5, mb: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
        {/* Source filter + toggles */}
        <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.5 }}>
          <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
            {FILTER_OPTIONS.map(({ value, label }) => {
              const active = filterSource === value
              return (
                <Chip
                  key={value}
                  label={label}
                  size="small"
                  clickable
                  onClick={() => onFilterChange(value)}
                  sx={active ? ACTIVE_CHIP : INACTIVE_CHIP}
                />
              )
            })}
          </Stack>

          <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />

          <Chip
            size="small"
            clickable
            icon={<Zap size={11} color={showFutureAvailability ? '#5b3f8a' : '#c4c4c4'} />}
            label="Future Availability"
            onClick={() => onShowFutureAvailabilityChange(!showFutureAvailability)}
            sx={{
              ...(showFutureAvailability ? ACTIVE_CHIP : INACTIVE_CHIP),
              bgcolor: showFutureAvailability ? '#152642' : 'transparent',
              '& .MuiChip-icon': { ml: 0.75 },
            }}
          />

          {isPropertyManager && (
            <Chip
              size="small"
              clickable
              icon={<Building2 size={11} color={showOwnProperties ? 'white' : '#c4c4c4'} />}
              label="Eigene Objekte"
              onClick={() => onShowOwnPropertiesChange?.(!showOwnProperties)}
              sx={{
                ...(showOwnProperties ? ACTIVE_CHIP : INACTIVE_CHIP),
                '& .MuiChip-icon': { ml: 0.75 },
              }}
            />
          )}
        </Box>

        {/* Sort */}
        <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={sortBy === value ? ACTIVE_CHIP : INACTIVE_CHIP}
            />
          ))}
        </Stack>
      </Box>
    </Card>
  )
}
