import * as React from 'react';
import { useState, useEffect, useRef, Fragment } from 'react';
import Geocode from 'react-geocode';
import { useNavigate } from 'react-router-dom';
import {
  Avatar,
  Paper,
  Stack,
  Typography,
  Table,
  TableCell,
  TableBody,
  TableHead,
  IconButton,
  TableRow,
  Tooltip,
  TableContainer,
  Backdrop,
  Collapse,
  Grid,
  Box,
  Skeleton,
  Divider,
  useMediaQuery
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
var utc = require('dayjs/plugin/utc');
import dayjs from 'dayjs';
dayjs.extend(utc);
import {
  MdDirectionsBike,
  MdMyLocation,
  MdPersonPin,
  MdCheckCircle,
  MdCancel,
  MdGroups,
  MdEdit,
  MdKeyboardArrowDown,
  MdKeyboardArrowUp,
  MdLocationOn,
  MdBatteryStd,
  MdPowerSettingsNew,
  MdSpeed,
  MdGpsFixed,
  MdAccessTime,
  MdInventory2,
  MdTwoWheeler
} from 'react-icons/md';
import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
import CircularLoader from 'components/CircularLoader';
import { fetchAllRiders, getallridersummary, getriderstatus } from 'pages/api/api';
import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
import { OpenToast } from 'components/third-party/OpenToast';
import axios from 'axios';

// ============================================================================
// Design tokens — shared with the deliveries / tenants / customers pages so
// every surface (header, KPI tiles, table, badges, dialog) speaks the same
// visual language. Brand purple `#662582` is the canonical primary; status
// colours are semantic and distinct from the brand.
// ============================================================================
const DT = {
  radiusPill: 999,
  radiusCard: 16,
  shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
  shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
  shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
  textPrimary: '#0f172a',
  textSecondary: '#64748b',
  textMuted: '#94a3b8',
  borderSubtle: '#e2e8f0',
  divider: '#f1f5f9',
  surface: '#ffffff',
  surfaceAlt: '#f8fafc'
};
const a = (c, suffix) => `${c}${suffix}`;
const tint = (c) => a(c, '08');
const soft = (c) => a(c, '18');
const ring = (c) => a(c, '26');
const edge = (c) => a(c, '55');

const BRAND = '#662582';
const BRAND_LIGHT = '#9255AB';

const SoftPaper = (props) => (
  <Paper
    {...props}
    sx={{
      mt: 0.75,
      borderRadius: 2,
      boxShadow: DT.shadowPop,
      border: '1px solid',
      borderColor: 'divider',
      overflow: 'hidden'
    }}
  />
);

const AccentAvatar = ({ color, selected, size = 24, children }) => (
  <Avatar
    sx={{
      width: size,
      height: size,
      bgcolor: selected ? color : soft(color),
      color: selected ? '#fff' : color,
      transition: 'background-color 0.15s, color 0.15s'
    }}
  >
    {children}
  </Avatar>
);

// Status palette — semantic only (do NOT swap for brand purple). Used by the
// per-row status badges and the lifecycle tabs (ALL, Active).
const STATUS_META = {
  active:   { label: 'Active',   color: '#10b981', icon: MdCheckCircle },
  inactive: { label: 'Inactive', color: '#ef4444', icon: MdCancel },
  online:   { label: 'Online',   color: '#10b981', icon: MdCheckCircle },
  offline:  { label: 'Offline',  color: '#ef4444', icon: MdCancel },
  idle:     { label: 'Idle',     color: '#f59e0b', icon: MdAccessTime },
  unknown:  { label: 'Unknown',  color: '#94a3b8', icon: MdInventory2 }
};

// Pill-tab definitions for the rider listing tabs. Keeps brand purple for the
// "ALL" view and emerald for "Active" so the colour matches the count's meaning.
const TAB_META = [
  { key: 0, label: 'All Riders', color: BRAND,     icon: MdGroups,       countKey: 'total' },
  { key: 1, label: 'Active',     color: '#10b981', icon: MdCheckCircle,  countKey: 'active' }
];

const KPI_META = (summary) => [
  { key: 'total',    label: 'Total Riders',    color: BRAND,     icon: MdGroups,      value: summary?.total ?? 0 },
  { key: 'active',   label: 'Active Riders',   color: '#10b981', icon: MdCheckCircle, value: summary?.active ?? 0 },
  { key: 'inactive', label: 'Inactive Riders', color: '#ef4444', icon: MdCancel,      value: summary?.inactive ?? 0 }
];

const Riders = () => {
  const navigate = useNavigate();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const loadMoreRef = useRef();
  const containerRef = useRef();
  const [searchword, setSearchword] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');
  const [locaName, setLocoName] = useState('All');
  const [appId, setAppId] = useState(0);
  const [tabvalue, setTabvalue] = useState(0);
  const roleid = localStorage.getItem('roleid');
  const [logsRow, setLogsRow] = useState(null);
  const [riderLogsdata, setRiderLogsdata] = useState(null);

  Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);

  const handleChangetab = (i) => {
    setTabvalue(i);
    setLogsRow(null);
  };

  // ==============================|| getallridersummary||============================== //
  const { data: allRidersSummary, isLoading: riderSummarysLoading } = useQuery({
    queryKey: ['allriders', appId, tabvalue],
    queryFn: getallridersummary
  });

  // ==============================|| getRiderLogs (riders)||============================== //
  const getRiderLogs = async (userid) => {
    try {
      const res = await axios.get(`${process.env.REACT_APP_URL}/utils/getriderperiodiclogs?userid=${userid}`);
      if (res.data.data.length == 0) {
        setLogsRow(null);
        OpenToast(res.data.message, 'error', 2000);
      } else {
        setRiderLogsdata(res.data.data);
      }
    } catch (err) {
      OpenToast(err.message, 'error', 2000);
    }
  };

  // ==============================|| getriderstatus||============================== //
  const {
    data: ridersStatus,
    isLoading: riderStatusLoading,
    isError: riderstatusIsError,
    error: riderStatusError
  } = useQuery({
    queryKey: ['ridersStatus'],
    queryFn: getriderstatus
  });

  // ==============================|| fetchAllRiders||============================== //
  const {
    data: allRidersData,
    isLoading: allRidersLoading,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage
  } = useInfiniteQuery({
    queryKey: ['allriders', appId, debouncedSearch, tabvalue],
    queryFn: fetchAllRiders,
    getNextPageParam: (lastPage, pages) => (lastPage.details?.length ? pages.length + 1 : undefined)
  });

  const rows = allRidersData?.pages.flatMap((page) => page.details) || [];

  useEffect(() => {
    if (!hasNextPage) return;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          fetchNextPage();
        }
      },
      {
        root: document.querySelector('.MuiTableContainer-root'),
        rootMargin: '0px',
        threshold: 1.0
      }
    );
    if (loadMoreRef.current) observer.observe(loadMoreRef.current);
    return () => {
      if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
    };
  }, [hasNextPage, fetchNextPage]);

  const handleScroll = (event) => {
    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
    if (scrollTop + clientHeight >= scrollHeight - 50) {
      if (hasNextPage && !isFetchingNextPage) {
        fetchNextPage();
      }
    }
  };

  const errMessage = riderstatusIsError ? riderStatusError : null;
  useEffect(() => {
    if (errMessage) {
      OpenToast(errMessage, 'error', 2000);
    }
  }, [errMessage]);

  // Per-row status meta — falls back to "unknown" if the rider's state key
  // isn't in the palette (e.g. brand-new status string from the backend).
  const getRowStatusMeta = (row) => {
    if (tabvalue == 0) {
      const key = (row.status || '').toLowerCase() === 'active' ? 'active' : 'inactive';
      return STATUS_META[key];
    }
    const state = ridersStatus?.find((s) => s.userid === row.userid);
    const key = (state?.status || 'unknown').toLowerCase();
    return STATUS_META[key] || STATUS_META.unknown;
  };

  return (
    <>
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={allRidersLoading || riderSummarysLoading || riderStatusLoading}
      >
        <CircularLoader color="inherit" />
      </Backdrop>

      {/* ============================================= || Header | ============================================= */}
      <Paper
        elevation={0}
        sx={{
          mb: { xs: 1.5, md: 2 },
          p: { xs: 1.5, sm: 2, md: 2.5 },
          borderRadius: DT.radiusCard / 8,
          border: '1px solid',
          borderColor: DT.borderSubtle,
          background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
          boxShadow: DT.shadowMd
        }}
      >
        <Stack
          direction={{ xs: 'column', sm: 'row' }}
          alignItems={{ xs: 'flex-start', sm: 'center' }}
          justifyContent="space-between"
          spacing={{ xs: 1.5, sm: 2 }}
        >
          <Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
            <Avatar
              sx={{
                width: { xs: 40, sm: 48 },
                height: { xs: 40, sm: 48 },
                bgcolor: BRAND,
                color: '#fff',
                boxShadow: `0 6px 18px ${ring(BRAND)}`
              }}
            >
              <MdDirectionsBike size={22} />
            </Avatar>
            <Stack>
              <Typography
                variant="h3"
                sx={{
                  fontWeight: 800,
                  color: DT.textPrimary,
                  lineHeight: 1.1,
                  fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
                }}
              >
                Riders
              </Typography>
              <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
                <Box
                  sx={{
                    width: 8,
                    height: 8,
                    borderRadius: '50%',
                    bgcolor: '#10b981',
                    boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
                  }}
                />
                <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
                  Live · {locaName || 'All Zones'}
                </Typography>
              </Stack>
            </Stack>
          </Stack>
          <LocationAutocomplete
            locaName={locaName}
            setAppId={setAppId}
            setLocoName={setLocoName}
            pill
            accentColor={BRAND}
            icon={<MdMyLocation size={14} />}
            placeholder="Select Zone"
            paperComponent={SoftPaper}
            sx={{ width: { xs: '100%', sm: 280 }, zIndex: 100 }}
          />
        </Stack>
      </Paper>

      {/* ============================================= || KPI Cards | ============================================= */}
      <Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }} sx={{ mt: '1px' }}>
        {KPI_META(allRidersSummary).map((item) => {
          const Icon = item.icon;
          return (
            <Grid item key={item.key} xs={12} sm={4}>
              <Paper
                elevation={0}
                sx={{
                  position: 'relative',
                  overflow: 'hidden',
                  p: { xs: 1.25, sm: 1.75, md: 2.25 },
                  borderRadius: DT.radiusCard / 8,
                  border: '1px solid',
                  borderColor: DT.borderSubtle,
                  background: '#fff',
                  transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
                  '&:hover': {
                    transform: 'translateY(-3px)',
                    boxShadow: DT.shadowMd,
                    borderColor: edge(item.color)
                  }
                }}
              >
                <Box
                  sx={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    height: 3,
                    background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
                  }}
                />
                <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
                  <Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
                    <Typography
                      variant="caption"
                      sx={{
                        color: DT.textSecondary,
                        fontWeight: 700,
                        letterSpacing: 0.4,
                        textTransform: 'uppercase',
                        fontSize: { xs: 10, sm: 11 },
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis'
                      }}
                    >
                      {item.label}
                    </Typography>
                    {riderSummarysLoading ? (
                      <Skeleton sx={{ width: 70, height: { xs: 28, md: 36 } }} animation="wave" />
                    ) : (
                      <Typography
                        sx={{
                          fontWeight: 800,
                          color: DT.textPrimary,
                          lineHeight: 1.1,
                          fontSize: { xs: '1.5rem', sm: '1.75rem', md: '2rem' }
                        }}
                      >
                        {item.value}
                      </Typography>
                    )}
                  </Stack>
                  <Avatar
                    sx={{
                      width: { xs: 36, sm: 42, md: 48 },
                      height: { xs: 36, sm: 42, md: 48 },
                      bgcolor: soft(item.color),
                      color: item.color,
                      boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
                      flexShrink: 0
                    }}
                  >
                    <Icon size={20} />
                  </Avatar>
                </Stack>
              </Paper>
            </Grid>
          );
        })}
      </Grid>

      {/* ============================================= || Status Tabs + Search || ============================================= */}
      <Paper
        elevation={0}
        sx={{
          mt: { xs: 1.5, md: 2 },
          p: { xs: 1, md: 1.5 },
          borderTopLeftRadius: DT.radiusCard / 8,
          borderTopRightRadius: DT.radiusCard / 8,
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,
          border: '1px solid',
          borderColor: DT.borderSubtle,
          borderBottom: 0,
          background: '#fff'
        }}
      >
        <Stack
          direction="row"
          alignItems="center"
          justifyContent="space-between"
          gap={1.5}
          sx={{ flexWrap: 'wrap-reverse' }}
        >
          <Stack
            direction="row"
            spacing={0.75}
            sx={{
              flex: 1,
              overflowX: 'auto',
              py: 0.5,
              px: 0.25,
              '&::-webkit-scrollbar': { height: 6 },
              '&::-webkit-scrollbar-thumb': { backgroundColor: DT.borderSubtle, borderRadius: 4 }
            }}
          >
            {TAB_META.map((t) => {
              const Icon = t.icon;
              const active = tabvalue === t.key;
              const count = allRidersSummary?.[t.countKey] ?? 0;
              return (
                <Box
                  key={t.key}
                  onClick={() => handleChangetab(t.key)}
                  sx={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: { xs: 0.625, md: 0.875 },
                    pl: 0.5,
                    pr: { xs: 1, md: 1.25 },
                    py: 0.5,
                    flexShrink: 0,
                    cursor: 'pointer',
                    borderRadius: 999,
                    border: `1.5px solid ${active ? t.color : edge(t.color)}`,
                    bgcolor: active ? t.color : tint(t.color),
                    color: active ? '#fff' : t.color,
                    fontWeight: 700,
                    boxShadow: active ? `0 6px 18px ${ring(t.color)}` : 'none',
                    transition: 'all 0.18s',
                    '&:hover': {
                      borderColor: t.color,
                      boxShadow: active ? `0 6px 18px ${ring(t.color)}` : `0 0 0 3px ${ring(t.color)}`
                    }
                  }}
                >
                  <Avatar
                    sx={{
                      width: { xs: 22, md: 26 },
                      height: { xs: 22, md: 26 },
                      bgcolor: active ? 'rgba(255,255,255,0.22)' : soft(t.color),
                      color: active ? '#fff' : t.color
                    }}
                  >
                    <Icon size={13} />
                  </Avatar>
                  <Typography variant="caption" sx={{ fontWeight: 800, fontSize: { xs: 11.5, md: 13 }, lineHeight: 1 }}>
                    {t.label}
                  </Typography>
                  <Box
                    sx={{
                      minWidth: { xs: 22, md: 26 },
                      height: { xs: 18, md: 22 },
                      px: 0.625,
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: 999,
                      fontSize: { xs: 10, md: 11 },
                      fontWeight: 800,
                      bgcolor: active ? 'rgba(255,255,255,0.22)' : '#fff',
                      color: active ? '#fff' : t.color,
                      border: active ? 'none' : `1px solid ${edge(t.color)}`
                    }}
                  >
                    {riderSummarysLoading ? <Skeleton variant="text" width={14} height={10} /> : count}
                  </Box>
                </Box>
              );
            })}
          </Stack>

          <Box sx={{ width: { xs: '100%', sm: 240, lg: 280 }, flex: { xs: '1 1 100%', sm: '0 0 auto' } }}>
            <DebounceSearchBar
              value={searchword}
              onChange={setSearchword}
              onDebouncedChange={setDebouncedSearch}
              placeholder="Search riders (ctrl+k)"
              sx={{
                m: 0,
                width: '100%',
                borderRadius: 999,
                bgcolor: tint(BRAND),
                '& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
                '&:hover fieldset': { borderColor: BRAND },
                '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 },
                '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` }
              }}
            />
          </Box>
        </Stack>
      </Paper>

      {/* ============================================= || Table || ============================================= */}
      <Paper
        elevation={0}
        sx={{
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          borderBottomLeftRadius: DT.radiusCard / 8,
          borderBottomRightRadius: DT.radiusCard / 8,
          border: '1px solid',
          borderColor: DT.borderSubtle,
          overflow: 'hidden',
          background: '#fff'
        }}
      >
        <TableContainer
          ref={containerRef}
          onScroll={handleScroll}
          sx={{
            maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' },
            '&::-webkit-scrollbar': { width: 10, height: 10 },
            '&::-webkit-scrollbar-thumb': {
              backgroundColor: edge(BRAND),
              borderRadius: 8,
              '&:hover': { backgroundColor: BRAND }
            },
            '&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
          }}
        >
          {isMobile ? (
            /* ===================== MOBILE: card list ===================== */
            <MobileCardList sx={{ p: 1.25 }}>
              {allRidersLoading && (
                <Stack alignItems="center" sx={{ py: 6 }}>
                  <LoaderWithImage />
                  <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>
                    Loading riders…
                  </Typography>
                </Stack>
              )}

              {rows?.length === 0 && !allRidersLoading && (
                <Stack alignItems="center" spacing={1.5} sx={{ py: 6 }}>
                  <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
                    <MdTwoWheeler size={28} />
                  </Avatar>
                  <Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
                    No riders to show
                  </Typography>
                  <Typography variant="caption" sx={{ color: DT.textSecondary, textAlign: 'center', px: 2 }}>
                    {searchword
                      ? 'Try a different keyword.'
                      : `No ${tabvalue === 0 ? '' : 'active '}riders for this zone.`}
                  </Typography>
                </Stack>
              )}

              {rows?.length !== 0 &&
                rows?.map((row, index) => {
                  const statusMeta = getRowStatusMeta(row);
                  const StatusIcon = statusMeta.icon;
                  const expanded = logsRow === row.userid;
                  return (
                    <MobileCard
                      key={row.userid ?? index}
                      accent={statusMeta.color}
                      selected={expanded}
                      header={
                        <Stack spacing={1.25}>
                          <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
                            <Stack direction="row" alignItems="center" spacing={0.75} sx={{ minWidth: 0 }}>
                              <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textMuted }}>
                                {String(index + 1).padStart(2, '0')}
                              </Typography>
                              <Box
                                sx={{
                                  display: 'inline-flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  px: 1,
                                  py: 0.375,
                                  borderRadius: 999,
                                  bgcolor: tint(BRAND),
                                  border: `1px solid ${edge(BRAND)}`,
                                  color: BRAND,
                                  fontWeight: 800,
                                  fontSize: 11
                                }}
                              >
                                #{row?.userid}
                              </Box>
                              <Stack
                                direction="row"
                                alignItems="center"
                                spacing={0.5}
                                sx={{
                                  display: 'inline-flex',
                                  pl: 0.5,
                                  pr: 1,
                                  py: 0.25,
                                  borderRadius: 999,
                                  bgcolor: tint(statusMeta.color),
                                  border: `1px solid ${edge(statusMeta.color)}`,
                                  color: statusMeta.color
                                }}
                              >
                                <AccentAvatar color={statusMeta.color} size={18}>
                                  <StatusIcon size={11} />
                                </AccentAvatar>
                                <Typography variant="caption" sx={{ fontWeight: 800, fontSize: 10.5, lineHeight: 1 }}>
                                  {statusMeta.label}
                                </Typography>
                              </Stack>
                            </Stack>
                            {roleid == 1 && (
                              <Stack direction="row" spacing={0.75} sx={{ flexShrink: 0 }}>
                                <IconButton
                                  size="small"
                                  sx={{
                                    borderRadius: 999,
                                    bgcolor: soft(BRAND),
                                    color: BRAND,
                                    border: `1px solid ${edge(BRAND)}`,
                                    '&:hover': { bgcolor: BRAND, color: '#fff' }
                                  }}
                                  onClick={() => {
                                    navigate('/nearle/riders/edit', { state: { riderdata: row } });
                                  }}
                                >
                                  <MdEdit size={14} />
                                </IconButton>
                                {tabvalue != 0 && (
                                  <IconButton
                                    size="small"
                                    sx={{
                                      borderRadius: 999,
                                      bgcolor: expanded ? '#0ea5e9' : soft('#0ea5e9'),
                                      color: expanded ? '#fff' : '#0ea5e9',
                                      border: `1px solid ${edge('#0ea5e9')}`,
                                      '&:hover': { bgcolor: '#0ea5e9', color: '#fff' }
                                    }}
                                    onClick={() => {
                                      if (row.userid == logsRow) {
                                        setLogsRow(null);
                                      } else {
                                        setLogsRow(row.userid);
                                        getRiderLogs(row.userid);
                                      }
                                    }}
                                  >
                                    {expanded ? <MdKeyboardArrowUp size={14} /> : <MdKeyboardArrowDown size={14} />}
                                  </IconButton>
                                )}
                              </Stack>
                            )}
                          </Stack>
                          <Stack direction="row" alignItems="center" spacing={1}>
                            <Avatar
                              sx={{
                                width: 36,
                                height: 36,
                                bgcolor: soft(BRAND),
                                color: BRAND,
                                fontWeight: 800,
                                fontSize: 16,
                                border: `1px solid ${edge(BRAND)}`,
                                flexShrink: 0
                              }}
                            >
                              {(row.fullname || row.username || '?').charAt(0).toUpperCase()}
                            </Avatar>
                            <Box sx={{ minWidth: 0 }}>
                              <Typography sx={{ fontWeight: 800, color: DT.textPrimary, fontSize: 15 }} noWrap>
                                {row.username || '—'}
                              </Typography>
                              <Typography variant="caption" sx={{ color: DT.textSecondary }} noWrap>
                                {row.contactno || '—'}
                              </Typography>
                            </Box>
                          </Stack>
                        </Stack>
                      }
                    >
                      <MobileFieldGrid>
                        <MobileField label="Address" full>
                          <Typography sx={{ fontSize: 13, fontWeight: 600, color: DT.textSecondary }} noWrap>
                            {row.suburb || (row.address ? row.address.slice(0, 20) + '…' : '—')}
                          </Typography>
                          <Typography variant="caption" sx={{ color: DT.textMuted }} noWrap>
                            {row.city || ''}
                          </Typography>
                        </MobileField>
                        <MobileField label="Vehicle">
                          <Stack direction="row" alignItems="center" spacing={0.75}>
                            <AccentAvatar color="#0ea5e9" size={22}>
                              <MdTwoWheeler size={12} />
                            </AccentAvatar>
                            <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }}>
                              {row.vehicleno || '—'}
                            </Typography>
                          </Stack>
                        </MobileField>
                        <MobileField label="Shift" value={`#${row.shiftid ?? '—'}`} />
                        <MobileField label="Time">
                          <Stack spacing={0.5}>
                            <Box
                              sx={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                px: 0.875,
                                py: 0.25,
                                borderRadius: 999,
                                bgcolor: tint('#10b981'),
                                border: `1px solid ${edge('#10b981')}`,
                                color: '#10b981',
                                fontSize: 10.5,
                                fontWeight: 800
                              }}
                            >
                              {row.starttime ? dayjs(`${dayjs().format('MM-DD-YYYY')} ${row.starttime}`).format('hh:mm A') : '—'}
                            </Box>
                            <Box
                              sx={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                px: 0.875,
                                py: 0.25,
                                borderRadius: 999,
                                bgcolor: tint('#ef4444'),
                                border: `1px solid ${edge('#ef4444')}`,
                                color: '#ef4444',
                                fontSize: 10.5,
                                fontWeight: 800
                              }}
                            >
                              {row.endtime ? dayjs(`${dayjs().format('MM-DD-YYYY')} ${row.endtime}`).format('hh:mm A') : '—'}
                            </Box>
                          </Stack>
                        </MobileField>
                        <MobileField label="Fare" value={row.basefare ?? '—'} />
                        <MobileField label="Fuel" value={row.fuelcharge ?? '—'} />
                      </MobileFieldGrid>

                      {expanded && tabvalue !== 0 && (
                        <Box
                          sx={{
                            mt: 1.5,
                            p: 1.25,
                            borderRadius: 2,
                            bgcolor: tint(BRAND),
                            border: `1px solid ${edge(BRAND)}`
                          }}
                        >
                          <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.25 }}>
                            <AccentAvatar color={BRAND} size={26}>
                              <MdGpsFixed size={14} />
                            </AccentAvatar>
                            <Typography
                              sx={{
                                fontWeight: 800,
                                color: DT.textSecondary,
                                letterSpacing: 0.6,
                                textTransform: 'uppercase',
                                fontSize: 11
                              }}
                            >
                              Live telemetry — {row.username || `Rider #${row.userid}`}
                            </Typography>
                          </Stack>
                          <Grid container spacing={1.25}>
                            <LogChip
                              color="#ef4444"
                              icon={MdLocationOn}
                              label="Location"
                              value={riderLogsdata?.latitude ? `${riderLogsdata.latitude}, ${riderLogsdata.longitude}` : '—'}
                            />
                            <LogChip
                              color="#10b981"
                              icon={MdBatteryStd}
                              label="Battery"
                              value={riderLogsdata?.battery ? `${riderLogsdata.battery}%` : 'N/A'}
                            />
                            <LogChip
                              color={riderLogsdata?.is_charging ? '#10b981' : '#94a3b8'}
                              icon={MdPowerSettingsNew}
                              label="Charging"
                              value={riderLogsdata?.is_charging ? 'Charging' : 'Not Charging'}
                            />
                            <LogChip
                              color="#0ea5e9"
                              icon={MdSpeed}
                              label="Speed"
                              value={riderLogsdata?.speed !== undefined ? `${riderLogsdata.speed} km/h` : '—'}
                            />
                            <LogChip
                              color="#8b5cf6"
                              icon={MdGpsFixed}
                              label="Accuracy"
                              value={riderLogsdata?.accuracy !== undefined ? `${riderLogsdata.accuracy} m` : '—'}
                            />
                            <LogChip color="#f59e0b" icon={MdAccessTime} label="Log time" value={riderLogsdata?.logdate || '—'} />
                            <LogChip color={BRAND} icon={MdInventory2} label="Active order" value={riderLogsdata?.orderid || 'N/A'} />
                            <LogChip
                              color={riderLogsdata?.status === 'idle' ? '#f59e0b' : '#10b981'}
                              icon={MdCheckCircle}
                              label="Status"
                              value={riderLogsdata?.status || 'unknown'}
                            />
                          </Grid>
                        </Box>
                      )}
                    </MobileCard>
                  );
                })}

              {rows?.length !== 0 && (
                <div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
                  {isFetchingNextPage || hasNextPage ? (
                    <LoaderWithImage />
                  ) : (
                    <Typography variant="caption" sx={{ color: DT.textMuted, fontWeight: 600 }}>
                      No more riders
                    </Typography>
                  )}
                </div>
              )}
            </MobileCardList>
          ) : (
          <Table stickyHeader sx={{ minWidth: { xs: 1100, md: 1300 } }}>
            <TableHead>
              <TableRow
                sx={{
                  '& th': {
                    backgroundColor: DT.surfaceAlt,
                    color: DT.textSecondary,
                    fontSize: { xs: 10, md: 11 },
                    fontWeight: 800,
                    letterSpacing: 0.6,
                    textTransform: 'uppercase',
                    whiteSpace: 'nowrap',
                    borderBottom: `1px solid ${DT.borderSubtle}`,
                    py: { xs: 1, md: 1.25 },
                    px: { xs: 1, md: 2 }
                  }
                }}
              >
                <TableCell>#</TableCell>
                <TableCell>ID</TableCell>
                <TableCell>Rider</TableCell>
                <TableCell>Address</TableCell>
                <TableCell>Vehicle</TableCell>
                <TableCell>Shift</TableCell>
                <TableCell align="center">Time</TableCell>
                <TableCell>Fare</TableCell>
                <TableCell>Fuel</TableCell>
                <TableCell align="center">Status</TableCell>
                {roleid == 1 && <TableCell align="right">Action</TableCell>}
              </TableRow>
            </TableHead>
            <TableBody>
              {allRidersLoading && <OrdersTableSkeleton col={6} />}

              {rows?.length === 0 && !allRidersLoading && (
                <TableRow>
                  <TableCell colSpan={roleid == 1 ? 11 : 10} sx={{ py: 6 }}>
                    <Stack alignItems="center" spacing={1.5}>
                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
                        <MdTwoWheeler size={28} />
                      </Avatar>
                      <Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
                        No riders to show
                      </Typography>
                      <Typography variant="caption" sx={{ color: DT.textSecondary }}>
                        {searchword
                          ? 'Try a different keyword.'
                          : `No ${tabvalue === 0 ? '' : 'active '}riders for this zone.`}
                      </Typography>
                    </Stack>
                  </TableCell>
                </TableRow>
              )}

              {rows?.length !== 0 &&
                rows?.map((row, index) => {
                  const statusMeta = getRowStatusMeta(row);
                  const StatusIcon = statusMeta.icon;
                  const expanded = logsRow === row.userid;
                  return (
                    <Fragment key={row.userid ?? index}>
                      <TableRow
                        sx={{
                          cursor: 'pointer',
                          transition: 'background-color 0.15s',
                          '& td': {
                            borderBottom: `1px solid ${DT.divider}`,
                            py: { xs: 1, md: 1.5 },
                            px: { xs: 1, md: 2 }
                          },
                          '&:hover': { backgroundColor: DT.surfaceAlt },
                          ...(expanded && { backgroundColor: tint(BRAND) })
                        }}
                      >
                        <TableCell>
                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textMuted }}>
                            {String(index + 1).padStart(2, '0')}
                          </Typography>
                        </TableCell>
                        <TableCell>
                          <Box
                            sx={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              px: 1,
                              py: 0.375,
                              borderRadius: 999,
                              bgcolor: tint(BRAND),
                              border: `1px solid ${edge(BRAND)}`,
                              color: BRAND,
                              fontWeight: 800,
                              fontSize: 11,
                              minWidth: 56
                            }}
                          >
                            #{row?.userid}
                          </Box>
                        </TableCell>
                        <TableCell>
                          <Stack direction="row" alignItems="center" spacing={1}>
                            <Avatar
                              sx={{
                                width: 36,
                                height: 36,
                                bgcolor: soft(BRAND),
                                color: BRAND,
                                fontWeight: 800,
                                fontSize: 16,
                                border: `1px solid ${edge(BRAND)}`
                              }}
                            >
                              {(row.fullname || row.username || '?').charAt(0).toUpperCase()}
                            </Avatar>
                            <Stack sx={{ minWidth: 0 }}>
                              <Typography
                                variant="subtitle2"
                                sx={{ fontWeight: 700, color: DT.textPrimary, whiteSpace: 'nowrap' }}
                              >
                                {row.username || '—'}
                              </Typography>
                              <Typography variant="caption" sx={{ color: DT.textSecondary }}>
                                {row.contactno || '—'}
                              </Typography>
                            </Stack>
                          </Stack>
                        </TableCell>
                        <TableCell sx={{ maxWidth: 220 }}>
                          <Tooltip title={row.address || ''} placement="top">
                            <Stack>
                              <Typography
                                variant="caption"
                                sx={{ color: DT.textSecondary, fontWeight: 600 }}
                                noWrap
                              >
                                {row.suburb || (row.address ? row.address.slice(0, 20) + '…' : '—')}
                              </Typography>
                              <Typography variant="caption" sx={{ color: DT.textMuted }} noWrap>
                                {row.city || ''}
                              </Typography>
                            </Stack>
                          </Tooltip>
                        </TableCell>
                        <TableCell>
                          <Stack direction="row" alignItems="center" spacing={0.75}>
                            <AccentAvatar color="#0ea5e9" size={22}>
                              <MdTwoWheeler size={12} />
                            </AccentAvatar>
                            <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }}>
                              {row.vehicleno || '—'}
                            </Typography>
                          </Stack>
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
                            #{row.shiftid ?? '—'}
                          </Typography>
                        </TableCell>
                        <TableCell align="center">
                          <Stack spacing={0.5} alignItems="center">
                            <Box
                              sx={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: 0.375,
                                px: 0.875,
                                py: 0.25,
                                borderRadius: 999,
                                bgcolor: tint('#10b981'),
                                border: `1px solid ${edge('#10b981')}`,
                                color: '#10b981',
                                fontSize: 10.5,
                                fontWeight: 800,
                                minWidth: 88,
                                justifyContent: 'center'
                              }}
                            >
                              {row.starttime ? dayjs(`${dayjs().format('MM-DD-YYYY')} ${row.starttime}`).format('hh:mm A') : '—'}
                            </Box>
                            <Box
                              sx={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: 0.375,
                                px: 0.875,
                                py: 0.25,
                                borderRadius: 999,
                                bgcolor: tint('#ef4444'),
                                border: `1px solid ${edge('#ef4444')}`,
                                color: '#ef4444',
                                fontSize: 10.5,
                                fontWeight: 800,
                                minWidth: 88,
                                justifyContent: 'center'
                              }}
                            >
                              {row.endtime ? dayjs(`${dayjs().format('MM-DD-YYYY')} ${row.endtime}`).format('hh:mm A') : '—'}
                            </Box>
                          </Stack>
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }}>
                            {row.basefare ?? '—'}
                          </Typography>
                        </TableCell>
                        <TableCell>
                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }}>
                            {row.fuelcharge ?? '—'}
                          </Typography>
                        </TableCell>
                        <TableCell align="center">
                          <Stack
                            direction="row"
                            alignItems="center"
                            spacing={0.5}
                            sx={{
                              display: 'inline-flex',
                              pl: 0.5,
                              pr: 1,
                              py: 0.25,
                              borderRadius: 999,
                              bgcolor: tint(statusMeta.color),
                              border: `1px solid ${edge(statusMeta.color)}`,
                              color: statusMeta.color
                            }}
                          >
                            <AccentAvatar color={statusMeta.color} size={20}>
                              <StatusIcon size={12} />
                            </AccentAvatar>
                            <Typography variant="caption" sx={{ fontWeight: 800, fontSize: 11, lineHeight: 1 }}>
                              {statusMeta.label}
                            </Typography>
                          </Stack>
                        </TableCell>
                        {roleid == 1 && (
                          <TableCell align="right">
                            <Stack direction="row" spacing={0.75} justifyContent="flex-end">
                              <Tooltip title="Edit rider" placement="top">
                                <IconButton
                                  size="small"
                                  sx={{
                                    bgcolor: soft(BRAND),
                                    color: BRAND,
                                    border: `1px solid ${edge(BRAND)}`,
                                    '&:hover': { bgcolor: BRAND, color: '#fff' }
                                  }}
                                  onClick={() => {
                                    navigate('/nearle/riders/edit', { state: { riderdata: row } });
                                  }}
                                >
                                  <MdEdit size={14} />
                                </IconButton>
                              </Tooltip>
                              {tabvalue != 0 && (
                                <Tooltip title={expanded ? 'Hide logs' : 'View live logs'} placement="top">
                                  <IconButton
                                    size="small"
                                    sx={{
                                      bgcolor: expanded ? '#0ea5e9' : soft('#0ea5e9'),
                                      color: expanded ? '#fff' : '#0ea5e9',
                                      border: `1px solid ${edge('#0ea5e9')}`,
                                      '&:hover': { bgcolor: '#0ea5e9', color: '#fff' }
                                    }}
                                    onClick={() => {
                                      if (row.userid == logsRow) {
                                        setLogsRow(null);
                                      } else {
                                        setLogsRow(row.userid);
                                        getRiderLogs(row.userid);
                                      }
                                    }}
                                  >
                                    {expanded ? <MdKeyboardArrowUp size={14} /> : <MdKeyboardArrowDown size={14} />}
                                  </IconButton>
                                </Tooltip>
                              )}
                            </Stack>
                          </TableCell>
                        )}
                      </TableRow>

                      {/* ============ Collapsible row — live rider logs ============ */}
                      {expanded && tabvalue !== 0 && (
                        <TableRow>
                          <TableCell colSpan={roleid == 1 ? 11 : 10} sx={{ p: 0, borderBottom: `1px solid ${DT.divider}` }}>
                            <Collapse in={expanded} timeout="auto" unmountOnExit>
                              <Box
                                sx={{
                                  p: { xs: 1.5, md: 2 },
                                  bgcolor: tint(BRAND),
                                  borderTop: `1px solid ${edge(BRAND)}`
                                }}
                              >
                                <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.25 }}>
                                  <AccentAvatar color={BRAND} size={26}>
                                    <MdGpsFixed size={14} />
                                  </AccentAvatar>
                                  <Typography
                                    sx={{
                                      fontWeight: 800,
                                      color: DT.textSecondary,
                                      letterSpacing: 0.6,
                                      textTransform: 'uppercase',
                                      fontSize: 11
                                    }}
                                  >
                                    Live telemetry — {row.username || `Rider #${row.userid}`}
                                  </Typography>
                                </Stack>
                                <Grid container spacing={1.25}>
                                  <LogChip
                                    color="#ef4444"
                                    icon={MdLocationOn}
                                    label="Location"
                                    value={
                                      riderLogsdata?.latitude
                                        ? `${riderLogsdata.latitude}, ${riderLogsdata.longitude}`
                                        : '—'
                                    }
                                  />
                                  <LogChip
                                    color="#10b981"
                                    icon={MdBatteryStd}
                                    label="Battery"
                                    value={riderLogsdata?.battery ? `${riderLogsdata.battery}%` : 'N/A'}
                                  />
                                  <LogChip
                                    color={riderLogsdata?.is_charging ? '#10b981' : '#94a3b8'}
                                    icon={MdPowerSettingsNew}
                                    label="Charging"
                                    value={riderLogsdata?.is_charging ? 'Charging' : 'Not Charging'}
                                  />
                                  <LogChip
                                    color="#0ea5e9"
                                    icon={MdSpeed}
                                    label="Speed"
                                    value={
                                      riderLogsdata?.speed !== undefined ? `${riderLogsdata.speed} km/h` : '—'
                                    }
                                  />
                                  <LogChip
                                    color="#8b5cf6"
                                    icon={MdGpsFixed}
                                    label="Accuracy"
                                    value={
                                      riderLogsdata?.accuracy !== undefined ? `${riderLogsdata.accuracy} m` : '—'
                                    }
                                  />
                                  <LogChip
                                    color="#f59e0b"
                                    icon={MdAccessTime}
                                    label="Log time"
                                    value={riderLogsdata?.logdate || '—'}
                                  />
                                  <LogChip
                                    color={BRAND}
                                    icon={MdInventory2}
                                    label="Active order"
                                    value={riderLogsdata?.orderid || 'N/A'}
                                  />
                                  <LogChip
                                    color={
                                      riderLogsdata?.status === 'idle' ? '#f59e0b' : '#10b981'
                                    }
                                    icon={MdCheckCircle}
                                    label="Status"
                                    value={riderLogsdata?.status || 'unknown'}
                                  />
                                </Grid>
                              </Box>
                            </Collapse>
                          </TableCell>
                        </TableRow>
                      )}
                    </Fragment>
                  );
                })}

              {rows?.length !== 0 && (
                <TableRow>
                  <TableCell colSpan={roleid == 1 ? 11 : 10} sx={{ borderBottom: 'none' }}>
                    <div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
                      {isFetchingNextPage || hasNextPage ? (
                        <LoaderWithImage />
                      ) : (
                        <Typography variant="caption" sx={{ color: DT.textMuted, fontWeight: 600 }}>
                          No more riders
                        </Typography>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
          )}
        </TableContainer>
      </Paper>
    </>
  );
};

// Inline stat chip used in the rider-logs collapse row. Mirrors the StatChip
// pattern from the pricing page so the telemetry block reads at a glance.
const LogChip = ({ color, icon: Icon, label, value }) => (
  <Grid item xs={6} sm={4} md={3}>
    <Stack
      direction="row"
      alignItems="center"
      spacing={1}
      sx={{
        px: 1.125,
        py: 0.75,
        borderRadius: 1.75,
        bgcolor: '#fff',
        border: `1px solid ${edge(color)}`,
        minWidth: 0
      }}
    >
      <AccentAvatar color={color} size={28}>
        <Icon size={14} />
      </AccentAvatar>
      <Stack sx={{ minWidth: 0 }}>
        <Typography
          sx={{
            color: DT.textMuted,
            fontWeight: 700,
            lineHeight: 1,
            textTransform: 'uppercase',
            letterSpacing: 0.4,
            fontSize: 9.5
          }}
        >
          {label}
        </Typography>
        <Typography
          sx={{
            color: DT.textPrimary,
            fontWeight: 800,
            fontSize: 13,
            lineHeight: 1.2,
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            mt: 0.25
          }}
        >
          {value}
        </Typography>
      </Stack>
    </Stack>
  </Grid>
);

export default Riders;