import React, { useState, useMemo } from 'react';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';

// material-ui
import {
  Avatar,
  Box,
  Chip,
  Collapse,
  Dialog,
  DialogContent,
  Divider,
  Grid,
  IconButton,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tooltip,
  Typography
} from '@mui/material';
import {
  MdDirectionsBike,
  MdMyLocation,
  MdCalendarMonth,
  MdLocalShipping,
  MdCheckCircle,
  MdHourglassEmpty,
  MdCancel,
  MdCurrencyRupee,
  MdStraighten,
  MdMap,
  MdExpandMore,
  MdExpandLess,
  MdGroups,
  MdPerson
} from 'react-icons/md';

import dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);

import { fetchRidersSummary } from 'pages/api/api';
import Loader from 'components/Loader';
import DateFilterDialog from 'components/DateFilterDialog';
import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
import RidersRoutes from './RidersRoutes';
import { OpenToast } from 'components/third-party/OpenToast';

// ============================================================================
// Design tokens — shared with deliveries / tenants / customers / pricing /
// orders-details pages.
// ============================================================================
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>
);

// Pill used in cells for numeric / km / amount metrics.
const MetricPill = ({ color, icon, label, tooltip, minWidth = 80 }) => (
  <Tooltip title={tooltip || ''} placement="top">
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 0.5,
        px: 1,
        py: 0.375,
        borderRadius: 999,
        bgcolor: tint(color),
        border: `1px solid ${edge(color)}`,
        color,
        fontSize: 11,
        fontWeight: 800,
        minWidth,
        justifyContent: 'center',
        whiteSpace: 'nowrap'
      }}
    >
      {icon}
      {label}
    </Box>
  </Tooltip>
);

// Coloured numeric cell — non-zero values get a soft red badge to draw the eye,
// preserving the legacy "red when present" affordance.
const CountCell = ({ value, color = '#ef4444', icon }) => {
  const n = Number(value) || 0;
  if (n === 0) {
    return (
      <Typography variant="caption" sx={{ color: DT.textMuted, fontWeight: 700 }}>
        0
      </Typography>
    );
  }
  return (
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 0.5,
        px: 0.875,
        py: 0.25,
        borderRadius: 999,
        bgcolor: tint(color),
        border: `1px solid ${edge(color)}`,
        color,
        fontSize: 12,
        fontWeight: 800,
        minWidth: 36,
        justifyContent: 'center'
      }}
    >
      {icon}
      {n}
    </Box>
  );
};

function formatNumberToRupees(value) {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
    minimumFractionDigits: 2
  }).format(Number(value) || 0);
}

// ==============================|| Riders Summary ||============================== //

