import { Box, ToggleButtonGroup, ToggleButton, TextField, InputAdornment, Typography, Select, MenuItem, FormControl, FormControlLabel, Switch } from '@mui/material'
import { Search } from 'lucide-react'
import { useShallow } from 'zustand/react/shallow'
import { useReminderStore } from '../../stores/reminderStore'
import { ReminderType } from '../../domain/reminder'
import type { ReminderType as ReminderTypeType } from '../../domain/reminder'

const TYPE_LABELS: Record<ReminderTypeType, string> = {
  LEASE_EXPIRY: 'Mietablauf',
  BREAK_OPTION: 'Break-Option',
  RENT_REVIEW: 'Mietanpassung',
  INSPECTION: 'Inspektion',
  INSURANCE_RENEWAL: 'Versicherung',
  MAINTENANCE: 'Unterhalt',
  SCHATTENMARKT_RELEASE: 'Pre-Market',
  CUSTOM: 'Individuell',
}

export function ReminderFilterBar() {
  const {
    filterType, setFilterType,
    filterStatus, setFilterStatus,
    searchQuery, setSearchQuery,
    viewMode, setViewMode,
  } = useReminderStore(useShallow(s => ({
    filterType: s.filterType, setFilterType: s.setFilterType,
    filterStatus: s.filterStatus, setFilterStatus: s.setFilterStatus,
    searchQuery: s.searchQuery, setSearchQuery: s.setSearchQuery,
    viewMode: s.viewMode, setViewMode: s.setViewMode,
  })))

  const showArchive = filterStatus === 'ALL'

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
      {/* Search */}
      <TextField
        size="small"
        placeholder="Suchen…"
        value={searchQuery}
        onChange={e => setSearchQuery(e.target.value)}
        slotProps={{
          input: {
            startAdornment: (
              <InputAdornment position="start">
                <Search size={16} color="#94a3b8" />
              </InputAdornment>
            ),
          },
        }}
        sx={{ width: 200, '& .MuiInputBase-root': { fontSize: '0.8125rem' } }}
      />

      {/* Type selector */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>Typ:</Typography>
        <FormControl size="small">
          <Select
            value={filterType}
            onChange={e => setFilterType(e.target.value as ReminderTypeType | 'ALL')}
            sx={{ fontSize: '0.8125rem', minWidth: 150 }}
          >
            <MenuItem value="ALL" sx={{ fontSize: '0.8125rem' }}>Alle Typen</MenuItem>
            {Object.values(ReminderType).map(t => (
              <MenuItem key={t} value={t} sx={{ fontSize: '0.8125rem' }}>
                {TYPE_LABELS[t]}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>

      {/* Archive toggle */}
      <FormControlLabel
        control={
          <Switch
            size="small"
            checked={showArchive}
            onChange={e => setFilterStatus(e.target.checked ? 'ALL' : 'ACTIVE')}
          />
        }
        label={
          <Typography variant="caption" color="text.secondary">
            Abgeschlossene anzeigen
          </Typography>
        }
        sx={{ m: 0 }}
      />

      {/* View mode */}
      <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }}>
        <Typography variant="caption" color="text.secondary">Ansicht:</Typography>
        <ToggleButtonGroup
          value={viewMode}
          exclusive
          onChange={(_, v) => v && setViewMode(v)}
          size="small"
        >
          <ToggleButton value="list" sx={{ textTransform: 'none', fontSize: '0.75rem', px: 1.5, py: 0.5 }}>Liste</ToggleButton>
          <ToggleButton value="card" sx={{ textTransform: 'none', fontSize: '0.75rem', px: 1.5, py: 0.5 }}>Karten</ToggleButton>
        </ToggleButtonGroup>
      </Box>
    </Box>
  )
}
