sexy/components/stats/DeviceUsageTable.tsx

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
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 (
      <Card className="bp-glass">
        <CardHeader>
          <CardTitle className="text-sm">Device usage</CardTitle>
        </CardHeader>
        <CardContent className="text-sm text-muted-foreground">No device activity yet.</CardContent>
      </Card>
    );
  }

  return (
    <Card className="bp-glass">
      <CardHeader>
        <CardTitle className="text-sm">Device usage</CardTitle>
      </CardHeader>
      <CardContent>
        <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>
      </CardContent>
    </Card>
  );
}