sexy/components/sessions/SessionsTable.tsx

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Trash2 } from "lucide-react";
import { toast } from "sonner";

export interface SessionRow {
  id: number;
  name: string | null;
  kind: "live" | "replay";
  status: "active" | "completed" | "aborted";
  startedAt: number;
  durationMs: number | null;
}

function formatDuration(ms: number | null): string {
  if (ms === null) return "-";
  const totalSeconds = Math.round(ms / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
  const router = useRouter();

  async function handleDelete(id: number) {
    const res = await fetch(`/api/play-sessions/${id}`, { method: "DELETE" });
    if (res.ok) {
      toast.success("Session deleted");
      router.refresh();
    } else if (res.status === 409) {
      toast.error("A saved recording still references this session");
    } else {
      toast.error("Could not delete session");
    }
  }

  if (sessions.length === 0) {
    return <p className="text-sm text-muted-foreground">No sessions yet.</p>;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Session</TableHead>
          <TableHead>Kind</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Started</TableHead>
          <TableHead>Duration</TableHead>
          <TableHead className="text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {sessions.map((s) => (
          <TableRow key={s.id}>
            <TableCell className="font-medium">
              <Link href={`/sessions/${s.id}`} className="hover:underline">
                {s.name ?? `Session #${s.id}`}
              </Link>
            </TableCell>
            <TableCell>
              <Badge variant={s.kind === "live" ? "default" : "secondary"}>{s.kind}</Badge>
            </TableCell>
            <TableCell className="text-muted-foreground">{s.status}</TableCell>
            <TableCell className="bp-readout text-muted-foreground">
              {new Date(s.startedAt).toLocaleString()}
            </TableCell>
            <TableCell className="bp-readout">{formatDuration(s.durationMs)}</TableCell>
            <TableCell className="text-right">
              <Button variant="ghost" size="icon-sm" onClick={() => void handleDelete(s.id)} aria-label="Delete">
                <Trash2 className="size-3.5" />
              </Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}