import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import Autocomplete from '@mui/material/Autocomplete';
import Chip from '@mui/material/Chip';
import AddIcon from '@mui/icons-material/Add';
import SearchIcon from '@mui/icons-material/Search';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';

interface AufgabenFiltersProps {
  taskFilter: 'open' | 'done';
  onTaskFilterChange: (value: 'open' | 'done') => void;
  onAddAufgabe: () => void;
  // Filter props
  searchString: string;
  onSearchChange: (value: string) => void;
  selectedTags: string[];
  availableTags: string[];
  onTagsChange: (tags: string[]) => void;
  selectedStatus: number | 'none';
  statusList: { ID: number; name: string }[];
  onStatusChange: (status: number | 'none') => void;
}

export default function AufgabenFilters({
  taskFilter,
  onTaskFilterChange,
  onAddAufgabe,
  searchString,
  onSearchChange,
  selectedTags,
  availableTags,
  onTagsChange,
  selectedStatus,
  statusList,
  onStatusChange,
}: AufgabenFiltersProps) {
  const { i18n } = useLingui();

  // const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  // const open = Boolean(anchorEl);

  // Status options for dropdown
  const selectedStatusOption =
    selectedStatus === 'none'
      ? null
      : statusList.find((s) => s.ID === selectedStatus) || null;

  return (
    <Box>
      {/* First Row: Tabs + Filters + Add Button */}
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          pb: 2,
        }}
      >
        {/* Status Filter Tabs */}
        <Tabs
          value={taskFilter}
          onChange={(_, newValue) => onTaskFilterChange(newValue as 'open' | 'done')}
          aria-label={i18n._(msg`Task status filter`)}
          sx={{
            minHeight: '40px',
            borderBottom: 1,
            borderColor: 'divider',
            '& .MuiTabs-indicator': {
              backgroundColor: 'var(--Google-Blau, rgba(0,153,255,1))',
            },
          }}
        >
          <Tab
            value="open"
            label={<Trans>Open</Trans>}
            sx={{
              textTransform: 'none',
              fontFamily: 'Roboto',
              fontWeight: 500,
              fontSize: '14px',
              minHeight: '40px',
              '&.Mui-selected': {
                color: 'var(--Google-Blau, rgba(0,153,255,1))',
              },
            }}
          />
          <Tab
            value="done"
            label={<Trans>Done</Trans>}
            sx={{
              textTransform: 'none',
              fontFamily: 'Roboto',
              fontWeight: 500,
              fontSize: '14px',
              minHeight: '40px',
              '&.Mui-selected': {
                color: 'var(--Google-Blau, rgba(0,153,255,1))',
              },
            }}
          />
        </Tabs>

        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 2,
            mt: 2,
            flexWrap: 'wrap',
          }}
        >
          {/* Status Dropdown */}
          <Box sx={{ minWidth: 240, ml: 10 }}>
            <Autocomplete
              size="small"
              options={statusList}
              value={selectedStatusOption}
              onChange={(_, newValue) => {
                if (!newValue) {
                  onStatusChange('none');
                } else {
                  onStatusChange(newValue.ID);
                }
              }}
              getOptionLabel={(option) => option.name}
              isOptionEqualToValue={(option, value) => option.ID === value.ID}
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="outlined"
                  label={<Trans>Current status</Trans>}
                  placeholder={i18n._(msg`Select status`)}
                />
              )}
              noOptionsText={<Trans>No statuses</Trans>}
            />
          </Box>

          {/* Tags Filter */}
          <Box sx={{ minWidth: 240 }}>
            <Autocomplete
              multiple
              size="small"
              options={availableTags}
              value={selectedTags}
              onChange={(_, newValue) => onTagsChange(newValue)}
              renderTags={(value, getTagProps) =>
                value.map((option, index) => (
                  <Chip
                    {...getTagProps({ index })}
                    key={option}
                    label={option}
                    size="small"
                    variant="outlined"
                  />
                ))
              }
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="outlined"
                  label={<Trans>Tags</Trans>}
                  placeholder={selectedTags.length === 0 ? i18n._(msg`Filter by tags`) : ''}
                />
              )}
              noOptionsText={<Trans>No tags</Trans>}
            />
          </Box>

          {/* Search Field - disabled for now */}
          {/* <Box sx={{ minWidth: 240, ml: 'auto' }}>
            <TextField
              size="small"
              fullWidth
              value={searchString}
              onChange={(e) => onSearchChange(e.target.value)}
              placeholder="Aufgaben suchen..."
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                ),
              }}
            />
          </Box> */}
        </Box>

        {/* Spacer */}
        <Box sx={{ flex: 1 }} />

       
        <Button
          variant="contained"
          startIcon={<AddIcon />}
          onClick={onAddAufgabe} 
          sx={{ textTransform: 'none' }}
        >
          <span style={{ fontVariant: 'normal' }}><Trans>Add task</Trans></span>
        </Button>

        
      </Box>
    </Box>
  );
}