sexy/app/(app)/recordings/[id]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { getRecording, getRecordingName } from "@/lib/db/queries/recordings";
import { Play } from "lucide-react";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const name = await getRecordingName(Number(id));
  return { title: name ?? "Recording" };
}

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

export default async function RecordingDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const result = await getRecording(Number(id));
  if (!result) notFound();

  const { recording } = result;

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-heading text-2xl font-semibold">{recording.name}</h1>
          {recording.description && <p className="text-sm text-muted-foreground">{recording.description}</p>}
        </div>
        <Button asChild>
          <Link href={`/recordings/${recording.id}/replay`}>
            <Play className="size-4" /> Replay
          </Link>
        </Button>
      </div>

      <Card className="bp-glass">
        <CardHeader>
          <CardTitle className="text-base">Details</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-2 text-sm sm:grid-cols-2">
          <div>
            <span className="text-muted-foreground">Duration: </span>
            {formatDuration(recording.durationMs)}
          </div>
          <div>
            <span className="text-muted-foreground">Plays: </span>
            {recording.playCount}
          </div>
          <div>
            <span className="text-muted-foreground">Created: </span>
            {new Date(recording.createdAt).toLocaleString()}
          </div>
          <div>
            <span className="text-muted-foreground">Last played: </span>
            {recording.lastPlayedAt ? new Date(recording.lastPlayedAt).toLocaleString() : "Never"}
          </div>
        </CardContent>
      </Card>

      <Card className="bp-glass">
        <CardHeader>
          <CardTitle className="text-base">Devices in this recording</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-1">
          {recording.deviceSlots.map((slot) => (
            <div key={slot.sourceSessionDeviceId} className="text-sm">
              {slot.slotLabel} <span className="text-muted-foreground">({slot.recordedBleName})</span>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}