sexy/components/stats/RecordingLibraryStats.tsx

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export interface RecordingLibrarySummary {
  count: number;
  avgDurationMs: number;
  totalPlayCount: number;
  list: { id: number; name: string; durationMs: number; playCount: number; lastPlayedAt: number | null }[];
}

export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummary }) {
  return (
    <div className="flex flex-col gap-4">
      <div className="grid gap-4 sm:grid-cols-3">
        <Card className="bp-glass">
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Recordings</CardTitle>
          </CardHeader>
          <CardContent className="font-display text-3xl">{stats.count}</CardContent>
        </Card>
        <Card className="bp-glass">
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Avg length</CardTitle>
          </CardHeader>
          <CardContent className="font-display text-3xl">
            {Math.round(stats.avgDurationMs / 1000)}s
          </CardContent>
        </Card>
        <Card className="bp-glass">
          <CardHeader>
            <CardTitle className="text-sm text-muted-foreground">Total plays</CardTitle>
          </CardHeader>
          <CardContent className="font-display text-3xl">{stats.totalPlayCount}</CardContent>
        </Card>
      </div>

      {stats.list.length > 0 && (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Recording</TableHead>
              <TableHead>Plays</TableHead>
              <TableHead>Last played</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {stats.list.map((r) => (
              <TableRow key={r.id}>
                <TableCell className="font-medium">{r.name}</TableCell>
                <TableCell>{r.playCount}</TableCell>
                <TableCell className="text-muted-foreground">
                  {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  );
}