elmeg-demo/frontend/app/performances/[id]/page.tsx

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Calendar, MapPin, Music2, ChevronRight } from "lucide-react"
import Link from "next/link"
import { notFound } from "next/navigation"
import { getApiUrl } from "@/lib/api-config"
import { CommentSection } from "@/components/social/comment-section"
import { EntityReviews } from "@/components/reviews/entity-reviews"
import { SocialWrapper } from "@/components/social/social-wrapper"
import { EntityRating } from "@/components/social/entity-rating"

async function getPerformance(id: string) {
    try {
        const res = await fetch(`${getApiUrl()}/performances/${id}`, { cache: 'no-store' })
        if (!res.ok) return null
        return res.json()
    } catch (e) {
        console.error(e)
        return null
    }
}

export default async function PerformanceDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params
    const performance = await getPerformance(id)

    if (!performance) {
        notFound()
    }

    return (
        <div className="flex flex-col gap-6">
            {/* Breadcrumbs */}
            <nav className="flex items-center gap-1 text-sm text-muted-foreground">
                <Link href="/songs" className="hover:text-foreground transition-colors">
                    Songs
                </Link>
                <ChevronRight className="h-4 w-4" />
                <Link
                    href={`/songs/${performance.song.id}`}
                    className="hover:text-foreground transition-colors"
                >
                    {performance.song.title}
                </Link>
                <ChevronRight className="h-4 w-4" />
                <span className="text-foreground font-medium">
                    {new Date(performance.show.date).toLocaleDateString()}
                </span>
            </nav>

            {/* Header */}
            <div className="flex items-start justify-between gap-4">
                <div className="flex items-center gap-4">
                    <Link href={`/shows/${performance.show.id}`}>
                        <Button variant="ghost" size="icon">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    </Link>
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
                            <Link
                                href={`/songs/${performance.song.id}`}
                                className="hover:text-primary transition-colors"
                            >
                                {performance.song.title}
                            </Link>
                            {performance.nicknames.length > 0 && (
                                <span className="text-xl text-muted-foreground font-normal">
                                    "{performance.nicknames[0].nickname}"
                                </span>
                            )}
                        </h1>
                        <div className="flex items-center gap-4 text-muted-foreground mt-1">
                            <Link href={`/shows/${performance.show.id}`} className="hover:text-foreground flex items-center gap-1 transition-colors">
                                <Calendar className="h-4 w-4" />
                                {new Date(performance.show.date).toLocaleDateString("en-US", {
                                    weekday: "short",
                                    year: "numeric",
                                    month: "short",
                                    day: "numeric"
                                })}
                            </Link>
                            {performance.show.venue && (
                                <Link
                                    href={`/venues/${performance.show.venue.id}`}
                                    className="flex items-center gap-1 hover:text-foreground transition-colors"
                                >
                                    <MapPin className="h-4 w-4" />
                                    {performance.show.venue.name}, {performance.show.venue.city}
                                </Link>
                            )}
                        </div>
                    </div>
                </div>

                {/* Rating */}
                <SocialWrapper type="ratings">
                    <EntityRating entityType="performance" entityId={performance.id} />
                </SocialWrapper>
            </div>

            <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
                <div className="flex flex-col gap-6">
                    <Card>
                        <CardHeader>
                            <CardTitle>Performance Details</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="grid grid-cols-3 gap-4 mb-4">
                                <div className="flex flex-col">
                                    <span className="text-xs text-muted-foreground uppercase font-bold">Times Played</span>
                                    <span className="text-2xl font-bold">{performance.times_played}</span>
                                </div>
                                <div className="flex flex-col">
                                    <span className="text-xs text-muted-foreground uppercase font-bold">Gap</span>
                                    <span className="text-2xl font-bold">{performance.gap}</span>
                                </div>
                                <div className="flex flex-col">
                                    <span className="text-xs text-muted-foreground uppercase font-bold">Set</span>
                                    <span className="text-2xl font-bold">{performance.set_name || "-"}</span>
                                </div>
                            </div>

                            <div className="flex items-center justify-between pt-4 border-t">
                                {performance.previous_performance_id ? (
                                    <Link href={`/performances/${performance.previous_performance_id}`}>
                                        <Button variant="outline" size="sm">
                                            &larr; Previous Version
                                        </Button>
                                    </Link>
                                ) : (
                                    <Button variant="outline" size="sm" disabled>
                                        &larr; First Time Played
                                    </Button>
                                )}

                                {performance.next_performance_id ? (
                                    <Link href={`/performances/${performance.next_performance_id}`}>
                                        <Button variant="outline" size="sm">
                                            Next Version &rarr;
                                        </Button>
                                    </Link>
                                ) : (
                                    <Button variant="outline" size="sm" disabled>
                                        Last Time Played &rarr;
                                    </Button>
                                )}
                            </div>

                            {performance.notes && (
                                <div className="mt-4 pt-4 border-t">
                                    <h3 className="font-medium text-sm mb-1">Notes</h3>
                                    <p className="text-sm text-muted-foreground">{performance.notes}</p>
                                </div>
                            )}
                            {performance.segue && (
                                <div className="text-sm font-medium text-primary mt-2">
                                    Segue into next song &gt;
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    <SocialWrapper type="comments">
                        <CommentSection entityType="performance" entityId={performance.id} />
                    </SocialWrapper>

                    <SocialWrapper type="reviews">
                        <EntityReviews entityType="performance" entityId={performance.id} />
                    </SocialWrapper>
                </div>

                <div className="flex flex-col gap-6">
                    {/* Could add "Other performances of this song" or "Other songs from this show" here */}
                </div>
            </div>
        </div>
    )
}