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

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

export default async function TourDetailPage({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params
    const tour = await getTour(slug)

    if (!tour) {
        notFound()
    }

    const shows = await getTourShows(tour.id)

    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">{tour.name}</h1>
                        <p className="text-muted-foreground flex items-center gap-2">
                            <Calendar className="h-4 w-4" />
                            {tour.start_date ? new Date(tour.start_date).toLocaleDateString() : "Unknown"}
                            {tour.end_date && ` - ${new Date(tour.end_date).toLocaleDateString()}`}
                        </p>
                    </div>
                </div>
                <SocialWrapper type="ratings">
                    <EntityRating entityType="tour" entityId={tour.id} />
                </SocialWrapper>
            </div>

            <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
                <div className="flex flex-col gap-6">
                    <Card>
                        <CardHeader>
                            <CardTitle>Shows on {tour.name}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            {shows.length > 0 ? (
                                <div className="space-y-2">
                                    {[...shows]
                                        .sort((a: any, b: any) => new Date(a.date).getTime() - new Date(b.date).getTime())
                                        .map((show: any) => (
                                            <Link key={show.id} href={`/shows/${show.slug}`} 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.venue && (
                                                        <span className="text-xs text-muted-foreground">
                                                            {show.venue.name}, {show.venue.city}
                                                        </span>
                                                    )}
                                                </div>
                                            </Link>
                                        ))}
                                </div>
                            ) : (
                                <p className="text-muted-foreground text-sm">No shows found for this tour.</p>
                            )}
                        </CardContent>
                    </Card>

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

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

                <div className="flex flex-col gap-6">
                    <Card>
                        <CardHeader>
                            <CardTitle>Tour Details</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-2">
                            {tour.notes && (
                                <p className="text-sm text-muted-foreground italic">{tour.notes}</p>
                            )}
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    )
}