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 { Trash2 } from "lucide-react";
import { toast } from "sonner";

interface BlockingRecording {
  id: number;
  name: string;
}

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();
  const [conflict, setConflict] = useState<{ id: number; recordings: BlockingRecording[] } | null>(null);
  const [deleting, setDeleting] = useState(false);

  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) {
      const body: { recordings?: BlockingRecording[] } = await res.json().catch(() => ({}));
      setConflict({ id, recordings: body.recordings ?? [] });
    } else {
      toast.error("Could not delete session");
    }
  }

  async function handleCascadeDelete() {
    if (!conflict) return;
    setDeleting(true);
    const res = await fetch(`/api/play-sessions/${conflict.id}?cascade=true`, { method: "DELETE" });
    setDeleting(false);
    if (res.ok) {
      toast.success("Session and recording deleted");
      setConflict(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>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>

      <Dialog open={conflict !== null} onOpenChange={(open) => !open && setConflict(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete session and recording?</DialogTitle>
            <DialogDescription>
              This session has a saved recording
              {conflict && conflict.recordings.length > 0
                ? ` (${conflict.recordings.map((r) => r.name).join(", ")})`
                : ""}{" "}
              that still points to it. Deleting the session will also delete that recording.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setConflict(null)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={() => void handleCascadeDelete()} disabled={deleting}>
              {deleting ? "Deleting..." : "Delete both"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}