import {
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Typography,
  FormControlLabel,
  Switch,
  Checkbox,
  TextField,
  Button,
  Box,
  InputAdornment,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

export const TradePanelFilters = ({
  filters,
  updateFilter,
  handleCityChange,
  handleBreedChange,
  handlePriceFilterSubmit,
  handleAgeFilterSubmit,
  cities,
  chickenBreeds,
}) => {
  const {
    showRemaining,
    selectedCities,
    selectedBreeds,
    tempMinPrice,
    tempMaxPrice,
    tempMinAge,
    tempMaxAge,
  } = filters;

  return (
    <Box sx={{ position: "sticky", top: 16 }}>
      <Box
        mb={2}
        sx={{
          p: 2,
          border: "1px solid #e0e0e0",
          borderRadius: 2,
          backgroundColor: "#ffffff",
        }}
      >
        <FormControlLabel
          control={
            <Switch
              checked={showRemaining}
              onChange={(e) => updateFilter("showRemaining", e.target.checked)}
              sx={{
                width: 42,
                height: 26,
                padding: 0,
                "& .MuiSwitch-switchBase": {
                  padding: 0,
                  margin: "2px",
                  transitionDuration: "300ms",
                  "&.Mui-checked": {
                    transform: "translateX(16px)",
                    color: "#fff",
                    "& + .MuiSwitch-track": {
                      backgroundColor: "#244CCC",
                      opacity: 1,
                      border: 0,
                    },
                    "& .MuiSwitch-thumb": {
                      color: "#ffffff",
                    },
                  },
                  "&.Mui-disabled + .MuiSwitch-track": {
                    opacity: 0.5,
                  },
                },
                "& .MuiSwitch-thumb": {
                  boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
                  width: 22,
                  height: 22,
                  color: "#ffffff",
                  backgroundColor: "#ffffff",
                },
                "& .MuiSwitch-track": {
                  borderRadius: 26 / 2,
                  backgroundColor: "#e9e9ea",
                  opacity: 1,
                  transition: "background-color 300ms",
                },
              }}
            />
          }
          label={
            <Typography
              variant="body1"
              sx={{
                marginLeft: "10px",
                fontSize: "0.875rem",
                color: showRemaining ? "#244CCC" : "text.secondary",
                fontWeight: showRemaining ? 600 : 400,
                transition: "color 0.3s ease",
              }}
            >
              مانده فروش
            </Typography>
          }
        />
      </Box>

      <Accordion defaultExpanded sx={{ mb: 2, border: "1px solid #e0e0e0" }}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
            نژاد مرغ
          </Typography>
        </AccordionSummary>
        <AccordionDetails sx={{ p: 2 }}>
          <Box display="flex" flexDirection="column">
            {chickenBreeds.map((breed) => (
              <FormControlLabel
                key={breed}
                control={
                  <Checkbox
                    checked={selectedBreeds.includes(breed)}
                    onChange={() => handleBreedChange(breed)}
                  />
                }
                label={<Typography variant="body2">{breed}</Typography>}
              />
            ))}
          </Box>
        </AccordionDetails>
      </Accordion>

      <Accordion defaultExpanded>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>فیلتر شهرها</Typography>
        </AccordionSummary>
        <AccordionDetails style={{ maxHeight: "400px", overflowY: "auto" }}>
          <Box display="flex" flexDirection="column">
            {cities.map((city) => (
              <FormControlLabel
                key={city.id}
                control={
                  <Checkbox
                    checked={selectedCities.includes(city.name)}
                    onChange={() => handleCityChange(city.name)}
                  />
                }
                label={city.name}
              />
            ))}
          </Box>
        </AccordionDetails>
      </Accordion>

      <Accordion defaultExpanded sx={{ mb: 2, border: "1px solid #e0e0e0" }}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
            محدوده قیمت
          </Typography>
        </AccordionSummary>
        <AccordionDetails sx={{ p: 2 }}>
          <Box
            display="flex"
            flexDirection="column"
            gap={2}
            component="form"
            onSubmit={(e) => {
              e.preventDefault();
              handlePriceFilterSubmit();
            }}
          >
            <TextField
              fullWidth
              size="small"
              label="حداقل قیمت"
              type="number"
              value={tempMinPrice}
              onChange={(e) => updateFilter("tempMinPrice", e.target.value)}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">ریال</InputAdornment>
                ),
              }}
            />
            <TextField
              fullWidth
              size="small"
              label="حداکثر قیمت"
              type="number"
              value={tempMaxPrice}
              onChange={(e) => updateFilter("tempMaxPrice", e.target.value)}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">ریال</InputAdornment>
                ),
              }}
            />
            <Button type="submit" variant="contained" color="primary" fullWidth>
              اعمال فیلتر
            </Button>
          </Box>
        </AccordionDetails>
      </Accordion>

      <Accordion defaultExpanded sx={{ mb: 2, border: "1px solid #e0e0e0" }}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
            محدوده سن
          </Typography>
        </AccordionSummary>
        <AccordionDetails sx={{ p: 2 }}>
          <Box
            display="flex"
            flexDirection="column"
            gap={2}
            component="form"
            onSubmit={(e) => {
              e.preventDefault();
              handleAgeFilterSubmit();
            }}
          >
            <TextField
              fullWidth
              size="small"
              label="حداقل سن"
              type="number"
              value={tempMinAge}
              onChange={(e) => updateFilter("tempMinAge", e.target.value)}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">روز</InputAdornment>
                ),
              }}
            />
            <TextField
              fullWidth
              size="small"
              label="حداکثر سن"
              type="number"
              value={tempMaxAge}
              onChange={(e) => updateFilter("tempMaxAge", e.target.value)}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">روز</InputAdornment>
                ),
              }}
            />
            <Button type="submit" variant="contained" color="primary" fullWidth>
              اعمال فیلتر
            </Button>
          </Box>
        </AccordionDetails>
      </Accordion>
    </Box>
  );
};
