fediversion/frontend/app/shows/page.tsx

"use client"

import { useEffect, useState, Suspense, useMemo } from "react"
import { getApiUrl } from "@/lib/api-config"
import { Loader2, Calendar } from "lucide-react"
import { Skeleton } from "@/components/ui/skeleton"
import { useSearchParams, useRouter, usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { BandFilter } from "@/components/shows/band-filter"
import { FeedFilter } from "@/components/shows/feed-filter"
import { DateGroupedList } from "@/components/shows/date-grouped-list"

interface Show {
    id: number
    slug?: string
    date: string
    youtube_link?: string
    vertical?: {
        name: string
        slug: string
    }
    venue: {
        id: number
        name: string
        city: string
        state: string
    }
}

function ShowsContent() {
    const searchParams = useSearchParams()
    const router = useRouter()
    const pathname = usePathname()

    // Parse query params
    const year = searchParams.get("year")
    const bandsParam = searchParams.get("bands")
    const tiersParam = searchParams.get("tiers")

    const initialBands = bandsParam ? bandsParam.split(",") : []
    const initialTiers = tiersParam ? tiersParam.split(",") : []

    const [shows, setShows] = useState<Show[]>([])
    const [loading, setLoading] = useState(true)
    const [selectedBands, setSelectedBands] = useState<string[]>(initialBands)
    const [selectedTiers, setSelectedTiers] = useState<string[]>(initialTiers)

    // Update URL when filters change
    const updateBandFilters = (bands: string[]) => {
        setSelectedBands(bands)
        updateUrl(bands, selectedTiers)
    }

    const updateTierFilters = (tiers: string[]) => {
        setSelectedTiers(tiers)
        updateUrl(selectedBands, tiers)
    }

    const updateUrl = (bands: string[], tiers: string[]) => {
        const params = new URLSearchParams(searchParams.toString())

        if (bands.length > 0) {
            params.set("bands", bands.join(","))
        } else {
            params.delete("bands")
        }

        if (tiers.length > 0) {
            params.set("tiers", tiers.join(","))
        } else {
            params.delete("tiers")
        }

        router.push(`${pathname}?${params.toString()}`)
    }

    useEffect(() => {
        setLoading(true)
        const params = new URLSearchParams()
        params.append("limit", "200") // Lower limit for initial partial view, or keep 2000 if needed but likely smaller is better if filtered
        params.append("status", "past")

        if (year) params.append("year", year)

        if (selectedBands.length > 0) {
            selectedBands.forEach(slug => params.append("vertical_slugs", slug))
        }

        if (selectedTiers.length > 0) {
            selectedTiers.forEach(tier => params.append("tiers", tier))
        }

        const url = `${getApiUrl()}/shows/?${params.toString()}`

        fetch(url)
            .then(res => res.json())
            .then(data => {
                // Backend might not sort perfectly if multiple bands (it sorts by offset usually, or default order). 
                // Currently backend read_shows does NO sorting (unless I missed it).
                // read_shows only does offset/limit. 
                // So I should sort client side or add sort to backend.
                // Assuming backend returns unsorted or DB order.
                const sorted = data.sort((a: Show, b: Show) =>
                    new Date(b.date).getTime() - new Date(a.date).getTime()
                )
                setShows(sorted)
            })
            .catch(console.error)
            .finally(() => setLoading(false))
    }, [year, selectedBands, selectedTiers])

    if (loading) {
        return (
            <div className="container py-10 space-y-8">
                <div className="flex flex-col gap-2">
                    <Skeleton className="h-10 w-48" />
                    <Skeleton className="h-5 w-96" />
                </div>

                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {Array.from({ length: 12 }).map((_, i) => (
                        <Skeleton key={i} className="h-32 w-full rounded-lg" />
                    ))}
                </div>
            </div>
        )
    }

    return (
        <div className="container py-10 space-y-8 animate-in fade-in duration-700">
            <div className="flex flex-col gap-4">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight">Shows</h1>
                        <p className="text-muted-foreground">
                            Browse the complete archive of performances.
                        </p>
                    </div>
                    <div className="flex items-center gap-2">
                        <FeedFilter
                            selectedTiers={selectedTiers}
                            onChange={updateTierFilters}
                        />
                        <BandFilter
                            selected={selectedBands}
                            onChange={updateBandFilters}
                        />
                        <Link href="/shows/upcoming">
                            <Button variant="outline" className="gap-2">
                                <Calendar className="h-4 w-4" />
                                Upcoming
                            </Button>
                        </Link>
                    </div>
                </div>
            </div>

            <DateGroupedList shows={shows} />
        </div>
    )
}

function LoadingFallback() {
    return (
        <div className="container py-10 flex items-center justify-center min-h-[400px]">
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
        </div>
    )
}

export default function ShowsPage() {
    return (
        <Suspense fallback={<LoadingFallback />}>
            <ShowsContent />
        </Suspense>
    )
}