import { VERTICALS } from "@/config/verticals"
import { notFound } from "next/navigation"
import { getApiUrl } from "@/lib/api-config"
import { Show, PaginatedResponse } from "@/types/models"
import { Card } from "@/components/ui/card"
import { Calendar, MapPin } from "lucide-react"

interface Props {
    params: Promise<{ vertical: string }>
}

export function generateStaticParams() {
    return VERTICALS.map((v) => ({
        vertical: v.slug,
    }))
}

async function getShows(verticalSlug: string): Promise<PaginatedResponse<Show> | null> {
    try {
        const res = await fetch(`${getApiUrl()}/shows/?vertical=${verticalSlug}`, {
            next: { revalidate: 60 }
        })
        if (!res.ok) return null
        return res.json()
    } catch {
        return null
    }
}

export default async function ShowsPage({ params }: Props) {
    const { vertical: verticalSlug } = await params
    const vertical = VERTICALS.find((v) => v.slug === verticalSlug)

    if (!vertical) {
        notFound()
    }

    const data = await getShows(vertical.slug)
    const shows = data?.data || []

    return (
        <div className="space-y-6">
            <div className="flex items-center justify-between">
                <h1 className="text-3xl font-bold">{vertical.name} Shows</h1>
            </div>

            {shows.length === 0 ? (
                <div className="text-center py-12 text-muted-foreground">
                    <p>No shows imported yet for {vertical.name}.</p>
                    <p className="text-sm mt-2">Run the data importer to populate shows.</p>
                </div>
            ) : (
                <div className="grid gap-4">
                    {shows.map((show) => (
                        <a
                            key={show.id}
                            href={`/${vertical.slug}/shows/${show.slug}`}
                            className="block group"
                        >
                            <Card className="p-4 hover:bg-accent transition-colors">
                                <div className="flex justify-between items-start">
                                    <div>
                                        <div className="font-semibold flex items-center gap-2">
                                            {show.venue?.name || "Unknown Venue"}
                                        </div>
                                        <div className="text-sm text-muted-foreground flex items-center gap-1 mt-1">
                                            <MapPin className="h-3 w-3" />
                                            {show.venue?.city}, {show.venue?.state || show.venue?.country}
                                        </div>
                                    </div>
                                    <div className="text-right">
                                        <div className="font-mono text-sm font-bold flex items-center gap-1 justify-end">
                                            <Calendar className="h-3 w-3" />
                                            {new Date(show.date).toLocaleDateString()}
                                        </div>
                                        {show.performances && show.performances.length > 0 && (
                                            <div className="text-xs text-muted-foreground mt-1">
                                                {show.performances.length} songs
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </Card>
                        </a>
                    ))}
                </div>
            )}
        </div>
    )
}