export default function RidersSummary() {
  const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
  const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
  const [locaName, setLocoName] = useState('All');
  const [open, setOpen] = useState(false);
  const [datestatus, setDatestatus] = useState('Today');
  const [tenantData, setTenantData] = useState([]);
  const [openRow, setOpenRow] = useState(null);
  const [appId, setAppId] = useState(0);
  const [loading, setLoading] = useState(false);
  const [mapOpen, setMapOpen] = useState(false);
  const [logDetails, setLogDetails] = useState(null);
  const [selectedRider, setSelectedRider] = useState(null);
  const [routeLoading, setRouteLoading] = useState(false);
  const [searchword, setSearchword] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');

  // ==============================|| fetchRidersSummary ||============================== //
  const { isLoading: isLoadingReports, data: rows } = useQuery({
    queryKey: ['ridersummary', appId, startdate, enddate],
    queryFn: fetchRidersSummary
  });

  // Client-side filter across rider name + id.
  const filteredRows = useMemo(() => {
    if (!rows) return [];
    if (!debouncedSearch) return rows;
    const q = debouncedSearch.toLowerCase().trim();
    return rows.filter((r) =>
      [`${r.firstname || ''} ${r.lastname || ''}`, String(r.userid)]
        .filter(Boolean)
        .some((field) => String(field).toLowerCase().includes(q))
    );
  }, [rows, debouncedSearch]);

  // Aggregate KPIs from the loaded summary.
  const stats = useMemo(() => {
    if (!rows || rows.length === 0) return { riders: 0, orders: 0, delivered: 0, amount: 0 };
    return rows.reduce(
      (acc, r) => {
        acc.riders += 1;
        acc.orders += Number(r.totalorders) || 0;
        acc.delivered += Number(r.delivered) || 0;
        acc.amount += Math.max(Number(r.charges) || 0, Number(r.deliveryamt) || 0);
        return acc;
      },
      { riders: 0, orders: 0, delivered: 0, amount: 0 }
    );
  }, [rows]);

  // ==============================|| per-rider tenant breakdown ||============================== //
  const fetchTenantSummary = async (riderUserid) => {
    setLoading(true);
    try {
      const tenantRes = await axios.get(
        `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${riderUserid}`
      );
      setTenantData(tenantRes.data.details);
    } catch (error) {
      console.log('tenantRes', error);
    } finally {
      setLoading(false);
    }
  };

  // ==============================|| rider planned route (for map) ||============================== //
  // Pulls every delivery the rider was assigned over the page's date range, then
  // emits an ordered waypoint list sorted by `step` (the planning sequence). The
  // map dialog renders this as the rider's PLANNED route — the path the
  // optimizer told them to follow — not their actual GPS trail.
  const getuserdeliverylogs = async (userid) => {
    setRouteLoading(true);
    try {
      // /deliveries/getdeliveries treats applocationid=0 differently from a
      // real location id — when appId===0 ("All") the backend expects the
      // logged-in operator's userid via appuserid instead. Mirrors the
      // branching in api.js#fetchDeliveries.
      const loggedInUserId = typeof window !== 'undefined' ? localStorage.getItem('userid') || 0 : 0;
      const scopeParam = appId === 0
        ? `appuserid=${loggedInUserId}`
        : `applocationid=${appId}`;
      const url =
        `${process.env.REACT_APP_URL}/deliveries/getdeliveries/` +
        `?${scopeParam}` +
        `&status=all` +
        `&fromdate=${startdate}` +
        `&todate=${enddate}` +
        `&pageno=1` +
        `&pagesize=200` +
        `&keyword=` +
        `&tenantid=` +
        `&locationid=` +
        `&userid=${userid}`;
      const response = await axios.get(url);
      const rowsRaw = response?.data?.details || [];
      const toNum = (v) => {
        const n = Number(v);
        return Number.isFinite(n) ? n : null;
      };
      const planned = rowsRaw
        .map((o) => {
          const dropLat = toNum(o.droplat ?? o.deliverylat);
          const dropLng = toNum(o.droplon ?? o.deliverylong);
          const pickLat = toNum(o.pickuplat ?? o.pickuplatitude);
          const pickLng = toNum(o.pickuplon ?? o.pickuplong ?? o.picklongitude);
          if (dropLat == null || dropLng == null) return null;
          return {
            step: Number(o.step) || 0,
            orderid: o.orderid,
            deliveryid: o.deliveryid,
            customer: o.deliverycustomer || o.customername || `Order ${o.orderid}`,
            address: o.deliveryaddress || o.deliverysuburb || '',
            dropLat,
            dropLng,
            pickLat: pickLat ?? null,
            pickLng: pickLng ?? null,
            // Expected delivery clock — used as a label under the step pin so
            // the operator can sanity-check sequencing without clicking each
            // marker.
            expectedTime: o.expecteddeliverytime || null
          };
        })
        .filter(Boolean)
        .sort((a, b) => a.step - b.step);
      setLogDetails(planned);
    } catch (err) {
      OpenToast(err?.message, 'error', 2000);
      setLogDetails([]);
    } finally {
      setRouteLoading(false);
    }
  };

  // Total Amount sum (preserved from legacy bottom bar).
  const total = useMemo(() => {
    if (!rows) return 0;
    return rows.reduce((sum, row) => sum + (Number(row.deliveryamt) || 0), 0);
  }, [rows]);

  const KPI_META = [
    { key: 'riders',    label: 'Active Riders',  color: BRAND,     icon: MdDirectionsBike, value: stats.riders },
    { key: 'orders',    label: 'Total Orders',   color: '#0ea5e9', icon: MdLocalShipping,  value: stats.orders },
    { key: 'delivered', label: 'Delivered',      color: '#10b981', icon: MdCheckCircle,    value: stats.delivered },
    { key: 'amount',    label: 'Total Amount',   color: '#f59e0b', icon: MdCurrencyRupee,  value: formatNumberToRupees(total) }
  ];

  return (
    <>
      {(isLoadingReports || loading) && <Loader />}

      {/* ============================================= || 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 Summary
              </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'} · {datestatus}
                </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.map((item) => {
          const Icon = item.icon;
          return (
            <Grid item key={item.key} xs={6} sm={6} md={3}>
              <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'
                      }}
                    >
                      {item.label}
                    </Typography>
                    <Typography
                      sx={{
                        fontWeight: 800,
                        color: DT.textPrimary,
                        lineHeight: 1.1,
                        fontSize: { xs: '1.1rem', sm: '1.4rem', md: '1.6rem' },
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis'
                      }}
                    >
                      {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>

      {/* ============================================= || Filter Bar (date + 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={{ xs: 'column', sm: 'row' }}
          alignItems={{ xs: 'stretch', sm: 'center' }}
          justifyContent="space-between"
          spacing={1.25}
        >
          <Stack direction="row" alignItems="center" spacing={1.25} flexWrap="wrap">
            <AccentAvatar color={BRAND} size={32}>
              <MdDirectionsBike size={18} />
            </AccentAvatar>
            <Stack>
              <Typography
                variant="caption"
                sx={{ fontWeight: 800, color: DT.textSecondary, letterSpacing: 0.6, textTransform: 'uppercase' }}
              >
                Orders · {datestatus}
              </Typography>
              <Typography variant="body2" sx={{ color: DT.textPrimary, fontWeight: 700 }}>
                {filteredRows.length} riders · {stats.orders} orders
              </Typography>
            </Stack>
            <Tooltip title="Date Filter" placement="top">
              <Box
                onClick={() => setOpen(true)}
                sx={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 0.75,
                  px: 1.25,
                  py: 0.75,
                  borderRadius: 999,
                  cursor: 'pointer',
                  bgcolor: tint('#f59e0b'),
                  border: `1.5px solid ${edge('#f59e0b')}`,
                  color: '#f59e0b',
                  fontWeight: 800,
                  fontSize: 12,
                  ml: 1,
                  transition: 'all 0.18s',
                  '&:hover': { borderColor: '#f59e0b', boxShadow: `0 0 0 3px ${ring('#f59e0b')}` }
                }}
              >
                <MdCalendarMonth size={14} />
                {dayjs(startdate).format('DD/MM/YY')} – {dayjs(enddate).format('DD/MM/YY')}
              </Box>
            </Tooltip>
          </Stack>
          <Box sx={{ width: { xs: '100%', sm: 280, lg: 340 }, 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
          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 }
          }}
        >
          <Table stickyHeader sx={{ minWidth: { xs: 880, md: 1080 } }}>
            <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>Rider</TableCell>
                <TableCell align="center">Orders</TableCell>
                <TableCell align="center">Pending</TableCell>
                <TableCell align="center">Cancelled</TableCell>
                <TableCell align="center">Delivered</TableCell>
                <TableCell align="center">KMS</TableCell>
                <TableCell align="center">Amount</TableCell>
                <TableCell align="right">Action</TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {isLoadingReports && <OrdersTableSkeleton col={5} />}
              {(!filteredRows || filteredRows.length === 0) && !isLoadingReports ? (
                <TableRow>
                  <TableCell colSpan={9} sx={{ py: 6 }}>
                    <Stack alignItems="center" spacing={1.5}>
                      <Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
                        <MdDirectionsBike 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.' : 'Pick a zone or date range to load the summary.'}
                      </Typography>
                    </Stack>
                  </TableCell>
                </TableRow>
              ) : (
                filteredRows.map((row, index) => {
                  const isOpen = openRow === row.userid;
                  const amount = Math.max(Number(row.charges) || 0, Number(row.deliveryamt) || 0);
                  return (
                    <React.Fragment key={row.userid || index}>
                      <TableRow
                        sx={{
                          transition: 'background-color 0.15s',
                          '& td': {
                            borderBottom: isOpen ? 'none' : `1px solid ${DT.divider}`,
                            py: { xs: 1, md: 1.5 },
                            px: { xs: 1, md: 2 }
                          },
                          '&:hover': { backgroundColor: isOpen ? '#fff' : DT.surfaceAlt },
                          bgcolor: isOpen ? tint(BRAND) : 'transparent'
                        }}
                      >
                        <TableCell>
                          <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textMuted }}>
                            {String(index + 1).padStart(2, '0')}
                          </Typography>
                        </TableCell>

                        <TableCell>
                          <Stack direction="row" alignItems="center" spacing={1}>
                            <AccentAvatar color={BRAND} size={36}>
                              <MdPerson size={18} />
                            </AccentAvatar>
                            <Stack>
                              <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textPrimary, whiteSpace: 'nowrap' }}>
                                {`${row?.firstname || ''} ${row?.lastname || ''}`.trim() || '—'}
                              </Typography>
                              <Typography variant="caption" sx={{ color: DT.textSecondary }}>
                                ID #{row.userid}
                              </Typography>
                            </Stack>
                          </Stack>
                        </TableCell>

                        <TableCell align="center">
                          <CountCell value={row.totalorders} color={BRAND} icon={<MdLocalShipping size={11} />} />
                        </TableCell>
                        <TableCell align="center">
                          <CountCell value={row.pending} color="#f59e0b" icon={<MdHourglassEmpty size={11} />} />
                        </TableCell>
                        <TableCell align="center">
                          <CountCell value={row.cancelled} color="#ef4444" icon={<MdCancel size={11} />} />
                        </TableCell>
                        <TableCell align="center">
                          <CountCell value={row.delivered} color="#10b981" icon={<MdCheckCircle size={11} />} />
                        </TableCell>

                        <TableCell align="center">
                          <Stack direction="column" spacing={0.5} alignItems="center">
                            <MetricPill
                              color="#ef4444"
                              icon={<MdStraighten size={11} />}
                              label={`${Number(row.kms || 0).toFixed(2)} km`}
                              tooltip="KMS"
                            />
                            <MetricPill
                              color="#10b981"
                              icon={<MdStraighten size={11} />}
                              label={`${Number(row.cumulativekms || 0).toFixed(2)} km`}
                              tooltip="Actual KMS"
                            />
                          </Stack>
                        </TableCell>

                        <TableCell align="center">
                          <MetricPill
                            color={BRAND}
                            icon={<MdCurrencyRupee size={11} />}
                            label={formatNumberToRupees(amount).replace('₹', '').trim()}
                            tooltip="Total Amount"
                            minWidth={100}
                          />
                        </TableCell>

                        <TableCell align="right">
                          <Stack direction="row" spacing={0.75} justifyContent="flex-end">
                            <Tooltip title="View planned route" placement="top">
                              <IconButton
                                size="small"
                                onClick={() => {
                                  setSelectedRider({
                                    userid: row?.userid,
                                    name: `${row?.firstname || ''} ${row?.lastname || ''}`.trim() || `Rider ${row?.userid}`
                                  });
                                  setLogDetails(null);
                                  setMapOpen(true);
                                  getuserdeliverylogs(row?.userid);
                                }}
                                sx={{
                                  bgcolor: soft('#0ea5e9'),
                                  color: '#0ea5e9',
                                  border: `1px solid ${edge('#0ea5e9')}`,
                                  '&:hover': { bgcolor: '#0ea5e9', color: '#fff' }
                                }}
                              >
                                <MdMap size={14} />
                              </IconButton>
                            </Tooltip>
                            <Tooltip title={isOpen ? 'Collapse breakdown' : 'Expand breakdown'} placement="top">
                              <IconButton
                                size="small"
                                onClick={() => {
                                  const isOpening = !isOpen;
                                  setOpenRow(isOpening ? row.userid : null);
                                  if (isOpening) fetchTenantSummary(row.userid);
                                }}
                                sx={{
                                  bgcolor: isOpen ? BRAND : soft(BRAND),
                                  color: isOpen ? '#fff' : BRAND,
                                  border: `1px solid ${edge(BRAND)}`,
                                  '&:hover': { bgcolor: BRAND, color: '#fff' }
                                }}
                              >
                                {isOpen ? <MdExpandLess size={16} /> : <MdExpandMore size={16} />}
                              </IconButton>
                            </Tooltip>
                          </Stack>
                        </TableCell>
                      </TableRow>

                      {/* ============================================= || Collapsible per-tenant breakdown || ============================================= */}
                      {isOpen && (
                        <TableRow>
                          <TableCell
                            colSpan={9}
                            sx={{
                              p: 0,
                              borderBottom: `1px solid ${DT.divider}`,
                              bgcolor: tint(BRAND)
                            }}
                          >
                            <Collapse in={isOpen} timeout="auto" unmountOnExit>
                              <Box sx={{ p: { xs: 1, md: 2 } }}>
                                <Paper
                                  elevation={0}
                                  sx={{
                                    borderRadius: DT.radiusCard / 8,
                                    border: '1px solid',
                                    borderColor: DT.borderSubtle,
                                    overflow: 'hidden',
                                    boxShadow: DT.shadowSoft
                                  }}
                                >
                                  <Stack
                                    direction="row"
                                    alignItems="center"
                                    spacing={1}
                                    sx={{
                                      px: 2,
                                      py: 1.25,
                                      background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
                                      borderBottom: `1px solid ${DT.borderSubtle}`
                                    }}
                                  >
                                    <AccentAvatar color={BRAND} size={28} selected>
                                      <MdGroups size={14} />
                                    </AccentAvatar>
                                    <Typography
                                      variant="caption"
                                      sx={{ fontWeight: 800, color: DT.textPrimary, letterSpacing: 0.6, textTransform: 'uppercase' }}
                                    >
                                      Tenant Breakdown · {`${row?.firstname || ''} ${row?.lastname || ''}`.trim()}
                                    </Typography>
                                  </Stack>

                                  <Table size="small">
                                    <TableHead>
                                      <TableRow
                                        sx={{
                                          '& th': {
                                            backgroundColor: DT.surfaceAlt,
                                            color: DT.textSecondary,
                                            fontSize: 10,
                                            fontWeight: 800,
                                            letterSpacing: 0.6,
                                            textTransform: 'uppercase',
                                            whiteSpace: 'nowrap',
                                            borderBottom: `1px solid ${DT.borderSubtle}`,
                                            py: 1,
                                            px: 1.5
                                          }
                                        }}
                                      >
                                        <TableCell>#</TableCell>
                                        <TableCell>Client</TableCell>
                                        <TableCell align="center">All</TableCell>
                                        <TableCell align="center">Pending</TableCell>
                                        <TableCell align="center">Completed</TableCell>
                                        <TableCell align="center">Cancelled</TableCell>
                                        <TableCell align="center">KMS</TableCell>
                                        <TableCell align="center">Amount</TableCell>
                                      </TableRow>
                                    </TableHead>
                                    <TableBody>
                                      {loading && <OrdersTableSkeleton col={4} />}
                                      {!loading && (!tenantData || tenantData.length === 0) ? (
                                        <TableRow>
                                          <TableCell colSpan={8} sx={{ py: 3 }}>
                                            <Typography variant="caption" sx={{ color: DT.textMuted, textAlign: 'center', display: 'block' }}>
                                              No tenant breakdown available.
                                            </Typography>
                                          </TableCell>
                                        </TableRow>
                                      ) : (
                                        tenantData?.map((sub, sidx) => (
                                          <TableRow
                                            key={`${sub.tenantname}-${sidx}`}
                                            sx={{
                                              '& td': {
                                                borderBottom: `1px solid ${DT.divider}`,
                                                py: 1,
                                                px: 1.5
                                              },
                                              '&:hover': { backgroundColor: DT.surfaceAlt }
                                            }}
                                          >
                                            <TableCell>
                                              <Typography variant="caption" sx={{ fontWeight: 700, color: DT.textMuted }}>
                                                {String(sidx + 1).padStart(2, '0')}
                                              </Typography>
                                            </TableCell>
                                            <TableCell>
                                              <Stack direction="row" alignItems="center" spacing={0.75}>
                                                <AccentAvatar color="#0ea5e9" size={24}>
                                                  <MdGroups size={12} />
                                                </AccentAvatar>
                                                <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textPrimary, whiteSpace: 'nowrap' }}>
                                                  {sub.tenantname || '—'}
                                                </Typography>
                                              </Stack>
                                            </TableCell>
                                            <TableCell align="center">
                                              <CountCell value={sub.totalorders} color={BRAND} icon={<MdLocalShipping size={10} />} />
                                            </TableCell>
                                            <TableCell align="center">
                                              <CountCell value={sub.deliveriespending} color="#f59e0b" icon={<MdHourglassEmpty size={10} />} />
                                            </TableCell>
                                            <TableCell align="center">
                                              <CountCell value={sub.deliveriescompleted} color="#10b981" icon={<MdCheckCircle size={10} />} />
                                            </TableCell>
                                            <TableCell align="center">
                                              <CountCell value={sub.deliveriescancelled} color="#ef4444" icon={<MdCancel size={10} />} />
                                            </TableCell>
                                            <TableCell align="center">
                                              <Stack direction="column" spacing={0.5} alignItems="center">
                                                <MetricPill
                                                  color="#ef4444"
                                                  icon={<MdStraighten size={10} />}
                                                  label={`${Number(sub.kms || 0).toFixed(2)} km`}
                                                  tooltip="KMS"
                                                />
                                                <MetricPill
                                                  color="#10b981"
                                                  icon={<MdStraighten size={10} />}
                                                  label={`${Number(sub.cumulativekms || 0).toFixed(2)} km`}
                                                  tooltip="Actual KMS"
                                                />
                                              </Stack>
                                            </TableCell>
                                            <TableCell align="center">
                                              <MetricPill
                                                color={BRAND}
                                                icon={<MdCurrencyRupee size={10} />}
                                                label={formatNumberToRupees(
                                                  Math.max(Number(sub.charges) || 0, Number(sub.deliveryamt) || 0)
                                                )
                                                  .replace('₹', '')
                                                  .trim()}
                                                tooltip="Total Amount"
                                                minWidth={100}
                                              />
                                            </TableCell>
                                          </TableRow>
                                        ))
                                      )}
                                    </TableBody>
                                  </Table>
                                </Paper>
                              </Box>
                            </Collapse>
                          </TableCell>
                        </TableRow>
                      )}
                    </React.Fragment>
                  );
                })
              )}
            </TableBody>
          </Table>
        </TableContainer>

        {/* ============================================= || Total Bar || ============================================= */}
        {filteredRows.length > 0 && (
          <>
            <Divider />
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="flex-end"
              spacing={1.5}
              sx={{
                px: 2,
                py: 1.5,
                background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`
              }}
            >
              <Typography
                variant="caption"
                sx={{ fontWeight: 800, color: DT.textSecondary, letterSpacing: 0.6, textTransform: 'uppercase' }}
              >
                Grand Total
              </Typography>
              <Chip
                label={formatNumberToRupees(total)}
                sx={{
                  fontWeight: 800,
                  fontSize: 13,
                  color: '#fff',
                  background: `linear-gradient(135deg, ${BRAND} 0%, ${BRAND_LIGHT} 100%)`,
                  boxShadow: `0 6px 16px ${ring(BRAND)}`
                }}
              />
            </Stack>
          </>
        )}
      </Paper>

      {/* ============================================= || Map Dialog || ============================================= */}
      <Dialog
        maxWidth="xl"
        fullScreen
        open={mapOpen}
        onClose={() => {
          setMapOpen(false);
          setLogDetails(null);
          setSelectedRider(null);
        }}
      >
        <DialogContent sx={{ p: 0, height: '100vh' }}>
          <RidersRoutes
            details={logDetails}
            loading={routeLoading}
            riderName={selectedRider?.name}
            dateRange={`${dayjs(startdate).format('DD/MM/YY')} – ${dayjs(enddate).format('DD/MM/YY')}`}
            onClose={() => {
              setMapOpen(false);
              setLogDetails(null);
              setSelectedRider(null);
            }}
          />
        </DialogContent>
      </Dialog>

      {/* ============================================= || Date Filter Dialog || ============================================= */}
      <DateFilterDialog
        open={open}
        onClose={() => setOpen(false)}
        onSelect={(range) => {
          setStartdate(range.startDate);
          setEnddate(range.endDate);
          setDatestatus(range.label);
        }}
      />
    </>
  );
}
