import { MostPlayedByCard } from "@/components/songs/most-played-by-card"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, PlayCircle, History, Calendar, Trophy, Youtube, Star } from "lucide-react"
import Link from "next/link"
import { notFound } from "next/navigation"
import { Badge } from "@/components/ui/badge"
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"
import { PerformanceList } from "@/components/songs/performance-list"
import { SongEvolutionChart } from "@/components/songs/song-evolution-chart"
import { YouTubeEmbed } from "@/components/ui/youtube-embed"

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

// Fetch cross-band versions of this song via SongCanon
async function getRelatedVersions(songId: number) {
    try {
        const res = await fetch(`${getApiUrl()}/canon/song/${songId}/related`, {
            next: { revalidate: 60 }
        })
        if (!res.ok) return []
        return res.json()
    } catch {
        return []
    }
}

// Get top rated performances for "Heady Version" leaderboard
function getHeadyVersions(performances: any[]) {
    if (!performances || performances.length === 0) return []
    return [...performances]
        .filter(p => p.avg_rating && p.rating_count > 0)
        .sort((a, b) => b.avg_rating - a.avg_rating)
        .slice(0, 5)
}

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

    if (!song) {
        notFound()
    }

    const headyVersions = getHeadyVersions(song.performances || [])
    const topPerformance = headyVersions[0]

    // Fetch cross-band versions
    const relatedVersions = await getRelatedVersions(song.id)

    return (
        <div className="flex flex-col gap-6">
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div className="flex items-center gap-4">
                    <Link href="/archive">
                        <Button variant="ghost" size="icon">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    </Link>
                    <div>
                        <div className="flex items-baseline gap-3">
                            <h1 className="text-3xl font-bold tracking-tight">{song.title}</h1>
                            {song.artist && (
                                <Link href={`/artists/${song.artist.slug}`} className="text-lg text-muted-foreground font-medium hover:text-primary transition-colors">
                                    {song.artist.name}
                                </Link>
                            )}
                        </div>
                        {song.original_artist && (
                            <div className="text-sm text-muted-foreground mt-1">
                                Original Artist: <span className="font-medium text-foreground">{song.original_artist}</span>
                            </div>
                        )}
                        {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>
                </div>
                <SocialWrapper type="ratings">
                    <EntityRating entityType="song" entityId={song.id} />
                </SocialWrapper>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
                {/* Left Sidebar: Stats & Charts */}
                <div className="md:col-span-4 space-y-6">
                    {/* Basic Stats Grid - Compact */}
                    <div className="grid grid-cols-2 gap-4">
                        <Card>
                            <CardHeader className="pb-2 p-4">
                                <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Times Played</CardTitle>
                            </CardHeader>
                            <CardContent className="p-4 pt-0">
                                <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 p-4">
                                <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Gap</CardTitle>
                            </CardHeader>
                            <CardContent className="p-4 pt-0">
                                <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 className="col-span-2">
                            <CardHeader className="pb-2 p-4">
                                <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Last Played</CardTitle>
                            </CardHeader>
                            <CardContent className="p-4 pt-0">
                                <div className="text-xl font-bold flex items-center gap-2">
                                    <Calendar className="h-5 w-5 text-primary" />
                                    {song.last_played ? new Date(song.last_played).toLocaleDateString(undefined, {
                                        weekday: 'long',
                                        year: 'numeric',
                                        month: 'long',
                                        day: 'numeric'
                                    }) : "Never"}
                                </div>
                            </CardContent>
                        </Card>
                    </div>

                    {/* Most Played By */}
                    {song.artist_distribution && (
                        <MostPlayedByCard distribution={song.artist_distribution} />
                    )}

                    {/* Set Breakdown */}
                    {song.set_breakdown && Object.keys(song.set_breakdown).length > 0 && (
                        <Card>
                            <CardHeader className="pb-2">
                                <CardTitle className="text-sm font-medium text-muted-foreground">Set Distribution</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <div className="flex flex-col gap-2">
                                    {Object.entries(song.set_breakdown).sort((a, b) => (b[1] as number) - (a[1] as number)).map(([set, count]) => (
                                        <div key={set} className="flex items-center justify-between text-sm">
                                            <span className="text-muted-foreground">{set}</span>
                                            <span className="font-bold">{count as number}</span>
                                        </div>
                                    ))}
                                </div>
                            </CardContent>
                        </Card>
                    )}
                </div>

                {/* Right Content: Performance History */}
                <div className="md:col-span-8 space-y-6">
                    <PerformanceList performances={song.performances} songTitle={song.title} />

                    {/* Song Evolution (moved to bottom) */}
                    <SongEvolutionChart performances={song.performances} />

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

            {/* Heady Version Section */}
            {headyVersions.length > 0 && (
                <Card className="border-2 border-yellow-500/20 bg-gradient-to-br from-yellow-50/50 to-orange-50/50 dark:from-yellow-900/10 dark:to-orange-900/10">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2 text-yellow-700 dark:text-yellow-400">
                            <Trophy className="h-6 w-6" />
                            Heady Version Leaderboard
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        {/* Top Performance with YouTube */}
                        {topPerformance && (
                            <div className="grid md:grid-cols-2 gap-4">
                                {topPerformance.youtube_link ? (
                                    <YouTubeEmbed url={topPerformance.youtube_link} />
                                ) : song.youtube_link ? (
                                    <YouTubeEmbed url={song.youtube_link} />
                                ) : (
                                    <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
                                        <div className="text-center text-muted-foreground">
                                            <Youtube className="h-12 w-12 mx-auto mb-2 opacity-30" />
                                            <p className="text-sm">No video available</p>
                                        </div>
                                    </div>
                                )}
                                <div className="space-y-2">
                                    <div className="flex items-center gap-2">
                                        <Badge className="bg-yellow-500 text-yellow-900">🏆 #1 Heady</Badge>
                                    </div>
                                    <p className="font-bold text-lg">
                                        {topPerformance.show?.date ? new Date(topPerformance.show.date).toLocaleDateString() : "Unknown Date"}
                                    </p>
                                    <p className="text-muted-foreground">
                                        {topPerformance.show?.venue?.name || "Unknown Venue"}
                                    </p>
                                    <div className="flex items-center gap-1 text-yellow-600">
                                        <Star className="h-5 w-5 fill-current" />
                                        <span className="font-bold text-xl">{topPerformance.avg_rating?.toFixed(1)}</span>
                                        <span className="text-sm text-muted-foreground">({topPerformance.rating_count} ratings)</span>
                                    </div>
                                </div>
                            </div>
                        )}

                        {/* Leaderboard List */}
                        <div className="space-y-2">
                            {headyVersions.map((perf, index) => (
                                <div
                                    key={perf.id}
                                    className={`flex items-center justify-between p-3 rounded-lg ${index === 0 ? 'bg-yellow-100/50 dark:bg-yellow-900/20' : 'bg-background/50'
                                        }`}
                                >
                                    <div className="flex items-center gap-3">
                                        <span className="w-6 text-center font-bold">
                                            {index === 0 ? "🥇" : index === 1 ? "🥈" : index === 2 ? "🥉" : `${index + 1}.`}
                                        </span>
                                        <div>
                                            <p className="font-medium">
                                                {perf.show?.date ? new Date(perf.show.date).toLocaleDateString() : "Unknown"}
                                            </p>
                                            <p className="text-sm text-muted-foreground">
                                                {perf.show?.venue?.name || "Unknown Venue"}
                                            </p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        {perf.youtube_link && (
                                            <a href={perf.youtube_link} target="_blank" rel="noopener noreferrer">
                                                <Youtube className="h-4 w-4 text-red-500" />
                                            </a>
                                        )}
                                        <div className="text-right">
                                            <span className="font-bold">{perf.avg_rating?.toFixed(1)}★</span>
                                            <span className="text-xs text-muted-foreground ml-1">({perf.rating_count})</span>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </CardContent>
                </Card>
            )}

            {/* Cross-Band Versions */}
            {relatedVersions && relatedVersions.length > 0 && (
                <Card className="border-2 border-indigo-500/20 bg-gradient-to-br from-indigo-50/50 to-purple-50/50 dark:from-indigo-900/10 dark:to-purple-900/10">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2 text-indigo-700 dark:text-indigo-400">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <circle cx="12" cy="12" r="10" />
                                <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
                                <path d="M2 12h20" />
                            </svg>
                            Also Played By
                        </CardTitle>
                        <p className="text-sm text-muted-foreground">
                            This song is performed by {relatedVersions.length + 1} different bands
                        </p>
                    </CardHeader>
                    <CardContent>
                        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
                            {relatedVersions.map((version: any) => (
                                <Link
                                    key={version.id}
                                    href={`/${version.vertical_slug}/songs/${version.slug}`}
                                    className="block group"
                                >
                                    <div className="flex items-center justify-between p-3 rounded-lg bg-background/50 hover:bg-background/80 transition-colors border border-transparent hover:border-indigo-200 dark:hover:border-indigo-800">
                                        <div>
                                            <p className="font-medium group-hover:text-primary transition-colors">
                                                {version.vertical_name}
                                            </p>
                                            <p className="text-sm text-muted-foreground">
                                                {version.title}
                                            </p>
                                        </div>
                                        <Badge variant="secondary">
                                            View →
                                        </Badge>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    </CardContent>
                </Card>
            )}


        </div>
    )
}