"use client"

import { useEffect, useState } from "react"
import { getApiUrl } from "@/lib/api-config"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import Link from "next/link"
import { Star, MapPin, Music, User, Trophy, Calendar, Sparkles } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { motion, AnimatePresence } from "framer-motion"

interface TopShow {
    show: { id: number; date: string; venue_id: number; slug: string }
    venue: { id: number; name: string; city: string; state: string }
    avg_score: number
    review_count: number
}

interface TopVenue {
    venue: { id: number; name: string; city: string; state: string; slug: string }
    avg_score: number
    review_count: number
}

interface TopPerformance {
    performance: { id: number; show_id: number; song_id: number; notes: string | null; slug: string }
    song: { id: number; title: string; original_artist: string | null; slug: string }
    show: { id: number; date: string; slug: string }
    venue: { id: number; name: string; city: string; state: string; slug: string }
    avg_score: number
    rating_count: number
}

interface TopUser {
    profile: { id: number; user_id: number }
    review_count: number
}

export default function LeaderboardsPage() {
    const [topShows, setTopShows] = useState<TopShow[]>([])
    const [topVenues, setTopVenues] = useState<TopVenue[]>([])
    const [topPerformances, setTopPerformances] = useState<TopPerformance[]>([])
    const [topUsers, setTopUsers] = useState<TopUser[]>([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            try {
                const [showsRes, venuesRes, perfsRes, usersRes] = await Promise.all([
                    fetch(`${getApiUrl()}/leaderboards/shows/top`),
                    fetch(`${getApiUrl()}/leaderboards/venues/top`),
                    fetch(`${getApiUrl()}/leaderboards/performances/top`),
                    fetch(`${getApiUrl()}/leaderboards/users/active`)
                ])

                setTopShows(await showsRes.json())
                setTopVenues(await venuesRes.json())
                setTopPerformances(await perfsRes.json())
                setTopUsers(await usersRes.json())
            } catch (error) {
                console.error("Failed to fetch leaderboards:", error)
            } finally {
                setLoading(false)
            }
        }

        fetchData()
    }, [])

    const RankIcon = ({ rank }: { rank: number }) => {
        if (rank === 1) return <Trophy className="h-5 w-5 text-yellow-500" />
        if (rank === 2) return <Trophy className="h-4 w-4 text-gray-400" />
        if (rank === 3) return <Trophy className="h-4 w-4 text-orange-400" />
        return <span className="text-muted-foreground font-mono w-5 text-center">{rank}</span>
    }

    if (loading) {
        return (
            <div className="container py-10 flex items-center justify-center min-h-[50vh]">
                <div className="flex flex-col items-center gap-4">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                    <p className="text-muted-foreground animate-pulse">Computing Heady Stats...</p>
                </div>
            </div>
        )
    }

    return (
        <div className="container py-10 space-y-8 max-w-5xl">
            <motion.div
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="flex flex-col gap-2"
            >
                <h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
                    Leaderboards
                </h1>
                <p className="text-xl text-muted-foreground">
                    Discover the highest rated shows, legendary jams, and top contributors.
                </p>
            </motion.div>

            <Tabs defaultValue="jams" className="w-full">
                <TabsList className="grid w-full grid-cols-4 mb-8 h-12">
                    <TabsTrigger value="jams" className="text-base font-medium">Heady Jams</TabsTrigger>
                    <TabsTrigger value="shows" className="text-base font-medium">Top Shows</TabsTrigger>
                    <TabsTrigger value="venues" className="text-base font-medium">Venues</TabsTrigger>
                    <TabsTrigger value="users" className="text-base font-medium">Contributors</TabsTrigger>
                </TabsList>

                {/* HEADY JAMS CONTENT */}
                <TabsContent value="jams">
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                    >
                        <Card className="border-none shadow-none bg-transparent">
                            <div className="grid gap-4">
                                {topPerformances.map((item, i) => (
                                    <motion.div
                                        key={item.performance.id}
                                        initial={{ opacity: 0, y: 10 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: i * 0.05 }}
                                        className="group relative flex items-center gap-4 rounded-xl border bg-card p-4 shadow-sm transition-all hover:shadow-md hover:border-primary/50"
                                    >
                                        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-secondary/50 font-bold text-xl">
                                            <RankIcon rank={i + 1} />
                                        </div>
                                        <div className="flex flex-1 flex-col justify-center gap-1">
                                            <div className="flex items-center gap-2">
                                                <Link href={`/songs/${item.song.slug}`} className="font-semibold text-lg hover:underline decoration-primary decoration-2 underline-offset-2">
                                                    {item.song.title}
                                                </Link>
                                                {item.performance.notes && (
                                                    <Badge variant="outline" className="text-[10px] font-normal hidden sm:inline-flex">
                                                        {item.performance.notes}
                                                    </Badge>
                                                )}
                                            </div>
                                            <div className="flex items-center text-sm text-muted-foreground gap-2">
                                                <Calendar className="h-3 w-3" />
                                                <Link href={`/shows/${item.show.slug}`} className="hover:text-primary transition-colors">
                                                    {new Date(item.show.date).toLocaleDateString(undefined, {
                                                        weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
                                                    })}
                                                </Link>
                                                <span className="text-muted-foreground/50">•</span>
                                                <span className="truncate max-w-[200px]">{item.venue.name}</span>
                                            </div>
                                        </div>
                                        <div className="flex flex-col items-end justify-center min-w-[80px]">
                                            <div className="flex items-center gap-1.5">
                                                <Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
                                                <span className="text-xl font-bold">{item.avg_score.toFixed(2)}</span>
                                            </div>
                                            <span className="text-xs text-muted-foreground">{item.rating_count} votes</span>
                                        </div>
                                    </motion.div>
                                ))}
                                {topPerformances.length === 0 && (
                                    <div className="text-center py-12 text-muted-foreground">
                                        No ranked jams yet. Start rating performances!
                                    </div>
                                )}
                            </div>
                        </Card>
                    </motion.div>
                </TabsContent>

                {/* TOP SHOWS CONTENT */}
                <TabsContent value="shows">
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                        className="grid gap-4"
                    >
                        {topShows.map((item, i) => (
                            <motion.div
                                key={item.show.id}
                                initial={{ opacity: 0, y: 10 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: i * 0.05 }}
                                className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
                            >
                                <div className="flex items-center gap-4">
                                    <div className="font-mono text-muted-foreground w-6 text-center">{i + 1}</div>
                                    <div>
                                        <Link href={`/shows/${item.show.slug}`} className="font-medium text-lg hover:underline block">
                                            {new Date(item.show.date).toLocaleDateString(undefined, {
                                                year: 'numeric', month: 'long', day: 'numeric'
                                            })}
                                        </Link>
                                        <p className="text-sm text-muted-foreground">
                                            {item.venue.name} • {item.venue.city}, {item.venue.state}
                                        </p>
                                    </div>
                                </div>
                                <div className="text-right">
                                    <div className="font-bold text-lg flex items-center justify-end gap-1">
                                        <Star className="h-4 w-4 fill-primary/20 text-primary" />
                                        {item.avg_score.toFixed(2)}
                                    </div>
                                    <div className="text-xs text-muted-foreground">{item.review_count} ratings</div>
                                </div>
                            </motion.div>
                        ))}
                    </motion.div>
                </TabsContent>

                {/* VENUES CONTENT */}
                <TabsContent value="venues">
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                        className="grid gap-4 md:grid-cols-2"
                    >
                        {topVenues.map((item, i) => (
                            <motion.div
                                key={item.venue.id}
                                initial={{ opacity: 0, scale: 0.95 }}
                                animate={{ opacity: 1, scale: 1 }}
                                transition={{ delay: i * 0.05 }}
                                className="flex items-center justify-between p-4 rounded-lg border bg-card/50"
                            >
                                <div className="flex items-center gap-3 overflow-hidden">
                                    <div className={`
                                        flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold shrink-0
                                        ${i < 3 ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}
                                     `}>
                                        {i + 1}
                                    </div>
                                    <div>
                                        <Link href={`/venues/${item.venue.slug}`} className="font-medium hover:underline truncate block">
                                            {item.venue.name}
                                        </Link>
                                        <p className="text-xs text-muted-foreground truncate">
                                            {item.venue.city}, {item.venue.state}
                                        </p>
                                    </div>
                                </div>
                                <Badge variant="secondary" className="gap-1 ml-2 shrink-0">
                                    <Star className="h-3 w-3 fill-current" />
                                    {item.avg_score.toFixed(2)}
                                </Badge>
                            </motion.div>
                        ))}
                    </motion.div>
                </TabsContent>

                {/* USERS CONTENT */}
                <TabsContent value="users">
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                        className="grid gap-4 md:grid-cols-3"
                    >
                        {topUsers.map((item, i) => (
                            <motion.div
                                key={item.profile.id}
                                initial={{ opacity: 0, y: 10 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: i * 0.05 }}
                            >
                                <Card className="flex flex-col items-center justify-center p-6 text-center hover:border-primary/50 transition-colors h-full">
                                    <Avatar className="h-16 w-16 mb-4">
                                        <AvatarImage src={`https://api.dicebear.com/7.x/notionists/svg?seed=${item.profile.user_id}`} />
                                        <AvatarFallback>U</AvatarFallback>
                                    </Avatar>
                                    <div className="font-semibold text-lg">User {item.profile.user_id}</div>
                                    <p className="text-sm text-muted-foreground mb-3">Top Contributor</p>
                                    <Badge variant="outline" className="bg-primary/5">
                                        {item.review_count} Reviews
                                    </Badge>
                                </Card>
                            </motion.div>
                        ))}
                        {topUsers.length === 0 && <p className="col-span-3 text-center text-muted-foreground py-10">No active users yet.</p>}
                    </motion.div>
                </TabsContent>
            </Tabs>
        </div>
    )
}