import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Calendar, MapPin, Hash } 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"

interface ShowWithVenue {
    id: number
    slug: string
    date: string
    venue?: {
        name: string
        city?: string
        state?: string
    }
}

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)

    // Calculate stats
    const uniqueStates = [...new Set(shows.filter((s: ShowWithVenue) => s.venue?.state).map((s: ShowWithVenue) => s.venue!.state))]
    const uniqueCities = [...new Set(shows.filter((s: ShowWithVenue) => s.venue?.city).map((s: ShowWithVenue) => s.venue!.city))]

    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="/tours">
                        <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("en-US", { month: "long", day: "numeric", year: "numeric" }) : "Unknown"}
                            {tour.end_date && ` - ${new Date(tour.end_date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}`}
                        </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: ShowWithVenue, b: ShowWithVenue) => new Date(a.date).getTime() - new Date(b.date).getTime())
                                        .map((show: ShowWithVenue) => (
                                            <Link key={show.id} href={`/shows/${show.slug}`} className="block group">
                                                <div className="flex items-center justify-between p-3 rounded-md hover:bg-muted/50 transition-colors border-b last:border-b-0">
                                                    <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("en-US", { weekday: "short", month: "short", day: "numeric" })}
                                                        </span>
                                                    </div>
                                                    {show.venue && (
                                                        <span className="text-sm text-muted-foreground">
                                                            {show.venue.name}, {show.venue.city}{show.venue.state ? `, ${show.venue.state}` : ""}
                                                        </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">
                    {/* Tour Stats */}
                    <Card>
                        <CardHeader className="pb-2">
                            <CardTitle className="text-base">Tour Stats</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                            <div className="flex items-center justify-between">
                                <span className="text-sm text-muted-foreground flex items-center gap-2">
                                    <Hash className="h-4 w-4" /> Shows
                                </span>
                                <Badge variant="secondary">{shows.length}</Badge>
                            </div>
                            <div className="flex items-center justify-between">
                                <span className="text-sm text-muted-foreground flex items-center gap-2">
                                    <MapPin className="h-4 w-4" /> Cities
                                </span>
                                <Badge variant="outline">{uniqueCities.length}</Badge>
                            </div>
                            <div className="flex items-center justify-between">
                                <span className="text-sm text-muted-foreground flex items-center gap-2">
                                    <MapPin className="h-4 w-4" /> States
                                </span>
                                <Badge variant="outline">{uniqueStates.length}</Badge>
                            </div>
                        </CardContent>
                    </Card>

                    {/* Tour Notes */}
                    {tour.notes && (
                        <Card>
                            <CardHeader className="pb-2">
                                <CardTitle className="text-base">Notes</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <p className="text-sm text-muted-foreground italic">{tour.notes}</p>
                            </CardContent>
                        </Card>
                    )}
                </div>
            </div>
        </div>
    )
}