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

type FilterSource = Exclude<ResultType, 'FUTURE_AVAILABILITY' | 'VERIFIED_PORTFOLIO'> | 'ALL'
type SortBy = 'score' | 'rent' | 'area'

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

const FILTER_OPTIONS: { value: FilterSource; label: string; color: string }[] = [
  { value: 'ALL',            label: 'Alle',         color: '#1e3a5f' },
  { value: 'EXTERNAL_MARKET', label: 'Direktinserat', color: '#b45309' },
  { value: 'MAISON_WORK',    label: 'Maison Work',  color: '#0369a1' },
]

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,
  showSchattenmarkt,
  onShowSchattenmarktChange,
  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, 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>

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

          {/* Schattenmarkt toggle */}
          <Chip
            size="small"
            clickable
            icon={<Zap size={11} color={showSchattenmarkt ? '#7c3aed' : '#94a3b8'} />}
            label="Schattenmarkt"
            onClick={() => onShowSchattenmarktChange(!showSchattenmarkt)}
            sx={{
              bgcolor: showSchattenmarkt ? '#f3e8ff' : 'transparent',
              color: showSchattenmarkt ? '#6d28d9' : 'text.disabled',
              border: `1px solid ${showSchattenmarkt ? '#c4b5fd' : '#e2e8f0'}`,
              fontWeight: showSchattenmarkt ? 600 : 400,
              textDecoration: showSchattenmarkt ? 'none' : 'line-through',
              '& .MuiChip-icon': { ml: 0.75 },
            }}
          />

          {/* Eigene Objekte toggle — only for Property Managers */}
          {isPropertyManager && (
            <Chip
              size="small"
              clickable
              icon={<Building2 size={11} color={showOwnProperties ? '#1e3a5f' : '#94a3b8'} />}
              label="Eigene Objekte einblenden"
              onClick={() => onShowOwnPropertiesChange?.(!showOwnProperties)}
              sx={{
                bgcolor: showOwnProperties ? 'rgba(30,58,95,0.10)' : 'transparent',
                color: showOwnProperties ? '#1e3a5f' : 'text.disabled',
                border: `1px solid ${showOwnProperties ? '#1e3a5f' : '#e2e8f0'}`,
                fontWeight: showOwnProperties ? 600 : 400,
                '& .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={{
                bgcolor: sortBy === value ? '#1e3a5f' : 'transparent',
                color: sortBy === value ? 'white' : 'text.secondary',
                border: `1px solid ${sortBy === value ? '#1e3a5f' : '#e2e8f0'}`,
              }}
            />
          ))}
        </Stack>
      </Box>
    </Card>
  )
}
