doormilxpress_astryx/src/pages/doormile/riders/Riders.jsx

import React, { useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import {
  Ban, Bell, Bike, Car, CheckCircle2, CircleSlash, Pencil, Plus, Radio, Users,
} from 'lucide-react';
import {
  Avatar, Button, ConfirmModal, DataTable, Drawer, EmptyState, Field, Grid, IconButton,
  Input, KpiCard, Modal, PageHeader, SearchInput, Select, SelectContent, SelectItem, SelectTrigger,
  SelectValue, Stack, StatusBadge, Surface, Tabs, Textarea, ZoneSelector,
} from '@/components/ds';
import {
  useAssignMilerVehicle, useBlockMiler, useMilerLogs, useMilers, useNotifyMiler,
  useRiderSummaryCounts, useVehicles,
} from '@/lib/doormileHooks';
import { useZone } from '@/lib/ZoneContext';
import { formatDoormileTimestamp } from '@/lib/doormileTimestamp';
import { currency, matchesQuery, orDash, useDebouncedValue } from '@/lib/doormileFormat';

/**
 * Riders — the milers who actually carry the parcels.
 *
 * Two identifiers matter here and they are not interchangeable: `userid` is
 * what a booking's assignment records and what `assign-miler` wants, while
 * `milerprofileid` is the primary key of this resource and what block, notify,
 * assign-vehicle and logs all key on. Passing one where the other belongs 404s.
 *
 * The rider-substitution feature from the source console is deliberately absent:
 * it has no backend endpoint at all, so there is nothing here to build against.
 */

/** "Active" means neither offline nor blocked — the same rule the counts use. */
const isActive = (rider) => !['offline', 'blocked'].includes(String(rider?.availabilitystatus || '').toLowerCase());

const riderName = (rider) => rider?.displayname || rider?.authname || '—';

/** A bare `HH:mm:ss` from the shift record, rendered as a clock time. */
const shiftTime = (value) =>
  value ? dayjs(`${dayjs().format('YYYY-MM-DD')} ${value}`).format('hh:mm A') : '—';

const TABS = [
  { value: 'all', label: 'All riders' },
  { value: 'active', label: 'Active' },
  { value: 'blocked', label: 'Blocked' },
];

export default function Riders() {
  const navigate = useNavigate();
  const { data: riders = [], isLoading, isFetching } = useMilers();
  const { data: summary } = useRiderSummaryCounts();
  const { data: vehicles = [] } = useVehicles();

  const [search, setSearch] = useState('');
  const debouncedSearch = useDebouncedValue(search);
  const [tab, setTab] = useState('all');

  const [blockRow, setBlockRow] = useState(null);
  const [vehicleRow, setVehicleRow] = useState(null);
  const [selectedVehicle, setSelectedVehicle] = useState('');
  const [notifyRow, setNotifyRow] = useState(null);
  const [notice, setNotice] = useState({ title: 'DoormileXpress', message: '' });
  const [logsRow, setLogsRow] = useState(null);

  const blockMiler = useBlockMiler();
  const assignVehicle = useAssignMilerVehicle();
  const notifyMiler = useNotifyMiler();

  const { selectedZone, isAllZones, matchesZone } = useZone();

  const zoneRiders = useMemo(() => {
    return (riders || []).filter(matchesZone);
  }, [riders, matchesZone]);

  const counts = useMemo(() => {
    const list = zoneRiders;
    return {
      all: list.length,
      active: list.filter(isActive).length,
      blocked: list.filter((rider) => String(rider.availabilitystatus || '').toLowerCase() === 'blocked').length,
    };
  }, [zoneRiders]);

  const rows = useMemo(() => {
    let list = zoneRiders;
    if (tab === 'active') list = list.filter(isActive);
    else if (tab === 'blocked') {
      list = list.filter((rider) => String(rider.availabilitystatus || '').toLowerCase() === 'blocked');
    }
    return list.filter((rider) =>
      matchesQuery(rider, [riderName, 'phone', 'userid', 'city', 'suburb', 'defaultvehicletype'], debouncedSearch)
    );
  }, [zoneRiders, tab, debouncedSearch]);

  const columns = useMemo(
    () => [
      {
        key: 'rider',
        header: 'Miler',
        sortable: true,
        accessor: riderName,
        cell: (row) => (
          <div className="flex items-center gap-2.5 min-w-0">
            <Avatar name={riderName(row)} size="sm" />
            <div className="min-w-0">
              <p className="truncate text-body-sm font-semibold text-ink-1">{riderName(row)}</p>
              <p className="text-caption text-ink-3">
                {orDash(row.phone)} · #{row.userid}
              </p>
            </div>
          </div>
        ),
      },
      {
        key: 'address',
        header: 'Base',
        sortValue: (row) => row.suburb || row.address || '',
        cell: (row) => (
          <div className="min-w-0">
            <p className="truncate text-body-sm text-ink-2" title={row.address || ''}>
              {row.suburb || row.address || '—'}
            </p>
            {row.city ? <p className="text-caption text-ink-3">{row.city}</p> : null}
          </div>
        ),
        hideBelow: 'lg',
      },
      {
        key: 'defaultvehicletype',
        header: 'Vehicle',
        sortable: true,
        accessor: (row) => orDash(row.defaultvehicletype),
        hideBelow: 'md',
      },
      {
        key: 'shift',
        header: 'Shift',
        sortValue: (row) => row.starttime || '',
        accessor: (row) => `${shiftTime(row.starttime)} – ${shiftTime(row.endtime)}`,
        hideBelow: 'lg',
      },
      {
        key: 'basefare',
        header: 'Base fare',
        sortValue: (row) => Number(row.basefare) || 0,
        accessor: (row) => currency(row.basefare),
        align: 'right',
        hideBelow: 'lg',
      },
      {
        key: 'availabilitystatus',
        header: 'Status',
        sortable: true,
        cell: (row) => <StatusBadge status={row.availabilitystatus} dot size="sm" />,
      },
      {
        key: 'actions',
        header: 'Actions',
        align: 'right',
        cell: (row) => (
          <div className="flex justify-end gap-1">
            <IconButton
              label="Edit miler"
              icon={Pencil}
              variant="ghost"
              size="sm"
              onClick={() => navigate('/doormile/milers/edit', { state: { rider: row } })}
            />
            <IconButton
              label="Assign vehicle"
              icon={Car}
              variant="ghost"
              size="sm"
              onClick={() => {
                setVehicleRow(row);
                setSelectedVehicle('');
              }}
            />
            <IconButton
              label="Send a notification"
              icon={Bell}
              variant="ghost"
              size="sm"
              onClick={() => {
                setNotifyRow(row);
                setNotice({ title: 'DoormileXpress', message: '' });
              }}
            />
            <IconButton
              label="Live logs"
              icon={Radio}
              variant="ghost"
              size="sm"
              onClick={() => setLogsRow(row)}
            />
            <IconButton label="Block miler" icon={Ban} variant="ghost" size="sm" onClick={() => setBlockRow(row)} />
          </div>
        ),
      },
    ],
    [navigate]
  );

  return (
    <Stack space="lg">
      <PageHeader
        icon={Bike}
        title="Milers"
        subtitle="Who is on the road, what they are on, and where they are"
        actions={
          <Button onClick={() => navigate('/doormile/milers/create')}>
            <Plus className="mr-1.5 h-4 w-4" /> New miler
          </Button>
        }
      />

      <Grid cols={4}>
        <KpiCard
          icon={Users}
          value={summary?.total ?? counts.all}
          label="Total milers"
          tone="brand"
          index={0}
          loading={isLoading}
          onClick={() => setTab('all')}
        />
        <KpiCard
          icon={CheckCircle2}
          value={summary?.available ?? counts.active}
          label="Available now"
          tone="success"
          index={1}
          loading={isLoading}
        />
        <KpiCard
          icon={Bike}
          value={
            summary?.onDelivery ??
            zoneRiders.filter(
              (r) =>
                String(r.availabilitystatus || '').toLowerCase() === 'on_delivery' ||
                String(r.availabilitystatus || '').toLowerCase() === 'ondelivery'
            ).length
          }
          label="On delivery"
          tone="accent"
          index={2}
          loading={isLoading}
        />
        <KpiCard
          icon={CircleSlash}
          value={summary?.inactive ?? counts.blocked}
          label="Offline or blocked"
          tone="neutral"
          index={3}
          loading={isLoading}
          onClick={() => setTab('blocked')}
        />
      </Grid>

      <Stack space="sm">
        {/* Wraps, and the tab strip scrolls in its own track — see Orders.jsx
            for why two `shrink-0` halves scrolled the whole page on a phone. */}
        <div className="flex flex-wrap items-center justify-between gap-3 w-full">
          <div className="-mx-1 max-w-full min-w-0 overflow-x-auto px-1 py-0.5">
            <Tabs
              tabs={TABS.map((entry) => ({ ...entry, count: counts[entry.value] }))}
              value={tab}
              onChange={setTab}
              className="shrink-0"
            />
          </div>

          <div className="flex min-w-0 flex-1 flex-wrap items-center justify-end gap-2 sm:flex-none">
            <ZoneSelector />
            <SearchInput
              value={search}
              onChange={setSearch}
              placeholder="Search by name, phone, id or city"
              className="w-full sm:w-64"
            />
          </div>
        </div>

        <p className="text-caption text-ink-3">
          {rows.length === (counts[tab] ?? counts.all)
            ? `${counts[tab] ?? counts.all} milers`
            : `${rows.length} of ${counts[tab] ?? counts.all} milers`}
        </p>

        <DataTable
          columns={columns}
          rows={rows}
          getRowId={(row) => row.milerprofileid ?? row.userid}
          loading={isLoading}
          refreshing={isFetching && !isLoading}
          pageSize={10}
          defaultSort={{ key: 'rider', direction: 'asc' }}
          isFiltered={Boolean(debouncedSearch)}
          onClearFilters={() => setSearch('')}
          emptyState={
            debouncedSearch ? undefined : (
              <EmptyState
                icon={Bike}
                title="No milers here"
                description="Onboard a miler to start assigning deliveries."
                action={{ label: 'New miler', icon: Plus, onClick: () => navigate('/doormile/milers/create') }}
              />
            )
          }
        />
      </Stack>

      <ConfirmModal
        open={Boolean(blockRow)}
        onOpenChange={(open) => !open && setBlockRow(null)}
        title="Block this miler?"
        description={`${riderName(blockRow || {})} will stop receiving assignments until they are unblocked.`}
        confirmLabel="Block miler"
        busy={blockMiler.isPending}
        onConfirm={() => {
          blockMiler.mutate(
            { id: blockRow.milerprofileid, data: {} },
            { onSettled: () => setBlockRow(null) }
          );
        }}
      />

      <Modal
        open={Boolean(vehicleRow)}
        onOpenChange={(open) => !open && setVehicleRow(null)}
        title="Assign a vehicle"
        description={riderName(vehicleRow || {})}
        icon={Car}
        busy={assignVehicle.isPending}
        footer={
          <>
            <Button variant="ghost" onClick={() => setVehicleRow(null)}>
              Cancel
            </Button>
            <Button
              onClick={() =>
                assignVehicle.mutate(
                  { id: vehicleRow.milerprofileid, data: { vehicleid: Number(selectedVehicle) } },
                  { onSuccess: (res) => res?.success !== false && setVehicleRow(null) }
                )
              }
              disabled={!selectedVehicle || assignVehicle.isPending}
            >
              Assign vehicle
            </Button>
          </>
        }
      >
        <Field label="Vehicle">
          <Select value={selectedVehicle} onValueChange={setSelectedVehicle}>
            <SelectTrigger>
              <SelectValue placeholder="Choose a vehicle" />
            </SelectTrigger>
            <SelectContent>
              {(vehicles || []).map((vehicle) => (
                <SelectItem key={vehicle.vehicleid} value={String(vehicle.vehicleid)}>
                  {vehicle.vehicleno || `Vehicle #${vehicle.vehicleid}`}
                  {vehicle.vehicletype ? ` · ${vehicle.vehicletype}` : ''}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </Field>
      </Modal>

      <Modal
        open={Boolean(notifyRow)}
        onOpenChange={(open) => !open && setNotifyRow(null)}
        title="Notify this miler"
        description={`${riderName(notifyRow || {})} — delivered to the miler app as a push notification.`}
        icon={Bell}
        busy={notifyMiler.isPending}
        footer={
          <>
            <Button variant="ghost" onClick={() => setNotifyRow(null)}>
              Cancel
            </Button>
            <Button
              onClick={() =>
                notifyMiler.mutate(
                  {
                    milerProfileId: notifyRow.milerprofileid,
                    title: notice.title,
                    message: notice.message,
                  },
                  { onSuccess: (res) => res?.success !== false && setNotifyRow(null) }
                )
              }
              disabled={notifyMiler.isPending || !notice.message.trim()}
            >
              Send notification
            </Button>
          </>
        }
      >
        <Stack space="default">
          <Field label="Title">
            <Input value={notice.title} onChange={(e) => setNotice({ ...notice, title: e.target.value })} />
          </Field>
          <Field label="Message">
            <Textarea
              rows={4}
              value={notice.message}
              onChange={(e) => setNotice({ ...notice, message: e.target.value })}
              placeholder="Orders have been placed for delivery. Kindly accept and process deliveries."
            />
          </Field>
        </Stack>
      </Modal>

      <RiderLogsDrawer rider={logsRow} onClose={() => setLogsRow(null)} />
    </Stack>
  );
}

/**
 * The rider's own ping history — position and status over time.
 *
 * A log entry has no documented field names, so each row renders whichever of
 * the plausible ones is present rather than assuming a shape that would render
 * a column of blanks against a real response.
 */
function RiderLogsDrawer({ rider, onClose }) {
  const { data: logs = [], isLoading } = useMilerLogs(rider?.milerprofileid, undefined, undefined, 50);

  return (
    <Drawer
      open={Boolean(rider)}
      onOpenChange={(next) => !next && onClose()}
      title={`Live logs · ${riderName(rider || {})}`}
      description="The most recent pings this rider's app has sent."
      icon={Radio}
      size="lg"
    >
      {isLoading ? (
        <p className="text-body-sm text-ink-3">Loading logs…</p>
      ) : !logs || logs.length === 0 ? (
        <EmptyState icon={Radio} size="sm" title="No pings recorded" description="This rider has not reported a position yet." />
      ) : (
        <Stack space="sm">
          {logs.map((log, index) => (
            <Surface key={log.logid ?? index} variant="subtle" padding="sm" radius="lg">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="text-body-sm font-medium text-ink-1">
                    {orDash(log.status ?? log.availabilitystatus ?? log.event)}
                  </p>
                  <p className="text-caption text-ink-3">
                    {log.latitude ?? log.currentlatitude ?? '—'}, {log.longitude ?? log.currentlongitude ?? '—'}
                  </p>
                </div>
                <p className="shrink-0 text-caption text-ink-4">
                  {formatDoormileTimestamp(log.logdate ?? log.lastpingat ?? log.createdat, 'DD MMM, hh:mm A')}
                </p>
              </div>
            </Surface>
          ))}
        </Stack>
      )}
    </Drawer>
  );
}