import React, { useState } from 'react';
import {
  TextField,
  Button,
  Box,
  Grid,
  Paper,
  Typography,
  Collapse,
  IconButton,
} from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import ClearIcon from '@mui/icons-material/Clear';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

interface SearchFilters {
  address: string;
  city: string;
  state: string;
  zipCode: string;
  minSqFt: number | '';
  maxSqFt: number | '';
  minBedrooms: number | '';
  maxBedrooms: number | '';
  minBathrooms: number | '';
  maxBathrooms: number | '';
}

interface PropertySearchFiltersProps {
  onSearch: (filters: SearchFilters) => void;
  onClear: () => void;
}

const initialFilters: SearchFilters = {
  address: '',
  city: '',
  state: '',
  zipCode: '',
  minSqFt: '',
  maxSqFt: '',
  minBedrooms: '',
  maxBedrooms: '',
  minBathrooms: '',
  maxBathrooms: '',
};

const PropertySearchFilters: React.FC<PropertySearchFiltersProps> = ({ onSearch, onClear }) => {
  const [filters, setFilters] = useState<SearchFilters>(initialFilters);
  const [expanded, setExpanded] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFilters((prev) => ({ ...prev, [name]: value }));
  };

  const handleNumericChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    const numValue = value === '' ? '' : parseFloat(value);
    setFilters((prev) => ({ ...prev, [name]: numValue }));
  };

  const handleSearchClick = () => {
    onSearch(filters);
  };

  const handleClearClick = () => {
    setFilters(initialFilters);
    onClear();
  };

  const handleToggleExpand = () => {
    setExpanded(!expanded);
  };

  return (
    <Paper sx={{ p: 3, mb: 3 }}>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          cursor: 'pointer',
        }}
        onClick={handleToggleExpand}
      >
        <Typography variant="h6" gutterBottom>
          Property Filters
        </Typography>
        <IconButton
          onClick={handleToggleExpand}
          aria-expanded={expanded}
          aria-label="toggle filters"
        >
          <ExpandMoreIcon sx={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }} />
        </IconButton>
      </Box>
      <Collapse in={expanded}>
        <Grid container spacing={2} sx={{ mt: 2 }}>
          <Grid size={{ xs: 12, sm: 6, md: 3 }}>
            <TextField
              fullWidth
              label="Address Keyword"
              name="address"
              value={filters.address}
              onChange={handleChange}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 6, md: 3 }}>
            <TextField
              fullWidth
              label="City"
              name="city"
              value={filters.city}
              onChange={handleChange}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 6, md: 3 }}>
            <TextField
              fullWidth
              label="State"
              name="state"
              value={filters.state}
              onChange={handleChange}
            />
          </Grid>
          <Grid size={{ xs: 12, sm: 6, md: 3 }}>
            <TextField
              fullWidth
              label="Zip Code"
              name="zipCode"
              value={filters.zipCode}
              onChange={handleChange}
            />
          </Grid>
          <Grid size={{ xs: 6, sm: 3 }}>
            <TextField
              fullWidth
              label="Min Sq Ft"
              name="minSqFt"
              type="number"
              value={filters.minSqFt}
              onChange={handleNumericChange}
            />
          </Grid>
          <Grid size={{ xs: 6, sm: 3 }}>
            <TextField
              fullWidth
              label="Max Sq Ft"
              name="maxSqFt"
              type="number"
              value={filters.maxSqFt}
              onChange={handleNumericChange}
            />
          </Grid>
          <Grid size={{ xs: 6, sm: 3 }}>
            <TextField
              fullWidth
              label="Min Bedrooms"
              name="minBedrooms"
              type="number"
              value={filters.minBedrooms}
              onChange={handleNumericChange}
            />
          </Grid>
          <Grid size={{ xs: 6, sm: 3 }}>
            <TextField
              fullWidth
              label="Max Bedrooms"
              name="maxBedrooms"
              type="number"
              value={filters.maxBedrooms}
              onChange={handleNumericChange}
            />
          </Grid>
          <Grid size={{ xs: 6, sm: 3 }}>
            <TextField
              fullWidth
              label="Min Bathrooms"
              name="minBathrooms"
              type="number"
              value={filters.minBathrooms}
              onChange={handleNumericChange}
            />
          </Grid>
          <Grid size={{ xs: 6, sm: 3 }}>
            <TextField
              fullWidth
              label="Max Bathrooms"
              name="maxBathrooms"
              type="number"
              value={filters.maxBathrooms}
              onChange={handleNumericChange}
            />
          </Grid>
          <Grid size={{ xs: 12 }} sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
            <Button variant="outlined" startIcon={<ClearIcon />} onClick={handleClearClick}>
              Clear Filters
            </Button>
            <Button variant="contained" startIcon={<SearchIcon />} onClick={handleSearchClick}>
              Search
            </Button>
          </Grid>
        </Grid>
      </Collapse>
    </Paper>
  );
};

export default PropertySearchFilters;
