import { Box, ToggleButtonGroup, ToggleButton, TextField, InputAdornment, Typography } from '@mui/material'
import { Search } from 'lucide-react'
import { useReminderStore } from '../../stores/reminderStore'
import { ReminderType, ReminderStatus, ReminderPriority } from '../../domain/reminder'
import type { ReminderType as ReminderTypeType, ReminderStatus as ReminderStatusType, ReminderPriority as ReminderPriorityType } 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: 'Schattenmarkt',
  CUSTOM: 'Individuell',
}

const STATUS_LABELS: Record<ReminderStatusType, string> = {
  ACTIVE: 'Aktiv',
  SNOOZED: 'Schlummern',
  COMPLETED: 'Erledigt',
  DISMISSED: 'Verworfen',
}

const PRIORITY_LABELS: Record<ReminderPriorityType, string> = {
  URGENT: 'Dringend',
  HIGH: 'Hoch',
  MEDIUM: 'Mittel',
  LOW: 'Niedrig',
}

export function ReminderFilterBar() {
  const {
    filterType, setFilterType,
    filterStatus, setFilterStatus,
    filterPriority, setFilterPriority,
    searchQuery, setSearchQuery,
    viewMode, setViewMode,
  } = useReminderStore()

  return (
    <Box className="flex flex-col gap-3">
      <Box className="flex items-center gap-3 flex-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: 220, '& .MuiInputBase-root': { fontSize: '0.8125rem' } }}
        />

        {/* 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>

      <Box className="flex flex-wrap gap-3">
        {/* Type filter */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Typ:</Typography>
          <ToggleButtonGroup
            value={filterType}
            exclusive
            onChange={(_, v) => v && setFilterType(v)}
            size="small"
          >
            <ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
            {Object.values(ReminderType).map(t => (
              <ToggleButton key={t} value={t} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
                {TYPE_LABELS[t]}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
        </Box>
      </Box>

      <Box className="flex flex-wrap gap-3">
        {/* Status filter */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Status:</Typography>
          <ToggleButtonGroup
            value={filterStatus}
            exclusive
            onChange={(_, v) => v && setFilterStatus(v)}
            size="small"
          >
            <ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
            {Object.values(ReminderStatus).map(s => (
              <ToggleButton key={s} value={s} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
                {STATUS_LABELS[s]}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
        </Box>

        {/* Priority filter */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Priorität:</Typography>
          <ToggleButtonGroup
            value={filterPriority}
            exclusive
            onChange={(_, v) => v && setFilterPriority(v)}
            size="small"
          >
            <ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
            {Object.values(ReminderPriority).map(p => (
              <ToggleButton key={p} value={p} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
                {PRIORITY_LABELS[p]}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
        </Box>
      </Box>
    </Box>
  )
}
