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 } 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"

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">
            <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">
                        {performance.song.title}
                        {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:underline flex items-center gap-1">
                            <Calendar className="h-4 w-4" />
                            {new Date(performance.show.date).toLocaleDateString()}
                        </Link>
                        {performance.show.venue && (
                            <div className="flex items-center gap-1">
                                <MapPin className="h-4 w-4" />
                                {performance.show.venue.name}
                            </div>
                        )}
                    </div>
                </div>
            </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>
    )
}