import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, MapPin, Calendar } 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 getVenue(id: string) {
    try {
        const res = await fetch(`${getApiUrl()}/venues/${id}`, { cache: 'no-store' })
        if (!res.ok) return null
        return res.json()
    } catch (e) {
        console.error(e)
        return null
    }
}

async function getVenueShows(id: string) {
    try {
        const res = await fetch(`${getApiUrl()}/shows/?venue_id=${id}`, { cache: 'no-store' })
        if (!res.ok) return []
        return res.json()
    } catch (e) {
        console.error(e)
        return []
    }
}

export default async function VenueDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params
    const venue = await getVenue(id)
    const shows = await getVenueShows(id)

    if (!venue) {
        notFound()
    }

    return (
        <div className="flex flex-col gap-6">
            <div className="flex items-center gap-4 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>
                        <h1 className="text-3xl font-bold tracking-tight">{venue.name}</h1>
                        <p className="text-muted-foreground flex items-center gap-2">
                            <MapPin className="h-4 w-4" />
                            {venue.city}, {venue.state} {venue.country}
                        </p>
                    </div>
                </div>
                <SocialWrapper type="ratings">
                    <EntityRating entityType="venue" entityId={venue.id} />
                </SocialWrapper>
            </div>

            <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
                <div className="flex flex-col gap-6">
                    <Card>
                        <CardHeader>
                            <CardTitle>Shows at {venue.name}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            {shows.length > 0 ? (
                                <div className="space-y-2">
                                    {shows.map((show: any) => (
                                        <Link key={show.id} href={`/shows/${show.id}`} className="block group">
                                            <div className="flex items-center justify-between p-2 rounded-md hover:bg-muted/50 transition-colors">
                                                <div className="flex items-center gap-3">
                                                    <Calendar className="h-4 w-4 text-muted-foreground" />
                                                    <span className="font-medium group-hover:underline">
                                                        {new Date(show.date).toLocaleDateString()}
                                                    </span>
                                                </div>
                                                {show.tour && (
                                                    <span className="text-xs text-muted-foreground">{show.tour.name}</span>
                                                )}
                                            </div>
                                        </Link>
                                    ))}
                                </div>
                            ) : (
                                <p className="text-muted-foreground text-sm">No shows found for this venue.</p>
                            )}
                        </CardContent>
                    </Card>

                    <SocialWrapper type="comments">
                        <CommentSection entityType="venue" entityId={venue.id} />
                    </SocialWrapper>

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

                <div className="flex flex-col gap-6">
                    <Card>
                        <CardHeader>
                            <CardTitle>Venue Details</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-2">
                            {venue.capacity && (
                                <div className="flex justify-between text-sm">
                                    <span className="text-muted-foreground">Capacity</span>
                                    <span className="font-medium">{venue.capacity.toLocaleString()}</span>
                                </div>
                            )}
                            {venue.notes && (
                                <div className="pt-2 border-t mt-2">
                                    <p className="text-sm text-muted-foreground italic">{venue.notes}</p>
                                </div>
                            )}
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    )
}