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

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, PlayCircle, History } 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 { EntityRating } from "@/components/social/entity-rating"
import { EntityReviews } from "@/components/reviews/entity-reviews"
import { SocialWrapper } from "@/components/social/social-wrapper"

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

export default async function SongDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params
    const song = await getSong(id)

    if (!song) {
        notFound()
    }

    return (
        <div className="flex flex-col gap-6">
            <div className="flex items-center gap-4">
                <Link href="/archive">
                    <Button variant="ghost" size="icon">
                        <ArrowLeft className="h-4 w-4" />
                    </Button>
                </Link>
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">{song.title}</h1>
                    <p className="text-muted-foreground">{song.original_artist}</p>
                    {song.tags && song.tags.length > 0 && (
                        <div className="flex flex-wrap gap-2 mt-2">
                            {song.tags.map((tag: any) => (
                                <span key={tag.id} className="bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full text-xs font-medium">
                                    #{tag.name}
                                </span>
                            ))}
                        </div>
                    )}
                </div>
                <SocialWrapper type="ratings">
                    <EntityRating entityType="song" entityId={song.id} />
                </SocialWrapper>
            </div>

            <div className="grid gap-6 md:grid-cols-3">
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">Times Played</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold flex items-center gap-2">
                            <PlayCircle className="h-5 w-5 text-primary" />
                            {song.times_played}
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">Gap (Shows)</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold flex items-center gap-2">
                            <History className="h-5 w-5 text-primary" />
                            {song.gap}
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-muted-foreground">Last Played</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">
                            {song.last_played ? new Date(song.last_played).toLocaleDateString() : "Never"}
                        </div>
                    </CardContent>
                </Card>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>Performance History</CardTitle>
                </CardHeader>
                <CardContent>
                    {song.performances && song.performances.length > 0 ? (
                        <div className="space-y-4">
                            {song.performances.map((perf: any) => (
                                <div key={perf.id} className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0">
                                    <div className="space-y-1">
                                        <Link href={`/shows/${perf.show_id}`} className="font-medium hover:underline text-primary">
                                            {new Date(perf.show_date).toLocaleDateString(undefined, {
                                                weekday: 'long',
                                                year: 'numeric',
                                                month: 'long',
                                                day: 'numeric'
                                            })}
                                        </Link>
                                        <div className="text-sm text-muted-foreground flex items-center gap-2">
                                            <span>
                                                {perf.venue_name}, {perf.venue_city} {perf.venue_state}
                                            </span>
                                        </div>
                                        {perf.notes && (
                                            <p className="text-sm italic text-muted-foreground/80">"{perf.notes}"</p>
                                        )}
                                    </div>
                                    <div className="flex flex-col items-end gap-1">
                                        {/* Placeholder for Rating UI */}
                                        <span className="text-xs font-semibold bg-secondary px-2 py-1 rounded-full text-secondary-foreground">
                                            {perf.avg_rating > 0 ? perf.avg_rating.toFixed(1) : "Unrated"}
                                        </span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <p className="text-muted-foreground text-sm">No performances recorded.</p>
                    )}
                </CardContent>
            </Card>

            <div className="grid gap-6 md:grid-cols-2">
                <SocialWrapper type="comments">
                    <CommentSection entityType="song" entityId={song.id} />
                </SocialWrapper>

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