import { useMemo } from 'react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Chip from '@mui/material/Chip'
import Collapse from '@mui/material/Collapse'
import Divider from '@mui/material/Divider'
import FormControl from '@mui/material/FormControl'
import InputAdornment from '@mui/material/InputAdornment'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import Paper from '@mui/material/Paper'
import Select from '@mui/material/Select'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import ToggleButton from '@mui/material/ToggleButton'
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
import Typography from '@mui/material/Typography'
import { Search, SlidersHorizontal } from 'lucide-react'
import type { Category } from '@/entities/product/model/types'
import type { UseProductFiltersResult } from '../lib/use-product-filters'

type Props = UseProductFiltersResult & {
  categories: Category[]
  categoriesLoading: boolean
}

export function ProductFilters({
  categorySlug,
  qInput,
  moreOpen,
  sort,
  pageSize,
  priceMinRub,
  priceMaxRub,
  cardScale,
  categories,
  categoriesLoading,
  setQInput,
  setMoreOpen,
  handleCategoryChange,
  handleSortChange,
  handlePageSizeChange,
  handlePriceMinChange,
  handlePriceMaxChange,
  handleCardScaleChange,
  resetFilters,
}: Props) {
  const categoriesForFilter = useMemo(() => {
    const list = (categories ?? []).filter((c) => c.slug !== 'ne-ukazano')
    return [...list].sort((a, b) => a.sort - b.sort || a.name.localeCompare(b.name, 'ru'))
  }, [categories])

  return (
    <Stack spacing={2}>
      <Stack
        direction={{ xs: 'column', md: 'row' }}
        spacing={2}
        sx={{ alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
      >
        <TextField
          size="small"
          placeholder="Поиск"
          value={qInput}
          onChange={(e) => setQInput(e.target.value)}
          slotProps={{
            input: {
              startAdornment: (
                <InputAdornment position="start">
                  <Search size={18} />
                </InputAdornment>
              ),
            },
          }}
          sx={{ flexGrow: 1, minWidth: { xs: '100%', md: 360 } }}
        />
      </Stack>

      <Paper
        variant="outlined"
        sx={{
          p: 1.5,
          borderRadius: 3,
          bgcolor: 'background.paper',
          display: 'flex',
          flexDirection: { xs: 'column', sm: 'row' },
          gap: 1.5,
          alignItems: { sm: 'center' },
          justifyContent: 'space-between',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flexDirection: { xs: 'column', sm: 'row' },
            alignItems: { sm: 'center' },
            gap: 1.5,
            flexGrow: 1,
          }}
        >
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, alignItems: 'center' }}>
            <Chip
              label="Все"
              size="small"
              variant={categorySlug === '' ? 'filled' : 'outlined'}
              color={categorySlug === '' ? 'primary' : 'default'}
              onClick={() => handleCategoryChange('')}
            />
            {categoriesForFilter.map((c) => (
              <Chip
                key={c.id}
                label={c.name}
                size="small"
                variant={categorySlug === c.slug ? 'filled' : 'outlined'}
                color={categorySlug === c.slug ? 'primary' : 'default'}
                onClick={() => handleCategoryChange(c.slug)}
                disabled={categoriesLoading}
              />
            ))}
          </Box>
        </Box>
      </Paper>

      <Stack
        direction={{ xs: 'column', sm: 'row' }}
        spacing={1.5}
        sx={{ alignItems: { sm: 'center' }, justifyContent: 'space-between', flexWrap: 'wrap' }}
      >
        <Button
          variant="text"
          onClick={() => setMoreOpen((v) => !v)}
          startIcon={<SlidersHorizontal size={18} />}
          sx={{ alignSelf: { xs: 'flex-start' } }}
        >
          {moreOpen ? 'Скрыть' : 'Фильтры'}
        </Button>
        <Button variant="outlined" onClick={resetFilters} sx={{ alignSelf: { xs: 'flex-start' } }}>
          Сбросить
        </Button>
      </Stack>

      <Collapse in={moreOpen} unmountOnExit>
        <Paper variant="outlined" sx={{ p: 2, borderRadius: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <Stack
            direction={{ xs: 'column', md: 'row' }}
            spacing={2}
            sx={{ alignItems: { md: 'center' }, flexWrap: { md: 'wrap' } }}
          >
            <FormControl sx={{ minWidth: 200 }} size="small">
              <InputLabel id="sort-label">Сортировка</InputLabel>
              <Select<string> labelId="sort-label" label="Сортировка" value={sort} onChange={handleSortChange}>
                <MenuItem value="">
                  <em>Сначала новые</em>
                </MenuItem>
                <MenuItem value="price_asc">Цена: по возрастанию</MenuItem>
                <MenuItem value="price_desc">Цена: по убыванию</MenuItem>
              </Select>
            </FormControl>

            <TextField
              size="small"
              label="Цена от, ₽"
              value={priceMinRub}
              onChange={(e) => handlePriceMinChange(e.target.value)}
              sx={{ width: { xs: '100%', md: 160 } }}
            />
            <TextField
              size="small"
              label="Цена до, ₽"
              value={priceMaxRub}
              onChange={(e) => handlePriceMaxChange(e.target.value)}
              sx={{ width: { xs: '100%', md: 160 } }}
            />

            <FormControl sx={{ minWidth: 160 }} size="small">
              <InputLabel id="page-size-label">На странице</InputLabel>
              <Select<string>
                labelId="page-size-label"
                label="На странице"
                value={String(pageSize)}
                onChange={handlePageSizeChange}
              >
                {[6, 12, 18, 24].map((n) => (
                  <MenuItem key={n} value={String(n)}>
                    {n}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          </Stack>

          <Divider />

          <Box
            sx={{
              display: 'flex',
              flexDirection: { xs: 'column', sm: 'row' },
              gap: 1.5,
              alignItems: { sm: 'center' },
              justifyContent: 'space-between',
            }}
          >
            <Typography variant="subtitle2">Масштаб карточек</Typography>
            <ToggleButtonGroup
              exclusive
              size="small"
              value={cardScale}
              onChange={(_, v) => handleCardScaleChange(v)}
              sx={{
                alignSelf: { xs: 'flex-start', sm: 'auto' },
                '& .MuiToggleButton-root': { px: 1.5, fontWeight: 600, textTransform: 'none' },
                '& .MuiToggleButton-root.Mui-selected': {
                  bgcolor: 'primary.main',
                  color: 'primary.contrastText',
                  '&:hover': { bgcolor: 'primary.dark' },
                },
              }}
            >
              <ToggleButton value={70}>S</ToggleButton>
              <ToggleButton value={90}>M</ToggleButton>
              <ToggleButton value={110}>L</ToggleButton>
              <ToggleButton value={130}>XL</ToggleButton>
            </ToggleButtonGroup>
          </Box>
        </Paper>
      </Collapse>
    </Stack>
  )
}
