import React, { useState } from 'react';
import {
  Box,
  Button,
  IconButton,
  Switch,
  Typography,
  TextField,
  Paper,
  Fade,
  Divider,
  useMediaQuery,
  useTheme,
  Slide,
  Stack
} from '@mui/material';
import FilterListIcon from '@mui/icons-material/FilterList';
import MainCard from 'components/MainCard';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import Titlecard from 'components/nearle_components/Titlecard';

const TestingOrder = () => {
  const [drawerOpen, setDrawerOpen] = useState(false);

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm')); // <600px

  return (
    <Stack>
      <Titlecard title={'Import Product'}></Titlecard>
      <MainCard sx={{ position: 'relative', overflow: 'hidden' }}>
        {/* Top Toolbar */}
        <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
          <Box display="flex" alignItems="center" gap={1}>
            <IconButton onClick={() => setDrawerOpen((prev) => !prev)} size="small">
              <FilterListIcon />
            </IconButton>
            <Typography variant="subtitle1">Filter</Typography>
          </Box>
          <TextField placeholder="Search Product" size="small" sx={{ width: '250px' }} />
        </Box>

        {/* Main Content Wrapper */}
        <Box display="flex" position="relative">
          {/* Filter Drawer - Conditional positioning */}

          <Slide direction="right" in={drawerOpen} mountOnEnter unmountOnExit timeout={300}>
            <Box
              sx={{
                position: isMobile ? 'fixed' : 'absolute',
                top: isMobile ? 64 : 0,
                left: 0,
                zIndex: 1300,
                height: '100%'
              }}
            >
              <Paper
                elevation={4}
                sx={{
                  width: 260,
                  minHeight: '100vh',
                  p: 2,
                  borderRadius: 0,
                  borderRight: '1px solid #e0e0e0',
                  bgcolor: 'background.paper',
                  boxShadow: 3,
                  overflowY: 'auto'
                }}
              >
                <Typography variant="h6" gutterBottom>
                  Filters
                </Typography>

                <Divider sx={{ mb: 2 }} />

                {/* Gender Filter */}
                <Box>
                  <Typography variant="subtitle2" gutterBottom>
                    Gender
                  </Typography>
                  <Box sx={{ pl: 1 }}>
                    <label>
                      <input type="checkbox" /> Male
                    </label>
                    <br />
                    <label>
                      <input type="checkbox" /> Female
                    </label>
                    <br />
                    <label>
                      <input type="checkbox" /> Kids
                    </label>
                  </Box>
                </Box>

                {/* Close Button */}
                <Button onClick={() => setDrawerOpen(false)} size="small" variant="outlined" sx={{ mt: 3 }} fullWidth>
                  Close
                </Button>
              </Paper>
            </Box>
          </Slide>
          {/* Product Area */}
          <Box
            flex={1}
            sx={{
              ml: !isMobile && drawerOpen ? '260px' : 0,
              transition: 'margin-left 0.3s ease',
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
              gap: 2,
              px: 2,
              py: 1
            }}
          >
            {[...Array(2)].map((_, i) => (
              <Paper
                key={i}
                elevation={2}
                sx={{
                  p: 2,
                  borderRadius: 2,
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-between',
                  textAlign: 'center'
                }}
              >
                {/* Product Image */}
                <Box
                  sx={{
                    width: '100%',
                    height: 140,
                    mb: 1,
                    borderRadius: 1,
                    overflow: 'hidden',
                    bgcolor: '#f4f4f4'
                  }}
                >
                  <img
                    src="https://via.placeholder.com/200x140"
                    alt={`Product ${i + 1}`}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                </Box>

                {/* Product Info */}
                <Typography variant="subtitle1">Product {i + 1}</Typography>
                <Typography variant="body2" color="text.secondary">
                  Brand Name
                </Typography>
                <Typography fontWeight={600} mt={1}>
                  ₹12.99
                </Typography>

                {/* Action Icons */}
                <Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
                  <Box display="flex" gap={1}>
                    <IconButton size="small" color="primary">
                      <EditIcon fontSize="small" />
                    </IconButton>
                    <IconButton size="small" color="error">
                      <DeleteIcon fontSize="small" />
                    </IconButton>
                  </Box>

                  <Switch size="small" />
                </Box>
              </Paper>
            ))}
          </Box>
        </Box>
      </MainCard>
    </Stack>
  );
};

export default TestingOrder;
