sexy/components/stats/DeviceUsageTable.tsx

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export interface DeviceUsageRow {
  deviceId: number;
  displayName: string | null;
  bleName: string;
  sessionCount: number;
  totalActiveMs: number;
  commandCount: number;
  lastUsedAt: number | null;
}

export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
  if (devices.length === 0) {
    return <p className="text-sm text-muted-foreground">No device activity yet.</p>;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Device</TableHead>
          <TableHead>Sessions</TableHead>
          <TableHead>Active time</TableHead>
          <TableHead>Commands</TableHead>
          <TableHead>Last used</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {devices.map((d) => (
          <TableRow key={d.deviceId}>
            <TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
            <TableCell className="bp-readout">{d.sessionCount}</TableCell>
            <TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
            <TableCell className="bp-readout">{d.commandCount}</TableCell>
            <TableCell className="bp-readout text-muted-foreground">
              {d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}