sexy/components/sessions/SessionsTable.tsx

"use client";

import { useState } from "react";
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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Play, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { STATUS_VARIANT } from "@/components/sessions/session-status";

export interface SessionRow {
  id: number;
  name: string | null;
  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();
  const [pendingDelete, setPendingDelete] = useState<SessionRow | null>(null);
  const [deleting, setDeleting] = useState(false);

  async function handleDelete() {
    if (!pendingDelete) return;
    setDeleting(true);
    const res = await fetch(`/api/sessions/${pendingDelete.id}`, { method: "DELETE" });
    setDeleting(false);
    if (res.ok) {
      toast.success("Session deleted");
      setPendingDelete(null);
      router.refresh();
    } 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>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={STATUS_VARIANT[s.status]}>{s.status}</Badge>
              </TableCell>
              <TableCell className="bp-readout text-muted-foreground">
                {new Date(s.startedAt).toLocaleString()}
              </TableCell>
              <TableCell className="bp-readout">{formatDuration(s.durationMs)}</TableCell>
              <TableCell className="flex justify-end gap-1">
                {s.status === "completed" && s.durationMs !== null && (
                  <Button asChild variant="ghost" size="icon-sm">
                    <Link href={`/sessions/${s.id}/replay`} aria-label="Replay">
                      <Play className="size-3.5" />
                    </Link>
                  </Button>
                )}
                <Button variant="ghost" size="icon-sm" onClick={() => setPendingDelete(s)} aria-label="Delete">
                  <Trash2 className="size-3.5" />
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <Dialog open={pendingDelete !== null} onOpenChange={(open) => !open && setPendingDelete(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete session?</DialogTitle>
            <DialogDescription>
              This permanently deletes{" "}
              <span className="font-medium text-foreground">
                {pendingDelete?.name ?? `Session #${pendingDelete?.id}`}
              </span>{" "}
              and all of its recorded events. This can&apos;t be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setPendingDelete(null)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
              {deleting ? "Deleting..." : "Delete"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}