import React, { useState, useEffect, Fragment } from 'react';
import {
  Box,
  Drawer,
  IconButton,
  Toolbar,
  Typography,
  AppBar,
  useMediaQuery,
  Divider,
  List,
  ListItem,
  ListItemText,
  useTheme,
  ListItemAvatar,
  Stack,
  Button,
  Checkbox,
  Skeleton
} from '@mui/material';

import MenuIcon from '@mui/icons-material/Menu';
import SearchBar from 'components/nearle_components/SearchBar';
import { useQuery } from '@tanstack/react-query';
import { fetchRidersLogs } from 'pages/api/api';
import RiderLocationMap from './RiderLocationMap';
import MainCard from 'components/MainCard';
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
import dayjs from 'dayjs';

import error500 from 'assets/images/maintenance/Error500.png';

const drawerWidth = 350;

const RidersLogs = () => {
  const theme = useTheme();
  const isDesktop = useMediaQuery('(min-width:900px)');
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const [open, setOpen] = useState(false);
  const [selectedRiders, setSelectedRiders] = useState([]);
  const [riderSearch, setRiderSearch] = useState('');
  const appId = 1;
  const {
    data: riders,
    isLoading: ridersIsLoading,
    isFetching: riderIsFetching,
    refetch: riderLogsRefetch,
    error: riderLogsError
  } = useQuery({
    queryKey: [appId, dayjs().format('YYYY-MM-DD'), riderSearch],
    queryFn: fetchRidersLogs,
    refetchInterval: 5 * 60 * 1000
  });

  useEffect(() => {
    // const sortedRiders = riders?.sort((a, b) => a.firstname.localeCompare(b.firstname));
    setSelectedRiders(riders);
  }, [riders]);

  useEffect(() => {
    console.log('selectedRiders', selectedRiders);
  }, [selectedRiders]);

  useEffect(() => {
    setOpen(isDesktop);
  }, [isDesktop]);

  return (
    <MainCard content={false}>
      <Box sx={{ display: 'flex', width: '100%', height: '100%', position: 'relative' }}>
        {/* Drawer */}
        <Drawer
          variant={isDesktop ? 'persistent' : 'temporary'}
          open={open}
          onClose={() => !isDesktop && setOpen(false)}
          ModalProps={{ keepMounted: true }}
          sx={{
            '& .MuiDrawer-paper': {
              width: isMobile ? '100vw' : drawerWidth,
              maxWidth: isMobile ? '100vw' : drawerWidth,
              position: 'absolute',
              left: 0,
              top: 0,
              height: '100%',
              overflowY: 'auto',
              transition: 'transform 0.35s ease-in-out',
              zIndex: 13
            }
          }}
        >
          {/* Search */}
          <Box sx={{ position: 'sticky', top: 0, zIndex: 1 }}>
            <SearchBar
              value={riderSearch}
              placeholder="Search Rider"
              onChange={(e) => setRiderSearch(e.target.value)}
              sx={{
                height: 60,
                bgcolor: 'white',
                '& .MuiOutlinedInput-notchedOutline': {
                  borderBottom: '1px solid',
                  borderColor: theme.palette.secondary.light
                }
              }}
            />
            <List>
              <ListItem sx={{ cursor: 'pointer', '&:hover': { bgcolor: theme.palette.secondary.lighter }, bgcolor: 'white', mt: -1 }}>
                <ListItemAvatar>
                  <Checkbox
                    checked={riders?.length == selectedRiders?.length}
                    onChange={(e) => {
                      if (e.target.checked) {
                        setSelectedRiders(riders);
                      }
                    }}
                  />
                </ListItemAvatar>
                <ListItemText primary="All" />
              </ListItem>
              <Divider />
            </List>
          </Box>
          {/* Rider List */}
          <List>
            {/* Individuals */}
            {ridersIsLoading || riderIsFetching
              ? Array.from({ length: 10 }).map((_, index) => (
                <Fragment key={index}>
                  <ListItem sx={{ py: 1.5, px: 2 }}>
                    <ListItemAvatar>
                      <Skeleton variant="circular" width={24} height={24} />
                    </ListItemAvatar>

                    <ListItemText
                      primary={<Skeleton variant="text" width="60%" height={22} />}
                      secondary={<Skeleton variant="text" width="40%" height={18} />}
                    />

                    <Stack spacing={0.5} textAlign="right">
                      <Skeleton variant="text" width={50} height={18} />
                      <Skeleton variant="text" width={80} height={16} />
                    </Stack>
                  </ListItem>

                  <Divider />
                </Fragment>
              ))
              : !isMobile &&
              riders?.map((row) => {
                return (
                  <Fragment key={row.userid}>
                    <ListItem
                      sx={{
                        cursor: 'pointer',
                        py: 1,
                        px: 2,
                        borderRadius: 1,
                        '&:hover': { bgcolor: theme.palette.secondary.lighter }
                      }}
                      secondaryAction={
                        <Stack textAlign="right" spacing={0.5}>
                          <Typography variant="body2" noWrap sx={{ color: row.status == 'active' ? 'success.main' : 'error.main' }}>
                            {row.userid}
                          </Typography>
                          <Typography variant="caption" color="text.secondary" noWrap>
                            {dayjs(row.logdate).format('DD/MM/YYYY hh:mm A')}
                          </Typography>
                        </Stack>
                      }
                    >
                      <ListItemAvatar>
                        <Checkbox
                          sx={{
                            color: row.status == 'active' ? 'green' : 'red',
                            '&.Mui-checked': {
                              color: row.status == 'active' ? 'green' : 'red'
                            }
                          }}
                          checked={
                            // INDIVIDUAL CHECKED CONDITION
                            selectedRiders?.length === 1 && selectedRiders[0]?.userid === row?.userid
                          }
                          onChange={(e) => {
                            if (e.target.checked) {
                              // SELECT ONE RIDER
                              setSelectedRiders([row]);
                            } else {
                              // UNCHECK -> SELECT ALL
                              setSelectedRiders(riders);
                            }
                          }}
                        />
                      </ListItemAvatar>

                      <ListItemText
                        primary={
                          <Typography noWrap>
                            {row.username?.slice(0, 25) || ''}
                            {row.username?.length > 25 && '...'}

                            {/* {row.status === 'active' && <TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />} */}
                          </Typography>
                        }
                        secondary={
                          <Typography variant="caption" color="text.secondary" noWrap>
                            {row.contactno || '##########'}
                          </Typography>
                        }
                      />
                    </ListItem>

                    <Divider />
                  </Fragment>
                );
              })}
          </List>

          {/* Mobile: rider rows rendered as app-style cards (same selection behaviour) */}
          {isMobile && !ridersIsLoading && !riderIsFetching && (
            <MobileCardList>
              {riders?.map((row) => {
                const isActive = row.status == 'active';
                const isSelected = selectedRiders?.length === 1 && selectedRiders[0]?.userid === row?.userid;
                return (
                  <MobileCard
                    key={row.userid}
                    accent={isActive ? '#10b981' : '#ef4444'}
                    selected={isSelected}
                    header={
                      <Stack direction="row" alignItems="flex-start" spacing={1}>
                        <Checkbox
                          sx={{
                            p: 0.5,
                            color: isActive ? 'green' : 'red',
                            '&.Mui-checked': { color: isActive ? 'green' : 'red' }
                          }}
                          checked={isSelected}
                          onChange={(e) => {
                            if (e.target.checked) {
                              setSelectedRiders([row]);
                            } else {
                              setSelectedRiders(riders);
                            }
                          }}
                        />
                        <Box sx={{ minWidth: 0, flexGrow: 1 }}>
                          <Typography noWrap sx={{ fontWeight: 600 }}>
                            {row.username?.slice(0, 25) || ''}
                            {row.username?.length > 25 && '...'}
                          </Typography>
                          <Typography variant="caption" color="text.secondary" noWrap>
                            {row.contactno || '##########'}
                          </Typography>
                        </Box>
                      </Stack>
                    }
                  >
                    <MobileFieldGrid>
                      <MobileField label="User ID">
                        <Typography sx={{ fontSize: 13, fontWeight: 600, color: isActive ? 'success.main' : 'error.main' }} noWrap>
                          {row.userid}
                        </Typography>
                      </MobileField>
                      <MobileField label="Status" value={isActive ? 'Active' : 'Inactive'} />
                      <MobileField label="Last Log" value={dayjs(row.logdate).format('DD/MM/YYYY hh:mm A')} full />
                    </MobileFieldGrid>
                  </MobileCard>
                );
              })}
            </MobileCardList>
          )}
        </Drawer>

        {/* AppBar */}
        <AppBar
          elevation={0}
          position="absolute"
          sx={{
            top: 0,
            left: open && isDesktop ? `${drawerWidth}px` : 0,
            width: open && isDesktop ? `calc(100% - ${drawerWidth}px)` : '100%',
            transition: 'left 0.3s ease, width 0.3s ease',
            backgroundColor: 'white',
            borderBottom: '1px solid',
            borderColor: theme.palette.secondary.light
          }}
        >
          <Toolbar>
            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
              <Stack direction="row" alignItems="center">
                <IconButton color="primary" onClick={() => setOpen(!open)}>
                  <MenuIcon />
                </IconButton>

                <Typography variant="h5" color="primary" sx={{ ml: 2 }}>
                  Riders Locations
                </Typography>
              </Stack>

              <Button
                variant="outlined"
                color="primary"
                onClick={() => {
                  riderLogsRefetch();
                }}
              >
                Refresh
              </Button>
            </Stack>
          </Toolbar>
        </AppBar>

        {/* Map */}
        <Box
          sx={{
            flexGrow: 1,
            overflow: 'auto',
            pt: '64px',
            pl: open && isDesktop ? `${drawerWidth}px` : 0,
            transition: 'padding-left 0.3s ease',
            minHeight: '80vh'
          }}
        >
          {(ridersIsLoading || riderIsFetching) && (
            <Box position="relative" width="100%" height="80vh" display="grid" placeItems="center">
              {/* <CircularLoader /> */}
              <Skeleton
                variant="rectangular"
                width="100%"
                height="100%"
                animation="wave"
                sx={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  borderRadius: 1,
                  zIndex: 1
                }}
              />
            </Box>
          )}

          {selectedRiders?.length > 0 && <RiderLocationMap riderLocations={selectedRiders} />}
          {riderLogsError && (
            <Box sx={{ width: '100% ', height: '100%' }}>
              <img src={error500} alt="mantis" style={{ height: '100%', width: '100%' }} />
            </Box>
          )}
        </Box>
      </Box>
    </MainCard>
  );
};

export default RidersLogs;
